Tutorial Cara Membuat Back To Top Evo Magz

Dunia-Terbaru I Evo Magz merupakan sebuah template premium yang didesain oleh mas-sugeng dengan tampilan magazine yang sangat menarik dan responsive untuk google adsense, template yang dihargai 8$ ini memiliki keuntungan dalam tampilan baik untuk segi iklan ataupun yang lainnya. namun dalam template tersebut terdapat menu navigasi yang bisa kita terapkan dalam blog/website yang ingin kita pasangi kode tersebut tanpa mengurangi kecepatan blog. dan berikut ini adalah tutorial cara membuat back to top ala evo magz yang responsive dan tidak memberatkan kecepatan blog :

Tutorial Membuat Back To Top Evo Magz Untuk Blog/Website Anda

• Pertama-tama silahkan anda " Log-In " ke akun blogger anda masing-masing

• Kemudian silahkan anda pilih Template > Edit Html > Lalu Anda Masukan Kode Css Berikut Ini Tepat Diatas Kode " </Head> "

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

• Masih dalam edit Html, Silahkan anda cari dan tempatkan kode css berikut ini tepat diatas 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}

• Agar fungsi back to top dapat berjalan, silahkan anda tambahkan kode berikut ini 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>

• Lalu klik "Save Template" dan silahkan anda lihat apakah fungsi back to topnya berfungsi atau tidak

Note : Agar background back to top yang anda pasang ingin disesuaikan dengan tampilan blog anda maka silahkan anda ganti kode yang saya beri warna merah, kode atau script diatas bisa anda ganti/merubahnya agar bisa fast loading.

Nah Itulah bagaimana cara membuat back to top dengan simple serta fast loading yang akan menambah kecantikan blog anda, silahkan anda edit kembali kode css diatas apabila dirasa kurang enak karena font/css diatas merupakan font yang sudah disesuaikan dengan templatenya yaitu Evo Magz