You might also like သုိ႔မဟုတ္ Related post widget ထည့္သြင္းျခင္း

အားလုံးပဲမဂၤလာပါခင္ဗ်ာ။ ကၽြန္ေတာ္အခု ေဖာ္ျပေပးမွာကေတာ့ ဘေလာ့ဂ္မွာ အေပၚကပုံေလးလုိ Related Post Widget ထည့္သြင္းနည္းေလးပဲျဖစ္ပါတယ္။ ေအာက္မွာ ေဖာ္ျပထားတဲ့ အဆင့္မ်ားအတုိင္း လုိက္လုပ္ ၾကည့္ၾကပါခင္ဗ်ာ..။

၁။    ပထမဆုံး မိမိတုိ႔ရဲ႕ ဘေလာဂ္မွာ Sign in လုပ္ၿပီး Edit HTML ကုိသြားပါ။ ၿပီးရင္ Expand Widget Templates ဆုိတာကုိ အမွန္ျခစ္ေလး ေပးလုိက္ပါ။

၂။    ဘေလာ့ဂ္ code ေတြထဲမွာ </head> ဆုိတဲ့ code ကုိရွာပါ။ ေတြ႕ရင္ အဲဒီအေပၚမွာကပ္ၿပီး ေအာက္မွာ ေပးထားတဲ့ code ေတြကုိ copy ယူၿပီး paste လုပ္လုိက္ပါ။

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://i45.tinypic.com/6eiuq9.jpg";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

၃။    အခုတစ္ခါ ေအာက္မွာ ေပးထားတဲ့ စာေၾကာင္းေလး ႏွစ္ခုအနက္က တစ္ခုခုကုိ ေတြ႕ေအာင္ရွာပါ။

<div class='post-footer-line post-footer-line-1'>

      (သုိ႔မဟုတ္) 

<p class='post-footer-line post-footer-line-1'>

၄။    ေတြ႕ရင္ အဲဒီစာေၾကာင္းေလးရဲ႕ ေအာက္ကေနကပ္ၿပီး ေအာက္မွာေပးထားတဲ့ code ေတြကုိ copy ယူၿပီး paste လုပ္လုိက္ပါ။

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'>
<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>
</div><div style='clear:both'/>
<!-- remove --></b:if> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://www.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Widgets" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

၅။     ၿပီးၿပီဆုိရင္ preview ၾကည့္ၾကည့္ပါ။ မိမိရဲ႕ ပုိ႔စ္တုိင္းရဲ႕ေအာက္မွာ Lable တူ ပုိ႔စ္ေလးေတြကုိ thumbnails ပုံေလးေတြနဲ႔အတူ ေဖာ္ျပေပးပါလိမ့္မယ္။ ဒါေပမယ့္ ဒီအတုိင္းသေဘာမက်ေသးဘူးဆုိရင္ အေပၚက နံပါတ္(၂)မွာ ေပးထားတဲ့ code ေတြကုိ ေအာက္ပါအတုိင္း edit လုပ္ႏုိင္ပါတယ္။

အမ်ားဆုံးေဖာ္ျပလုိတဲ့ Related Post အေရအတြက္ကုိ Edit လုပ္ခ်င္ရင္. (Default အေနနဲ႔ ၅ ခုေပးထားပါတယ္)။

var maxresults=5;

Related Post Title ကုိေျပာင္းလုိလွ်င္...ဥပမာ.. ''ဒါေလးေတြလည္းေရးထားတယ္'' ..

var relatedpoststitle="Related Posts";

Image ပုံမပါတဲ့ Post ေတြအတြက္ Default ေပးထားတဲ့ URL ေနရာမွာ မိမိစိတ္ႀကိဳက္ပုံေလးထည့္လုိလွ်င္..

var defaultnoimage="http://i45.tinypic.com/6eiuq9.jpg";

Related Post Thumbnail ပုံေလးေတြကုိျခားထားတဲ့ Splitter အေရာင္ကုိေျပာင္းလုိလွ်င္..

var splittercolor="#d4eaf2";

၆။     အထက္က အဆင့္ေတြအတုိင္း လုပ္ၿပီးၿပီဆုိရင္ေတာ့.. မိမိတုိ႔ရဲ႕ဘေလာ့ဂ္မွာ Related Post Widget ကုိ Thumbnails ပုံေလးေတြနဲ႕အတူ ထည့္သြင္းၿပီးသား ျဖစ္သြားပါၿပီ။ ဒါေပမယ့္ အဲဒီ Widget ေလးကုိ ပုိ႔စ္စာမ်က္ႏွာမ်ားမွာသာမဟုတ္ပဲ .. ဘေလာ့ဂ္စာမ်က္ႏွာတုိင္းမွာ ေပၚေစခ်င္တယ္ဆုိရင္ေတာ့ အေပၚက code ႏွစ္ခုစလုံးထဲက <!--remove--> နဲ႔စတဲ့ ေအာက္က စာေၾကာင္းႏွစ္ေၾကာင္းစလုံးကုိ ရွာၿပီး ဖ်က္ပစ္လုိက္ပါ။

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

<!-- remove --></b:if>

၇။     အားလုံး စိတ္တုိင္းက် Edit လုပ္ၿပီးသြားၿပီဆုိရင္ Preview အရင္ၾကည့္ပါ။ Ok တယ္ဆုိမွ Save လုပ္ပါ။ အဆင္ေျပၾကပါေစခင္ဗ်ာ..။

မွတ္ခ်က္။    ကၽြန္ေတာ့ ဘေလာ့မွ You might also like မွာ LinkWithin မွသုံးထားျခင္းျဖစ္ပါသည္။ အသုံးျပဳလုိပါက ၄င္း Site တြင္သြားေရာက္၍ မိမိရဲ႕ Email နဲ႔ Blog URL ကုိျဖည့္ၿပီး သတ္မွတ္ထားသည့္ အဆင့္မ်ားအတုိင္း လြယ္ကူစြာ လုပ္ေဆာင္ႏုိင္ပါသည္။ Sign up လုပ္စရာမလုိပါ။