Cara Membuat Persentase Scroll Keren Di Blog Dengan Css

Oke, kali ini saya akan mengshare sebuah tutorial tentang cara membuat scroll bar blog berpersentase. Selain untuk membuat blog semakin bagus dan unik, persentase ini juga bisa membantu visitor. Ingin tahu bagaimana cara membuatnya? Sama saya juga. Hehehe. Oke langsung saja, berikut ini adalah caranya.

Pertama, masuk ke dashboard blog kalian
Masuk ke Template, pilh Edit HTML

Kemudian masukkan kode di bawah ini di atas kode ]]></b:skin>

#scroll { display: none; position: fixed; top: 0; right: 20px; z-index: 500; padding: 3px 8px; background-color: #000;border:1px solid #007acc; color: #fff; border-radius: 3px; }

Keterangan :

Ganti kode yang berwarna BIRU dengan kode warna background yang kalian inginkan

Ganti kode yang berwarna MERAH dengan kode ukuran border yang kalian inginkan

Ganti kode yang berwarna ORANGE dengan kode jenis border yang kalian inginkan

Ganti kode yang berwarna UNGU dengan kode warna border yang kalian inginkan

Ganti kode yang berwarna PINK dengan kode warna tulisan yang kalian inginkan

Ganti kode yang berwarna KUNING dengan kode tingkat kelengkungan border yang kalian inginkan

Kemudian, masukkan kode di bawah ini di bawah kode </head>

<div id='scroll'>

</div>

Masukkan script di bawah ini tepat di atas 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>

Terakhir tinggal disimpan

Bagaimana? Sukses? Tutorial ini saya dapat dari googling, untuk sumber saya kurang tahu. Sekian artikel kali ini. Semoga bermanfaat. Jika ada yang kurang jelas silakan tanyakan di komentar.

Cara Membuat Persentase Scroll Keren Di Blog Dengan Css

0 Response to "Cara Membuat Persentase Scroll Keren Di Blog Dengan Css"

Post a Comment