CARA MEMASANG BACK TO TOP DI BLOG
Cara Mudah Memasang Back To Top Di Blog - Yap ka
li ini saya berhasil masang Back To Top yang fungsinya memudahkan kita dan pengunjung kembali ke atas dengan 1x klik tanpa harus scroll keatas.
caranya mudah dan simple,yuk simak di bawah ini
1. Pastikan template ada kode JQUERY jika blum silahkan copas kode di bawah ini di atas kode </head>
2. Setelah copas kode diatas save template
3. Masuk ke tata letak
4 Pilih tambah gadget di layout
5.Pilih HTML/JavaScript
6. Masukan Kode Di Bawah
6. Simpan dan hasilnya Tradaaaa......
Kode Yang berwarna biru adalah gambar Back To Top nya kalian bisa menggantinya dengan sesuai selera anda atau background blog anda
Kalian bisa menggantinya dengan kode di bawah saya hanya punya sedikit
Itulah cara membuat kotak Back To Top Gimana Menarik Bukan ?
Yang ingin Bertanya dan memberi kritik serta saran jangan Sungkan" Silahkan Berkomentar :)
li ini saya berhasil masang Back To Top yang fungsinya memudahkan kita dan pengunjung kembali ke atas dengan 1x klik tanpa harus scroll keatas.
1. Pastikan template ada kode JQUERY jika blum silahkan copas kode di bawah ini di atas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
2. Setelah copas kode diatas save template
3. Masuk ke tata letak
4 Pilih tambah gadget di layout
5.Pilih HTML/JavaScript
6. Masukan Kode Di Bawah
<style>
.mbw-back-to-top {
position: fixed;
bottom: 2em;
right: 10px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiJVqiFl1PPJXc_ueUVkkpayLuIxvhEQhYr8BypzG_nKmxl31irqtDknKnYM4L_ewQ4737fzgqXNjmBLoZIjQgaWOHdS1lvUNo5T3sLvlSayiAoDzbSifqOQbC1fWo6Q9MWCUHG0QDJug/s1600/back+to+top.png" />
<script type="text/javascript">
/*****mybloggersworld.com***/
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.mbw-back-to-top').fadeIn(duration);
} else { //www.mybloggersworld.com
jQuery('.mbw-back-to-top').fadeOut(duration);
}
});
jQuery('.mbw-back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
6. Simpan dan hasilnya Tradaaaa......
Kode Yang berwarna biru adalah gambar Back To Top nya kalian bisa menggantinya dengan sesuai selera anda atau background blog anda
Kalian bisa menggantinya dengan kode di bawah saya hanya punya sedikit
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_4bjlVMUKiP6f0Rn8NXPTavyqJiU_K2Y8IcyxubSHUlEx0j5Ek67VPLuZh0R6LzbMf01MkOdbEwBHDSXuidCCPqnsf9eNhfmV895kFOjHsj4M5WQGEiOhadZlGFG12N4kSE7oX872gBw/s1600/back-to-top-button.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiojA1s5XjLxeJM3asRRWwoUouG6thyphenhyphenzviZO_e8r29UgQwFijv-QB1Mrx2g7twvWHgUB-K_Vc9v-8urZDqcYqrvRG_ryxlgG4md230LxlBJ_l4heR97cE3RSY47-j1ZGElZbtalE_FyBmk/s1600/back-to-top-button.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieZ5wyY930yd1wjyJ58a_F1EFNil6O_vFYR6ZjjjdeFeacMhGHGziXYRFPRzeRuz4SxWuaELTSSnrGZosmtPTaBqk3QPpRAIiCjbWXEbsZjFt3fB9HjoC_GmAscVjYDOLgp9zc6Vl9EP4/s1600/back_to_top_button.png
Itulah cara membuat kotak Back To Top Gimana Menarik Bukan ?
Yang ingin Bertanya dan memberi kritik serta saran jangan Sungkan" Silahkan Berkomentar :)
0 comments:
Post a Comment