2020/02/18

Cara Membuat Widget Back To Top, Back To Down dan Home Untuk Blogspot


Cara Membuat Widget Back To Top, Back To Down dan Home Untuk Blogspot - Hallo sobat blogger semua, How are you? Pada kesempatan ini saya akan membagikan tutorial tentang cara membuat widget Back To Top, Back To Down dan Home Untuk Blogspot. Widget ini membantu pembaca dapat dengan mudah menuruni footer dan ke atas halaman dengan cepat tanpa menyeret mouse berkali-kali. Dan anda juga dapat beralih ke halaman beranda atau halaman lain pilihan anda.

Untuk memasang Tombol Kembali Keatas, kebawah dan Home di Blogspot, Silahkan ikuti tutorial di bawah ini.

Langkah Pertama : Masuk ke halaman Blogger.com, Pilih "Tema" lalu pilih "Edit HTML" . Lalu salin kode dibawah ini setelah tag <head>


<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>


Langkah Kedua : Tambahkan kode berikut sebelum tag </body>



<style>
.bt-top,.bt-bottom,.bt-home{border-radius:50px;visibility:hidden;background-color:#2ec849;width:40px;height:40px;text-align:center;line-height:36px;position:fixed;bottom:55px;right:10px;z-index:999;cursor:pointer;opacity:0;-webkit-transform:translateZ(0);transition:all .3s}.bt-home{bottom:10px!important;visibility:visible;opacity:.8;background:#333}.bt-top.show{visibility:visible;opacity:.8}.bt-bottom{opacity:.8;visibility:visible}.bt-top i,.bt-bottom i{font-size:22px;color:#fff;position:absolute;top:9px;left:13px}.bt-home i{font-size:17px;top:12px;left:12px;color:#fff;position:absolute}.bt-bottom i{top:10px}.bt-top:hover,.bt-bottom:hover,.bt-home:hover{opacity:1}.blog-footer-widgets{color:#ccc;clear:both;background:#323232;font-size:15px;padding:10px 0}#bp_toc a{color:#222}#bp_toc a:hover{color:#333}#footer-colleft{width:68%;float:left;margin:0;padding:0}#st-postleft{width:69%;float:left;margin:0;padding:0;position:relative;overflow:hidden}#st-sidebar-wrapper{width:30%;float:right;margin:0;padding:0}#colleft1{width:48%;float:left;margin:0;padding:0}#colleft2{width:48%;float:right;margin:0;padding:0}#colright{width:30%;float:right;margin:0;padding:0}#st-post-wrapper{max-width:1200px;width:100%;margin:0 auto;padding:0;overflow:hidden;margin-top:65px}#comments,.footer .widget,.sidebar .widget,.bt-top,.bt-bottom,.bt-home{box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05)}.st-hide{display:none}</style>
<div class='bt-top' title='top'><i class='fa fa-angle-up'></i></div>
<div class='bt-bottom' title='down'><i class='fa fa-angle-down'></i></div>
<a href='/'><div class='bt-home' title='Home'><i class='fa fa-home'></i></div></a>
<script type='text/javascript'>
//<![CDATA[
//  Back to Top, Down, Home
(function(){$(document).ready(function(){return $(window).scroll(function(){return $(window).scrollTop()>200?$(".bt-top").addClass("show"):$(".bt-top").removeClass("show")}),$(".bt-top").click(function(){return $("html,body").animate({scrollTop:"0"})})})}.call(this));(function(){$(document).ready(function(){return $(window).scroll(function(){return $(window).scrollTop()>200?$(".bt-bottom").addClass("st-hide"):$(".bt-bottom").removeClass("st-hide")}),$(".bt-bottom").click(function(){return $("html,body").animate({scrollTop:"99999"})})})}.call(this));
//]]>
</script>

Langkah Ketiga : Terakhir, Pilih "Simpan" dan muat ulang halaman anda untuk melihat hasilnya.


Demikian artikel dari saya tentang Cara Membuat Widget Back To Top, Back To Down dan Home Untuk Blogspot, Semoga artikel diatas bermanfaat dan Semoga berhasil. Jika ada kendala silahkan tinggalkan di kolom komentar di bawah. Terima Kasih

Tags :

bm
@anaz_arblit

Hanya Seorang Blogger dan Content Writer yang senang mempelajari dan berbagi Informasi, Tutorial dan seputar Dunia Internet. Jika anda ingin bekerjasama dengan kami, Silahkan Hubungi kami melalui Email : Themeblitz@gmail.com.

Post a Comment