-->

Situs Multi Pengetahuan Meliputi Pendidikan, Informasi Teknologi, Tutorial, Serta Pengetahuan Penting Lainya

Membuat Tombol Back To Top Ala Evo Magz Terbaru

Membuat tombol kembali keatas dengan efek tertentu mungkin sudah banyak sekali yang membagikan tips trik tersebut. Tetapi menurut saya yang membagikan cara membuat tombol back to top seperti pada template Evo Magz itu jarang sekali.

Nah, untuk itu saya akan membagikan cara sederhana, agar kita bisa membuat tombol kembali keatas seperti template Evo Magz buatan mas sugeng ini. Bagi anda yang belum tahu apa itu back to top, tombol back to top biasanya terletak disamping tampilan blog sebelah bawah.

Ya.. namanya saja Back to top, Langsung saja kita menuju kepembahasan bagaimana cara simple membuat tombol tersebut. Untuk contoh tombol bisa anda lihat pada gambar dibawah ini:
Back To Top Ala Evo Magz

1. Letakkan kode dibawah ini tepat diatas kode </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
2. Kemudian tambahkan CSS dibawah ini tepat sebelum kode </style> atau ]]><b:skin> 
#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}
3. Setelah itu kita tambahkan kode terakhir ini, tepat diatas kode </body> paling bawah
<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> 
 4. Simpan template, dan setelah itu lihat hasilnya!

Jika pengaturan sudah tersimpan, cobalah anda lihat hasilnya, untuk melihatnya, anda bisa menscroll kebawah, tombol ini berada dibawah sebelah kanan blog anda. Jika ada berarti anda telah berhasil melakukan langkah-langkah Membuat Tombol Back To Top Ala Evo Magz Terbaru ini.

Sekian terlebih dahulu tutorial saya kali ini, semoga bermanfaat. Jangan lupa bagikan artikel ini keteman anda. Terima kasih.

Previous
Next Post »

4 komentar

Wong Crewchild delete March 7, 2015 at 11:37 AM

bentuknya simple, boleh juga neh untuk ngganti yg ada sebelumnya

Raja Online delete March 7, 2015 at 2:13 PM

Selain simple, lebih unyu juga ya gan :D

KSP LESTARI delete March 25, 2015 at 11:04 AM

keren tombolnya gan. sederhana sekali...

Pengobatan Herbal Gagal Jantung delete May 14, 2015 at 3:44 PM

Terimakasih banyak mas, bagus nih, bisa saya coba..

Apa tanggapan anda tentang artikel diatas?

 

Contact Form

Name

Email *

Message *