Membuat persentase ketika scroll digulung

Javascript jQuery

Mungkin trik ini terbilang tidak penting untuk mendukung apa pun di dalam blog, namun untuk anda para sobat yang suka dengan kreasi dan menambah unik tampilan, persentase scroll bisa dipasang sebagai hiasan. Dengan menambahkan persentase scroll, pengunjung akan bisa melihat berapa persen halaman yang telah di scroll/ia gulung, jika penggulungan telah mencapai element batas maka di scroll akan muncul pensentase angka menjadi 100%.


Cara memasang scroll persentase pun tidak sulit, anda hanya perlu

Langkah 1 : Silahkan masuk ke akun Blogger dan pilih Template lalu Edit HTML. Copy dan pastekan kode dibawah ini di atas </style> atau ]]></b:skin>

#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #2187e7;
  color: #fff;
  border-radius: 3px;
}

#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: #333;
}

Langkah 2 : Copy kode berikut ini dan letakkan di bawah kode tag </head>

<div id='scroll'></div>

Langkah 3 : Paste JavaScript ini di atas kode tag </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>

Langkah 4 : Simpan Template.

Lihat hasilnya dengan buka halaman blog anda dan scroll/gulung halaman.

Semoga berguna dan berhasil....

Artikel Terkait

  • Memasang kode, gambar dan video di komentar
    Buat agan yang bingung dengan judul di atas sebenarnya adalah judul tentang cara menyisipkan dan mengijinkan kode, gambar dan video di komentar blogger. jadi kali ini kita akan membahas hal tersebut, karena saya pernah berkunjung ke sebuah blog yang memasang tool konversi kode tapi tidak memasang javascript ini jadi percuma juga menggunakan to…
  • Pencarian dengan tombol bersihkan
    Salah satu yang membuat blog kita menjadi user friendly adalah dengan adanya kotak pencarian, Kotak pencarian ini sangat penting untuk memudahkan pengunjung menjelajahi blog Anda atau mencari artikel lainnya di blog Anda. Fungsi kotak pencarian untuk saya sendiri adalah untuk mempermudah mencari posting yang akan saya tambahkan sebagai link i…
  • Navigation Menu dengan Efek jQuery
    Kali ini saya akan share Menu navigasi blogger, Menu navigasi adalah hal yang di perlukan sebuah blog untuk mengarahkan seorang pengunjung ke halaman tertentu. Menu navigasi yang bagus dengan tampilan yang menarik, tentu itu memberikan nilai plus tersendiri untuk tampilan blog anda sehingga menambah bagus dan cantik. Menu navigasi ini memilik…
  • Sidebar Menu Accordion jQuery
    Apa fungsi menu accordion? Salah satu fungsi dari accordion menu selain memperingkas tampilan widget yang ada di sidebar blog, juga dapat memperbagus blog anda, sama seperti pada fungsi menu tabber atau tab view, hanya saja gaya satau stylenya yang berbeda. jadi blog Anda akan kelihatan lebih ringkas dan rapi. Tutorial ini sudah saya buat se…
  • Membanned spamer di komentar dengan jquery
    Kali ini saya ingin berbagi buat sobat yang udah males dan capek menghapus komentar para spammer, yang satu ini palinf buat suasana jadi males dan menjengkelkan bila hadir di komentar blog kita. jquery ini bisa sobat gunakan untuk menghapus dan membanned para spamer tersebut dengan menghilangkan isi komentar juga link profile mereka agar user …
  • Membuat show hide konversi kode dan emoticon
    Salam buat agan agin sobat blogger yang suka utak atik template, kali ini saya mau share cara membuat show hide konversi kode dan emoticon pada komentar blogger bagi anda yang sedang mencari trik ini silahkan saja untuk di simak. pertama buka editor template blogger lalu tambahkan css di bawah ini .box-konvert-kode-db { width:100%; …

Tidak ada komentar :


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Back to Top
Loading...