![[Image: back_to_the_top.jpg]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuxZtlZlMmWeRlbWy1TMPa8HJyBohGNz2hNgR1KBO9YTPCOemJcpQ5tLfo1rcjamy58XTKuJeJH2zm0L_N7X0Bwa8x5_eBWj1GnsLdQbM6tDPvrBNmbrwKJ00YOPFFf-HYkykO_wen57M/s1600/back_to_the_top.jpg)
Fungsi dari Back To Top yaitu mengantarkan kembali pengujung anda ke halaman paling atas. Penggunaan JQuery dengan fungsi ini dapat memberikan hasil scroll yang lebih baik, dalam hal ini scroll menjadi lebih smooth atau halus. Jika anda udah gak sabaran pengen membuatnya langsung aja dipraktekin...
1. Login ke blogger.
2. Pilih Rancangan -- Edit HTML
3. Masukan script jquery berikut ini diatas </head>
spoiler for Script:
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/> <script src='http://blogtrikdantips-blogspot.googlecode.com/files/sed_back_to_top.js' type='text/javascript'/> <script src='http://vianjb.googlecode.com/files/to%20top.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { /* var defaults = { containerID: 'moccaUItoTop', // fading element id containerHoverClass: 'moccaUIhover', // fading element hover class scrollSpeed: 1200, easingType: 'linear' }; */ $().UItoTop({ easingType: 'easeOutQuart' }); }); </script>
5. Letakkan kode dibawah ini diatas kode ]]></b:skin>
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/> <script src='http://blogtrikdantips-blogspot.googlecode.com/files/sed_back_to_top.js' type='text/javascript'/> <script src='http://vianjb.googlecode.com/files/to%20top.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { /* var defaults = { containerID: 'moccaUItoTop', // fading element id containerHoverClass: 'moccaUIhover', // fading element hover class scrollSpeed: 1200, easingType: 'linear' }; */ $().UItoTop({ easingType: 'easeOutQuart' }); }); </script>
5. Letakkan kode dibawah ini diatas kode ]]></b:skin>
spoiler for Script:
#toTop { display:none; text-decoration:none; position:fixed; bottom:10px; right:10px; overflow:hidden; width:51px; height:51px; border:none; text-indent:-999px; background:url(http://1.bp.blogspot.com/-jl2zCOaMrgc/T8...totop.png) no-repeat left top; } #toTopHover { background:url(http://1.bp.blogspot.com/-jl2zCOaMrgc/T8...totop.png) no-repeat left -51px; width:51px; height:51px; display:block; overflow:hidden; float:left; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); } #toTop:active, #toTop:focus { outline:none;
7. Simpan template sobat dan lihat hasilnya
#toTop { display:none; text-decoration:none; position:fixed; bottom:10px; right:10px; overflow:hidden; width:51px; height:51px; border:none; text-indent:-999px; background:url(http://1.bp.blogspot.com/-jl2zCOaMrgc/T8...totop.png) no-repeat left top; } #toTopHover { background:url(http://1.bp.blogspot.com/-jl2zCOaMrgc/T8...totop.png) no-repeat left -51px; width:51px; height:51px; display:block; overflow:hidden; float:left; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); } #toTop:active, #toTop:focus { outline:none;
7. Simpan template sobat dan lihat hasilnya
oh Ya cara editnya Masuk Ke Bloger Kalian Edit Template
Trus buat nyari head ama skin Biar gmpang pake Ctrl F
Trus buat nyari head ama skin Biar gmpang pake Ctrl F
0 komentar:
Post a Comment