Create FixedNavigation and Back to Top With jQuery

Hallo sobat blogger, Sudah lama yaa sy gk update tutorial blogger? :D
oke pada kesemptan kli ini saya akan berbagi tutorial lgi nih, yaitu cara membuat 'FixedNavigation and Back to Top With jQuery', sebenar'nya sy juga gk tau persis judul apa yg tepat untuk trik ini, tp setidaknya gk jauh beda lah ama hasilnya.hehee....

Sebelum saya melanjutkan tutorial ini, sy akan mencoba jelaskan sedikit mengenai cara kerja tutorial ini, jadi selain dilengkapi dengan fitur 'back to top' fixednavigation ini jg memiliki menunavigation tambhan, dimana pada saat anda melakukan scroll di blog, mka fitur ini akan muncul dan menampilkan menunavigation + Back To Top!
dan untuk contohnya sobat bisa lihat di themes 'JKT48 REV' disini, dan perhatikan menu dibagian atas yang akan kluar jika anda mencoba scroll..

Baiklah jika sobat tertarik membuatnya silahkan ikuti langkah-langkah berikut:

Login blogger.
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Letakkan kode berikut diatasnya :

/* FixedMenuNavigation */
#go_headerFixedNavigation{width:100%;background:#222F63;text-shadow:0 0 1px #fff;position:fixed;display:none;top:0px;z-index:99999;height:31px;overflow:hidden;font-family:'arial',Helvetica,Arial;}
#go_headerFixedNavigation ul#go_mainNav {margin:0;list-style:none;padding:0;float:left}
#go_headerFixedNavigation ul#go_mainNav li{margin:0;padding:0;float:left}
#go_headerFixedNavigation ul#go_mainNav li a{display:block;padding:4px 8px;text-decoration:none;}
#go_headerFixedNavigation ul#go_mainNav li a:hover{background:#f8f8f8}
#go_headerFixedNavigation nav#go_leftNav{}
#go_headerFixedNavigation nav#go_rightNav{float:right}
#go_headerFixedNavigation nav#go_rightNav a{display:block;background:#cf0404;height:19px;padding:7px 22px 5px 23px}
#go_headerFixedNavigation nav#go_rightNav a:hover{background:#f7f7f7;color:#888;}
#go_headerFixedNavigation ul#go_mainNav li a{font-family:'Oswald',Helvetica,Arial;font-size:140%;color:#ddd;text-transform:uppercase}
#go_headerFixedNavigation ul#go_mainNav li a:hover{color:#888;}
#go_headerFixedNavigation nav#go_rightNav a{font-size:120%;text-transform:uppercase;color:#fff}
#go_headerFixedNavigation nav#go_rightNav a:hover{text-decoration:underline}

4. Selanjutnya cari kode </head> , lalu letakkan script berikut tepat diatasnya :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

<script language='JavaScript' type='text/javascript'>
$(document).ready(function () {
var top = $('#go_bottomLine').position().top;
$(window).scroll(function (event) {
   var y = $(this).scrollTop();
   if (y >= top) {
       if(!$('#go_headerFixedNavigation').hasClass('open')) {
           $('#go_headerFixedNavigation').addClass('open');
           $('#go_headerFixedNavigation').slideDown('fast');
       }
   } else {
       if($('#go_headerFixedNavigation').hasClass('open') ){
           $('#go_headerFixedNavigation').removeClass('open');
           $('#go_headerFixedNavigation').slideUp('fast');
}}
});
$('.go_backTopButton').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
</script>

5. Selanjutnya cari kode <body> , lalu letakkan kode berikut dibawahnya :

<div id='go_headerFixedNavigation'>
<nav id='go_leftNav'>
<ul id='go_mainNav'>
<li><a expr:href='data:blog.homepageUrl'>Portal</a></li>
<li><a href='#LINK-HERE'>Forum</a></li>
<li><a href='#LINK-HERE'>Blog</a></li>
<li><a href='#LINK-HERE'>Archive</a></li>
<li><a href='#LINK-HERE'>Store</a></li>
<li><a href='#LINK-HERE'>Files</a></li>
<li><a href='#LINK-HERE'>Search</a></li>
<li><a href='#LINK-HERE'>Members</a></li>
</ul></nav>
<nav id='go_rightNav'>
<a class='go_backTopButton' href='#' title='Top'>Back to Top</a>
</nav>
</div>