Membuat Tombol Back To Top Di Blog

           Hallo Teman-teman blogger yang saya cintai,dan saya banggakan. Kali ini saya akan membuat tombol back to up atau tombol kembali ke atas. Pasti kamu bertanya kan.... kenapa sebuah blog atau website di kasih tombol kembali ke atas????,gunanya untuk mempermudahkan para visitor melihat layar atas tanpa harus scroll pake mouse,tinggal klik tombol sudah sampai. Ini juga tips agar para visitor kita betah berlama-lama di blog kita,bahkan besoknya kembali lagi. Jarang kita jumpai di sebuah blog maupun website yang menerapkan sistem ini,jadi langsung saja ya lihat caranya.

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.

Selamat mencoba,semoga visitornya makin banyak ya.

11 comments for "Membuat Tombol Back To Top Di Blog"

  1. makasih gan tutorialnya, ane udah pasang sih sebenernya...
    tapi ga melayang, dia cuma nempel di footer kalo nggak salah :D
    ane praktekin dulu buat modifikasi tombol punya ane :)

    ReplyDelete
  2. nyimak aja gan soalnya udah ane pasang

    ReplyDelete
  3. langsung coba ah, bisa ganti warnanya nggak

    ReplyDelete
    Replies
    1. Bisa mas,tapi code gak tahu. Itu back ground pake code hastag 3498db ,saya gak hafal kode warna mas.

      Delete
  4. Ini Back To Topnya Kaya Punya Agan? Saya COba Dulu Deh :D AS : http://anti-alone.blogspot.com/

    ReplyDelete
  5. Kebetulan di blog saya yang udah ada tombol back to topnya gan :D Btw, bagus juga nih tombolnya :)

    ReplyDelete
  6. wah ini nih yg lagi saya cari.. tx gan, kalo ada waktu visit.. www.12rom.hol.es

    ReplyDelete

Komentar kamu,sangat bermanfaat untuk perkembangan blog ini.
Jangan sungkan untuk berkomentar.

close