Cara Membuat Efek Persen % Pada Scrollbar Blogger

Cara Membuat Efek Persen % Pada Scrollbar Blogger. Scroolbar merupakan salah satu alat yang dipakai sebagai pengontrol pada blog yang berguna untuk melihat bagian - bagian blog seperti atas,tengah,bawah postingan. scrollbar ada karena halaman yang ditampilkan di blog terlalu banyak dan tidak muat dalam satu halaman sehingga harus ada yang namanya scrollbar.

Cara Membuat Efek Persen % Pada Scrollbar Blogger

Ada 2 tipe scrollbar yang ada pada blog 

1. scroll bar vertikal. ini biasanya dipakai untuk melihat postingan yang tidak terlihat ke bagian atas bawah halaman.

2. scroll bar horizontall. ini biasanya di pakai untuk melihat postingan yang tidak terlihat pada bagian kanan kiri halaman.


untuk kesempatan kali ini saya ingin berbagi terkait style atau gaya scroll bar vertikal dengan ada keterangan berapa persen halaman telah dibuka atau di baca. langsung ikuti saja yuk biar gak terlalu lama.

Cara Menambah Keterangan Persen Pada Scrollbar Blog


1. Copy seluruh Kode di bawah ini
<style>
#bosarik{padding:3px 8px;border-radius:3px;display:none;position:fixed;background-color:#007bfd;color:#fff;top:0;right:10px;z-index:500;}
#bosarik:after{content:"";right:-7px;height:0;width:0;margin-top:-4px;position:absolute;top:50%;border:4px solid transparent;border-left-color:#007bfd;}
</style>
<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 - $('#bosarik').height() / 2;$('#bosarik').css('top',distance).text(' (' + Math.round(progress * 100) + '%)').fadeIn(100);if (scrollTimer !== null){clearTimeout(scrollTimer);}
scrollTimer = setTimeout(function(){$('#bosarik').fadeOut();}
,1500);}
);//]]></script>
<div id='bosarik'></div>
2. Masuk ke dashbor blogger pada menu tema (Edit Html)
3. Klik 1x Pada Bagian Html Tema yang terbuka. Tekan CTRL+F Pada Keyboard.

4. Tulis </body> pada kolom search: Pastekan kode yang kalian copy tadi tepat di atas kode </body>.
5. Simpan Tema kalian. 

Note : Jika Kalian Ingin Merubah Warna Yang Muncul di scrollbar agar serasi dengan tema blog kalian.

1. Cari Kode ( background-color:#0015FF;color:#fff)
2. Bagian background-color:#0015FF; = ini warna background persen pada blog.
Bagian kode color:#fff; adalah warna tulisan persen pada scrollbar.

Untuk Mendapatkan kode-kode warna kalian bisa masuk ke TOOL Kode Warna Pilih yang mana warna  yang sesuai dengan tema pada blog kalian.

Kesimpulan

Cara membuat efek pada persen pada scrollbar blogger sangatlah mudah tinggal kalian ikutin cara di atas dengan urut dan dapatkan tampilan blog yang lebih keren dengan ada efek persen. semoga bermanfaat dan terima kasih sudah membaca.

0 Response to "Cara Membuat Efek Persen % Pada Scrollbar Blogger"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel