Cara Memasang Tombol Back To Top Pada Blog

Cara Memasang Tombol Back To Top Pada Blog

Tombol Back To Top ini berfungsi sebagai pintasan untuk para pembaca blog agar bisa kembali ke halaman awal atau halaman atas dengan cepat yaitu dengan hanya sekali klik saja. Tutorial kali ini bukan saya yang menemukannya melainkan saya hanya rewrite dari salah satu artikel mbak arlina.

Note: Jika Sebelumnya anda sudah mempunyai fungsi tombol ini namun ingin merubahnya harap code yang lama di timpa dengan code yanga akan saya bagikan berikut ini.

Pasang Tombol Back To Top Di Blog

1. Login ke akun blog anda > Masuk ke menu template > Klik edit html, dan pastekan script berikut ini diantara <head> dengan </head>.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Kalau Sebelumnya memang sudah ada, anda tidak perlu lagi menambahkannya karena tak ada gunanya dan menambah ukuran html template saja.

2. Selanjutnya tambahkan kode CSS berikut ini Sebelum ]]></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;
}
3. Terakhir Untuk Memunculkannya pada blog anda perlu menambahkan script jQuery dan HTML berikut ini sebelum code </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>
4. Sekarang anda sudah bisa melihat hasilnya dengan cara klik simpan template.

5. Untuk anda yang suka dengan tampilan yang profesional anda bisa menambahkan efek bounce pada tombol tersebut dengan cara kode yang ada pada langkah nomor 3 ditimpa dengan script berikut ini.
<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').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

Nah, itu dia tadi tutorial mengenai cara membuat tombol kembali ke atas dengan efek untuk anda yang peduli dengan kenyamanan para pembaca setia anda.

Credit :
Images From : Arlina Design

Comments

Post a Comment

Popular posts from this blog

Investasi Pada Reksa Dana Untuk Pemula

Image
Sebenarnya ada dua jenis investasi, yakni riil dan non riil (investasi keuangan). Untuk investasi keuangan sendiri ada berbagai macam, mulai dari deposito, reksa dana, obligasi, dan saham. Jika Anda tertarik pada investasi di sektor keuangan, anda bisa memilih instrumen yang sesuai dengan kebutuhan. Artinya pahami risikonya. Untuk Anda yang sama sekali belum pernah berinvestasi di instrumen tersebut, jangan takut dan mengurungkan niat hanya jika tidak tahu caranya. Untuk pemula anda bisa mencoba investasi pada reksa dana, karena dianggap sebagai investasi yang paling mudah dijangkau dan dilakukan oleh para investor pemula. Lalu apa saja yang harus anda lakukan saat ingin berinvestasi di reksa dana bagi Anda yang pemula tanpa rasa khawatir dengan modal yang juga terjangkau? Dan diabawah ini adalah tips berinvestasi di reksa dana yang aman: 1. Kenali Apa Itu Reksa Dana Banyak orang yang tidak mengetahui adanya reksa dana sebagai investasi mudah yang bisa dijalankan ole...
Read more

Cara Melihat Orang Yang sudah Membaca Pesan Di Gruop Whatsapp

Image
Oke selamat pagi para sahabat oprek semua, kembali lagi di website sumber tips and trick ini. Dan kali ini admin akan membagikan tips bagaimana cara melihat siapa saja yang sudah membaca pesan kalian pad group whatsaap. Whatsapp Langsung saja ke inti pembahasan agar kalian tidak bosan dengan pengulangan kata yang sering dilakukan oleh banyak blog hamba adsense di luar sana. Pesan di group whatsaap sudah dilihat semua belum ya ? Ini caranya 1. Pastikan di android atau iOs kalian sudah terinstall aplikasi Whatsaap massagger, jika belum silahakan download di playstore . 2. Pastikan jika anda sudah tergabung ke salah satu group whatsaap, karena kalau kalian belum punya tips ini tak ada gunanya, ya kan? 3. Buka aplikasinya, lalu tap beberapa detik pada pesan yang sudah kalian kirim sebelumnya, maka akan ada warna biru transparan yang akan menyelimuti pesan anda 4. Setelah itu tap pada tiga titk sejajar yang ada di sudut kanan atas 5. Biasanya akan muncul kotak dialog kecil yang memberikan p...
Read more

Pengalaman Diterima Adsense Full Approve

Image
Di dunia blogger sudah sangat terkenal sekali bahwa untuk menjadi publisher adsense  itu susahnya minta ampun. Sudah berbagai cara dicoba oleh banyak blogger dan hanya sedikit yang diterima. Dan kali ini, disini saya akan menceritakan pengalaman saya ketika pertama kali di terima adsense. 1. Kesan dan Perjuangan Saya ngeblog sudah hampir satu tahun mungkin, dan sudah membuat 3 blog serius yang dua sudah collaps dan yang satu masih bertahan. Bung Kamis Carimata Totumuh Diatasa adalah nama-nama blog yang sudah saya buat. Awalnya mau ngeblog dengan serius pakai bungkamis , semua sudah saya lakukan dari membangun pembaca di facebook, membuat laman facebook, promosi sana-sini untuk mendapatakan viewers. Lalu ketika saya rasa sudah mantap untuk mendaftar ke adsense, saat itu juga saya langsung daftarkan dan setelah beberapa hari peninjauan hasilnya adalah tidak diterima. Namun saya tidak menyerah dan mengulanginya lagi, tapi tetap saja tidak diterima. Se...
Read more