Membuat Auto Select Filters di Blog

Membuat Auto Select Filters di Blog

Rio Ilham Hadi

19 December 2014

Membuat Auto Select Filters di Blog - Tidak terasa sudah lebih dari seminggu tidak update tutorial blog, dan kali ini saya akan memberikan tutorial yang gak kalah menarik dari tutorial sebelumnya, Tutorial kali ini bernama "Auto Select Filters" yang artinya "Pilih Filter Otomatis" jadi kita bisa memilih filter yang tercampur menjadi terpisah.

Untuk lebih jelasnya silahkan sobat klik tombol demo di bawah ini...

Demo

Menarik bukan...

Jika sobat ingin memasang Auto Select Filters di blog sobat silahkan ikuti tutorial di bawah ini.

Langkah pertama adalah kode HTML, silahkan sobat letakan kode HTML di tempat yang sobat inginkan.

 <div id="filters">
  
    <select>
        <option value="*">All</option>
        <option value=".red">Red</option>
        <option value=".green">Green</option>
        <option value=".blue">Blue</option>
        <option value=".yellow">Yellow</option>       
    </select>   
</div>
<div id="container">
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
    <div class="item red"></div>
    <div class="item blue"></div>
    <div class="item green"></div>
    <div class="item yellow"></div>
</div> 

Langkah kedua yaitu kode CSS, masukan CSS di bawah ini tepat di atas ]]></b:skin> atau </style>

 #container {
    border: 1px solid;
    padding: 3px;
}
.item {
    width: 70px;
    height: 70px;
    margin: 3px;
    float: left;
}
.red {
    background: #ff5656;
}
.blue {
    background: #07ACEC;
}
.green {
    background: #4caf4c;
}
.yellow {
    background: #efef70;
}
.isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    transition-duration: 0s;
} 

Langkah terakhir dengan menambahkan Fungsi Javascript, letakan Javascript di atas </body>

 <script type="text/javascript">
$(function() {
    var $container = $('#container'),
        $select = $('#filters select');
    $container.isotope({
        itemSelector: '.item'
    });
    $select.change(function() {
        var filters = $(this).val();
;
        $container.isotope({
            filter: filters
        });
    });
});
</script> 

Selamat Mencoba...

Semoga Tutorial Ini Bermanfaat... :)

Source : http://twistedshape.blogspot.com/2014/11/auto-select-filters.html

Share This