Cara Membuat Tombol Back To Top Responsive ala Bakul Oreg

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

Banyak cara untuk membuat atau memasang tombol back to top di blog, tapi pada tutorial ini Bakul Oreg ingin berbagi cara membuat tombol back to top dengan Font Awesome. Contohnya bisa anda lihat pada blog ini (sederhana tapi keren kan hhhh)

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

Silahkan ikuti langkah - langkah berikut ini:
Cara pertama

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

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

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

2. Pasang kode css di bawah ini, tepat diatas kode ]]></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 kode di bawah ini, tepat di atas kode </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 kode terpasang dengan benar. Jika tombol back to top muncul di bagian kanan bawah, itu artinya anda telah berhasil memasang tombol back to top.

4. Sebelum di simpan sebaiknya anda klik Format template dulu, agar kode javascript bisa berfungsi dengan baik, setelah template terformat baru klik simpan template.

Cara kedua :

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

Untuk langkah 1 dan 2 sama seperti pada cara pertama, setelah itu klik simpan template.

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

Catatan :
Jika tombol Back To Top langsung muncul ketika halaman blog dibuka, itu artinya di dalam template anda belum memiliki baris kode berikut :

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

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

Bagi anda yang menggunakan 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, lalu klik simpan.

Langkah selanjutnya anda klik edit html, cari kode widget back to top (disini kegunaan memberi judul pada widget yaitu untuk memudahkan pencarian), setelah ketemu tambahkan kode 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 kode akan menjadi seperti 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.