Adsense Right Sidebar

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"

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

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

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

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

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

    ReplyDelete
    Replies
    1. silahkan bro asal masi menghargai kerja keras saya

      Delete
    2. Iya terimakasih gan, salam Blogger :)

      Delete

- 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 !

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel