Coretan terkini gaya coretanku...


Salam,
Ni kira entry kesinambungan dari entry Sekadar menjawab pertanyaan di kotak ShoutMix..,  berkaitan Coretan terkini versi thumbnail, tapi yg ni coretan terkini a.k.a recent post versi blog coretanku..seperti kat sidebar sebelah ni dan cam gambar bawah nih:

Sebenarnya nih saya adaptasi dari tutorial How To Add Images Gallery Widget With jQuery Hover / Zoom To Your Blogger. oleh www.allblogtools.com, widget nih untuk zoom thumbnails image tapi saya saje jer jadikannya sebagai coretan terkini, so memang nak kena update manually la klau ade entry terbaru tuh, hihihihihi memang cerewet sikit klau nak banding ngan widget recent post with thumbnails cam tutorial sebelum nih,

Widget atau code nih sesuai la tuk mereka2 yg ade galeri gambar dalam bentuk thumbnails sebab bila mouseover kita boleh tgk gambar yg besar sikit kan, bagi yg nak menyusahkan diri cam saya nih boleh la nak buat recents post updated secara manual ;0)

Langkah pertama : Letak code galeri ke dalam templates.

Pergi ke Design > Edit HTML dan cari code seperti kat bawah ni;
]]></b:skin>
Letak code kat bawah ni sebelum code kat ats ni tadi ( ]]></b:skin> )
/* Blogger Zoom Gallery By AllBlogTools.com */
ul.thumb{float:left; list-style:none; margin:0; padding:5px; width:190px}
ul.thumb li{margin:0; padding:2px; float:left; position:relative;  /* Set the absolute positioning base coordinate */width:90px; height:90px}
ul.thumb li img{width:80px; height:80px; /* Set the small thumbnail size */-ms-interpolation-mode:bicubic; /* IE Fix for Bicubic Scaling */border:1px solid #ddd; padding:2px; background:#f0f0f0; position:absolute; left:0; top:0}

ul.thumb li img.hover{background:url(http://i290.photobucket.com/albums/ll276/mamapiya/Untitled-1copy-2.png) no-repeat center center;  /* Image used as background on hover effectborder:none; /* Get rid of border on hover */}
 Nota: Untuk code asal klik kat sini 

Lepas dah letak, cari code  </head> dan letak code dibawah ni selepas code </head>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-65px&#39;,
marginLeft: &#39;-85px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;155px&#39;,
height: &#39;199px&#39;,
padding: &#39;10px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;80px&#39;,
height: &#39;80px&#39;,
padding: &#39;2px&#39;
}, 200);
});


//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return true;
});

});
</script>
 Nota: Untuk code asal klik kat sini 


Siap dan save jer

Langkah kedua : Letak galeri ke templates

Pergi ke Design > Page elements > Add a gadget > Pilih HTML/Javascript


Copy n Paste code kat bawah nih:

<ul class="thumb">
<li><a href="#"><img src="picture 1 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 2 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 3 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 4 Link" alt="" /></a></li>
</ul>
Tukar picture 1 Link dengan URL gambar anda sendiri dan # dengan URL entry anda atau URL yg anda inginkan. sekiranya hendak menambah gambar, letak/tambah code seperti dibawah sahaja sebelum </ul>
  <li><a href="#"><img src="picture 5 Link" alt="" /></a></li>
Contoh :
<li><a target="_blank" href="http://anamarza.blogspot.com/2011/02/sekadar-menjawab-pertanyaan-di-kotak.html"><img src="http://3.bp.blogspot.com/_rGfAms2eYNQ/TU-H9uk5MHI/AAAAAAAAEOo/56K2JgMnILI/s400/recent+post.jpg" title="Sekadar menjawab pertanyaan di kotak ShoutMix... " alt="" /></a></li>
Dah siap tukar save jer dan tgk hasilnya...tuk lebih faham klau tak faham tutorial saya nih la, bleh jer trus ke tutorial asal How To Add Images Gallery Widget With jQuery Hover / Zoom To Your Blogger. oleh www.allblogtools.com

okey..selamat bereksperimentasi....

No comments:

Post a Comment