-->
Selamat datang di website www.imamkunblog.com - Tempat Sharing Tips Trik Android, Komputer, Internet dll

Cara Memasang Efek Scroll Presentase di Scrollbar Blogger

Cara Memasang Efek Scroll Presentase di Scrollbar Blogger
Cara Memasang Efek Scroll Presentase di Scrollbar Blogger
Imamkunblog.com | selamat datang di imamkunblog pada artikel ini saya membuat artikel Tutorial Blogger lagi yaitu Cara Membuat Efek Scroll Presentase di scrollbar blogger. Dengan menambah efek scrollbar presentase maka tampilan blog anda jauh lebih keren dan menarik.

Manfaat memasang efek presentase pada scrollbar blogger yaitu dapat membantu para pengunjung blog seberapa juah mereka berada di halaman atau artikel yang sedang mereka baca. Efek ini sudah saya terapkan di blog saya ini untuk demo lihat saja pada scrollbar blog imamkunblog.

Tidak hanya memberikan efek scroll presentase tetapi juga mengubah scrollbar blogger anda jauh lebih keren dari biasanya yang putih tebal kini menjadi scrollbar kecil yang keren dan resposnive.

Presentase akan tampil pada saat anda melakukan scroll pada halaman blog. Presentase dimulai dari 0% hingga 100%, pada akhir artikel akan menampilkan 100% presentase. Sungguh membantu bukan?

Untuk memasang efek scroll presentase di scrollbar blogger hanya menggunakan kode CSS dan Javascript aja, nah bagaimana cara memasangnya? Silahkan ikuti berikut ini langkah-langkah memasang efek scroll presentase di blogger.

Cara Memasang Efek Scroll Presentase di Scrollbar Blogger


1. Pertama, login ke blogger.com > Theme/tema >Edit HTML.
2. Cari kode ]]></b:skin>, copy dan paste kode dibawah ini tepat diatas kode yang sudah ditemukan.

#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#008080;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}

3. Kemudian cari kode </body>, copy dan paste kode dibawah ini diatas kode body.

<div id='scroll'></div>

4. Copy dan paste lagi kode Javacript dibawah ini dan paste diatas kode </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 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
/*]]>*/
</script>
5. Terakhir, simpan Template!! dan Lihat hasilnya.

Begitulah cara memasang efek scroll presentase di scrollbar blogger. jika anda ingin mengubah warna pada efek scroll anda dapat mengubah kode background-color:#008080 dengan kode warna sesuai keinginan anda.

Baca Juga: Cara Membuat Reading Progress Bar di Blogger

Demikian artikel kali ini semoga bermanfaat dan apabila ada yang ingin anda pertanyakan silahkan anda berkomentar dibawah!!
Show comments
Hide comments

0 Response to "Cara Memasang Efek Scroll Presentase di Scrollbar Blogger"

Post a Comment

Berkomentar dengan Baik dan Jangan Buat Spam
1. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×