Memasang Gallery Foto dengan Fitur Sort Filtering Di Halaman Statis

Akhir-akhir ini saya sedang benar-benar belajar mengenai sort filter jquery yang nantinya akan saya terapkan di template blog ini dan hasilnya begitu memuaskan tetapi masih ada kendala dalam loadingnya dan masih terasa berat oleh karena itu saat ini saya sedang mengatasinya, jadi mohon ampunannya jika akhir-akhir ini saya jarang ngeposting.

Oke, saya tidak akan curhat mengenai tadi. Tetapi karena alasan tersebut saya ingin mencoba membagikan widget yang berkaitan sort filtering yang bisa diterapkan di halaman statis blog sodara nanti. Sort filtering ini bisa diartikan sebagai kumpulan media yang dapat difilter sesuai dengan kategorinya. Kurang lebih jelasnya sodara bisa lihat demonya terlebih dahulu.

Demo

Bagaimana?? Apakah sodara tertarik dengan widget yang sudah dilihat? Meskipun sodara tidak tertarik setelah melihatnya, saya akan tetap membagikannya dalam postingan ini, siapa tau sodara akan belajar mengenai kode-kodenya. Untuk memasang widget ini, caranya sangat mudah meskipun sodara masih awam dalam dunia perkodean

Cara memasangnya seperti biasa, yaitu sodara harus masuk ke Dashboard Blogger terlebih dahulu, kemudian masuk ke halaman statis dan copy kode yang ada dibawah ini. Perlu diingat, sodara diwajibkan untuk memilih mode HTML bukan Compose untuk meletakkan kodenya nanti.


