Langkah-langkah pembuatannya sebagai berikut:
- Login Blogger
- Pilih Rancangan
- Pilih Edit HTML dan beri cheklis pada Expand Template Widget
- Lalu copy kode CSS di bawah ini sebelum kode ]]></b:skin>
- Lalu copy code script di bawah ini sebelum kode </head>
- Cari kode <body> ganti dengan <body id="luhur">
- Cari kode </body> dan copy paste script di bawah ini di atasnya
- Simpan template dan liat hasilnya
#kaluhur{ right:20px; bottom:20px; position: fixed; }
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ $('a[href*=#luhur]').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); if ($target.length) { var targetOffset = $target.offset().top; $('html,body').animate({scrollTop: targetOffset}, 1000); return false; } } }); }); //]]> </script>
<div id='kaluhur'> <a href='#luhur' title='Luhur'><img src='http://lh6.ggpht.com/_xcD4JK_dIjU/S4QCfI_V6LI/AAAAAAAAD1A/JK107RTwhiw/d/kaluhur.gif'/></a> </div>
Sekian dulu tutorial kali ini, semoga dapat membantu. Saya ucapkan terima kasih kepada Dede Hendriono admin Blogger Tune-Up yang telah memberikan tutorial cara membaut scrool to top ini.
0 komentar:
Posting Komentar