Back To Top Bagus dan Keren

Back To Top? Ya seperti namanya yaitu kembali ke top atau kembali ke atas. Buat apa? Biar pengunjung ga perlu cape -cape buat scroll ke atas atau ke judul lagi. Di postingan saya kali ini saya akan membuat tutorial membuat Back To Top Bagus dan Keren. bagaimana cara kerjanya? gampang kok...cuma 1x klik langsung kembali ke atas atau ke awal lagi deh. Oke tanpa basa basi lagi langsung aja. Berikut contoh dan tutorial membuatnya.
Screenshot Back To Top Bagus dan Keren :

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Template.
3. Silakan Edit HTML.

Prosese Pembuatan dan Pemasangan :

1. Temukan kode ]]></b:skin> atau </style>.
2. Copy&Paste kode berikut ini, dan Letakkan diatas kode ]]></b:skin> atau </style>.

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

3. Selanjutnya kita pasang Font Awesome.
4. Temukan kode </head>.
5. Copy&Paste kode berikut ini, dan Letakkan diatas kode </head>.

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

6. Terakhir, Temukan (CTRL+F) kode </body>.
7. Copy&Paste kode berikut ini, dan letakkan diatas kode </body>.

<!--Back To Top Bagus dan Keren Start-->

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>

<i class='fa fa-arrow-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>

<!--Back To Top Bagus dan Keren End-->

8. Simpan Template

Demikian tutorial atau cara membuat Back To Top Bagus dan Keren. Bila ada kesalahan jangan sungkan untuk berkomentar. Saya akhiri postingan Back To Top Bagus dan Keren. Sekian dari saya postingan kali ini. Share : Back To Top Bagus dan Keren.

• Bantu Donasi agar blog ini Update

• Tweet
• Share
• Share
• Share
• Share

Berlangganan via email (gratis):