Cara Membuat Back To top dengan Efek Bounce di Blog

adscblog

Back To Tp sudah pasti sudah tau bukan,apalagi para blogger sudah tidak asing lagi dengan tombol Back to top ini,walaupun saya sudah sering dan bukan sekali membuat artikel back to top ini,tetapi saya tidak akan bosan untuk terus memberi tutorial dan berbagi pengalaman seputar blog

Tombol Back to top ini terkadang ada yang penting untuk memasang di blog nya masing,masing,terkadang juga tombol back to top ini tidak terlalu penting untuk di pasang di blog dan hanya memberatkan loading blog saja,sehingga tidak aneh jika sebagin blogger tidak memasang tombol back to top tersebut

Mungkin di blog ini sudah saya bahas tentang cara penerapan tombol back to top ini,tetapi tombol back to top yang ini lumayan keren dari back to top yang lain nya yang pernah saya share di blog ini yang tentu nya di artikel sebelum nya

Tutorial Pemasangan Back To Top dengan Efek Bounce di Blog

Dan jika anda tertarik dengan Tombol Back to top dengan efek Bounce ini anda bisa menerapkan nya di blog sobat dengan mengikuti langkah-langkah penerapan nya,tetapi bagi sobat yang sudah hafal tentu nya cara penerapan nya langsung aja

• Masuk ke blogger
• Kemudian silahkan klik Template di bagian kiri blogger
• Kemudian Edit Html
• Setelah ada dalam peng editan Html silahkan anda cari kode </b:skin> untuk memudahkan anda dalam pencarian kode tersebut,silahkan tekan tombol Ctrl+F secara bersamaan kemudian letakan kode berikut sebelum kode tersebut

#BounceToTop{background:#53bd84;color:#ffffff;padding:6px 8px;font-size:18px;border-radius:90px}
.BounceToTop{position:fixed!important;position:absolute;bottom:220px;right:310px;z-index:999}

• Setelah itu silahkan anda cari lagi kode </head> dan letakan kode berikut sebelum kode tersebut

<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;100) { $(&#39;#BounceToTop&#39;).fadeIn(); } else { $(&#39;#BounceToTop&#39;).fadeOut(); } });
$(&#39;#BounceToTop&#39;).click(function() { $(&#39;body,html&#39;).animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>

• Letaka kode berikut sebagai Widget nya,dimana saja,baik itu di atas footer wrapper atau yang lain nya

 <div id='BounceToTop'><img alt='' src='#'/><i class='fa fa-chevron-up'/></div>

• Langkah selanjut nya silahkan cari kode berikut </body> dan letakan kode berikut sebelum kode tersebut

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

• Kemudian Save template dan lihat hasil nya

 Jika Tombol back to top nya tidak muncul,silahkan pasang jQuery berikut sebelum kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Nah itulah cara pemasangan Tombol Back to top dengan epek Bounce di blog,semoga artikel nya bisa membantu sobat blogger,selamat mencoba.

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 17 Juni and have 0 komentar