Cara Membuat Tombol Back To Top di Blog


Kali ini saya akan share  tentang Cara Membuat Tombol Back To Top di Blog, jika anda tertarik memasangnya di blog anda silahkan ikuti langka langka berikut ini :

1. Silahkan anda copypaste kode di bawah ini lalu taruh di atas kode skin ]]></b:skin> 
#BounceToTop { background: #3498DB; text-align: center; position: fixed; bottom: 14px; right: 20px; cursor: pointer; width: 30px; height: 30px; padding: 5px; display: none;}
#BounceToTop:before { content: &quot;&quot;; position: absolute; bottom: 10px; right: 5px; width: 0; height: 0; border-style: solid; border-width: 0 15px 20px 15px; border-color: transparent transparent #444 transparent; line-height: 0; transition: all 0.3s ease-out;}
#BounceToTop:hover:before { content: &quot;&quot;; position: absolute; bottom: 10px; right: 5px; width: 0; height: 0; border-style: solid; border-width: 0 15px 20px 15px; border-color: transparent transparent #ddd transparent; line-height: 0;}
#BounceToTop:after {  border-color: transparent transparent #3498DB transparent; content: &quot;&quot;; position: absolute; bottom: 10px; right: 11px; width: 0; height: 0; border-style: solid; border-width: 0 9px 12px 9px; line-height: 0;}
Note: jika anda menggunakan template yang saya bagikan taruh kode tersebut di sekitar kode yang saya blog di bawah ini

Mulai dari kode <style type='text/css'> sampai kode penutup </style>



2. Setelah itu cari kode </body>
3. Lalu taruh kode di bawah ini di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#BounceToTop').slideDown(200);}
        else {
$('#BounceToTop').slideUp(300);}
});
$('#BounceToTop').click(function () {
$('body,html').animate({scrollTop: 0}, 800).animate({scrollTop: 25}, 200).animate({scrollTop: 0}, 150).animate({scrollTop: 10}, 100).animate({scrollTop: 0}, 50);
});
});
//]]>
</script>
  <div id='BounceToTop'/>
Note: Untuk template yang saya bagikan taro kodenya di atas kode  &lt;!--</body>--&gt;&lt;/body&gt;

4. Setelah itu simpan dan lihat hasilnya

12 Responses to "Cara Membuat Tombol Back To Top di Blog"

  1. Aku mau nanya nih bro, cara pasang widget 1 label pilihan saja gimana? Yang seperti diblog kamu ini, yang "KECANTIKAN DAN GAYA" & "PENDIDIKAN DAN REFERENSI"

    BalasHapus
    Balasan
    1. coba caro di google ini "CARA MEMBUAT WIDGET RECENT POST BY TAG LABEL"

      Hapus
    2. Kalau cara memasang widget tersebut di bawah postingan agar bisa nempel jadi 2 seperti blog ini bagaimana caranya ya,..?

      Hapus
  2. Thanks broo, tutor yg ini nih yg di tunggu-tunggu

    BalasHapus
  3. Dih keren nih kalo artikelnya panjang gak usah cape-cape keatas lagi deh

    BalasHapus
  4. Assalamualaikum gan, saya minta izinnya buat mengedit template buatan anda.. tapi credit link-nya tidak akan saya hapus, mohon jawabannya sobat. Terimakasih

    BalasHapus
    Balasan
    1. silahkan bro asal masi menghargai kerja keras saya

      Hapus
    2. Iya terimakasih gan, salam Blogger :)

      Hapus
  5. kalo ganti warnanya gimana??

    BalasHapus

- Komentar harus sesuai topik, tidak menyimpang !
- Komentar bersifat promosi, langsung Saya hapus !
- Jangan meletakkan link aktif pada komentar, karena itu spam !
- Tolong beritahukan Saya jika ada link, gambar, dll yang rusak !