» » » Baca ya : Cara Memasang Back To Top pada HTML Blog

Baca ya : Cara Memasang Back To Top pada HTML Blog

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

Perbedaannya yang dipasang pada html blog, isyarat 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 damai saya akan menjelaskannya bagaimana cara memasang tombol back to top tersebut pada html.

Cara memasang tombol back to top pada HTML blog Baca ya : 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" sehabis itu masukan isyarat script berikut dibawah isyarat <head>.

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

    3. <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 isyarat script tombol yang diinginkan.

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

  3. Kemudian masukan isyarat css dibawah ini sempurna diatas isyarat ]]></b:skin> atau dibawah isyarat <style type='text/css'> untuk style/desain tombolnya.

    4. /* 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;}

  4. Setelah semua isyarat 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 Praktis Membuat Daftar Isi Otomatis Super Filter di Blog"

Kumpulan Tombol Back To Top Design

Berikut yaitu 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 isyarat <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 sanggup 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 klarifikasi yang saya berikan yang membahas Cara Memasang Back To Top pada HTML Blog. Untuk desain lainnya misalkan warna ataupun icon Anda sanggup mengubahnya sesuai keinginan. Terima kasih sudah membaca artikel ini bagikanlah artikel apabila dinilai sanggup bermanfaat bagi orang lain.
Sumber http://www.bloggars.com/

Subscribe to receive free email updates:

0 Response to "Baca ya : Cara Memasang Back To Top pada HTML Blog"

Post a Comment

Subscribe to: Post Comments (Atom)