Cara pasang progress bar pada blog

pada tanggal
Kamu pasti sering nonton Youtube kan? Nah pas kita lagi pilih-pilih video mana yang akan diputar, ketika loading dibagian atas ada garis merah horisontal melintas kekanan. Seperti itu yang coba kita akan pasang ke blog kita.



Pada tutorial ini kita akan menggunakan nprogress dari rstacruz, silahkan klik disini untuk kehalaman GitHub-nya.

 Berikut cara pasang nprogress ke blog blogger kita:

  1. Pada template kamu harus ada file js jquery.min, kalau belum ada tambahkan kode berikut ini diatas tag </head>

 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>


2. Cari kode ]]></b:skin> kemudian tambahkan CSS berikut diatasnya:

#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #29d;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
      -ms-transform: rotate(3deg) translate(0px, -4px);
          transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
          animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
 Untuk mengganti warna progress bar, silahkan ganti pada teks yang saya tanda dengan warna merah dengan kode warna lain yang anda inginkan.

2. Tambahkan file js nprogress dibawah ini diatas tag </head> atau boleh juga simpan tepat dibawah kode jquery.min diatas:

<script src="https://googledrive.com/host/0B6i4aQ6nZMODLXdyaE9XVWZCc0U" type="text/javascript"></script>

3.Cari tag <body dan dibawahnya tambahkan kode berikut:

<script>

    // Show the progress bar 
    NProgress.start();

    // Increase randomly
    var interval = setInterval(function() { NProgress.inc(); }, 1000);        

    // Trigger finish when page fully loaded
    jQuery(window).load(function () {
        clearInterval(interval);
        NProgress.done();
    });

    // Trigger bar when exiting the page
    jQuery(window).unload(function () {
        NProgress.start();
    });

</script>

4.  Simpan template.

Komentar

Posting Komentar