Cara Membuat Tombol Back to Top Pada Blog

Tombol “Back to Top” merupakan tombol dengan fungsi yang menarik pada blog, ini memudahkan pembaca untuk kembali ke atas halaman tanpa b...

Tombol “Back to Top” merupakan tombol dengan fungsi yang menarik pada blog, ini memudahkan pembaca untuk kembali ke atas halaman tanpa bersusah payah menggeser scroll di samping kanan. Dan hampir semua blog dan web memasang tombol seperti ini, Anda mungkin sudah melihat tombol seperti ini di berbagai situs.

Anda juga bisa mencari tutorial tentang cara pembuatan tombol “Back to Top” di blog lain. Tetapi, kebanyakan dari mereka menggunakan kode HTML yang bisa langsung di pasang di “Add Gadget” atau pada widget blog. Tetapi sayangnya, tidak semua template blog support atau mendukung dengan cara seperti itu. Maksud saya, ada beberapa versi template yang tidak cocok untuk penggunaan kode HTML sesuai dengan beberapa tutorial pembuatan tombol “Back to Top” di blog lain. 

Nah, di sini saya juga ingin berbagi tentang tutorial untuk membuat tombol “Back to Top”, dan saya pikir tutorial ini sesuai atau cocok digunakan pada semua versi template blog :

1. Masuk ke akun blogger Anda, lalu masuk ke Dashboard

2. Klik “Template” lalu klik “Edit HTML

3. Pertama, cari kode </head> (Gunakan CTRL + F untuk memudahkan pencarian)

4. Letakkan kode script di bawah ini, tepat di atas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>
<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>
Catatan :
Angka warna merah menunjukkan jarak tombol “Back to Top” muncul dan bersembunyi, Anda bisa menggantinya.
Angka warna biru menunjukkan kecepatan saat mengarak ke atas, Anda juga bisa menggantinya.

5. Kemudian cari kode ]]></b:skin>

6. Letakkan kode CSS di bawah ini, tepat di atas kode ]]></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;}

7. Kemudian cari kode </body>

8. Letakkan kode di bawah ini, tepat di atas kode </body>

<div id='ScrollToTop'><img alt='Back to top' src='http://4.bp.blogspot.com/-Izmqq2QVcY8/UmMQyNKbhYI/AAAAAAAABcI/a28qtFC2uto/s1600/backtotop.png'/></div>
Catatan :
Kode warna orange menunjukkan link yang menjadi gambar tombol “Back to Top”, Anda bisa mengganti link tersebut. Anda juga bisa mencari gambar-gambar yang menarik di internet.

9. Langkah terakhir adalah “Simpan Template

Nama

Akhlaq,31,Android,48,Anime,3,Apps,20,Aqidah,4,Asuransi,4,Aswaja,30,Berkas,3,Bisnis Online,12,Blogging,171,Brimo,6,Doa-doa,42,Fiqih,27,Game,27,Ilmu Hadits,51,Inspirasi,52,Internet,93,Kaidah I'lal,20,Keluarga,34,Kisah teladan,115,Kitab Kuning,17,Life,95,Pekerjaan,11,Pendidikan,30,Ramadhan,5,Relationship,29,Religi,81,Satwa,1,Sholawat,37,Sya'ban,6,Tajwid,40,Tayammum,4,Tips,38,Windows,19,Youtube,22,
ltr
item
Pelangiblog: Cara Membuat Tombol Back to Top Pada Blog
Cara Membuat Tombol Back to Top Pada Blog
https://2.bp.blogspot.com/-ZQWIjSu93i0/VEJIkSZDs1I/AAAAAAAAAbY/HAh0rNN3oaw/s1600/Cara%2BMembuat%2BTombol%2BBack%2Bto%2BTop%2BPada%2BBlog.jpg
https://2.bp.blogspot.com/-ZQWIjSu93i0/VEJIkSZDs1I/AAAAAAAAAbY/HAh0rNN3oaw/s72-c/Cara%2BMembuat%2BTombol%2BBack%2Bto%2BTop%2BPada%2BBlog.jpg
Pelangiblog
https://www.pelangiblog.com/2014/10/cara-membuat-tombol-back-to-top-pada.html
https://www.pelangiblog.com/
https://www.pelangiblog.com/
https://www.pelangiblog.com/2014/10/cara-membuat-tombol-back-to-top-pada.html
true
6152984874501812302
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content