Cara Menambahkan Back to Top Button di Blog dengan Mudah - Onet4u Tech
Dark
News Update
Loading...

Cara Menambahkan Back to Top Button di Blog dengan Mudah

Cara Menambahkan Back to Top Button di Blog dengan Mudah
Also Read
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 Menambahkan Back to Top Button di Blog dengan Mudah

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

dottycat
“Don’t try to plan everything out to the very last detail. I’m a big believer in just getting it out there: create a minimal viable product or website, launch it, and get feedback.”

RELATED POSTS

COMMENT

Load Comments

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel