30 January 2015

Cara Membuat Tombol Back To Top

Kembali ke atas itu kata lain dari Tombol Back to Top, Fungsi Tombol Back to Top berguna untuk mempercepat pembaca artikel blog supaya tidak direpotkan dengan scroll keatas

Mungkin artikel tentang membuat tombol back to top atau kembali keatas ini sudah banyak berkeliaran di luar sono , tapi kali ini admin memutuskan untuk tetap membuat artikel ini, siapa tahu ada mantan-mantan pacar Mas Hidayatd dulu ada yang belum tahu he..he.. he.., dan mungkin juga suka dengan tombol yang admin sediakan disini.
Contoh demonya seperti blog ini, sebelah kiri bawah..

cara-caranya ikuti saja seperti penjelasan di bawah ...monggo...

letakkan kode CSS berikut ini di atas kode */]]></b:skin>


/*---back to top bikinan Mas Hidayatd---*/
#back-to-top {}
.back-to-top {
position:fixed !important;
position:absolute;
bottom:10px;
right:10px;
z-index:999;
}

kemudian copas kode script berikut di atas kode </body>

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'><img src='http://1.bp.blogspot.com/-78pHff3PtJ0/VMxp9zSexNI/AAAAAAAABZs/twysVs0-Cf4/s1600/back_to_top_bikinan_mas_hidayatd.png'/>
<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>


silahkan ubah warna Back to top yang kalian sukai dengan mengganti tulisan

<img src='http://1.bp.blogspot.com/-78pHff3PtJ0/VMxp9zSexNI/AAAAAAAABZs/twysVs0-Cf4/s1600/back_to_top_bikinan_mas_hidayatd.png'/>

pada baris nomer satu diatas

warna biru
<img    src='http://1.bp.blogspot.com/-78pHff3PtJ0/VMxp9zSexNI/AAAAAAAABZs/twysVs0-Cf4/s1600/back_to_top_bikinan_mas_hidayatd.png'/>

warna hijau
<img    src='http://1.bp.blogspot.com/-j_acKAWqW6U/VMxsyhT2lDI/AAAAAAAABZ4/oIoo7W_ocNs/s1600/back_to_top_001_bikinan_mas_hidayatd.png'/>

warna oranges
<img    src='http://3.bp.blogspot.com/-LfBX9Yy0M2Y/VMxs2clO1xI/AAAAAAAABaA/IDI56uq9Ijg/s1600/back_to_top_002_bikinan_mas_hidayatd.png'/>

warna hitam
<img    src='http://4.bp.blogspot.com/-lSCJzmzHm4E/VMxw_ziOw5I/AAAAAAAABaU/02sPQK1ROtM/s1600/back_to_top_003_bikinan_mas_hidayatd.png'/>


oky para pengunjung yang saya cintai ...preeeet
itulah secuil ilmu yang saya bagikan mudah-mudahan tidak bermanfaat ...ooops trimakasih ketemu lagi di posting berikutnya....
http://syarif-hidayatd.blogspot.com


EmoticonEmoticon