Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara membuat back to top di blog menggunakan android

 



Back to top kalau kata orang Indonesia mah..

Kembali ke atas...hehehe 

Tombol Back to top berguna untuk memudahkan seseorang pada saat membuka dan membaca halaman pada sebuah website atau blog untuk kembali ke halaman atas tanpa menggeser secara manual.


Back to top juga merupakan bagian persyaratan sebuah blog sebagai navigasi untuk membuat pembaca menjadi mudah dalam menjelajahi blog kita.


Nah... disini kita akan berbagi cara memasang tombol back to top pada halaman blog hanya menggunakan hp android saja 

" Emang bisa bang...??"


Bisalah... hehehe..


Langsung saja kita praktekkan ya..

Langkah pertama buka halaman blog di browser disini direkomendasikan browser nya pake crome ya..

  • Setelah di halaman blog pilih tema pada menu blog 


  • Setelah di tema selanjutnya klik tanda panah di bawah tulisan sesuaikan lalu pilih edit html.

  • Setelah di halaman edit html silahkan cari kode </head> lalu pastekan kode bootstrap font awesome ini 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link>

Tepat diatas kode </head>


  • Selanjutnya cari lagi kode ]]></skin> setelah ketemu silakan pastekan kode css di bawah ini tepas diatas  ]]></skin>

/* 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}



  • Selanjutnya cari lagi kode </body> setelah ketemu pastekan kode jquery dan html di bawah ini tepat di atasnya.

<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>



  • Setelah selesai jangan lupa save 


Sampai disini kita sudah berhasil memasang tombol Back to top di halaman blog hanya menggunakan hp android saja.

 terima kasih sudah berkunjung selamat mencoba dan semoga berhasil.







Posting Komentar untuk "Cara membuat back to top di blog menggunakan android"