BUAT WIDGET PRESENTASE RESPONSIVE

Share DongPlus on Google+

Kali Ini Saya Akan Share. Widget Presentase Adalah Widget Pengukur Berapa

Persen Kita Ke Bawah Tampilan Blog Kita Dan Widget Ini Sangat Cocok Untuk

Mempercantik Blog Sobat..  Namun Jika Anda Tidak Tertarik Dengan Widget Ini...

Tidak Apa Apa. Karna Widget Ini Hanya Untuk Percantik Template Blog Sobat Aja

Tapi Jika Sobat Ingin Memasang Widget Ini. Ikuti Langkah Berikut.... !!

* 1.  Buka Dashbor Blog Sobat

* 2.  Klik Template

* 3.  Klik Edit HTML

* 4.  Klik CTRL + F  Trus Cari Kode Berikut   ]]></b:skin>  Atau </style>

* 5.  Salin / Copy Kode CSS Di Bawah Ini Lalu Letakkan Di Atas Kode Di Atas Tadi

CSS

    #scroll {
      display: none;
      position: fixed;
      top: 0;
      right: 5px;
      z-index: 500;
      padding: 3px 8px;
      background-color: #008E00;
      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: #008E00;
    }

Catatan:
Kode Yang Berwarna # Adalah Kode Warna Presentase

* 6. Klik CTRL + F  Trus Cari Kode  </head>

HTML

<div id='scroll'/>

* 7. Terakhir Cari Kode </body> Dan Pastekan Kode Di Bawah ini Di Atas Kode </body>

jQuery

    <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>

Lalu Klik Save Template. SELESAI.......!!