Tutorial Progress Bar dengan JQuery Owl Carousel

By: QMPC Network on 23.20

Kali ini penulis akan sharing tutorial membuat slider progress bar menggunakan JQuery Owl Carousel. Tentu saja ini sudah responsive. Oke. langsung saja.

Berikut langkah-langkahnya:
Pertama downloadlah JQuery Owl Carousel
Panggil file css nya yang ada dalam folder owl carousel;

<link href="owl.carousel/owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css"></link>
<link href="owl.carousel/owl-carousel/owl.theme.css" rel="stylesheet" type="text/css"></link>

Panggil file jquery-1.9.1.min.js dan owl.carousel.js yang ada dalam folder js, hasilnya seperti di bawah ini:

<script type="text/javascript" src="owl.carousel/assets/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="owl.carousel/owl-carousel/owl.carousel.js"></script>
<script>
$(document).ready(function() {
var time = 2; // time in seconds
var $progressBar,
     $bar,
     $elem,
     isPause,
     tick,
     percentTime;
   //Init the carousel
   $("#myslider").owlCarousel({
     slideSpeed : 500,
     paginationSpeed : 500,
     singleItem : true,
     afterInit : progressBar,
     afterMove : moved,
     startDragging : pauseOnDragging
   });
   //Init progressBar where elem is $("#owl-demo")
   function progressBar(elem){
     $elem = elem;
     //build progress bar elements
     buildProgressBar();
     //start counting
     start();
   }
 
function buildProgressBar(){
     $progressBar = $("<div>",{
       id:"progressBar"
     });
     $bar = $("<div>",{
       id:"bar"
     });
     $progressBar.append($bar).prependTo($elem);
   }
   function start() {
     //reset timer
     percentTime = 0;
     isPause = false;
     //run interval every 0.01 second
     tick = setInterval(interval, 10);
   };
   function interval() {
     if(isPause === false){
       percentTime += 1 / time;
       $bar.css({
           width: percentTime+"%"
        });
       //if percentTime is equal or greater than 100
       if(percentTime >= 100){
         //slide to next item
         $elem.trigger('owl.next')
       }
     }
   }
   //pause while dragging
   function pauseOnDragging(){
     isPause = true;
   }
   //moved callback
   function moved(){
     //clear interval
     clearTimeout(tick);
     //start again
     start();
   }
   //uncomment this to make pause on mouseover
   // $elem.on('mouseover',function(){
   //   isPause = true;
   // })
   // $elem.on('mouseout',function(){
   //   isPause = false;
   // })
});
</script>

Buatlah markup HTML seperti di bawah ini:

<div id="owl-demo" class="owl-carousel owl-theme">

<div class="item"><img src="owl.carousel/demos/assets/fullimage1.jpg" alt="The Last of us"></div>


<div class="item"><img src="owl.carousel/demos/assets/fullimage2.jpg" alt="GTA V"></div>
<div class="item"><img src="owl.carousel/demos/assets/fullimage3.jpg" alt="Mirror Edge"></div>
</div>
 
Terakhir tambahkan style berikut:
<style>
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
#bar{
width: 0%;
max-width: 100%;
height: 4px;
background: #7fc242;
}
#progressBar{
width: 100%;
background: #EDEDED;
}
</style>

Berikut hasilnya:

Read More

Menampilkan Hanya Kategori Tertentu di Halaman Depan WordPress

By: QMPC Network on 22.32

Ada suatu kasus dimana kita ingin menampilkan satu atau beberapa jenis kategori saja yang ingin ditampilkan di halaman depan blog. Pengunjung yang membuka alamat utama blog kita, yang muncul adalah postingan-postingan di kategori yang telah kita pilih tersebut.

Sebagai solusi untuk kasus diatas, kita bisa memasukkan satu baris kode di theme wordpress kita. Cara ini syaratnya kita menggunakan wordpress di hosting sendiri, bukan hosting free yang disediakan wordpress.

Masuk ke dalam theme editor di mode admin dan sisipkan kode  <?php query_posts('cat=3,57' . '&showposts=10'.'&paged='.$paged); ?> dan masukkan ke dalam file  index.php tepat di bawah baris  <div id="main-content" class="main-content"> .

Ganti bagian  'cat=3,57' dengan nomor kategori yang diinginkan. Setelah selesai dan diupdate file  index.php -nya, kita bisa refresh dan posting yang muncul hanya kategori yang telah kita pilih.

Read More