Blog Seputar Tutorial Komputer, Printer, Windows, Android, Blackberry, Dan Informasi Teknologi

Membuat Tombol Back To Top Di Blog

Cara Mudah Membuat Tombol Back To Top Pada Blog. Tombol back to top merupakan hal yang bisa dikatakan penting ada pada sebuah blog. Seperti yang tedapat pada blog ini, bisa terlihat jika sobat scrool ke bawah. Tujuanya adalah tiada lain yaitu untuk mempermudahkan pengunjung blog sobat menuju ke atas blog. Terkadang tatanan pada sebuah blog berbeda-beda, ada yang ukurannya pendek juga ada yang panjang. apalagi jika blog sobat sudah mempunyai jumlah pengunjung/visitor yang cukup lumayan banyak. Pastinya setiap pengunjung banyak yang meninggalkan jejak melalui pesan komentar yang tersedia di blog sobat.

Semakin banyaknya pengunjung yang berkomentar maka semakin jauh juga deretan komentar yang terpampang di blog sobat sehingga mempersulit pengunjung yang sudah terjebak di bawah untuk membaca artikel dari atas yang sudah sobat posting. untuk itu agar mempermudahkan pengunjung blog sobat untuk kembali lagi membaca artikel dari atas atau melihat artikel lain yang tersaji di top menu maka dianjurkan untuk memasang tombol "back to top / kembali ke atas" pada sebuah blog.

Cara Memasang Tombol Back To Top Pada Sebuah Blog itu menurut saya tidak sulit sob, namun tetap butuh ketelitian karena berhubungan dengan kode scricpt yang harus kamu tambahkan di html blog sobat, saran saya backup dulu template blog sobat agar lebih aman jika terjadi kesalahan dalam penempatan kode scricpt, ( baca juga Cara Backup Template Pada Blog ) Jika sobat ingin membuat tombol back to top seperti yang terdapat di blog ane, Silahkan ikuti langkah langkah berikut ini.

Membuat Tombol Back To Top Di Blog
Klik gambar untuk memperbesar
Cara Membuat Tombol Back To Tob Di Blog Dengan Mudah

1. Langkah yang pertama silahkan masuk ke blog kamu dulu sob
2. Kemudian ke pengaturan Template
3. Lalu pilih Edit Template
4. Cari kode </head> Gunakan CTRL+F untuk mempermudah pencarian
5. Kemudian letakan kode scricpt di bawah ini tepat di atas kode </head>
<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. Kemudain Simpan Template

Langkah selanjutnya setelah menyimpan template, Silahkan sobat masuk ke menu Tata Letak dan Tambahkan Gadget, pilih HTML/JavaScript dan letakan kode scricpt di bawah ini.
<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://lh4.googleusercontent.com/-vVIwpo--JpU/VJWiJtyA86I/AAAAAAAAA_I/kCHbxz2hf5Y/h120/back-to-top-button.png'/></div>

Lalu klik Simpan dan lihat hasilnya

Begitulah sob cara mudah membuat tombol back to top pada blog, silahkan dipraktekan pada blog sobat masing-masing. Mudah-mudahan dapat membantu dan semoga bermanfaat.

Ada yang lupa, bantu kami ya sob untuk like fanspage facebook kami. satu like dari sobat sangat membantu kami untuk tetap dapat menulis dan berbagi pengetahuan di blog ini. ini fanspage facebook kami https://www.facebook.com/ilmuwongcilik makasih ya sob atas dukunganya.

Previous
Next Post »

PERINGATAN..!!
1. Berkomentarlah Sesuai Judul Diatas Dengan Sopan dan Jangan Spaming.!!
2. Dilarang Berkomentar Yang Mengandung Unsur Pornografi dan Sara.!!
3. Mohon Maaf Bagi Yang Berkomentar Melampirkan Link Langsung Ane Masukan Spam.!!

Matur Nuwon Sanget Atas Perhatiane Panjenengan Sedoyo. Salam Blogger Wongcilik.

 

Contact Form

Name

Email *

Message *