Membuat Back To Top Smoot dan Elegan

Membuat Back To Top Smoot - Setiap template saat ini kebanyakan hampir satu paket dengan tombol back to top. Tapi jika template anda saat ini tidak ada tombol back to top dan ingin menggunakan maka saat ini saya memberi tahu caranya.
Apa manfaatnya ? banyak….. apa saja?
Salah satunya adalah penggulungan cepat kembali keatas halaman, jika pembaca merasa kurang dapat memahami isi dari artikel yang anda tulis padahal artikel anda itu tidak sedikit alias banyak pembaca cukup menekan tombol back to top yang telah anda sediakan.
Banyak cara atau tutorial yang telah dibagiakan para blogger mulai dari yang simple sampai yang agak ribet.
Dari sekian yang saya amati saya lebih suka memakai cara yang telah dibagikan oleh arlinadesign.com dengan cara yang simple tapi dengan hasil yang elegan.
Sebelum mempraktekkan ada baiknya template anda dibackup dulu untuk menghindari hal-hal yang tidak di inginkan seperti error tampilan atau hasil.
Atau jika tidak mau membackup berikan tanda pengenal kode sebelum kode ditulis seperti

<!- - Kode Start nama kode - - >
Isi kode
<!- - Kode End nama kode - - >

Jadi dengan pengenal diatas anda dapat cepat menghapus kode yang tidak ingin digunakan.
Berikut cara Membuat Back To Top Smoot dan Elegan ala arlina design yang telah dishare oleh sang empu blog. Bisa anda praktekkan pada template blog anda.

Langkah langkahnya adalah sebagai berikut :
1. Masuk Dasboard Blog
2. Pilih Template 
3. Dan Edit Html
4. Copas kode dibawah ini, letakkan kodenya diatas </head>

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

Catatan : Jika sudah ada kode tersebut pada template maka tidak usah di Kopas

5. Kopi kode CSS dibawah ini letakkan sebelum kode ]]></b:skin> atau </style>

.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;
}

6. Terakhir Kopi kode Jquery dan HTML dibawah ini dan letakkan sebelum kode </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>

7. Simpan template anda dan lihat hasilnya.

Sebagai catatan tidak semua template cocok dipasang kode back to top kadang ada yang berhasil dan kadang juga sebaliknya. Hal itu tergantung kita untuk melihat dan mengecek permasalahannya.
Jika anda kesulitan atau menemukan error pada pemasangan di template anda boleh meninggalkan komentar dibawah barang kali saya bisa sedikit membantu permasalahan anda dalam memasang kode pada template.
Jadi backup itu penting ketika kita memasang kode baru pada template untuk menghindari kegagalan memasang kode baru untuk di pasang pada template .
Demikian tutorial membuat Membuat Back To Top Smoot dan Elegan, semoga uraian kecil dan singkat ini bisa dipahami dan mudah dipraktekkan pada template anda.
Salam sukses para blogger Indonesia