Cara Menciptakan Tombol Back To Top Responsive Ala

Baca Juga

Cara menciptakan / memasang tombol back to top responsive dengan Font Awesome ala - Apa itu tombol back to top? pastinya sampeyan sudah paham arti dan kegunaan fitur ini pada sebuah blog. Keberadan tombol yang satu ini sangat diharapkan bagi pengunjung blog untuk kembali ke halaman atas, apalagi kalau blog Anda mempunyai artikel yang sangat panjang dan ditambah lagi dengan banyaknya komentar, tentu tombol ini akan sangat berkhasiat sekali. Selain dapat untuk mempercantik tampilan blog, memasang tombol back to top juga dapat menciptakan blog anda menjadi user friendly.

Banyak cara untuk menciptakan atau memasang tombol back to top di blog, tapi pada tutorial ini ingin mengembangkan cara menciptakan tombol back to top dengan Font Awesome. Contohnya dapat anda lihat pada blog ini (sederhana tapi keren kan hhhh)

Kelebihan dari cara ini yaitu lebih ringan dan responsive alasannya yaitu gambar yang dimuat bukanlah berasal dari sebuah Url gambar, melainkan aksara (kode) yang mewakili sebuah icon (gambar).

Silahkan ikuti langkah - langkah berikut ini:
Cara pertama

Login ke Blogger >> pilih blog >> Template >> edit html.

1. Pasang isyarat bootstrapcdn Font Awesome tepat di atas isyarat </haed> (periksa dulu apakah isyarat tersebut sudah ada, kalau ada lewati langkah ini)

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

2. Pasang isyarat css di bawah ini, tepat diatas isyarat ]]></b:skin> atau </style>

#back-to-top{background:#53bd84;color:#ffffff;padding:8px 10px;font-size:24px;border-radius:6px}  .back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}

3. Pasang isyarat di bawah ini, tepat di atas isyarat </body>

<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 itu klik pratinjau template untuk memastikan semua isyarat terpasang dengan benar. Jika tombol back to top muncul di bab kanan bawah, itu artinya anda telah berhasil memasang tombol back to top.

4. Sebelum di simpan sebaiknya anda klik Format template dulu, supaya isyarat javascript dapat berfungsi dengan baik, sesudah template terformat gres klik simpan template.

Cara kedua :

Pada cara kedua ini kita akan menjadikannya sebagai widget back to top.

Untuk langkah 1 dan 2 sama menyerupai pada cara pertama, sesudah itu klik simpan template.

Selanjutnya anda klik tata letak >> +tambah gatget (terserah mau di bab sidebar atau footer) kemudian klik HTML/Javascript. Paste isyarat pada tahap 3 di atas (jangan lupa kasih judul untuk sementara). Lalu klik simpan.

Catatan :
Jika tombol Back To Top pribadi muncul dikala halaman blog dibuka, itu artinya di dalam template anda belum mempunyai baris isyarat berikut :

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Silahkan copy kemudian pastekan isyarat tersebut tepat diatas isyarat </head> kemudian klik simpan dan lihat hasilnya, kalau tombol Back To Top tidak ada dan gres muncul dikala halaman di scrool maka pemasangan tombol Back To Top telah sempurna.

Bagi anda yang memakai template standar dari blogger sebaiknya gunakan cara kedua, tombal ini hanya muncul pada tampilan web, untuk memunculkan pada tampilan seluler, ikuti langkah - langkah berikut :

Login ke Blogger >> pilih blog >> Template kemudian klik icon roda gigi dibawah tampilan seluler, selanjutnya pilih template khusus, kemudian klik simpan.

Langkah selanjutnya anda klik edit html, cari isyarat widget back to top (disini kegunaan memberi judul pada widget yaitu untuk memudahkan pencarian), sesudah ketemu tambahkan isyarat berikut : mobile='yes' dan jangan lupa simpan template.

Contoh :

<b:widget id='HTML6' locked='false' title='Back to top' type='HTML' visible='true'>

Setelah ditambah isyarat akan menjadi menyerupai ini :

<b:widget id='HTML6' locked='false' title='Back to top' mobile='yes' type='HTML' visible='true'>

Baca juga artikel Cara meningkatkan posisi SERP dengan meletakkan judul postingan di depan judul blog

Sekian tutorial cara memasang tombol back to top responsive dengan font awesome, semoga bermanfaat dan selamat mencoba.