Membuat Back To Top Button Di Tengah Footer

Membuat Back To Top Button Di Tengah Footer

Tombol Back To Top adalah sebuah tombol kecil yang kembali ke atas ketika di klik, tombol ini merupakan salah satu fungsi yang diperlukan oleh sebuah blog atau website. Tombol kali ini dibuat dengan gambar dan tanpa menggunakan font awesome.

Tombol back to top memiliki peranan yang sangat penting untuk sebuah blog atau website dengan konten yang berat, memiliki halaman yang memanjang kebawah dan memiliki banyak informasi pada halamannya. Jika tidak maka akan membuat konten-konten lain terlewati.

Tombol ini akan melompat ke atas dengan mudah dan singkat, tanpa menggerakanya dengan mouse pada komputer atau dengan menggesernya untuk penggunaan pada smartphone. Ini adalah salah satu cara untuk mendorong pengguna menjelajahi lebih banyak konten di blog anda.

Jika saja sebuah blog sangat sulit untuk dijelajahi, maka akan membuat pengunjung segera berpindah kepada blog lainnya. Tombol back to top ini tidak mempengaruhi loading blog dan kompatibel untuk semua browser/peramban.

Nah untuk membuatnya anda bisa terapkan beberapa langkah di bawah ini

Membuat Tombol Back To Top


Buka template editor, tambahkan CSS, Javascript dan HTML Berikut:

/* Back To Top */
#backtotopid {position:relative;display:table;clear:both;text-align:center;margin:20px auto;}
.backtotopid {color:#fff;}
#backtotopid span {display:block;background:#4b5862;width:48px;height:48px;line-height:45px;border-radius:100%;cursor:pointer;transition:all .3s}
#backtotopid span:hover {background:#5c6b77;}
#backtotopid img{text-align:center;line-height:normal;vertical-align:middle;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user2-select:none;pointer-events:none;}

<script type='text/javascript'>
// Back to Top
$('.backtotopid').click(function(){$('html,body').animate({scrollTop:0},600);return false;});
//]]>
</script>

<div class='backtotopid' id='backtotop' title='Back to top'><span><img alt='Back To Top' height='14' src='http://3.bp.blogspot.com/-3uiiau4bwvs/VdEDQ2MVImI/AAAAAAAAK3s/xPhBH9BAJnI/s1600/btp.png' title='Back To Top' width='22'/></span></div>

Keterangan:
1. CSS letakan diatas </style>
2. JavaScript letakan diatas </body>
3. HTML letakan antara tag footer

Jika anda bingung dengan peletakan kode HTML nya, anda bisa lihat contoh dibawah ini:

<div id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
<div id='footer'>
<div class='footer-navigation'><ul>
<li><a href='#' title='Formulir Kontak'>Contact</a></li>
<li><a href='#' title='Disclaimer'>Disclaimer</a></li>
<li><a href='#' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='#' title='Daftar Isi Blog'>Sitemap</a></li>
</ul>
</div>
<div class='backtotopid' id='backtotopid' title='Back to top'><span><img alt='Back To Top' height='14' src='http://3.bp.blogspot.com/-3uiiau4bwvs/VdEDQ2MVImI/AAAAAAAAK3s/xPhBH9BAJnI/s1600/btp.png' title='Back To Top' width='22'/></span></div>
Copyright &#169; <span id='current-year'/> <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a><br/>
</div></div>

Dengan kode diatas anda pun dapat mengubah url gambar diatas sebagaimana mestinya sesuai keinginan.

Demikian Tutorial Membuat Back To Top Button Di Tengah Footer Kali ini, Selamat siang & Happy lunch.
Advertisement
Advertisement

Artikel Terkait

CEO sekaligus Content Specialist di trikricky.com. Jangan lupa bahagia.