Related Posts in Blog

က်ေနာ့္ ဘေလာ့မွာလည္း တင္မထားရေသးတာနဲ႔ ဒီ related posts widget ေလးကို တင္အံုးမယ္လို႔ စိတ္ကူးလိုက္တာပါ။ အရင္ကေတာ့ thumbnails နဲ႔ ျပတဲ့ related post widget ကိုေတာ့ တင္ေပးထားဖူးပါတယ္။ လိုရမယ္ရေပါ့ဗ်ာ။

အဆင့္(၁)။ အေနနဲ႔ Relatedposts ဆိုတဲ့ .js ဖိုင္ေလးကို အရင္ download ယူထားလိုက္ပါ။ ၿပီးရင္ ျပန္တင္ေပးရမွာ ျဖစ္ပါတယ္။
အဆင့္(၂)။ က်ေနာ္တို႔ ထံုးစံအတိုင္း Layout ထဲက Edit HTML ကို သြားရပါမယ္။
အဆင့္(၃)။ backup ေလး လုပ္ဖို႔ မေမ႔နဲ႔ေပါ့ဗ်ာ။
အဆင့္(၄)။ ၿပီးရင္ expand widget template ဆိုတာေလးမွာ ကလစ္ေပးခဲ့လိုက္ပါ။
အဆင့္(၅)။ ၿပီးရင္ေတာ့ </head> ဆိုတာေလးကို ရွာလိုက္ပါ။


အဆင့္(၆)။ ေအာက္က code ေတြကို အဲဒီ </head> ရဲ႕အေပၚ မွာ ထည့္ေပးလိုက္ပါ။

<!--RelatedPostsStarts-->
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(http://img38.imagefra.me/img/img38/6/4/29/thetnaing/f_i29o2gm_44959d9.gif) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>
<script src='http://ေဒါင္းလုပ္ယူခဲ့တဲ့ relatedposts.js' type='text/javascript'/><!--RelatedPostsStops-->

အေရာင္နဲ႔ ျပထားတာေတြကို စိတ္ႀကိဳက္ျပင္လို႔ ရပါတယ္။ အားလံုးလည္း သိၿပီးျဖစ္မွာပါ။

အဆင့္(၇)။ <data:post.body/> ဆိုတာေလးကို ရွာလိုက္ပါ။
အဆင့္(၈)။ ေအာက္က code ေတြကို <data:post.body/> ဆိုတာရဲ႕ ေအာက္မွာ ထည့္ေပးလိုက္ပါ။

<!--RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; data:label.name &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if><!--RELATED-POSTS-STOPS-->

အေရာင္နဲ႔ ျပထားတာေတြကို စိတ္ႀကိဳက္ျပင္လို႔ ရပါတယ္။ အားလံုးလည္း သိၿပီးျဖစ္မွာပါ။
အဆင့္(၉)။ အားလံုးၿပီးသြားၿပီ ဆိုရင္ေတာ့ Save Template ကိုႏွိပ္လုပ္လိုက္ပါ။ ဒါဆို related post widget ထည့္တာ ၿပီးသြားပါၿပီ။ ပို႔စ္ title သို႔မဟုတ္ readmore ဆိုတာေတြ ႏွိပ္ၾကည့္မွ related post က ေပၚမွာျဖစ္ပါတယ္။တကူးတက ဖတ္ေပးတာ ေက်းဇူးပဲဗ်ာ....






Ref: bloggerstop.net

Posted in: Blog