Membuat Tombol “Back to Top” di Blogger/Blogspot

Salah satu widget yang sering kita jumpai setiap blogwalking atau membuka sebuah blog/website adalah tombol kembali ke atas, dalam bahasa kerennya adalah tombol “Back to Top”. Fungsi dari widget ini tidak lain ialah mengembalikan tampilan blog yang dibuka ke bagian paling atas dengan hanya mengklik saja pada tombol tersebut. Sehingga pengguna tidak perlu memainkan kursor lagi melakukan hal ini.
Membuat Tombol “Back to Top”

Secara sadar atau tidak sadar sebagai pengguna internet, khususnya yang menggunakan desktop pasti pernah menggunakan tombol back to top ini. Biasanya tombol ini terletak atau terlihat dibagian bawah tampilan blog/desktop. Modelnya pun bermacam-macam, ada tombol back to top dengan efek animasi, bounce, flat/biasa saja, sampai dengan model rocket yang seperti ingin meninggalkan bumi. Selain bermacam-macam modelnya, sktruktur pembuatannya pun bermacam-macam pula, ada yang menggunakan pure CSS, JavaScript dan jQuery.

Simak pula: Membuat Thumbnail pada Popular Post Tidak Bergambar

Nah, tombol Back to Top yang hendak saya bagikan kali ini ialah yang terbuat dari jQuery dan dengan sedikit sentuhan CSS agar terlihat lebih hidup karena muatan animasinya. Anda tertarik? Silahkan ikuti langkah-langkahnya berikut ini.

Cara Membuat Widget “Back to Top” Animasi dengan jQuery

Terlebih dahulu, login ke blogger anda, masuk ke dasbor blog > Template > Edit HTML. Kemudian copy kode CSS berikut ini dan letakkan di atas kode </style> atau ]]></b:skin>

/* CSS back to top */
.to-top{background-color:#3b7dc1;visibility:hidden;color:#fff;width:38px;height:38px;line-height:34px;position:fixed;bottom:50px;right:30px;text-align:center;z-index:999;cursor:pointer;opacity:0;-webkit-transform:translateZ(0);transition:all .6s}
.to-top .fa{font-size:24px;vertical-align:middle}
.to-top.show{visibility:visible;bottom:25px;opacity:1;}
.to-top:hover{background-color:#64707a;color:#fff;opacity:1;}

Langkah selanjutnya ialah, letakkan kode berikut ini tepat di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
(function(){$(document).ready(function(){return $(window).scroll(function(){return $(window).scrollTop()>600?$("#to-top").addClass("show"):$("#to-top").removeClass("show")}),$("#to-top").click(function(){return $("html,body").animate({scrollTop:"0"})})})}).call(this);
//]]>
</script>

Simpan template, dan lihat hasilnya dengan mengscroll tampilan blog ke bawah.

Jika widgetnya tidak berjalan sempurna atau malah tidak dapat terbuka sama sekali, kemungkinan pada template anda belum ditambahkan kode jQuery library seperti ini:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Letakkan kode tersebut di atas kode </head>

Untuk menampilkan icon Font Awesome pada tombol ini, pastikan di template anda sudah ditambahkan Cheatsheet untuk Font Awesome, seperti berikut ini:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Letakkan juga kode ini di atas kode </head>. Kemudian jangan lupa untuk simpan template.

Demikian tutorial tentang cara membuat tombol atau widget Back to Top di blogger/blogspot. Semoga membantu dan selamat mencoba.
Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K
Free and premium blogger templates