Cara membuat Persentase Scroll blog

Assalamu'alaikum wr.wb

Memasang atau menambahkan persentase pada scroll blog memang membuat blog lebih menarik, oleh karena itu Anda bisa menggunakan cara ini untuk mempercantik tampilan blog Anda. Scrollbar yang saya buat pada blog ini banyak sekali variasinya, pada setiap Template Blog memang tidak semuanya menggunakan tampilan persen ini pada scroll blog tersebut karena ini tidak terlalu penting dalam sebuah SEO dan tidak akan mempengaruhi kualitas blog Anda, hanya akan mempercantik tampilannya saja, tadi apa boleh buat tidak ada salahnya untuk mencoba tutorial membuat persentase paba scroll blog ini. Oke langsung saja ke tutorial Cara Membuat Persentase Pada Scrollbar Blog, silahkan lihat dibawah ini :

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode script dibawah ini, lalu Paste diatas kode ]]></b:skin>


/* SCROLL PERSENTASE */

#scroll {

display: none;

position: fixed;

top: 0;

right: 5px;

z-index: 500;

padding: 3px 8px;

background-color: #4B4B4B;

color: #FFF;

border-radius: 3px;

}

#scroll:after {

position: absolute;

top: 50%;

right: -8px;

height: 0;

width: 0;

margin-top: -4px;

border: 4px solid transparent;

border-left-color: #4B4B4B;

}

Catatan :
- Kode yang berwarna Biru : Jarak dari scrollbar, semakin besar angka yang diberikan maka akan semakin jauh letaknya.
- Kode yang berwarna Orange : Merupakan tinggi dan lebarnya kotak persen
- Kode yang berwarna Merah : Warna background kotak persen
- Koda yang berwarna Kuning : Warna huruf pada kotak persen
- Kode yang berwarna Hijau : Memberikan efek melengkung pada kotak persen

Untuk mengganti warna silahkan kunjungi ini Kode Warna HTML

5. Cari kode <body>
6. Copy kode dibawah ini, lalu Paste dibawah kode <body>


<div id='scroll'/>

7. Cari kode </body>
8. Copy kode dibawah ini, lalu Paste diatas 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>

9. Cari kode </head>
10. Copy javascript berikut, lalu Paste diatas kode </head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>

Catatan :
Jika blog Anda sudah memiliki JavaScript seperti diatas, Anda tidak perlu memasangnya lagi. Tetapi untuk jaga-jaga lebih baik memasangnya saja.

Sekian artikel mengenai Cara Membuat Persentase Pada Scrollbar Blog. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

Blog Istrada

Sabtu, 12 Juli 2014

Cara membuat Persentase Scroll blog

Blog Istrada

Music

Blog Istrada

Sabtu, 12 Juli 2014

Cara membuat Persentase Scroll blog

Artikel Terkait

Blog Istrada

Music