19 December 2014

Membuat Auto Select Filters di Blog

Auto Select Filters

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


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

Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic