Cara Pasang Tombol Back to Top di Blogger, Lengkap dan Responsif

0

GalaPos ID, Jakarta.
Di tengah persaingan platform konten yang semakin ketat, kenyamanan pengunjung blog menjadi nilai tawar penting. Salah satu fitur yang sering dianggap remeh tetapi digadang-gadang mampu memperbaiki pengalaman pengguna adalah tombol Back to Top—ikon kecil yang membantu pembaca kembali ke bagian atas halaman hanya dengan satu klik.

Tombol Back to Top, Fitur Sederhana yang Disebut Bisa Kurangi Bounce Rate
 

"Pengunjung blog kabur karena malas menggulir ke atas? Tombol kecil ini bisa jadi penyelamat pengalaman pengguna — dan mungkin reputasi blog Anda."

Baca juga:

Gala Poin:
1. Tombol Back to Top disebut mampu meningkatkan kenyamanan pengunjung serta menekan bounce rate.
2. Tersedia dua versi pemasangan: versi standar dan versi responsif yang lebih ringan, lengkap dengan CSS, HTML, dan JavaScript.
3. Pengguna dapat menyesuaikan warna dan tampilan tombol sesuai kebutuhan blog masing-masing.


“Bagi kamu yang ingin ada tombol back to top ini sangat berguna dalam meningkatkan kenyamanan pengunjung blog anda dan mengurangi bounce rate anda,” demikian ungkapan pembuat tutorial dalam panduan teknis ini. Meski sederhana, ia menilai tombol tersebut punya dampak signifikan terhadap perilaku pembaca.

Menurut penulis tutorial, desain tombol ini bersifat minimalis dan muncul di bagian kanan bawah halaman. “Walaupun tombol ini cukup sederhana, tetapi menurut Saya terasa sangat menarik dan minimalis,” ujarnya.

Fitur ini tidak hanya memudahkan pengunjung, tetapi juga menjadi elemen yang mendukung navigasi sebuah situs, khususnya blog dengan konten panjang.

Baca juga:
Kembung hingga Sakit Kepala, Efek Garam yang Sering Diabaikan

Langkah Memasang Tombol Back to Top

1. Login ke Blogger > Klik Template > Edit HTML > Tambahkan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>


/* Back To Top */
.backtotop{display:none}.backtotop{position:fixed;bottom:50px;right:0;cursor:pointer;font-weight:bold;box-shadow:-5px 5px rgba(0,0,0,.1);padding:10px;background-color:#fff;opacity:.6}.backtotop span{background-image:url(https://2.bp.blogspot.com/-QLZM-aUhB6w/VyL3AeOfEfI/AAAAAAAADBU/g6Ff-NvsU_c3ZZn3LM0luDDCRnQjzEK9wCLcB/s1600/icon.png);background-position:0 -272px;background-repeat:no-repeat;height:25px;width:22px;display:inline-block;vertical-align:middle;margin-right:5px }.backtotop:hover{opacity:1}


2. Setelah itu tambahkan kode di bawah ini tepat sebelum kode </body>

<div class="backtotop hide"><span></span>Atas</div>
<script type='text/javascript'>
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},800),!1})});
</script>


3. Terakhir simpan template dan lihat hasilnya.

Kode Lengkap Back to Top Blogger: Ringan, Responsif, dan Mudah Dipasang

 

Cara Memasang Tombol Back To Top Rensponsive Ringan
Peranan dan fungsi dari tombol back to top sendiri cukup penting yaitu memberikan kemudahan bagi pengunjung yang ingin mengscroll halaman kembali ke atas dengan hanya mengklik satu tombol.

Catatan : Jika di template sudah ada tombol back to top, silahkan hapus terlebih dahulu.

Berikut cara pemasangannya:
1. Login ke Blogger Dashboard > pilih blog > pilih Template > kemudian klik Edit HTML, simpan kode di bawah ini setelah <head> atau sebelum </head>

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


Jika di template anda sudah terpasang Fontawesome di atas, abaikan langkah pertama lanjut ke langkah berikutnya.

Baca juga:
Suka Minuman Manis Harus Dibatasi, Mengapa?


2. Simpan CSS di bawah 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;
}

 

