Cara Membuat Tombol Back To Top di Blog - Hallo sahabat Info Lowongan Kerja Karawang, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Tombol Back To Top di Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blog, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Tombol Back To Top di Blog
link : Cara Membuat Tombol Back To Top di Blog

Cara Membuat Tombol Back To Top di Blog

Kali ini saya akan share  tentang Cara Membuat Tombol Back To Top di Blog, jika anda tertarik memasangnya di blog anda silahkan ikuti langka langka berikut ini :

1. Silahkan anda copypaste kode di bawah ini lalu taruh di atas kode skin ]]></b:skin> 

#BounceToTop { background: #3498DB; text-align: center; position: fixed; bottom: 14px; right: 20px; cursor: pointer; width: 30px; height: 30px; padding: 5px; display: none;}
#BounceToTop:before { content: &quot;&quot;; position: absolute; bottom: 10px; right: 5px; width: 0; height: 0; border-style: solid; border-width: 0 15px 20px 15px; border-color: transparent transparent #444 transparent; line-height: 0; transition: all 0.3s ease-out;}
#BounceToTop:hover:before { content: &quot;&quot;; position: absolute; bottom: 10px; right: 5px; width: 0; height: 0; border-style: solid; border-width: 0 15px 20px 15px; border-color: transparent transparent #ddd transparent; line-height: 0;}
#BounceToTop:after {  border-color: transparent transparent #3498DB transparent; content: &quot;&quot;; position: absolute; bottom: 10px; right: 11px; width: 0; height: 0; border-style: solid; border-width: 0 9px 12px 9px; line-height: 0;}

Note: jika anda menggunakan template yang saya bagikan taruh kode tersebut di sekitar kode yang saya blog di bawah ini

Mulai dari kode <style type='text/css'> sampai kode penutup </style>

2. Setelah itu cari kode </body>
3. Lalu taruh kode di bawah ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#BounceToTop').slideDown(200);}
        else {
$('#BounceToTop').slideUp(300);}
});
$('#BounceToTop').click(function () {
$('body,html').animate({scrollTop: 0}, 800).animate({scrollTop: 25}, 200).animate({scrollTop: 0}, 150).animate({scrollTop: 10}, 100).animate({scrollTop: 0}, 50);
});
});
//]]>
</script>
  <div id='BounceToTop'/>

Note: Untuk template yang saya bagikan taro kodenya di atas kode  &lt;!--</body>--&gt;&lt;/body&gt;

4. Setelah itu simpan dan lihat hasilnya

Demikianlah Artikel Cara Membuat Tombol Back To Top di Blog

Sekianlah artikel Cara Membuat Tombol Back To Top di Blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Tombol Back To Top di Blog dengan alamat link https://info-lowongan-kerja-karawang.blogspot.com/2014/08/cara-membuat-tombol-back-to-top-di-blog.html

Tweet