1
2
3
4
5

Tutorial : Navigation Bar + Header { like me }




{ request tuto } from her

navigate bar ni dia sekali dengan header. so sebelum paste code ni , sila lah delete code header yang lama tu. ok here we go .

1. copy this code and paste before </style>

/* HEADER */
#xoxo {
text-align:center;
width:800px;
margin:auto;
margin-top:-7px;
z-index:999;
background-color:transparent
}
.hug {
top:0px;
height:300;
width:800px;
text-align:center;
}
.kiss {
font-family: 'Cutive Mono', serif;
width:800px;
height:27px;
padding-top:7px;
text-align:center;
margin:auto;
text-transform:uppercase;
background: #ccc;
font-size:9px;
-moz-transition-duration:0.6s;
-webkit-transition-duration:0.6s;
-o-transition-duration:0.6s;
z-index:999999;
}

.kiss a{
color:transparent;
background-image: url('http://static.tumblr.com/zhqetsd/quKmaz44l/background.jpg');
display:inline-block;
width:50px;
height:10px;
padding:4px;
text-align:center;
margin-left:9px;
font-size:9px;
letter-spacing:2px;
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
-ms-transition-duration:1s;
-o-transition-duration:1s;
transition-duration:1s;
}
.kiss a:hover {
opacity: 0.11;
-webkit-transition-duration:0.8s;
-moz-transition-duration:0.8s;
-ms-transition-duration:0.8s;
-o-transition-duration:0.8s;
transition-duration:0.8s;
}

2. for the html , copy this code and paste it after </head>

<div id="xoxo">
<div class="hug">
<img src="http://i.imgur.com/gFWxs88.png" width="800"></div>
<div class="kiss">
<center>
<a  href="/" title="home">LINK</a>
<a  href="http://blogger.com/home" title="dashboard">LINK</a>
</div></div>
</div></center> 

3. last sekali, copy code ni and paste selepas </html>

<script type="text/javascript">
$(function(){ // document ready
  if (!!$('.kiss').offset()) { // make sure ".sticky" element exists
    var stickyTop = $('.kiss').offset().top; // returns number
    $(window).scroll(function(){ // scroll event
      var windowTop = $(window).scrollTop(); // returns number
      if (stickyTop < windowTop){
        $('.kiss').css({ position: 'fixed', top: 0 });
      }
      else {
        $('.kiss').css('position','static');
      }
    });
  }
});
</script>

{ dont retuto } { credit are not necessary } { comments are loved }
 these code are not originally from me. but den penat-2 mengedit semua.



Wednesday, June 5, 2013 • 9:11 PM


credit