බ්ලොග් එකේ පිංතූර වලට Mouse Over Fade Effect දාගමු.

අපේ බ්ලොග් එකේ දාල තියන පිංතූර ලගට මවුස් එක අරන් ගිහාම Fade Effect එකක් ලේසියෙන්ම දාගන්න විදිහ තමා මම අද ඔයාලට කියල දෙන්න යන්නේ. කැමති අය මේක තමන්ගේ බ්ලොග් එකට දාගන්න.


 මමත් මේක මගේ බ්ලොග් එකට දාගන තියෙන්නේ. ඔයාලට මේ Fade Effect එක වැඩ කරන විදිහ බලන්න ඕනෙනම් මගේ සයිට් එකේ දාල තියන පිංතූරයක් ලගට මවුස් එක අරන් යන්න.

මෙහෙමයි මෙක දාගන්නේ..

    1. Dashboard--> Design- -> Edit HTML

    2. දැන් Ctrl+F එබුවාට පස්සෙ එන Search bar එකේ  </head> කියලා ටයිප් කරන්න. ඉන්පසු HTML Box එකේ එකේ  </head> කියන කෝඩ් එකෙ තියන තැන පෙන්වනවා.

    3. ඉන්පසු පහත කෝඩ් එක  </head> කියන කෝඩ් එකට උඩින් පේස්ට් කරලා සේව් කරන්න

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".latest_img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".latest_img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>

දැන් බලන්න Fade Effect එක කොහොමද කියලා..