Membuat Tombol Back To Top Di Blog

           Hallo Teman-teman blogger yang saya cintai,dan saya banggakan. Kali ini saya akan membuat tombol back to up atau tombol kembali ke atas. Pasti kamu bertanya kan…. kenapa sebuah blog atau website di kasih tombol kembali ke atas????,gunanya untuk mempermudahkan para visitor melihat layar atas tanpa harus scroll pake mouse,tinggal klik tombol sudah sampai. Ini juga tips agar para visitor kita betah berlama-lama di blog kita,bahkan besoknya kembali lagi. Jarang kita jumpai di sebuah blog maupun website yang menerapkan sistem ini,jadi langsung saja ya lihat caranya.

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.

Selamat mencoba,semoga visitornya makin banyak ya.

Related Posts

Apa Keuntungan Expired Domain Serta Bagaimana Cara Mendapatkannya

Seo Dulu – Apa itu Expired Domain ? Expired Domain adalah sebuah domain yang dibiarkan dan tidak di perpanjang oleh pemiliknya. Beberapa pengguna sengaja tidak melakukan pembaruan…

Apa Itu SSL? Pentingkah SSL Untuk SEO Website?

SeoDulu – SSL merupakan singkatan dari Secure Socket Layer, yaitu protokol keamanan internet berbasis enskripsi yang memberikan privasi, otentikasi, dan integritas komunikasi internet. Fitur keamanan ini pertamakali…

Cara Membuat Artikel Terkait Atau Related Post (Baca Juga Artikel Berikut)

  Seo Dulu – Apa kabar sobat seo dulu,apakah blog sobat seodulu terkena dampak dari Google Update Alogaritma Per Bulan September ? Untuk kamu yang memakai Platform…

Rekomendasi Plugin Caching WordPress Terbaik untuk Website

Catatan Shifa – Wajib kamu ketahui saat pertama kali migrasi dari platform blogger gratisan dari google pindah ke wordpress yang kategorinya hosting mandiri,dan harus mengerti plugin mana…

5 Situs Untuk Mengecek Kecepatan Website Anda

Untuk kamu seorang blogger atau pebisnis yang mempunyai website,sungguh ingin agar website begitu kencang agar pengunjung atau pembaca sangat senang dan tidak merasakan begitu lambatnya. Perlu di…

Toko Online Yang Menyediakan Program Affiliate Marketing

Affiliate atau Affiliasi merupakan sistem bisnis/memberikan komisi kepada seseorang apabila ada barang(produk) yang sukses terjual melalui link affiliate tersebut. Jadi gini,kita disini adalah sebagai orang yang tidak…

This Post Has 17 Comments

  1. makasih gan tutorialnya, ane udah pasang sih sebenernya…
    tapi ga melayang, dia cuma nempel di footer kalo nggak salah 😀
    ane praktekin dulu buat modifikasi tombol punya ane 🙂

  2. makasih gan tutorialnya, ane udah pasang sih sebenernya…
    tapi ga melayang, dia cuma nempel di footer kalo nggak salah 😀
    ane praktekin dulu buat modifikasi tombol punya ane 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *