Letak Gallery Gambar Di Dalam Blog





Tutorial kali nie Mr. Drakula nak konsi dengan korang widget gallery yang pernah di letak kat dalam blog.memang smart, kalau korang nak cuba try ikut step kat bawah nie k.

Step 1: Letak gallery code dekat templates

Dashboard, layout >> Edit Html >>
lepas tu cari code nie 


                ]]></b:skin> 


Copy code dekat bawah nie sebelum code di atas


/* Blogger Zoom Gallery By AllBlogTools.com */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/
VX0mAW1oYHc/thumb_bg.png) no-repeat center center; /* Image used as background
on hover effect
border: none; /* Get rid of border on hover */
}


Lepas tu cari code nie

</head>

Korang copy code kat bawah nie sebelum 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;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#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;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});



//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 false;
});


});
</script>



Save code tadi..

Step 2: Letak gellery dekat templates

Layout >> page elements dan korang boleh pilih nak letak kat sidebar, footer atau kat bottom.

Click 'Add a Gadget' pilih Html/Javascript

Copy code dibawah nie k.

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


Lepas tu korang boleh copy url image sendiri just tukar yang warna merah tu je k..kalau nak tambah link korang tambah link kat bawah nie jer

<li><a href="URL 1 #"><img src="picture 1 Link" alt="" /></a></li>
Save lepas siap masukkan link..

No comments:

Post a Comment

Kritikan Seorang Engineer Bertauliah