Cara Membuat Presentase Pada Scroll Ala EG (Enziie Gekhizakii)

Assalamualaikum Wr. Wb.

     Akhir akhir ini saya sudah jarang sekali memposting/berbagi artikel kepada sobat, tetapi jangan khawatir. pada kali ini saya akan membagikan artikel yang cukup menarik bagi sobat. Uyee~ betul sekali, yaitu Cara Membuat Presentase Scroll Ala EG (Enziie Gekhizaki) yuk cek ke tkp aje ;)

Tutorial :

1. Pastinya Log in ke Blog sobat
2. Masuk ke Blog sobat
3. Masuk ke Rancangan
4. Pilih menu Template => Edit HTML
5. Cari kode ]]></b:skin>
6. Letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
   
   

   #scroll {
   display: none;
   position: fixed;
   top: 0;
   right: 20px;
   z-index: 500;
   padding: 3px 8px;
   background-color: #726E6D;
   font-family: 'Stalinist One', cursive;
   text-shadow: 1px 1px 0px black;
   color: #808080;
   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: #726E6D;
   }

   
   
7. berikutnya cari kode </head> 
8. lalu letakkan kode berikut dibawah kode </head>
   
   

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

9.  berikutnya kita pasang Javascript berikut ke atas </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>

10. Savee dannnnnn~ Tadaaa!

Keterangan :

• warna Aqua adalah tutorialnya
• warna Merah adalah code background yang ingin diganti
• warna Hijau adalah Font (huruf) yang digunakan. Cara Mengganti Font (huruf) blog
• warna Kuning adalah warna huruf yang ingin diganti

      Sekian dulu trik ini dari saya. Ingat ya! kalo mau copas silahkan buat sumbernya ;) mohon maaf atas kekurangan dari blog saya ini. Sampai jumpa di postingan berikutnya Bye~ ^o^)~

Wassalamualaikum Wr. Wb.

Artikel Terkait

^0^)~ YIS Backlinks ~(^o^

URL

Code For Forum

HTML Code <a href='http://yogismr.blogspot.com/2013/10/cara-membuat-presentase-pada-scroll-ala.html' target='_blank'>Cara Membuat Presentase Pada Scroll Ala EG (Enziie Gekhizakii)</a>