Cara Menambahkan Back to Top Button di Blog dengan Mudah
Assalamualaikum, Kali ini saya akan kongsikan Cara Menambahkan Back to Top Button di Blog dengan Mudah dengan meterial icon.
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.
Selanjutnya, Cari code </body> dan pasangak kod ini di atas code </body>
Selanjutnya pasangkan javascript berikut di antara code <body> dan </body>.
Kebiasanya akan di pasang di atas code </body>.
Sebelum terlupa, Function ini memerlukan javascript ajax
Setelah selesai memasang code code di atas silakan simpan template anda dan lihat hasilnya.
Baiklah sampai di sini sahaja posting saya tentang Cara Menambahkan Back to Top Button di Blog dengan Mudah di blogger, Wasalam dari saya
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
Caution - In the recruitment process, legitimate companies never charge a fee from candidates. If there are companies that charge for interviews, tests, ticket reservations, etc., it is better to avoid them because there are indications of fraud. Do not transfer any payments when applying for a job.
Post a Comment
Post a Comment