Tombol Back To Top ialah sebuah tombol kecil yang kembali ke atas dikala di klik, tombol ini merupakan salah satu fungsi yang diharapkan oleh sebuah blog atau website. Tombol kali ini dibentuk dengan gambar dan tanpa memakai font awesome.
Tombol back to top mempunyai peranan yang sangat penting untuk sebuah blog atau website dengan konten yang berat, mempunyai halaman yang memanjang kebawah dan mempunyai banyak isu pada halamannya. Jika tidak maka akan menciptakan konten-konten lain terlewati.
Tombol ini akan melompat ke atas dengan gampang dan singkat, tanpa menggerakanya dengan mouse pada komputer atau dengan menggesernya untuk penggunaan pada smartphone. Ini ialah salah satu cara untuk mendorong pengguna menjelajahi lebih banyak konten di blog anda.
Jika saja sebuah blog sangat sulit untuk dijelajahi, maka akan menciptakan pengunjung segera berpindah kepada blog lainnya. Tombol back to top ini tidak mensugesti loading blog dan kompatibel untuk semua browser/peramban.
Nah untuk membuatnya anda sanggup 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBtxItzdbU-Rov01FmHFucbsytqeoEDDvIc-62TE3_P4fr6VqpTWmumgFNldXpRpmdSTxlN8e8HcA4qFuat1CCC75Xon4yZI3vByhOsg45tNXBQrJ24-8ynEf-pIxFTFFw6HSdLH1nHGGE/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 galau dengan peletakan isyarat HTML nya, anda sanggup lihat referensi 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBtxItzdbU-Rov01FmHFucbsytqeoEDDvIc-62TE3_P4fr6VqpTWmumgFNldXpRpmdSTxlN8e8HcA4qFuat1CCC75Xon4yZI3vByhOsg45tNXBQrJ24-8ynEf-pIxFTFFw6HSdLH1nHGGE/s1600/btp.png' title='Back To Top' width='22'/></span></div> Copyright © <span id='current-year'/> <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a><br/> </div></div>Dengan isyarat diatas anda pun sanggup mengubah url gambar diatas sebagaimana mestinya sesuai keinginan.
Demikian Tutorial Membuat Back To Top Button Di Tengah Footer Kali ini, Selamat siang & Happy lunch.