Tips/Cara Membuat Button Back To Top Ala Mas Jonny - Bicara mengenai tombol atau tepatnya button back to top ini saya sebenarnya agak malas untuk memasangnya karena apa? karena tombol back to top seperti ini menutup sedikit layar konten di versi seluler dan juga tombol ini juga akan membuat blog kita agak berat. Eits jangan kabur dulu kali ini mas jonny akan membagikan kepada kalian mengenai back to top yang sederhana mempunyai efek smotting sehingga dapat berjalan dengan lancar tanpa harus memikirkan berat loading blog. Tentunya dengan penambahan efek smooting akan mengurangi loading blog anda.
( Baca Juga : Cara Membuat Share Button Ringan Sederhana )
Dengan Button back to top ini akan mempermudah pengunjung untuk kembali ki bagian atas blog kamu untuk sebuah alasan tertentu pastinya. Dengan begitu akses keseluruh blog akan mudah dan mari kita coba membuatnya.
Tips Membuat Button Back To Top Ala Mas Jonny
( Baca Juga : Cara Membuat Share Button Ringan Sederhana )
Dengan Button back to top ini akan mempermudah pengunjung untuk kembali ki bagian atas blog kamu untuk sebuah alasan tertentu pastinya. Dengan begitu akses keseluruh blog akan mudah dan mari kita coba membuatnya.
Tips Membuat Button Back To Top Ala Mas Jonny
- Pertama masuk ke Template > Edit HTML
- Cari kode </head> dan letakkan kode dibawah ini tepat diatas kode </head>.
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
- Kedua masukkan kode dibawah ini tepat diatas kode
]]></b:skin>atau </style>
/*Back To Top*/
#top{background-color:#444;margin:0;padding:10px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;position:fixed;bottom:10px;right:10px;cursor:pointer;display:none;}
#top:hover{background-color:#E73138}
- Simpan Template
- Masuk ke Tata Letak > Add Gadget > HTML/Javascript
- Setelah anda masuk ke dalam Gadget HTML, masukkan kode dibawah ini tepat didalamnya.
<a href='#' id='top'><img alt='Back To Top'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNxLhs1BA-DqXR-4jQ1M6b-pfzt6rkmFUyW0pTmX3YMZr_Pa9hl74iT1v1mcTeXzM3O0HZAYoOgUjs2qjWZR2bWBEusf-ssuI0vbviXXaAbGqv2z3BYoRWw6Ll8zXUIATJsxuQTdBjvOY1/s1600/btp.png'/></a>
<script type='text/javascript'>
//<![CDATA[
//Scroll Top
(function(a){a(window).scroll(function(){if(a(this).scrollTop()>280){a("#top").removeAttr("href");a("#top").fadeIn()}else{a("#top").fadeOut()}});a(function(){a("#top").click(function(){a("html,
body").animate({scrollTop:0},"slow");return false})})})(jQuery);
//]]>
</script>
- Simpan Gadget HTML anda.
Demikianlah Tips Membuat Button Back To Top Ala Mas Jonny semoga dapat bermanfaat bagi anda semua dan bagi yang ingin melihat widget saya lainnya silahkan saja.
( 1. Widget Komentar Terbaru ) ( 2. Widget Latest Update ) ( 3. Widget Menu Bar di Side Bar )
Happy Blogging.....
Belum ada tanggapan untuk "Tips Membuat Button Back To Top Ringan Ala Mas Jonny"
Post a Comment