Cara Membuat Persentase Scrollbar Pada Blogger

Usuluddin, S.Kom Senin, Januari 27, 2020 TUTORIAL

GoSEO.id - Pada kesempatan kali ini GoSEO.id akan memberikan sebuah tutorial yang dapat mempercantik halaman blog kamu. Tutorial ini ngga penting-penting amat hehe, yaitu "Cara Membuat Persentase Scrollbar Pada Blogger".

Kegunaan persentase scrollbar adalah menghitung persen besaran halaman postingan kamu pada saat melakukan scroll kebawah.

Kita langsung saja masuk ke tutorialnya.

Cara Membuat Persentase Scrollbar Pada Blogger

Login ke akun blogger.com milikmu.
Kemudian silahkan masuk ke menu Tema => lalu klik button Edit HTML.

Setelah itu cari kode ]]></b:skin> dan pastekan kode dibawah ini tepat diatas kode ]]></b:skin>.

/* Persentase Scrollbar */
#scrollPersentase {display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#ff69b4;color:#FFF;border-radius:3px}
#scrollPersentase:after {position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;}

Setelah kamu memasang kode tersebut, selanjutnya copy kode dibawah ini dan letakkan diatas <body>.
```
<div id='scrollPersentase'/>
```

Lalu, tambahkan juga kode javascript berikut dan letakkan diatas </body>.

<script type='text/javascript'>
/*<![CDATA[*/
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scrollPersentase').height() / 2;
$('#scrollPersentase')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scrollPersentase').fadeOut();
}, 1500);
});
/*]]>*/
</script>

Terakhir klik Simpan dan Selesai.

Bagaimana? Mudah bukan "Cara Membuat Persentase Scrollbar Pada Blogger"?

Jika ada yang tidak kamu mengerti silahkan tinggalkan komentar. Terima kasih.

Apakah kamu sudah membaca :
# Pentingnya Penggunaan Email Profesional Dalam Bisnis
# Cara Daftar Google News Untuk Blogger
# Memasang Widget Recent Post Blogger
# Embed Video Blogger Agar Responsive
# Meningkatkan Kecepatan Blog Dengan Cloudflare
# Perbedaan Visitor dan Unique Visitor Google Analytics
# Menghilangkan URL ?m=1 Blogger
# Membuat Press Release yang Baik dan Disukai Media
# Membuat URL Sumber Otomatis Blogger
# Membuat URL Shortener Dengan Javascript
# Cara Menghapus Spam Backlinks
# Mempercepat Loading Iklan Adsense Terbaru
# Media Sosial Sebagai Peningkat Traffic Bisnis
# Tutorial SEO Langkah Demi Langkah Untuk Pemula
# Cara Membuat Strategi Konten
# Rekomendasi SEO untuk YouTube
# Bagaimana Menghindari Kesalahan Informasi SEO
# Ebook Blogger Profesional, Adsense, FB Ads Serta SEO Terlengkap
# 10 Cara Menghasilkan Dari Blog Tanpa Google Adsense

Most Visited

Cara Membuat Persentase Scrollbar Pada Blogger

Cara Membuat Persentase Scrollbar Pada Blogger

0 Comments

Posting Komentar