နည္းပညာဗဟုသုတ ျပည့္၀ၾကပါေစ

Sunday, March 30, 2014

ဘလော့မှာ Related Posts လေး အလွယ်ထည့်နည်း

8:30 PM Nyi Nay Min No comments


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/AVvXsEibKNJUiYKeM02y2HdT60HH9FHDgct30LUwoxBf9dQYvo8tkdwJo01zNxIoeBCCa6ihUKFG6TyHBQz7JhfCFl_c7BYgh3wZTEy-EBXP8LNNM0ZniwYNV6Hx3eN28DvhHLVqoQmhq62lqrI/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 လေးတွေ ပေါ်နေတာကို တွေ့နိုင်ပါပြီ
အဆင်ပြေကြပါစေဗျာ

နည်းပညာလမ်းကြောင်းပေါ်ကသူငယ်ချင်းအားလုံးကို လေးစားခင်မင်လျှက်
အိုင်တီမုဆိုး

အောင်အောင်(မကစ) ရဲ့ ဘလော့ခရီးသည်လေးအား အားပေးနေကြတဲ့အတွက် ကျေးဇူးအထူးတင်ပါတယ်.. တုန့်ပြန်မှုအနေနဲ့ fb like လေးတော့ လုပ်ပေးခဲ့ကြပါနော်.. တတ်စွမ်းသမျှ တွေ့ ရှိသမျှလေးတွေကို ပြန်လည် မျှဝေနေပါ့မယ်...။ အဆင်မပြေတာများရှိခဲ့ပါက...cbox မှာ ပြောခဲ့ကြပါနော်..
<<<မန်ဘာဝင်ပြီး...Fb Like ခြင်းဖြင့် အားပေးကြပါနော်>>>
အောင်အောင်(မကစ) ပိုင်ဆိုင်သော နေရာလေးများကိုလာလည်ကြပါ။

www.aungsanmks.com 
www.ledimye.blogspot.com 
www.ninilayy.blogspot.com
Rate this posting:
{[['']]}

Posted in:

0 comments:

Post a Comment

Twitter Facebook More
Follow Us on Twitter!Follow Us on Twitter!