Wednesday, January 4, 2017

Membuat Tombol Back to Top di Blogger dengan Mudah

Membuat tombol back to top dengan mudah

Tombol back to top atau tombol kembali keatas adalah sebuah tombol yang berfungsi untuk mempercepat scrolling dari bawah ke atas di halaman blog. tombol back to top ini fungsinya mempermudah pengunjung untuk kembali ke bagian atas dari halaman yang mereka baca dari bawah ke atas. jadi jika pengunjung sudah membaca artikel kita sampai bawah halaman, apalagi postingan artikel kita lebih dari 2000 karakter, mereka tidak perlu scroll ke atas lagi, tinggal mencet tombol back to top, langsung otomatis scroll ke atas sendiri. wah bagaimana keren bukan ?

Pada Umumnya tombol back to top atau tombol kembali keatas bekerja secara otomatis muncul untuk kita klik ketika isi artikel sudah melebihi batas tinggi layar monitor. Artinya jika pengunjung sudah menscroll halaman blog kita, akan atomatis tombol back to top atau tombol kembali ke atas akan muncul di sudut kanan bawah. penasaran bukan cara membuat tombol back to top atau tombol kembali keatas ? langsung saja simak tutorialnya...

NB: Jika sudah ada tombol back to top di blog anda, slahkan hapus terlebih dahulu.

Cara Membuat tombol back to top atau tombol kembali ke aras dengan mudah



1. Silahkan login ke blog anda, dan pilih template lalu edit HTML
2. Nah anda akan menemukan kode-kode blogger yang sangat rumit, gunakan CTRL+F untuk mencari tag yang dibutuhkan.
3. Cari tag </head>, Copy kode di bawah ini dan  paste kan code di atas tag </head>


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

4. Copy lagi kode CSS dibawah ini dan pastekan kode di atas tag ]]></b:skin>

    .smoothscroll-top {
        position:fixed;
        opacity:0;
        visibility:hidden;
        overflow:hidden;
        text-align:center;
        z-index:99;
        background-color:#2ba6e1;
        color:#fff;
        width:47px;
        height:44px;
        line-height:44px;
        right:25px;
        bottom:-25px;
        padding-top:2px;
        border-radius:5px;
        transition:all 0.5s ease-in-out;
        transition-delay:0.2s;
    }
    .smoothscroll-top:hover {
        background-color:#3eb2ea;
        color:#fff;
        transition:all 0.2s ease-in-out;
        transition-delay:0s;
    }
    .smoothscroll-top.show {
        visibility:visible;
        cursor:pointer;
        opacity:1;
        bottom:25px;
    }
    .smoothscroll-top i.fa {
        line-height:inherit;
    }


5. Copy lagi kode Jquery dibawah ini dan paste kan di atas tag </body>


<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){

    $(document).on( 'scroll', function(){

        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });

    $('.smoothscroll-top').on('click', scrollToTop);
});

function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>

Bagaimana ? mudah bukan cara Membuat tombol back to top di blogger? Silahkan share ya, Semoga bermanfaat untuk anda, Sekian tutorial yang saya berikan ini, semoga bermanfaat :)

Artikel Terkait



Hallo, Para Blogger. Sebenarnya tujuan utama saya membuat blog ini hanya untuk mengingatkan terhadap materi saya sendiri. Jika anda tertarik dengan artikel ini silahkan, Semoga artikel ini bermanfaat untuk anda.

Mohon Maaf Komentar yang TIDAK SESUAI dengan ISI POSTINGAN, Link Aktif, SARA & SPAM, Akan tidak MUNCUL dan di anggap SPAM. Silahkan berkomentar dengan Baik !!
EmoticonEmoticon