Ini Dia, Cara Membuat Tombol Back To Top di Blog Blogspot

Bagikan :

Tweet

Cara membuat tombol kembali di blog. Apakah anda sering melihat di dalam sebuah di bagian bawah terdapat sebuah tanda panah. Itulah yang akan kita bahas kali ini yaitu membuat tombol back to top pada blog. Tombol back to top memiliki fungsi untuk mengambilakan tampilan blog anda kembali ke atas. 

Mungkin anda pernah membaca di dalam sebuah blog yang memiliki artikel yang sangat panjang sekali sampai kebawah, kemudian anda lupa dan ingin membaca di bagian atas. Apabila anda menggunakan scroll di mouse atau side bar, terlalu lama bukan, bahkan terkadang terlewat artikel yang kita baca.

Dengan menambahkan tombol back to top di blog dapat memudahkan pengunjung blog anda untuk membaca artikel secara leluas dan nyaman tentunya. Selain berfungsi untuk mengmbalikan tampilan blog ke atas, tombol back to top juga digunakan sebagai asesoris dalam sebuah blog.

Dengan adanya tombol back to top pada blog dapat menambah daya tarik tersendiri bagi visitor untuk selalu menggunakanya. membuat tombol back to top di blog merupakan hal penting dan dapat mempengaruhi blog tersebut. 

Silahkan anda lihat tombol back to top pada blog yang sedang anda baca salah satu artikelnya ini. Di bagian samping kanan terdapat scroll ke bawah, fungsinya juga untuk untuk melihat bagian atas sebuah blog. Setiap blog memiliki template yang berbeda - beda, ada yang menampilkan lebih dari 10 postingan di awal tampilan blog sehingga blog terlihat memanjang ke bawah. 

Ada juga yang menambahakan widget yang banyak, seperti widget fans page facebook, populer artikel, archive, recent post, counter visitor sehingga tampilannya juga panjang ke bawah. Berbeda lagi kalau dari faktor pengunjung di blog anda. Semakin banyak pengunjung maka akan banyak yang meninggakan komentar pada kolom komentar yang terletak di bawah postingan blog. Bayangkan jika ada 100 pengunjung yang mengomentari blog anda. pasti tampilannya juga akan memanjang bukan.

Nah d isinilah letak dari tombol back to top pad blog, memudahkan pengunjung blog untuk kembali lagi ke atas agar dapat membaca kembali artikel penting yang terlewatkan. Untuk acara memasang tombol back to top di blog sendiri sangat mudah, hanya perlu sedikit menambahakan kode script pada template blog anda.

Sedangkan untuk tampilan tombol back to top pada blog juga berbeda - beda, dan kali ini bacaan gratis kan membahas mengenai cara membuat tombol back to top sederhana di blog. silahkan anda simak panduannya di bawah ini.

Cara Membuat Tombol Back To Top Di Blog

1. Silahkan  anda login ke dalam blog terlebih dahulu

2. Selanjutnya pilih Template, klik Edit Template

4. Silahkan anda cari kode </head> pada template anda dengan cara menggunakan menekan kombinasi tombol ctrl + f pada keybord anda untuk mempermudah pencarian.

5. Selanjutnya copy kode di bawah ini dan letakan tepat di atas kode </head> yang di cari tadi

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;100) { $(&#39;#ScrollToTop&#39;).fadeIn()} else { $(&#39;#ScrollToTop&#39;).fadeOut();}});
$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},1000);return false})});
</script>

6. Selanjutnya Simpan template

Sampai disini ada yang masih kebingungan, kalau ada masalah silahkan anda tulisakan di kotak komentar di bawah. OK, kita lanjutkan cara membuat tombol back to top pad blognya.

7. Silahkan anda masuk ke menu Tata Letak kemudian Tambahkan Gadget baru di sebelah kiri, pilih HTML/JavaScript, copy kode di bawah ini dan letakan dalam Gadget yang baru di buat tadi.

<style type='text/css' scoped='scoped'>
#ScrollToTop{text-align:center; position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqVjeERodHOLeBZdZBa8QHiYRTsh522y2kk2fNUoN78h3CJLxA82ZPFAYb9KX1E2vg7ywoNAgx6CS1udeWrLs6aR9Rbzdu-XR58ml3ePGa-5SY0VzygtkqwhZxBYuXV-uhs8drRT3Dh5M/h120/back-to-top-button.png'/></div>

8. Silahkan anda Simpan kemudian Lihat Blog


Cukup mudah bukan, cara membuat tombol back to top di blog, tutorial blog ini pasti dapat dilakukanoleh siapa saja bahkan seorang blog pemula. Terima Kasih telah mengunjungi Bacaan Gartis. Com, Semoga bermanfaat untuk anda ^_^

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

Tag : BLOG