Monday, July 11, 2011

Tombol Scroll Back To Top Dengan Efek Jquery Smooth

cara mudah membuat back to top di blogSetelah kemarin sudah menulis artikel yang bisa disebut membarui modifikasi dari kotak komentar authtr di blogger , maka pada artikel kali ini kita akan pula memodifikasi kembali tombol back to top di blogger. Back to top kali ini sangatlah berbeda dengan back to top yang sudah ada , karena back to top ini hanya akan terlihat di blog anda jika suatu halaman telah bergulir dan jika di klik maka gulungan halaman akan perlahan-lahan ke atas . Untuk penggunaan back to top di blog anda , tidak perlu takut akan beban dari jquerynya , karena sebelum nya telah di sprite untuk menjaga beban halaman.

Saya sudah mempunyai demo dari back to top ini di blog saya , jika anda ingin melihatnya silakan klik dibawah ini.

demo back to top di blog saya

Anda rertarik ?? ikuti langkah berikut ini jika anda tertarik ingin memasang scroll back to top efek smooth di blog anda.

  • Langkah Mudah memasang back to top di blog

1. Masuk pada blogger anda lalu pergi ke design > edit html  , untuk menghindari sesuatu yang tidak diinginkan di template anda , anda bisa men back up templae anda dengan cara menekan download full template.

memasukkan kode back to top di template

2. Pada menu edit html , cari lah kode ]]></b:skin> . ( Gunakan F3 untuk mempermudahkan pencarian )

3. Setelah menemukan kode diatas  , kini anda bisa copy paste kode dibawah ini dan letakkan tepat di atas / sebelum kode ]]></b:skin>


#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(https://lh5.googleusercontent.com/-FVNbuJLlNco/ThqDJXSJC5I/AAAAAAAAAg0/rdLF91Ce6DA/s800/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(https://lh5.googleusercontent.com/-FVNbuJLlNco/ThqDJXSJC5I/AAAAAAAAAg0/rdLF91Ce6DA/s800/ui.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;

Note: Bila anda ingin mengganti tombol to top nya berada di sebelah kiri maka ganti tulisan right yang berwarna merah dengan left.

4. Setelah itu cari lagi kode </head> lalu copy paste kode dibawah ini dan letakkan sebelum kode </head>.


<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://vianjb.googlecode.com/files/sed.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: &#39;moccaUItoTop&#39;, // fading element id
containerHoverClass: &#39;moccaUIhover&#39;, // fading element hover class
scrollSpeed: 1200,
easingType: &#39;linear&#39;
};
*/
$().UItoTop({ easingType: &#39;easeOutQuart&#39; });
});
</script>

5. Kemudian save template dan selesai .

Kini blog anda sudah mempunyai back to top efek smooth , nah mungkin sampai begini dulu artikel saya ini . Oh ua tema artikel ini adalah blogger tutorial , jadi jika anda ingin melihat-lihat tentang blogger tutorial yang lainnya anda bisa klik DISINI

5 comments:

  1. blog aq jg uda pake lho
    berguna bnget buat blog yg terlalu pnjang ke bawah, drpd scrolling mouse membosankan :p

    ReplyDelete


Silakan kirimkan komentar anda entah itu kritik atau saran anda dan mohon maaf jika komentar anda tidak mendapatkan tanggapan karena saya tidak selalu online 24 jam