Cara Mudah Membuat Persentase di Scrollbar Blog, [SEOSangatMudah] - Hallo sobat blogger yang berbahagia Tips & Trik SEO, Posting yang saya unggah pada kali ini dengan judul Cara Mudah Membuat Persentase di Scrollbar Blog, [SEOSangatMudah] , Artikel ini bertujuan untuk memudahkan kalian mencari apa yang kalian inginkan, kami telah mempersiapkan artikel ini dengan baik untuk kalian baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel desain, Artikel tips trik blogging, yang kami tulis ini dapat kalian pahami dengan baik, semoga artikel ini berguna untuk kalian, jika ada kesalahan penulisan yang dilakukan oleh penulis mohon dimaafkan karena penulis masih newbie. baiklah, selamat membaca.

Judul : Cara Mudah Membuat Persentase di Scrollbar Blog, [SEOSangatMudah]
link : Cara Mudah Membuat Persentase di Scrollbar Blog, [SEOSangatMudah]

Cara Mudah Membuat Persentase di Scrollbar Blog, [SEOSangatMudah]

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

Lihat Demo Persentase ScrollBar di Blog

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!

Demikianlah Artikel Cara Mudah Membuat Persentase di Scrollbar Blog, [SEOSangatMudah]

Sekianlah artikel Cara Mudah Membuat Persentase di Scrollbar Blog, [SEOSangatMudah] kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Mudah Membuat Persentase di Scrollbar Blog, [SEOSangatMudah] dengan alamat link https://seosangatmudah.blogspot.com/2014/05/cara-mudah-membuat-persentase-di.html

Tweet