Collapsed Image with Jquery and CSS for Blogger

Sebagai bloglang ganteng kalem harus selalu odar-ider mencari postingan yg unik, gaya, dan simpel dalam penerapannya ;)) :D Postingan kali ini kembali mengenai jQuery plug-in nih sob ;) Pasti sudah pada tauk deh apa yg Beben maksudkan. Trik satu ini wajib memakai script jQuery dalam pemakaiannya. Jika tidak ada, maka trik ini tidak akan berjalan alias gagal :)) Sekarang trik jQuery plug-in ini jatuh pada bagaimana kita akan membuat "Collapsed Image with Jquery and CSS" Jadi keterangan singkat dan mungkin bisa memperjelas akan trik ini, membuat gambar yg beresolusi besar dengan tampilan mini dan bisa di collapsed (full image) tentunya dg menggunakan jQuery :D

Untuk melakukan trik ini sobat sudah harus punya script
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Kalau sudah punya kita abaikan saja, dan masuk ke tahap selanjutnya. Letakan script jQuery plugin berikut setelah script diatas disebut atau diatas/sebelum tag </body>

Script plug-in

<script type="text/javascript">
$(document).ready(function()
{
// Image Area Mouseover and Mouseout
$(".imagebox").mouseover(function()
{
$(".showhide").show();
}).mouseout(function()
{
$(".showhide").hide();
});

//Show link
$(".showlink").click(function()
{
$(".imagebox").css('max-height','');
$(".showlink").hide();
$(".hidelink").show();
});

//Hide link
$(".hidelink").click(function()
{
$(".imagebox").css('max-height','150px');
$(".hidelink").hide();
$(".showlink").show();
});
});
</script>

Untuk kode CSS seperti biasa sob, letakan sebelum kode ]]></b:skin>

Kode CSS

.imagebox
{
display:block;
position:relative;
overflow:hidden;
width:100%;
}
.hidelink
{
display:none;
}
.showhide
{
padding:5px;
border-top:dashed 1px #333;
border-bottom:dashed 1px #333;
background:#555 none repeat scroll 0 0;
bottom:0;
cursor:pointer;
display:block;
height:15px;
left:0;
line-height:15px;
padding-left:5px;
position:absolute;
width:100%;
text-align:center;
}

Sudah beres urusan menanamkan script dan CSS pada template sobat. Sekarang pemakaiannya dalam postingan sobat tinggal melakukan penulisan pada gambar (image) menjadi sbb:

<div class="imagebox" style="max-height:100px;">
<img  style="width:100%" src="http://image.jpg"/>
<div class="showhide" >
<a href="#" class="showlink">show</a>
<a href="#" class="hidelink">hide</a>
</div>
</div>

Simpan kodenya kalau tidak mau hilang/lupa dengan melakukan...
Settings ► Formatting ► Scroll kebawah tepat pada bagian ► Post Template Save deh kodenya :D Jadi sobat tinggal mengganti/memasukan link gambarnya saja ;)) ;)
Good Luck :)