Home » , , , » Cara Membuat Tombol Back To Top di Blog

Cara Membuat Tombol Back To Top di Blog

Pada kesempatan ini kami akan membagikan kepada Anda tentang bagaimana cara memasang tombol "Back to Top di Blogspot". Ada beberapa alasan sehingga banyak Blogger memasang tombol back to top ini ke Blog mereka. Antara lain untuk mempermudah pengunjung blog dan mempercantik tampilan blog mereka.

Kenapa tombol ini dapat mempermudah pengunjung blog? Ketika blog memposting artikel yang panjang, tombol ini dapat membantu pengunjung untuk mempermudah kembali ke halaman atas pada awal artikel tanpa perlu menggeser scroll ke atas.

Tombol back to top memiliki peranan cukup penting bagi sebuah blog atau website dengan konten yang berat dan memiliki halaman yang panjang. Untuk website yang memiliki banyak informasi pada halamannya, akan membuat konten-konten lain terlewati, tanpa disadari menggulir jauh ke bawah halaman.

Berikut ini adalah cara membuat dan memasangnya ke dalam Blogspot!
  1. Login ke Blogger.
  2. Klik Template kemudian Edit HTML.
  3. Klik kiri 1 kali di kotak template.
  4. Tekan Ctrl+F untuk pencarian cepat.
  5. Cari kode </head> menggunakan kotak pencarian, kemudian enter.
  6. Masukan kode di bawah ini diatas kode </head> Tapi jika sudah ada kode ini di template anda, maka lewati langkah ini.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>

  1. Masih di tempat yang sama - Cari kode </head>
  2. Masukan script dibawah ini diatas </head>
<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#ScrollToTop&#39;).fadeIn()}
else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700);
return false})});
</script>
  1. Cari kode ]]></b:skin> 
  2. Masukan kode CSS dibawah ini diatas ]]></b:skin>
#ScrollToTop{text-align:center;z-index:9999;position:fixed;bottom:40px; right:30px;cursor:pointer;display:none;opacity:0.7;}
#ScrollToTop:hover{opacity:1;}
  1. Cari kode </body>
  2. Masukan kode di bawah ini di atas </body>
<div id='ScrollToTop'><img alt='Back to top' src='http://4.bp.blogspot.com/-Izmqq2QVcY8/UmMQyNKbhYI/AAAAAAAABcI/a28qtFC2uto/s1600/backtotop.png'/></div>
  1. Save Template dan lihat hasilnya.
Kode berwarna biru di atas adalah link/url gambar back to top anda dapat menggantinya dengan gambar yang anda inginkan.

Tombol back to top ini memberikan fungsi baik cara untuk melompat ke atas dengan mudah dan singkat, dari pada harus menggerakannya dengan mouse. Ini adalah salah satu cara untuk mempermudah pengunjung menelusuri konten - konten yang ada di blog kita. Nah untuk itulah kita membuat dan memasang tombol back to top di Blog.

Dikutip dari : Sumber

1 komentar :

  1. Alhamdulillah Work gan, semoga sukses ya blog nya.. Amin..

    BalasHapus
Silahkan tinggalkan komentar Anda dan terimakasih telah berkunjung di amroe-oemar.blogspot.com semoga artikel yang baru saja anda baca bermanfaat untuk Anda. Selamat berblogging...

Total Tayangan Laman

 
Copyright © 2015. Blognya Amroe - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger
Back to top