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.
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)#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>
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.
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.
Comments
Post a Comment