Filterable Portfolio with jQuery for Blogger

Postingan kali ini datang dari net.tutsplus. Nettuts+ adalah situs yang ditujukan untuk web developer dan desainer yang menawarkan tutorial dan artikel tentang teknologi, keterampilan dan teknik untuk memperbaiki cara kita merancang dan membangun website, meliputi HTML, CSS, Javascript, CMS's, PHP dan Ruby on Rails. Mungkin teknik ini cucooo guna mengkoleksi blog/web inspirasi sobat selama blog walking ;) Singkatnya begini sob, Beben si bloglang ganteng kalem tea akan menjelaskan membuat satu halaman dengan feature "penyaringan berdasarkan kategori" dengan sedikit sentuhan jQuery agar lebih gaya :D

Untuk melakukan trik ini sobat harus sudah mempunyai jQuery script minimal v1.3.1 Jika sudah punya versi lebih baru, abaikan saja tidak usah dipakai lagi :) Letakan kode CSS berikut diatas/sebelum kode ]]></b:skin>

Kode CSS

ul#filter {float: left; font-size: 16px; list-style: none; margin-left: 0; width: 100%}
ul#filter li {
border-right: 1px solid #dedede;
float: left;
line-height: 16px;
margin-right: 10px;
padding-right: 10px;
}
ul#filter li:last-child {border-right: none; margin-right: 0; padding-right: 0}
ul#filter a {color: #999; text-decoration: none}
ul#filter li.current a, ul#filter a:hover {text-decoration: underline}
ul#filter li.current a {color: #333; font-weight: bold}
ul#portfolio {float: left; list-style: none; margin-left: 0; width: 672px}
ul#portfolio li {
border: 1px solid #dedede;
float: left;
margin: 0 10px 10px 0;
padding: 5px;
width: 202px;
}
ul#portfolio a {display: block; width: 100%}
ul#portfolio a:hover {text-decoration: none}
ul#portfolio img {border: 1px solid #dedede; display: block; padding-bottom: 5px}

Kalau paham CSS, tinggal edit sendiri saja sesuai dengan kebutuhan template sobat :-" Kemudian masukan script plugin jQuery ini, diatas/sebelum tag penutup </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('ul#filter a').click(function() {
$(this).css('outline','none');
$('ul#filter .current').removeClass('current');
$(this).parent().addClass('current');

var filterVal = $(this).text().toLowerCase().replace(' ','-');

if(filterVal == 'all') {
$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
} else {

$('ul#portfolio li').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}

return false;
});
});
//]]>
</script>

Save.

Untuk memasukan/memanggil kode HTML, tatkala sobat akan memosting, tinggal memakai perintah sbb [..]

<ul id="filter">
<li class="current"><a href="#">All</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">CMS</a></li>
<li><a href="#">Integration</a></li>
<li><a href="#">Information Architecture</a></li>
</ul>

<ul id="portfolio">
<li class="cms integration"><a href="#"><img src="http://link-your-image.png" alt="" height="115" width="200" />A List Apart</a></li>
<li class="integration design"><a href="#"><img src="http://link-your-image.png" alt="" height="115" width="200" />Apple</a></li>
<li class="design development"><a href="#"><img src="http://link-your-image.gif" alt="" height="115" width="200" />CNN</a></li>
<li class="cms"><a href="#"><img src="http://link-your-image" alt="" height="115" width="200" />Digg</a></li>
<li class="design cms integration"><a href="#"><img src="http://link-your-image.jpg" alt="" height="115" width="200" />ESPN</a></li>
<li class="design integration"><a href="#"><img src="http://link-your-image.jpg" alt="" height="115" width="200" />Facebook</a></li>
<li class="cms information-architecture"><a href="#"><img src="http://link-your-image.jpg" alt="" height="115" width="200" />Google</a></li>
<li class="integration development"><a href="#"><img src="http://link-your-image.jpg" alt="" height="115" width="200" />Netflix</a></li>
<li class="information-architecture"><a href="#"><img src="http://link-your-image.jpg" alt="" height="115" width="200" />NETTUTS</a></li>
<li class="design information-architecture cms"><a href="#"><img src="http://link-your-image.jpg" alt="" height="115" width="200" />Twitter</a></li>
<li class="development"><a href="#"><img src="http://link-your-image.jpg" alt="" height="115" width="200" />White House</a></li><li class="cms design"><a href="#"><img src="http://link-your-image.jpg" alt="" height="115" width="200" />YouTube</a></li>
</ul>

Perhatikan pada kode HTML yg berwarna merah dengan ID filter terdapat title yang dimana itu menunjukan class bagi syntax li Jika menuliskan syntax spt ini<li class="cms integration">maka link tersebut masuk ke kategori CMS dan INTEGRATION. Jika diklik link dg iD filter seperti tampak pada screenshot diatas, maka akan ada pada dua kategori :) Semoga bermanfaat...
Happy blogging \m/