<style>
.ican-gallery {width:100%;max-width: 1000px;margin:0 auto;overflow:hidden}
.nav {text-align:center;margin: 15px 0;padding: 0;}
.nav li {font-size: 13px;display: inline-block;align-items: center;font-family:arial;justify-content: center;box-sizing: border-box;height:35px;line-height:35px;margin: 3px;padding:0 15px;list-style: none;cursor: pointer;transition: all .5s;color: #fff;font-weight:bold;border-radius: 5px;box-shadow:0 1px 2px rgba(0,0,0,0.4);background-color: #f00;}
.nav li:hover{background-color: #111;color:#f00}
.nav li.active{background-color: #111;color:#f00}
.ican-gallery ul{padding:0;margin:0;list-style:none;text-align:center}
.ican-gallery ul li{display:flex;width:25%;height:200px;overflow:hidden;justify-content: center;}
.box-ican{background:#f00 url(https://raw.githubusercontent.com/icanalihsan/Picture/master/Bukaican.png)no-repeat center;background-size:50px;overflow:hidden;margin:5px;box-shadow:0 1px 2px rgba(0,0,0,0.4);}
.box-ican img{width:100%;height:100%;object-fit: cover;vertical-align: middle;transition: all .7s;}
.box-ican img:hover{opacity:0.6}
</style>
<script type="text/javascript" src="https://raw.githack.com/icanalihsan/Script/master/filterizr.js"></script>
<script>
$(function () {var filterSingle = $('.filter-1').filterizr({setupControls: false});$('#filter-1 li').click(function () {$('#filter-1 li').removeClass('active');$(this).addClass('active');var filter = $(this).data('flter');filterSingle.filterizr('filter', filter);});});
</script>
<ul id="filter-1" class="nav">
<li data-flter="all" class="active"> All </li>
<li data-flter="Kambing"> Kambing </li>
<li data-flter="Monyet"> Monyet </li>
<li data-flter="Ha"> Ha </li>
<!--Tambahkan Tag Foto Anda diatas Ini-->


</ul>
<div class="ican-gallery">
                <ul class="filter-1">
                    <li class="filtr-item" data-category="Monyet"><div class='box-ican'>
<a href="https://awsimages.detik.net.id/community/media/visual/2017/12/06/6414c1ae-fcd1-49a6-8316-4a71c29f93ff_43.jpg?w=700&q=90" imageanchor="1">
<img src='https://awsimages.detik.net.id/community/media/visual/2017/12/06/6414c1ae-fcd1-49a6-8316-4a71c29f93ff_43.jpg?w=700&q=90'/>
                    </a></div></li>
                    <li class="filtr-item" data-category="Kambing"><div class='box-ican'>
<a href="https://upload.wikimedia.org/wikipedia/commons/7/73/African_Pygmy_Goat_002.jpg">
<img src='https://upload.wikimedia.org/wikipedia/commons/7/73/African_Pygmy_Goat_002.jpg'/>
                    </a></div></li>
                    <li class="filtr-item" data-category="Ha"><div class='box-ican'>
<a href="//3.bp.blogspot.com/_P1vy50Ne5Os/SRfmMliXm8I/AAAAAAAAABQ/BiXsAy6gypc/s530/godain+kita+donkz%21.jpg" imageanchor="1">
<img src='//3.bp.blogspot.com/_P1vy50Ne5Os/SRfmMliXm8I/AAAAAAAAABQ/BiXsAy6gypc/s530/godain+kita+donkz%21.jpg'/>
                    </a></div></li>
                    <li class="filtr-item" data-category="Kambing"><div class='box-ican'>
<a href='https://cdn-asset.jawapos.com/wp-content/uploads/2019/01/kambing-hamil-mati-usai-diperkosa-8-pria_m_231687-640x455.jpg'>
<img src='https://cdn-asset.jawapos.com/wp-content/uploads/2019/01/kambing-hamil-mati-usai-diperkosa-8-pria_m_231687-640x455.jpg'/>
                    </a></div></li>
                    <li class="filtr-item" data-category="Ha">
                     <div class='box-ican'> <a href='https://3.bp.blogspot.com/-F8tnTUHT1NU/VsYN3_qhTXI/AAAAAAAABFQ/ux1Ghe-u-qs/s640/banci%2Bsetengah%2Blaki.jpg'>  <img src='https://3.bp.blogspot.com/-F8tnTUHT1NU/VsYN3_qhTXI/AAAAAAAABFQ/ux1Ghe-u-qs/s640/banci%2Bsetengah%2Blaki.jpg'/>
                    </a></div></li>
                    <li class="filtr-item" data-category="Ha">
                    <div class='box-ican'> 
<a href='https://i.ytimg.com/vi/8EZmfwvW9w0/maxresdefault.jpg'>
<img src='https://i.ytimg.com/vi/8EZmfwvW9w0/maxresdefault.jpg'/>
                    </a></div></li>
                    <li class="filtr-item" data-category="Monyet">
                     <div class='box-ican'>
<a href='https://media.hitekno.com/thumbs/2019/04/15/71470-gen-otak-manusia/350x230-img-71470-gen-otak-manusia.jpg'>
<img src='https://media.hitekno.com/thumbs/2019/04/15/71470-gen-otak-manusia/350x230-img-71470-gen-otak-manusia.jpg'/>
                    </a></div></li>
                    <li class="filtr-item" data-category="Ha"><div class='box-ican'>
<a href='https://www.harianbatakpos.com/wp-content/uploads/2019/10/IMG_20191020_092827.jpg'>
<img src='https://www.harianbatakpos.com/wp-content/uploads/2019/10/IMG_20191020_092827.jpg'/>
                    </a></div></li>
                    <li class="filtr-item" data-category="Kambing">
                      <div class='box-ican'> 
<a href='https://cdn.rakyatku.com/thumbs/img_524_349_hasil-pene_1535505255BING.jpg'> 
<img src='https://cdn.rakyatku.com/thumbs/img_524_349_hasil-pene_1535505255BING.jpg'/>
                    </a></div></li>
                    <li class="filtr-item" data-category="Ha">
                    <div class='box-ican'> 
<a href='https://i1.sndcdn.com/artworks-000075621416-q58ku0-t500x500.jpg'>
<img src='https://i1.sndcdn.com/artworks-000075621416-q58ku0-t500x500.jpg'/>
                    </a></div></li>
                    <li class="filtr-item" data-category="Monyet"><div class='box-ican'>
<a href='https://asset.kompas.com/crops/TYA2bcu78d39tDv36f8ZHyHg1Ik=/0x15:737x507/750x500/data/photo/2019/03/26/54060377.jpg'>
<img src='https://asset.kompas.com/crops/TYA2bcu78d39tDv36f8ZHyHg1Ik=/0x15:737x507/750x500/data/photo/2019/03/26/54060377.jpg'/>
                   </a></div></li>
                    <li class="filtr-item" data-category="Kambing"><div class='box-ican'>
<a href='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRp-4VSWXyf0kSKReTChsg0TAiTsjzz7vfALJlkuV_Ul0ZNqwDKkA&s'>
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRp-4VSWXyf0kSKReTChsg0TAiTsjzz7vfALJlkuV_Ul0ZNqwDKkA&s'/>
                  </a></div></li>


<!--Tambahkan Foto Anda diatas Ini-->

                </ul>
            </div>
KETERANGAN
  • Untuk mengkategorikan foto, sodara harap menyamakan kategorinya antara tag menu dengan tag konten tepatnya pada selector li yang ada di bagian Menu data-flter="Kategori" dengan li yang ada dibagian konten data-category="Kategori"
  • Untuk menambahkan Tag menu, Sodara cukup tambahkan kode dibawah ini dibagian menu (lihat batas tag foto di HTML).
    
    <li data-flter="Kategori"> Kategori </li>
    
    Harap ganti kategori sesuai dengan kategori foto sodara.
  • Untuk menambahkan Foto, Sodara cukup tambahkan kode dibawah ini dibagian konten (lihat batas foto di HTML).
    
    <li class="filtr-item" data-category="Kambing"><div class='box-ican'>
    <a href='#GantiDenganLinkGambarSodara'>
    <img src='#GantiDenganLinkGambarSodara'/>
                      </a></div></li>
    
    Harap perhatikan kategorinya agar sesuai dengan kategori foto sodara.

Apakah sodara sudah menerapkannya?? Jika sudah, Apakah berhasil?? Semoga berhasil ya... dan bagi yang masih belum berhasil, jangan berduka cita karena kita bisa berdiskusi langsung lewat kolom komentar yang sudah disediakan. Dan pastinya saya akan membalasnya. Good Luck!!

Comments