Cara Memasang Back To Top pada HTML Blog


Cara memasang tombol back to top pada HTML blog sangat mudah sama halnya artikel yang sebelumnya yang membahas "Cara Membuat Tombol Back To Top di Blog Dengan Mudah", namun sekarang saya akan menjelaskan bagaimana caranya supaya tidak disimpan pada widget melainkan langsung pada html template blog Anda yang akan dipasang.

Perbedaannya yang dipasang pada html blog, kode script harus dipisah antara script jQueri, style css dan script tombolnya. Pemasangannya tidak cukup sulit untuk dilakukan apabila Anda sudah paham script-script yang ada pada html sebuah blog. Namun apabila Anda belum mengerti tenang saya akan menjelaskannya bagaimana cara memasang tombol back to top tersebut pada html.

Cara Memasang Back To Top pada HTML Blog

Memasang Tombol Back To Top pada HTML Blog

  1. Sebelumnya pasang terlebih dahulu script yang wajid ada pada template blog Anda. Pada Dashboard blogger masuk ke "Template" > "Edit HTML" setelah itu masukan kode script berikut dibawah kode <head>.

  2. <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'/>
  3. Setelah script diatas sudah ada pada template blog, masih pada edit html Anda cari kode </body> atau </footer> dan setelah menemukan salah satunya masukan kode script berikut tepat diatasnya kode tersebut.

  4. <div class="back-to-top">Ganti Dengan Tombol Back To Top yang Anda Inginkan</div>
    <script type="text/javascript">
    /***www.bloggars.com-style***/
    jQuery(document).ready(function() {
        var offset = 1000;
        var duration = 700;
        jQuery(window).scroll(function() {
            if (jQuery(this).scrollTop() > offset) {
                jQuery('.back-to-top').fadeIn(duration);
            } else {
                jQuery('.back-to-top').fadeOut(duration);
            }
        });
        jQuery('.back-to-top').click(function(event) {
            event.preventDefault();
            jQuery('html, body').animate({scrollTop: 0}, duration);
            return false;
        })
    });
    </script>
    Catatan: Ganti kata yang berwarna merah dengan kode script tombol yang diinginkan.

    Baca juga "Cara Mudah Memasang Navigasi Page Number Pada Blog"

  5. Kemudian masukan kode css dibawah ini tepat diatas kode ]]></b:skin> atau dibawah kode <style type='text/css'> untuk style/desain tombolnya.

  6. /* Back To Top www.bloggars.com */
    .back-to-top{background:#ff6550;border:medium none;border-radius:50%;bottom:10px;cursor:pointer;display:none;height:50px;opacity:1;position:fixed;right:10px;text-align:center;width:50px;}
    .back-to-top:hover{box-shadow:1px 2px 3px 0 #666;}

  7. Setelah semua kode script yang saya berikan diatas disimpan pada html blog Anda, maka klik "Simpan template" dan lihat tombol back to top pada blog Anda sudah ada.
Baca juga "Cara Mudah Membuat Daftar Isi Otomatis Super Filter di Blog"

Kumpulan Tombol Back To Top Design BloggARs

Berikut adalah icon awesome yang sangat cocok untuk dijadikan tombol back to top untuk blog Anda. Namun pastikan terlebih dahulu bahwa template blog sudah terdapat stylesheet css untuk font awesome yang akan dipasang. Apabila belum masuk kembali pada "Template" "Edit HTML" dan masukan script berikut dibawah kode <head>.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
Script Icon pada tabel dibawah untuk menggantikan kata yang berwarna merah pada script back to top yang saya berikan diatas. Polihlah salah satu sesuai  yang Anda inginkan dan cocok dengan template blog. Namun untuk tombol lainnya Anda bisa mendapatkannya di artikel sebelumnya.
Icon Script Icon
<i aria-hidden="true" class="fa fa-arrow-circle-up" style="color: #fff; font-size:36px; padding-top:7px;"></i>
<i aria-hidden="true" class="fa fa-arrow-up" style="color: #fff; font-size:30px; padding-top:9px;"></i>
<i aria-hidden="true" class="fa fa-arrow-circle-o-up" style="color: #fff; font-size:36px; padding-top:7px;"></i>
<i aria-hidden="true" class="fa fa-chevron-circle-up" style="color: #fff; font-size:36px; padding-top:7px;"></i>
<i aria-hidden="true" class="fa fa-chevron-up" style="color: #fff; font-size:30px; padding-top:6px;"></i>
Selesai sudah penjelasan yang saya berikan yang membahas Cara Memasang Back To Top pada HTML Blog. Untuk desain lainnya misalkan warna ataupun icon Anda bisa mengubahnya sesuai keinginan. Terima kasih sudah membaca artikel ini bagikanlah artikel apabila dinilai dapat bermanfaat bagi orang lain.

Related Posts:

2 comments:

  1. ini mempengaruhi kecepatan blog nggk ya mas?

    ReplyDelete
    Replies
    1. Ringan kok kang, soalnya tidak menggunakan gambar melainkan icon dari javascript awesome yang sinkron digunakan.

      Delete

Beri komentar dengan menggunakan Bahasa yang Baik dan Sopan!
Didalam komentar dilarang mencantumkan link hidup dan apabila Anda melakukannya maka Admin berhak menghapusnya.

Powered by Blogger.