Cara Membuat Efek Scroll Bar Persentase Blog

AA Sciences, Aldi Andreansyah - Cara Membuat Efek Scroll Bar Persentase Blog, Efek Scroll Bar Blog, Cara Membuat Efek Scroll Bar Persentase Blog.

Cara Membuat Efek Scroll Bar Persentase Blog

Sebuah widget memang lah sangat berpengaruh sekali dalam mempercantik sebuah tampilan khususnya para pengguna website baik itu blogger , wordpress dan forum website serupa lainnya. Dan tidak lah hanya pengguna nya saja yang sangat senang dengan ada nya tampilan website/blog/wordpress agar menarik,unik,cantik bila dipandang melainkan para pengunjung pun sangat antusias merasakan senang jika membahas sebuah adanya penambahan sebuah widget baik itu widget sosmed,widget fb,widget fb melayang,widget artikel terbaru, widget like box fb berjalan, bahkan widget efek scroll bar persentase sekalipun yang alhamdulillah AA Sciences membahas mengenai pembuatan efek scroll bar persentase tersebut pada posting an kali ini.

Sebelumnya AA Sciences pun alhamdulillah sudah membahas Cara Mengganti Warna Scroll Bar Blog yang dimana kita dapat mengubah warna pada scroll bar suatu website khususnya di blog sesuka hati sendiri tapi alhamdulillah AA Sciences kali ini serupa yakni membahas mengenai scroll bar yakni scroll bar tersebut memiliki efek sebuah persen yang dimana persen tersebut akan otomatis mengatur sampai mana jarak kita yang tuju dengan adanya persen yang sudah di atur tersebut.

Scroll bar yang biasa nya hanya lah memiliki sebuah satu warna dan akhirnya pun dapat kalian ubah sendiri dengan warna sesuka kalian, dan bahkan sekarang kalian dapat menambah sebuah efek pada scroll bar tersebut yakni efek persentase yang dimana efek scroll bar persentase ini meng otomatis kan sebuah layar yang mana jika di gulir dan dapat di ketahui dengan ada nya sebuah tampilan persentase tersebut.

Tidak hanya itu tampilan efek scroll bar persentase ini pun jika kita lihat dapat digunakan pada tampilan desktop atau seluler yang biasa di sebut yakni responsive, yaps responsive , tampilan respinsive memang lah tampilan yang dimana sangat diinginkan bagi user (pengguna) bahkan pengunjung nya sekalipun.

Oke jika kalian sudah penasaran langsung saja simak bagaimana Cara Membuat Efek Scroll Bar Persentase Blog, berikut tutorial nya pemasangan nya :

A . Penerapan CSS nya :

1 . Pastikan kalian sudahlah Login terlebih dahulu pada akun Blogger kalian.

2 . Template - > Edit HTML - > CTRL+F lalu cari kode b:skin atau <style> .

3 . Jika sudah ditemukan kode b:skin atau <style> tadi, langsung saja kalian Copy Paste kan Script CSS di bawah ini, tepat pada bagian dalam kode b:skin atau <style> nya :

/* CSS Scroll Bar Persentase by https://aldiandreansyah.blogspot.co.id*/
#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#2a3950;
  color:#fff;
  border-radius:3px;
  font-size:14px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#2a3950;
}

4 . Terakhir, Pilih menu Simpan Template .

Catatan :

Ubah dan atur warna nya sesuai warna tampilan ke inginan kalian yang sudah diberi warna diatas dengan Kode Warna HTML nya.

B . Penerapan Jquery/Javascript nya :

1 . Pastikan kalian sudahlah Login terlebih dahulu pada akun Blogger kalian.

2 . Template - > Edit HTML - > CTRL+F lalu cari kode </body> atau jika kalian bingung, kode ini terletak pada bagian paling bawah sebuah template .

3 . Jika sudah ditemukan kode </body> nya tadi, langsung saja kalian Copy Paste kan Script Jquery/Javascript di bawah ini, tepat pada bagian sebelum kode </body> nya :

<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(600); if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(function() { $('#scroll').fadeOut(600); }, 1000); }); //]]> </script>

4 . Terakhir, Pilih menu Simpan Template .

C . Penerapan Scroll Persentase Agar Muncul di Blog :

1 . Pastikan kalian sudahlah Login terlebih dahulu pada akun Blogger kalian .

2 . Tata Letak - > Tambah Gadget - > HTML Javascript

3 . Masukkan Script HTML di bawah ini tepat pada kolom subject nya yang berada di bawah kedua yang memiliki ruas yang lebar, melainkan bukan judul, untuk judul kosongkan saja, berikut Script HTML nya :

<div id="scroll"></div>

4 . Terakhir, Pilih menu Simpan dan Silahkan lihat hasilnya pada blog kalian.

Oke mungkin hanya cukup sekian mengenai pembahasan Cara Membuat Efek Scroll Bar Persentase Blog yang dapat AA Sciences sampaikan, semoga bermanfaat dan sekaligus menambah wawasan mengenai penambahan Efek Scroll Bar Persentase Blog ini, Amin.

Share this post