Salah satu widget yang kerap kita jumpai setiap blogwalking atau membuka sebuah blog/website merupakan tombol kembali ke atas, dalam bahasa kerennya merupakan tombol “Back to Top”. Fungsi dari widget ini tak lain yaitu mengembalikan tampilan blog yang dibuka ke bab paling atas dengan hanya mengklik saja pada tombol tersebut. Sesampai lalu pengguna tak perlu memainkan kursor lagi melaksanakan hal ini.
Secara sadar atau tak sadar sebagai pengguna internet, khususnya yang memakai desktop niscaya pernah memakai 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, hingga dengan model rocket yang menyerupai ingin meninggalkan bumi. Selain majemuk modelnya, sktruktur pembuatannya pun majemuk pula, ada yang memakai pure CSS, JavaScript dan jQuery.
Simak pula:
Nah, tombol Back to Top yang hendak admin bagikan kali ini yaitu yang terbuat dari jQuery dan dengan sedikit sentuhan CSS biar terlihat lebih hidup lantaran 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 isyarat 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 isyarat 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 balasannya dengan mengscroll tampilan blog ke bawah.
Jika widgetnya tak berjalan tepat atau malah tak sanggup terbuka sama sekali, kecukupan pada template anda belum ditambahkan isyarat jQuery library menyerupai ini:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
Letakkan isyarat tersebut di atas kode</head>
Untuk menampilkan icon Font Awesome pada tombol ini, pastikan di template anda sudah ditambahkan Cheatsheet untuk Font Awesome, menyerupai berikut ini:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Letakkan juga isyarat 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.
