Stylish Hover Effect Thumbnails Only Related Posts

ေနာက္တစ္မ်ိဳးေပါ့ေနာ္ ..

မိမိရဲ့ဘေလာ့မွာဆက္စပ္ေနတဲ့ ပို့စ္ေလးေတြကို ပိုစ့္တစ္ခုျခင္းစီရဲ့ ေအာက္မွာထားခ်င္ပါလား?// 

ပံုေလးနဲ့  ေအာက္မွာ ျပထားတဲ့အတိုင္းလုပ္ၾကည့္

လိုက္ပါ.. 

သူ့ကို ဘယ္လိုထည့္လဲဆိုရင္..

1.design ကေနျပီး edit html ကို သြားပါ..

 expand widget templates ကိုအမွန္ခ်စ္ေပးပါ။

2.Ctrl+F နွိပ္ျပီး  ]]></b:skin> ယခုေပးထားေသာ ကုဒ္ကို ရွာပါ။

3.ေတြ့ျပီဆိုရင္  ]]></b:skin> ဒီကုဒ္ရဲ့ အေပၚမွာ ေအာက္ကေပးထားတဲ့ ကုဒ္ကို ထည့္ပါ။။

<!--start related posts css Info : http://www.spiceupyourblog.com-->

ul#related-posts{
font-family:"Droid Sans",Helvetica,Arial,sans-serif;
font-size:10px;
list-style: none;
margin: 20px 0;
padding: 0;
text-transform: none;
}
ul#related-posts li{
float: left;
height: auto;
margin:0 5px;
padding: 2px 1px 2px;
list-style-type:none;
}
*html ul.rp#related-posts li{
margin:0 13px;
}
ul#related-posts li a {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border: 2px solid #FFFFFF;
display: block;
height: 72px;
position: relative;
width: 72px;
}
ul#related-posts li a {
color: #474C51;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}
ul#related-posts li .overlay {
height: 66px;
line-height: 16px;
padding:6px 0 0 6px;
position: absolute;
width: 66px;
z-index: 10;
}
ul#related-posts li .overlay {
}
ul#related-posts li a:hover .overlay {
background: #fff;
display: block !important;
opacity:0.9;
}
ul#related-posts li img {
bottom: 0;
padding:0px !important;
}
ul#related-posts li a:hover {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

<!--end related posts css.Info : http://www.spiceupyourblog.com-->

4. ေနာက္ထပ္ <div class='post-footer'> သို့မဟုတ္ <data:post.body/> ယခုေပးထားေသာ ကုဒ္ကို ရွာပါ။

ေတြ့ျပီဆိုရင္ အဲ့ကုဒ္ရဲ့ေအာက္မွာ ေအာက္ကေပးထားတဲ့ကုဒ္ေတြကို ထည့္ေပးပါ။။။

<!--start related posts code Info : http://www.spiceupyourblog.com-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<h3>Related Posts</h3>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Lg5sVMRBJOVXeLb_wNbx1ozvJb9_psrh_r_C7eTlHFnPDBlAK41w4u9GVgEOJYAdQuG6zoguanhukQfTiEvZh5O_N01V6LaCs2D9RI0uU3rxE8AEobcUB2tLCm9_wwBf0tfDnW0mxCE/s1600/no-image.gif&quot;;
var maxresults=6;
</script>
<script src='http://suyb.googlecode.com/files/rph.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
</b:loop>

<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>

</b:if>

<div style='clear:both'/>
<br/><br/>
<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6L5eEoh3Ufo5-YD4A8iAg72hGQCEnRaC8_SmOSbivcMZ6eOdLRTpNDjA9acQ3W1O_DlQWIoiXrot-pd2jRAGSu6ujXIbFoUHCjJHwpmI3hbexgIJkvj0L5yMnMSufhsT-5HCzr1qhH-xO/s1600/best+blogger+tips.png'/></a>
<!--end related posts code Info : http://www.spiceupyourblog.com-->

မွတ္ခ်က္။။ ။။ 1.အေပၚက ကုဒ္ရဲ့ <h3>Related Posts</h3>  ဒီအျပာေရာင္စာလံုးေနရာမွာ မိမိၾကိုက္တဲ့ေခါင္းစဥ္ကို ထည့္ေပးပါ။။
2. အေပၚက ကုဒ္ရဲ့ maxresults=6; ဒီ ဂဏန္းေနရာမွာ မိမိထည့္ခ်င္တဲ့ ပုိစ့္ အေရအတြက္ကို ထည့္ေပးပါခင္ဗ်ာ..

5. ျပီးရင္ save templates ေပါ့ေနာ္..

အားလံုးအဆင္ေျပစြာ လုပ္နိုင္ၾကပါေစ...