Membuat dan Memasang Back To Top di Blog

Membuat dan Memasang Back To Top di Blog - Tombol back to top merupakan tombol yang di gunakan untuk memudahkan pengunjung atau pembaca blog yang ingin kembali ke bagian halaman paling atas blog dengan hanya mengklik satu tombol. Tombol ini biasanya terletak pada bagian pojok kanan bawah. Untuk lebih jelasnya, silahkan anda lihat tombol back to top di blog ini. Scroll sedikit ke bawah, supaya tombolnya keluar dan terlihat.

Bagaimana sobat? Saya yakin anda pasti sudah paham apa itu back to top dan apa manfaatnya untuk anda sendiri (owner blog) dan pengunjung blog. Selain untuk memudahkan pengunjung, back to top juga bermanfaat untuk memperkeren blog. Yuk kita langsung saja ke langkah-langkahnya.

Cara Membuat dan Memasang Tombol Back To Top di Blog

Ada dua cara memasang tombol back to top.

Tanpa edit HTML

1. Pertama-tama pastikan template anda sudah terdapat salah satu kode jquery dibawah ini.

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

atau

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

jika dalam template anda belum terdapat salah satu kode di atas, silahkan lakukan langkah-langkah berikut.

• Login ke dashboard blogger, pilih menu Template atau Tema, lalu klik Edit HTML.
• Cari kode </head> dengan cara klik pada kode template, lalu tekan Ctrl+F, isi dengan kode yang dicari kemudian tekan enter.

• Jika sudah ketemu, silahkan anda copy paste salah satu kode jquery di atas tepat di atas atau sebelum kode </head>.
• Klik Simpan Tema atau Template.

2. Masih pada dashboard atau menu blogger, pilih menu Tata letak atau Layout.

3. Klik Tambahkan Gadget di sidebar atau footer (terserah anda mau menambahkan gadget di bagian mana).

4. Pilih dan klik HTML/JavaScript.

5. Copy dan paste kode berikut ini ke dalamnya.

<style>
.mbw-back-to-top {
    position: fixed;
    bottom: 2em;
    right: 10px;
    text-decoration: none;
    padding: 1em;
    display: none;
    cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="http://2.bp.blogspot.com/-BkNGUImcIV4/USDcBMHYjqI/AAAAAAAAAig/qEtwRO4pH6Q/s1600/back+to+top.png" title='Back To Top' />
<script type="text/javascript">

jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.mbw-back-to-top').fadeIn(duration);
        } else { jQuery('.mbw-back-to-top').fadeOut(duration);
        }
    });
 
    jQuery('.mbw-back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});
</script>

Tulisan kode berwarna biru merupakan kode URL link gambar back to top. Anda bisa menggantinya dengan kode URL gambar yang lain sesuai dengan selera anda.

6. Terakhir klik Simpan.

Edit HTML

Cara yang kedua ini inshaAllah lebih ringan, responsive, dan cepat karena menggunakan font awesome.

1. Pertama-tama silahkan login ke dashboard blogger anda. Pilih blog yang akan ditambahkan tombol back to top. Pilih menu Template atau  Tema. Klik Backup/Pulihkan untuk berjaga-jaga. Lalu  klik Edit HTML.

2. Pastikan template anda sudah terdapat kode Bootstrap font awesome di bawah ini. Jika belum copy paste kode di bawah ini, di atas kode </head>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link>

3. Copy paste kode CSS berikut ini di atas kode ]]></b:skin> atau </style>

/* Back To Top */
#back-to-top{background:#E73037;color:#ffffff;padding:8px 10px;font-size:24px}
.back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}

4. Selanjutnya copy paste kode Jquery dan HTML berikut ini di atas kode </body>

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-chevron-up'/>
</a></div>
<script>           
$(window).scroll(function() {
if($(this).scrollTop() &gt; 200) {
$(&#39;#back-to-top&#39;).fadeIn();
} else {
$(&#39;#back-to-top&#39;).fadeOut();
}
});

$(&#39;#back-to-top&#39;).hide().click(function() {
$(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
return false;
});
</script>

5. Terakhir klik Simpan Template.

Demikian tutorial sederhana mengenai membuat dan memasang back to top di blog. Semoga bermanfaat. "Happy Blogging"

Related Posts :

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG