Home / desain / tips trik blogging / Cara Mudah Membuat Persentase di Scrollbar Blog

Cara Download Cara Mudah Membuat Persentase di Scrollbar Blog Update Terbaru

Sedikit Info Seputar Cara Mudah Membuat Persentase di Scrollbar Blog Terbaru 2017 - Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Cara Mudah Membuat Persentase di Scrollbar Blog, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang Artikel desain, Artikel tips trik blogging, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Cara Mudah Membuat Persentase di Scrollbar Blog Terbaru
link: Cara Mudah Membuat Persentase di Scrollbar Blog

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi Cara Mudah Membuat Persentase di Scrollbar Blog Terbaru dan Terlengkap 2017

Cara Mudah Membuat Persentase di ScrollBar Blog – Hampir 2 bulan lebih saya tidak posting di blog yang berdebu ini, hehehe… Kali ini saya akan berbagi tips mengenai cara membuat efek persentase di scrollbar blog. Maksudnya? Widget persentase ini akan berada di sebelah scrollbar, dan menunjukkan berapa persen scrollbar telah digulung. Jika Anda masih bingung, berikut ini tampilannya. :

Preview widget persentase yang sudah dipasang di scroll bar blog. Menarik bukan? (Gambar tidak terlihat? Klik kanan tulisan ini, dan pilih 'Reload Image!')


Widget persentase ini akan terlihat menarik apabila Anda mengkombinasikannya dengan scrollbar keren yang cara membuatnya sudah pernah saya bahas di postingan sebelumnya. Oh, iya, saya ucapkan juga terima kasih kepada pemilik blog blog45apik.blogspot.com, yang telah membagikan script widget persentase di blog. Oke, berikut ini cara mudah  membuat efek persentase di scrollbar blog.

1.     Pertama, login ke Blogger, dan pilih blog yang ingin Anda beri widget persentase scrollbar.
2.     Masuk ke bagian Template.
3.     Backup dulu template blog Anda. Lihat disini jika Anda tidak mengetahui caranya. Lalu, klik Edit HTML.
4.     Tekan CTRL + F, dan cari kode ]]></b:skin> (klik disini jika Anda tidak mengetahui cara mencari kode), lalu copy dan pastekan kode berikut tepat diatas / sebelum kode ]]></b:skin>
#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #FF8000;
  color: #fff;
  border-radius: 3px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: #FF8000;
}
Catatan :
Ganti kode 20px untuk mengubah jarak antara persentase scrollbar dengan scrollbar blog
Ganti kode #FF8000 untuk mengubah warna persentase scrollbar.
Ganti kode #fff untuk mengganti warna angka yang ditampilkan dalam persentase scrollbar.
Jika Anda tidak hapal kode HTML warna, silahkan cek disini.
5.     Selanjutnya, cari kode </head>, dan pastekan kode berikut tepat dibawah / sesudah kode </head>
<div id='scroll'></div>
6.     Terakhir, cari kode </body>, dan pastekan script dibawah ini DIATAS / SEBELUM 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>
7.     Sebagai penutup, silahkan klik Simpan / SaveTemplate untuk menyimpan perubahan. Buka blog Anda untuk melihat persentase pada scrollbar ini.

Bagaimana, mudah bukan? Terima kasih atas share dan + 1 yang Anda berikan. Tolong pula Invite saya di Google Plus. Selamat mencoba tutorial cara memasang efek persentase pada scrollbar di blog, dan salam Blogger!

Itulah sedikit Artikel Cara Mudah Membuat Persentase di Scrollbar Blog terbaru dari kami

Semoga artikel Cara Mudah Membuat Persentase di Scrollbar Blog yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Cara Mudah Membuat Persentase di Scrollbar Blog

Share this