|
|
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:
- Seperti biasa terlebih dahulu :
- 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>
6. Selanjutnya cari kode <div id='header-wrapper'> , lalu letakkan kode berikut ini diatas/dibawah nya :
<div id='go_bottomLine'/>
7. Langkah terakhir Priview dlu, jika tidak terjadi kesalahan, baru deh sobat save template.
Silahkan anda laporkan jika ada link yang rusak atau beberapa tutorial yang tidak bekerja, karena saya akan segera memperbaikinya, dan berhubung saya baru mengganti themes blog, jadi pasti banyak artikel yang berantakan!
Saya harap anda dapat membantu saya untuk memperbaiki semuanya dengan berkomentar di artikel yang bermasalah..
thanks sebelumnya sudah berkunjung keblog utta yang sederhana ini...
Please rate this article:
{[['
', '
']]}
', '']]}{["Useless", "Boring", "Need more details", "Perfect"]}
Jika Artikel ini menarik, Silahkan copy paste permalink berikut ini di blog sobat!
disini jquerynnya lengkap bgt top markotop dehhh :D
BalasHapus