-->
IBX5824722692B28

Cara membuat tombol Back to Top di Blog

Cara membuat tombol Back to Top di Blog -  Tombol "Back to Top" memudahkan user atau pengunjung kembali ke bagian atas blog, dalam satu klik, tanpa harus men-scroll mousenya atau "mengusap-usap" jarinya di "touch pad" atau layar SmartPhone-nya. Nah, dengan adanya  tombol "Back to Top" ini, sobat tinggal "klik" dan tampilan bagian atas blog akan tersaji secara otomatis.
 Cara membuat tombol Back to Top di Blog

Cara Membuat Tombol Back to Top



1. Pastikan di template blog sobat sudah ada kode jquery, yaitu kode seperti ini:

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

Atau seperti ini:

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

jika belum ada, lakukan langkah seperti ini:
- Template > Edit HTML
- Cari (CTRL+F) kode </head>
- COPY salah satu kode tersebut dan PASTE di atas kode </head>  tadi.
- Save!

2. Klik "Layout" (Tata Letak)
3. Klik "Add Gadget" di Sidebar
4. Pilih "Javascript/HTML"
5. Copy dan Paste kode berikut ini:

 <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/-36z7H3mWlZ0/USDizr47anI/AAAAAAAAAjU/8SoPm-odD7I/s1600/back_to_top_button.png" />
<script type="text/javascript">
/*****mybloggersworld.com***/
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 { //www.mybloggersworld.com
            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>

Kode yang berwarna merah adalah url image "Back to Top". sobat bisa menggantinya dengan gambar lain sesuai dengan selera sobat. 

6. Terakhir Save template dan Lihat Hasilnya !!

Itulah urutan bagaiman  Cara membuat tombol Back to Top di Blog, Semoga bermanfaat dan bisa anda terapkan di blog masing-masing.


Judul: Cara membuat tombol Back to Top di Blog; Ditulis oleh Pusat Baclink; Rating Blog: 5 dari 5

0 Response to " Cara membuat tombol Back to Top di Blog"

Post a Comment