Cara Memasang Tombol Back To Top di Blog (Blogger)

May 05, 2018

Baca Juga Artikel Berikut Ini

Selamat datang kembali di Blog Firdaus, setelah sekian lama admin tidak update postingan untuk Blog Firdaus kali admin kembali lagi untuk memberikan informasi yang bermanfaat kepada pembaca sekalian. Pada postingan ini, admin akan memberikan tutorial bagaimana cara memasang tombol back to top di blog (blogger) yang tentunya mudah untuk diterapkan.

Tombol back to top? Tombol apa itu?

Tombol back to top atau tombol kembali ke atas merupakan tombol yang berguna untuk mempermudah pengunjung ketika ingin kembali pada halaman teratas.

Maksudnya seperti ini ...

Ketika pengunjung telah membaca artikel anda sampa ke bawah dan ingin kembali ke atas lagi, maka dia tidak perlu menscroll lagi cukup diklik tombolnya saja. Tentu saja hal ini bagus jika dipasang karena user friendly (ramah pengunjung) sehingga sangat disukai Google.


Tombol ini terletak di pojok kanan bawah dan akan muncul ketika kita menscroll halaman tersebut. Membuat tombol back to top kita butuh 5 komponen
  1. Gambar (Gambar back to top). Bisa anda desain sendiri atau bisa ambil langsung di google. Pastikan gambar dicompress dulu. Bagi yang belum tau cara compress gambar bisa membaca artikel Berikut Ini
  2. jQuery (bebas memakai versi berapa saja)
  3. HTML
  4. CSS untuk mengatur posisi tombol back to top
  5. Javascript

Bagaimana Cara Memasang Tombol Back To Top?


Cara memasangnya cukup mudah. Sebelum melakukan tutorial ini pastikan anda telah memback up template terlebih dahulu untuk mengamankan template anda. Yuk, tanpa menunggu lama simak dan ikuti cara-caranya.

Cara Memasang Tombol Back To Top di Blog
Cara Memasang Tombol Back To Top

  • Buka Dashboard Blogger --> Tema --> Edit HTML

  • Pasang jQuery berikut ini diatas kode </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

Jika sebelumnya jQuery telah tersedia di dalam template anda, maka anda tidak perlu menerapkan langkah ini.

  • Pasang kode javascript berikut tepat dibawah jQuery 


<script type='text/javascript'>

$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;600) { $(&#39;#ScrollToTop&#39;).fadeIn()}

else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},800);

return false})});

</script>

  • Berikutnya, pasang kode CSS berikut diatas </style>

/*---- Back To Top --- */

#ScrollToTop{text-align:center;z-index:9999;position:fixed;bottom:10px; right:20px;cursor:pointer;display:none;opacity:0.7;}

#ScrollToTop:hover{opacity:1;}

Anda boleh tidak memasang tag comment
/*---- Back To Top --- */ karena tag itu hanya sebagai penjelas saja.

  • Terakhir, taruh kode HTML berikut ini diatas </body>

<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgL9VTAP_A-9E3lo6IJ2J52EOCd58CUpxbxPax0ARRnTWwdGvrxwE4rvbNOkwwMSWu1Ow6_nTRshvftEfG8V5FfrGE4WeafG0iehLVw4PFJR6RodtxOEprjfZ-_vVLv4P4ejdh9jLBZ7HE/s1600/PicsArt_05-05-02.40.38-min.png'/></div>

Perhatikan url yang berwarna diatas. URL tersebut url gambar back to top yang telah dipersiapkan sebelumnya. Silahkan di sesuaikan dengan url gambar anda sendiri.

Jika semua langkah diatas telah anda lakukan, maka lihatlah hasilnya.


Demikianlah sedikit informasi tentang cada memasang tombol back to top di blog, jika ada hal yang tidak dimengerti, monggo jangan sungkan untuk bertanya. Semoga informasi ini bermanfaat bagi pembaca.

Dapatkan Update Artikel Blog Firdaus Melalui Email

Bila pembaca merasa bahwa artikel-artikel di blog Firdaus bermanfaat, pembaca bisa memberikan sedikit donasi melalui Rekening BRI. Dana hasil dari donasi tersebut akan digunakan untuk memperpanjang domain Blog Firdaus Terima kasih.

Comments

Komentarlah yang sopan
Jangan spam
Dilarang gunakan link aktif
Dilarang komentar yang menyinggung SARA dan berkonten negatif

Terima kasih :)