Cara membuat Epek Persen di bagian Scroll bar di blog

adscblog

Memang banyak benar kreasi para blogger ini yang di terapkan di template nya selain keren keren juga unik unik dan salah satu nya yaitu cara membuat efek persen pada bagian Scrol bar yang berada di bagian kanan komputer kita,yang dimana scroll tersebut kita naik kan ataupun kita turunkan maka disitu akan terdapat sekian persen terlihat

Maka dengan demikian template blog yang anda miliki akan semakin keren dengan pemasangan Scroll bar ini,dan saya juga ketika mengunjungi blog lain nya sudah banyak yang pakai efek ini dan keren juga di pasang di beberapa blog yang saya kunjungi maka dengan demikian saya mencari informasi bagaimana cara pembuatan efek scrol bar sehingga saya share blog saya ini

Efek Persen ini akan terlihat ketika para pengunjung yang menggunakan komputer menaik kan ataupun menurunkan Scroll Bar yang berada di bagian kanan komputer,tetapi jika kita diam maka efek persen tersebut akan menghilang sendiri nya sangat unik bukan

Cara membuat Efek Persen pada Scroll blogger

Cara pembuatan Efek persen ini tidak terlalu sulit anda hanya perlu menyisipkan kode di bawah ini di template anda maka dengan begitu anda akan memiliki Efek persen ini di blog sobat dan blog sobat pun akan menjadi keren

Untuk pembuatan nya silahkan anda ikuti langkah langkah di bawah ini

• Silahkan anda masuk ke blogger anda
• Setelah itu masuk ke template dan kemudian edit html
• Pada bagian edit html silahkan anda cari </b:skin> dan kemudian letakan kode css berikut sebelum kode tersebut,dan untuk mempermudah sobat blogger untuk mencari kode </b:skin> tersebut silahkan anda tekan Ctrl+F secara bersamaan,dan letakan kode berikut sebelum kode tersebut

 #scroll {
display: none;
position: fixed;
top: 0;
right: 10px;
z-index: 500;
padding: 3px 8px;
background-color:#1e598e;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: " ";
position: absolute;
top: 50%;
right: -7px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: rgb(139, 175, 28);
}
@media screen and (max-width:600px){
#scroll{
display:none;
}}

• Langkah selanjut nya silahkan anda cari lagi kode </body> lalu letakan kode berikut sebelum kode tersebut

  <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>
<div id='scroll'/>

• Kemudian Save template dan lihat hasil nya

Nah dengan demikian di Scroll blog sobat akan terdapat Efek Persen yang dimana efek persen tersebut akan muncul ketika para pengunjung menaik kan ataupun menurunkan Scroll bar di blog di bagian kanan komputer anda.selamat mencoba

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 13 November and have 0 komentar