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><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.
Posting Komentar