Cara Membuat Back To Top dan Back To Down Pada Blog

Kali Saya akan membahas cara membuat back to top dan back to down.

Back to top and down memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas atau bawah, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali ke atas atau bawah.

Berikut cara membuatnya :

• Login ke blogger.com, jika sudah,
• Pilih Template → Edit HTML → Expand Template Widget
• Cari kode </body> agar mudah mencari tekan f3
• Letakkan script di bawah ini, di bawah kode </body>

<div style="display:none;" class="atas" id="atas"> </div> <div style="display:none;" class="bawah" id="bawah"> </div> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script text="text/javascript"> $(function() { var $elem = $('#outer-wrapper'); $('#atas').fadeIn('slow'); $('#bawah').fadeIn('slow'); $('#bawah').click( function (e) {$('html, body').animate({scrollTop: $elem.height()}, 800);}); $('#atas').click( function (e) {$('html, body').animate({scrollTop: '0px'}, 800);}); }); </script>

Perhatian :

• Alasan kenapa kode script di atas diletakkan paling bawah atau setelah kode </body> , agar pada saat loading , tidak terlalu berat.

• Setelah itu cari kode ]]></b:skin>
• Letakkan script di bawah ini, di atas kode ]]></b:skin>

#bawah{padding:7px; background-color:white; border:1px solid #CCC; position:fixed; background:transparent url(http://img593.imageshack.us/img593/6105/todown.png) no-repeat top left; background-position:50% 50%; width:20px; height:20px; bottom:10px; opacity:0.7; left:70px; white-space:nowrap; cursor:pointer; -moz-border-radius:3px 3px 3px 3px; -webkit-border-top-left-radius:3px; -webkit-border-top-right-radius:3px; -khtml-border-top-left-radius:3px; -khtml-border-top-right-radius:3px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70)}#atas{padding:7px; background-color:white; border:1px solid #CCC; position:fixed; background:transparent url(http://img59.imageshack.us/img59/7959/totopd.png) no-repeat top left; background-position:50% 50%; width:20px; height:20px; bottom:10px; opacity:0.7; left:30px; white-space:nowrap; cursor:pointer; -moz-border-radius:3px 3px 3px 3px; -webkit-border-top-left-radius:3px; -webkit-border-top-right-radius:3px; -khtml-border-top-left-radius:3px; -khtml-border-top-right-radius:3px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70)}

• Simpan dan lihat hasilnya

Selamat Mencoba !