Home » Tutorial Blogging » Tips Membuat Tombol Back To Top Ala Evo Magz di Blog

Tips Membuat Tombol Back To Top Ala Evo Magz di Blog

Cara Sederhana Membuat dan Memasang Tombol Back To Top Ala Evo Magz di Template Blog anda- Ada banyak sekali macam - macam tombol back to top , namun kali ini saya akan share membuat back to top seperti template evo magz mas sugeng . mengapa saya memilih untuk back to top ala evo magz ? karena back to topnya itu lho ringan banget dan menggunakan sedikit sekali kode java script

Scroll to Top atau yang biasa di sebut back to top merupakan sebuah widget dimana ketika kita menekan tombol tersebut maka secara otomatis kita akan kembali lagi ke bagian atas , untuk lebih jelasnya silahkan tekan tombol back to top saya [ jika masih terpasang ]

Berikut Cara Membuat Tombol Back To Top Ala Evo Magz di Blog

Pertama kita pasang dulu css font awesome , karena back to top ini menggunakan font awesome.
Caranya pasang kode javascript berikut dan letakan diatas kode </head>
```
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
```

Kemudian pasang css dibawah ini tepat diatas ]]></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}

Setelah itu kita panggil back to topnya dengan memasang html dan javascript dibawah ini dan letakan diatas 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>

Terkahir simpan Template dan lihat hasilnya

Taraa kini anda sudah berhasil Membuat Sekaligus MemasangTombol Back To Top di Template Blog anda yang mirip evo magz . untuk mengeceknya silahkan anda lihat di sebelah pojok kanan bawah , adakah tombol back to topnya ? jika ada bearti anda berhasil menerapkan tutorial ini