Sering bete scrol, scrol, pas di blog? Kenapa tidak memasang back to top saja :) Caranya mudah, kok.
CARA MUDAH MEMASANG BACK TO TOP:
Langkah 1:Coba cek di html template blog kamu, apakah sudah ada 1 kode jquery, yaitu kode seperti ini, atau belum dengan menggunakan ctrl + F:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
Atau seperti ini:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Kalau ternyata belum ada, coba lakukan langkah ini:
- Template > Edit HTML - Cari (CTRL+F) kode
- COPY salah satu kode tersebut dan PASTE di atas kode tadi.
- Save!
2. Klik "Layout" (Tata Letak)
3. Klik "Add Gadget" di Sidebar
4. Pilih "Javascript/HTML"
5. Copy dan Paste kode berikut ini:
<style>
.mbw-back-to-top {
position: fixed;
bottom: 2e;
right: 10px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="PASTE LINK IMAGE NYA DISINI" />
<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>
.mbw-back-to-top {
position: fixed;
bottom: 2e;
right: 10px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="PASTE LINK IMAGE NYA DISINI" />
<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>
Kode yang berwarna merah adalah link image "Back to Top". Ganti dengan mengisi link sesuai image yang kamu inginkan ya :)
Dan ini beberapa image cute yang bisa jd refernsi kamu:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjodi0MOtZMNOI9pIW_0ohdCzY1PEyNZbRnQy6d3F-9VR0ua2m81C2xrYGS9bNkXJVULqO7Ig7cGs4Ys2ktJxlax5aSudv6pnYE85dGQkmefi5fefFFbKZ_onRmblNdttOumIaRabptbpI/s1600/back+to+top+3.png
https://1.bp.blogspot.com/-Q_IJL1QgWKM/WI2DLg9lojI/AAAAAAAACBU/bV-Hh8EbRkoVWvsVgecF2D9eVnmwuuQQCPcB/s1600/back%2Bto%2Btop%2B5.png
https://3.bp.blogspot.com/-MzDaZmZgC_A/WI2DLxlNT3I/AAAAAAAACBc/NjS5K0DLbV8oXrhKw
7moH
_vV2Gfw9uSFgCPcB/s200/back-to-top.png
7moH
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJUiec7PJqsL-QpJfbtuBwDbrS_FOQ_ri3Lxdx-zyOVqNCCk6Ok7ZQBjMdndZ2X1aiQw8ndyt9f03Aej9ESlEomvzCcEDC7RbV2kvy4Fs9zM-rG_aTOOoKj4hpOv-JQsmK79Oe4bpmhRc/s200/download+%25281%2529.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVKgxvdZTxH6M8y3niUVP5uEbdDVlTJ9BGjnaTCWBFiYyhziwDb9GhycMNPL3ETl7Mk5Hq1DjSJxIpx3iIlo_i9Y_uZkYb7t6Jh7vF9FNelAhny2sT00B7MiXOl1M_TndnHao1t5RKYzo/s1600/back+to+top+9.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYvyx4aqhtgf9YG91kQiKGBdxzte2_7uRXqwtHBObOrqhYmUGNsnREvFxOqBpFl1Zq2JR3bBrNBGjTIGFZXT-GZ98LDeTM6vhvOwiZ1AKdmbSGeBEMQQb0DvLvZTPepV72eaGGmaskQz4/s1600/Top+Button+Kawaii.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN059HGc7W_3WCmkBiUAsKimPCmPHUe26dLg7GHKqBuBW5bMwuRp9mjKDBdf_avZ7QVZ1ucBNIH21c1gYFaeDIv4h4UsDOILI4KMoHvTqImIfeZhY9wT_SmPzaHPU0H10YfKtIDdHeDzo/s1600/kawaii-ghibli-230x230.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7NstgAmideeSwlrlmOrMmdCXgpvIeCCxWYtWnZyL-d7MyV038IrozKZ5Uv3PtDciE1AUEtxHeNKqABsgH-jYWVihRMkkw2CnRdzgxRkXpcVGvAWB2ynq-C_qh6H2JKzhyUdzOWomCVss/s1600/tumblr_mnjfmwVtzZ1r49apoo1_500.png
Yang lainnya nanti menyusul saya upload ya, selamat mempercantik Blog..
Lucu2 gambarnya. :D
ReplyDeleteHihi iya mba, udah anak dua tetep masih suka gambar unyu2 hahha, makasih sudah mampir ya mba..
DeleteAku pengen masang juga jadinya. Lucu. ^_^
ReplyDeleteAyo pasang..*ngomporin haha
DeleteTertarik juga nih. :D
ReplyDeleteLucu bangeeeetttt
ReplyDeletehai-ariani.com
Hai,,,yuk pasang huehue
Deletelucu lucu gambarnya, saya suka saya suka
ReplyDeleteMakasiiih:D
Deletethank you tutorialnyaa. lucu-lucu iconnya ^^
ReplyDeletenice info makasih yah kak
ReplyDeletelogo alfamart