ဘေလာ့မွာ Related Posts ေလး အလြယ္ထည့္နည္း

Blog ေတြမွာ Visitor ေတြကို အဆင္ေျပေစမယ့္
Widget ေတြအနက္က တစ္ခုျဖစ္တဲ့ Related Posts
ထည့္နည္းေလးကို မွ်ေ၀ေပးခ်င္ပါတယ္ ..


Related Posts ေတြမ်ိဳးစံုရွိပါတယ္ ..
Thumbnail ေလးေတြနဲ႔အတူ ဆက္စပ္ပို႔စ္ေတြကို
ေဖာ္ျပေပးတဲ့ Widget မ်ိဳးေလးေတြရွိသလို ႐ိုး႐ိုးရွင္းရွင္းနဲ႔
ပို႔္စ္ေခါင္းစဥ္ေလးေတြကိုပဲ ေဖာ္ျပေပးတဲ့ Widget ေလးေတြေပါ့
ကၽြန္ေတာ္ကေတာ့ ကြန္နက္ရွင္လံုး၀မေကာင္းတဲ့ အရပ္ေဒသမွာ ေနတဲ့လူျဖစ္လို႔
အတတ္ႏိုင္ဆံုး ဘေလာ့ရဲ႕ Loading Time ကို ေလွ်ာ့ခ်ခ်င္တာျဖစ္တဲ့အတြက္
ပံုလင့္ေတြခ်ိတ္ေနခ်ိန္ေလးသက္သာေအာင္ ႐ိုး႐ိုးတန္းတန္းပဲ ပို႔စ္ေခါင္းစဥ္ေလးေတြကိုပဲ
ေဖာ္ျပေပးတဲ့ Related Posts Widget ကို သေဘာက်ပါတယ္ ..


ကဲ .. အခု ကၽြန္ေတာ့္ဘေလာ့မွာ သံုးထားတဲ့ Related Posts ေလး ထည့္သြင္းပံုကို
မွ်ေ၀ေပးပါ့မယ္ ..
အရင္ဆံုး Blogger မွာ Login ၀င္လိုက္ၿပီေပါ့ ..
Template ကိုသြားပါ ..
HTML ကို ျပင္ရမွာမို႔ အမွားအယြင္းတစ္စံုတစ္ရာအတြက္ ႀကိဳတင္ျပင္ဆင္တဲ့အေနနဲ႔
ညာဖက္အေပၚေဒါင့္နားေလးက Backup/Restore template ကို ႏွိပ္ၿပီး ပြင့္လာတဲ့ထဲက
Download Full template ကိုႏွိပ္ၿပီး ကိုယ့္ရဲ႕ Template ကို ေဒါင္းယူထားလိုက္ပါဦး ..
ၿပီးရင္ Edit HTML ကိုႏွိပ္ပါ ..

ၿပီးရင္ </head> ဆိုတာကို ရွာပါ ..
အလြယ္တကူရွာခ်င္ရင္ HTML ကုဒ္ေတြရဲ႕ အေပၚဆံုးစာေၾကာင္းမွာ ကလစ္တစ္ခ်က္ႏွိပ္ၿပီး
Ctrl ကီးနဲ႔ F ကီးကို တြဲႏွိပ္လိုက္ရင္ ညာဖက္အေပၚေဒါင့္နားမွာ Search box ေလးေပၚလာပါမယ္
အဲဒီထဲမွာ ကိုရွာခ်င္တာကို ႐ိုက္ထည့္ၿပီး Enter ႏွိပ္လိုက္ပါ .. ကိုယ္ရွာတဲ့ စာလံုးကို အေရာင္ေလးျခယ္ၿပီး ျပန္လာပါလိမ့္မယ္ ..
</head>ကိုေတြ႕ၿပီဆိုရင္ေတာ့ သူရဲ႕ အေပၚမွာ ( အေပၚမွာ ေနရာလြတ္မရွိရင္လည္း
</head> ရဲ႕ေရွ႕မွာ ကလစ္တစ္ခ်က္ႏွိပ္ၿပီး Enter ႏွိပ္လိုက္ရင္ </head> က ေအာက္တစ္ေၾကာင္းဆင္းသြားတာမို႔ အေပၚမွာ ေနရာလြတ္ျဖစ္သြားပါမယ္ ..
ကဲ .. ရၿပီဆိုရင္ </head> ရဲ႕အေပၚမွာ ေအာက္ကကုဒ္ေတြကို ေကာ္ပီကူးၿပီး ထည့္ေပးလိုက္ပါ ..

<!--RelatedPostsStarts--><style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; } #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 : #7AA1C3; font-size : 11px; text-decoration : none; } #related-posts a:hover { color : #F49F04; text-decoration : underline; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQjZFPi7aTwP_hDunBtX248JxHvDYQlDwmWixXDhrYPw4p6VW4sn-h1w6qCEWAzAw1R77aqw3_y_yE0mxX252UBFRk6QmNqF1HZmxd9dfMc_WKxRjmSjwuI1ThlRaZBnE9CzHHLlYuZbI/s400/related-post.png&quot;) no-repeat 0 0; padding-top : 0; padding-right : 0; padding-bottom : 2px; padding-left : 20px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script language='JavaScript'>//<![CDATA[ var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break; } } } } function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; } } relatedTitles = tmp2; relatedUrls = tmp; } function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0; } i++; } document.write('</ul>'); } //]]> </script><!--RelatedPostsStops-->