Baca juga:
ARS University Perkuat UMKM Bandung Lewat Komunikasi dan Akuntansi 


3. Simpan jQuery dan HTML di bawah ini sebelum </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>

 

Baca juga:
Bencana Solok dan “Panggung” Jembatan Darurat

4. Setelah itu simpan template dan lihat hasilnya.

Result

Dengan tambahan efek bounce

<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>

Baca juga:
Melati Pertiwi, Enam Pahlawan Hidupkan Peran Perempuan Indonesia


Versi Pertama
Menyediakan langkah teknis untuk Blogger. Tahapan dimulai dari membuka menu Template dan mengedit HTML, lalu menambahkan kode CSS:

/* Back To Top */
.backtotop{display:none}...

Kode tersebut ditujukan untuk membentuk tampilan tombol, termasuk ikon kecil yang muncul ketika pengguna menggulir ke bawah. Setelah CSS disisipkan sebelum ]]></b:skin> atau </style>, pengguna diminta menambahkan elemen HTML dan JavaScript sebelum </body>:

<div class="backtotop hide"><span></span>Atas</div>
<script type='text/javascript'> ... </script>

Langkah terakhir adalah menyimpan template dan memeriksa hasilnya.

Baca juga:
Jumlah Korban Meningkat, 11 Wilayah Terdampak Bencana

Versi Lain: Tombol Back to Top Responsif dan Lebih “Ringan”
Dalam bagian selanjutnya, penulis memberikan alternatif pemasangan tombol yang diklaim lebih ringan dan responsif. Ia menjelaskan fungsi tombol ini:

“Peranan dan fungsi dari tombol back to top sendiri cukup penting yaitu memberikan kemudahan bagi pengunjung yang ingin mengscroll halaman kembali ke atas dengan hanya mengklik satu tombol.”

Namun, ia mengingatkan risiko duplikasi. “Catatan : Jika di template sudah ada tombol back to top, silahkan hapus terlebih dahulu.”

Versi kedua menggunakan Font Awesome, CSS tambahan, dan JavaScript sederhana untuk menampilkan tombol ketika halaman digulir lebih dari 100 piksel.

CSS dipasang sebelum ]]></b:skin> atau </style>:

.smoothscroll-top { position:fixed; opacity:0; ... }

Kemudian elemen HTML berikut ditempatkan sebelum </body>:

<div class="smoothscroll-top">...</div>
<script type='text/javascript'> ... </script>

Setelah disimpan, tombol akan muncul dan bergerak naik dengan animasi halus.

Baca juga:
Longsor dan Banjir Sumut, Alarm Mitigasi yang Terabaikan

Tambahan Efek Bounce
Bagi yang menginginkan dinamika lebih, penulis memberikan versi lain dengan efek bounce, memberikan sensasi tombol “memantul” saat diklik. Kodenya menggunakan rangkaian animasi jQuery:

$('html, body').animate({scrollTop: offsetTop}, 600, 'linear')
.animate({scrollTop:25},200)
.animate({scrollTop:0},150)...

Hasilnya membuat interaksi terasa lebih hidup.
Menutup tutorial dengan memberi kebebasan kepada pembaca untuk menyesuaikan tampilan tombol.
“Untuk setingan warna dan lainnya bisa anda edit kembali sesuai selera, sekian dari saya. Selamat pagi dan semoga bermanfaat. Terima kasih,” ujarnya.

Fitur sederhana ini mungkin tampak kecil, tetapi dalam konteks penggunaan blog, ia dapat menjadi perbedaan antara pembaca yang bertahan dan pembaca yang pergi.

 

 

Baca juga:
Inovasi Pembayaran BRI QRIS BRImo Kini Power-Up Sogo

"Panduan lengkap memasang tombol Back to Top responsif di Blogger. Artikel ini mengupas fungsi, kode, hingga langkah teknis pemasangannya, sekaligus menyoroti pentingnya fitur sederhana ini dalam menekan bounce rate dan meningkatkan kenyamanan pengunjung."

#GalaPosID #MediaPublikasiIndonesia #Blogging #Tips #UXDesign

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

Nasional

نموذج الاتصال