Cara Membuat Persentase pada Scrollbar di Blog

Belajar SEO dan Blog Bagi pemula
Cara Membuat Persentase pada Scrollbar di Blog

Masih di Variasi Blogger share Cara Membuat Persentase pada Scrollbar di Blog cekidot , Silahkan sobat Copy Paste script  di bawah ini simpan di blog sobat

silahkan log in terlebih dahulu di blog sobat , klik Template >> klik Edit HTML >> kemudian cari kode ]]></b:skin> Kemudian Copy Paste kode Script dibawah ini dan simpan di atas kode tadi

#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: rgb(51, 51, 51);
  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: rgb(51, 51, 51);
}

Jika sudah Cari kembali kode </head> dan simpan kode dibawah ini sesudah kode tadi

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

satu langkah lagi silahkan cari kode </body> dan simpan kode script dibawah ini di atas kode tadi

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

Simpan Template dan lihat hasilnya , Semoga bermanfaat sobat oia untuk demonya sobat bisa lihat di Scrollbar blogs ini

SUMBER


Share to

23 Responses to "Cara Membuat Persentase pada Scrollbar di Blog"

  1. pertamaxx.., unik jg ya kayak lg ngukur apa gitu... heheh.., makasih *smile

    BalasHapus
    Balasan
    1. iya sob betul kaya ngukur - ngukur gimana gitu hehehe... :D

      Hapus
  2. Pengen coba dari dulu...cuma baru tau caranya di sini
    Thx ya mas :)

    BalasHapus
    Balasan
    1. ya sob silahkan semoga bermanfaat hehehe... :)

      Hapus
  3. dari tadi bingung nyari kolom komentarnya dimana... gimana kalau komentarnya dibuat supaya 'tertanda'

    BalasHapus
    Balasan
    1. bisa aja sob hehehe... itukan udah ada dipinggir posting untuk komentar :D

      Hapus
  4. ndari kemaren nyari2 nyang kaya beginian kaga nemu nemu taunya dimari... trims code code nya mas... lam kenal dari opik blog

    BalasHapus
    Balasan
    1. iya sob semoga bermanfaat :) dan salam kenal balik :D

      Hapus
  5. boleh nih dicoba ,, simple tapi penting :D

    BalasHapus
    Balasan
    1. silahkan sob semoga bermanfaat :)

      Hapus
  6. aduh form komentarnya masih di atas, aku suka pusing carinya hehe

    BalasHapus
    Balasan
    1. iya sob masih di atas hehehe... :D

      Hapus
  7. Anonim08:28

    Keren gan, seperti di blog ini ya?
    Wow,,

    BalasHapus
  8. agak bingung juga sih, tp mantep deh tipsnya.. thanks yah

    BalasHapus
    Balasan
    1. iya sob , semoga bermanfaat :)

      Hapus
  9. Balasan
    1. semoga bermanfaat sob hehehe... :)

      Hapus
  10. Balasan
    1. ya sob semoga bermanfaat , dengan memasang efect Persentase pada Scrollbar tersebut , agar lebih terlihat menarik di webs atau blogsnya :)

      Hapus
  11. makasih mas tutorialmya, salam :)

    BalasHapus
    Balasan
    1. iya sob sama - sama , semoga berhasil mensetting persentase pada scrollbarnya :)

      Hapus

Jika ada Tutorial Info Blog Indonesia ini, yang kurang dimengerti silahkan luangkan saja waktu anda untuk berkomentar, karena pertanyaan anda sangat berharga untuk perkembangan dan kemajuan blogs ini.

Soalnya diblogs ini adalah wadah untuk belajar mengenal webs/blogs, disini kita sama - sama belajar, seandainya anda adalah seorang pakar blogger profesional atau pakar seo indonesia bimbinglah saya, untuk menulis artikel berkualitas.

Oia sebelum menyisipkan script silahkan gunakan tools konversi terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar.

Terimakasih.. salam kenal dan salam hangat untuk blogger indonesia, yang selalu setia di Info blog Indonesia variasi blogger.

¯\(◕ ‿◕)/¯



convert TOS

Panduan, Bimbingan Cara Belajar Blogs dan Seo