Back To Top button memudahkan ktia untuk kembali ke menu top dengan cepat, function ini sangatlah baik jika di gunakan di blogger yang mempunyai content/posting yang panjang. Back to top button akan sanggat membantu.
Cara memasang Button Back To Top:
Login ke blogger anda Theme > HTML Editor dan pasangkan code css berikut di dalam css style anda.
/* Back to top */
.O4UTop{visibility:hidden;width:50px;height:50px;position:fixed;bottom:50px;right:20px;z-index:9999;cursor:pointer;border-radius:50%;border:2px solid #586D82;opacity:0;-webkit-transform:translateZ(0);transition:all .5s;background:#00887a url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center}
.O4UTop:hover{opacity:1;background:#00887a url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center}
.O4UTop.show{visibility:visible;bottom:20px;opacity:1}Selanjutnya, Cari code </body> dan pasangak kod ini di atas code </body>
<div class='O4UTop'></div>Selanjutnya pasangkan javascript berikut di antara code <body> dan </body>.
<script type='text/javascript'>
$(document).scroll(function() { return $(document).scrollTop()> 300 ? $('.O4UTop').addClass('show') : $('.O4UTop').removeClass('show') }), $('.O4UTop').click(function() { return $('html,body').animate({ scrollTop: '0' }); });
</script>Kebiasanya akan di pasang di atas code </body>.
Sebelum terlupa, Function ini memerlukan javascript ajax
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>Setelah selesai memasang code code di atas silakan simpan template anda dan lihat hasilnya.
Suka saya ingatkan, sebelum memulakan pengubahsuaian template, silakan buat backup terlebih dahulu.Tq
Baiklah sampai di sini sahaja posting saya tentang Cara Menambahkan Back to Top Button di Blog dengan Mudah di blogger, Wasalam dari saya
No comments:
Post a Comment