Membuat Back to top Minimalis Blogger
Posted by
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.
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:
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.