ၿပီးရင္ <div class='post-footer-line post-footer-line-3' /> ဆိုတာကို ထပ္ရွာပါ ..
( Search Box မွာ တစ္ခါတစ္ခါ ကုဒ္အားလံုးထည့္ရွာလို႔မရရင္ တစ္လံုးခ်င္း ေလွ်ာ့ေလွ်ာ့သြားၿပီး လိုက္ရွာပါ )
ေတြ႕ၿပီဆိုရင္ သူရဲ႕ေအာက္ကိုတစ္ေၾကာင္းခ်င္း ဆင္းၾကည့္ပါ
</div>
</div>
အဲဒီလိုဆံုးေနတဲ့ေနရာရဲ႕ ေအာက္တစ္ေၾကာင္းမွာ ေအာက္ကကုဒ္ေတြကို ေကာ္ပီကူးထည့္ေပးလိုက္ပါ ..

<!--RELATED-WIDGET-STARTS--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <font color='#7AA1C3' 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=4&quot;' type='text/javascript'/></b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div></b:if> <!--RELATED-WIDGET-STOPS-->

ကုဒ္ေတြထဲက ကၽြန္ေတာ္ အနီေရာင္နဲ႔ျခယ္ထားတဲ့ 4 ဆိုတာေလးက Related Posts စုစုေပါင္း ဘယ္ေလာက္ျပရမယ္လို႔ သတ္မွတ္ထားတာပါ ..အတိုးအေလွ်ာ့ကို ျပဳျပင္ေပးလို႔ရပါေသးတယ္
ေကာ္ပီကူးထည့္ေပးလိုက္တဲ့ကုဒ္ေတြရဲ႕ေအာက္မွာ </b:includable> ဆိုတာေလးကိုေတြ႕ရင္ ကုဒ္ထည့္တာမွန္ပါတယ္ (ေအာက္ကပံုမွာ ၾကည့္ပါ)

ကုဒ္တစ္ခ်ိဳ႕အနီေရာင္ေျပာင္းသြားရင္ေတာ့ ကုဒ္ထည့္တဲ့ေနရာ မွားပါတယ္ ..
ကုဒ္ထည့္တာမမွန္ရင္ အေပၚနားေလးက Preview Template ကို ႏွိပ္ၾကည့္လိုက္လို႔ ဘေလာ့ပြင့္လာႏိုင္တယ္ဆိုရင္ ကုဒ္ထည့္တာမွန္ပါတယ္ .. ကုဒ္ထည့္တာမွားရင္ေတာ့ Error ျဖစ္တဲ့ေနရာကို ျပပါလိ့မယ္
အဲဒီအခါ ဘာမွမလုပ္တတ္ရင္ ဘယ္ဖက္အေပၚေဒါင့္နားေလးက Back ကိုႏွိပ္လုိက္ပါ .. Save မလုပ္ရေသးေၾကာင္း Box တက္လာရင္ Ok ကိုႏွိပ္ေပးလိုက္ပါ
ဒါဆိုရင္ Template ဟာ အရင္အတိုင္း ျပန္ျဖစ္သြားမွာပါ .. ၿပီးမွ အစကေန ျပန္၀င္ေပါ့ ..

ကဲ .. အားလံုးအဆင္ေျပေျပနဲ႔ ၿပီးသြားၿပီဆိုရင္ေတာ့ Save Template ကို ႏွိပ္ေပးလိုက္႐ံုေပါ့ ..
ၿပီးသြားရင္ေတာ့ View Blog ကေန ကိုယ့္ဘေလာ့ကုိ ၀င္ၿပီး Post တစ္ခုကိုႏွိပ္ၾကည့္လိုက္ေပါ့ ..
အဲဒီပို႔စ္ရဲကေအာက္မွာ Related Posts ေလးေတြ ေပၚေနတာကို ေတြ႕ႏိုင္ပါၿပီ
အဆင္ေျပၾကပါေစဗ်ာ

နည္းပညာလမ္းေၾကာင္းေပၚကသူငယ္ခ်င္းအားလံုးကို ေလးစားခင္မင္လွ်က္
အိုင္တီမုဆိုး

Posted in: Blog ဆုိင္ရာနည္းပညာ,ကုဒ္မ်ား