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

Monday, March 31, 2014

ပို့စ် အလွယ်ခေါက်သောနည်း( ရှယ်တယ်နော် )

blog မိတ်ဆွေအားလုံးပဲမင်္ဂလာပါခင်ဗျာ ကျွန်တော်ဒီနေ ့တင်တဲ ့နည်းပညာလေးကတော့ blog post တွေရှည်နေလို ့ မခေါက်တတ်တဲ့သူငယ်ချင်းများအတွက်ပါ ဒီနည်းလေးကတော့တော်တော်လေးကိုလွယ်တဲ ့နည်းလမ်းလေးတစ်ခုလို ့ ပြောရင်ရပါတယ် ဆက်ဖတ်ရန်ပုံကိုကလစ်ပေးပါဗျာ

(Design )( Edit HTML )ထဲကိုလဲသွားထည့်စရာမလိုပါဘူး အောက်မှာကျွန်တော်ပုံနဲ ့ပြထားတဲ ့အတိုင်းလေးလုပ်ပေးပါ
( 1 )( Sign in your blog )>>>
 ( 2 )( Design ) >>>( Settings )
 ( 3 )( Formatting ) Post Template ဘောင်ထဲမှာသွားပြီး အောက်ကကျွန်တော်ပေးထားတဲ ့ကုတ် ကိုထည့်ပေးလိုက်ပါ ပြီးရင်တော့ ( Save Settings ) ကိုကလစ်ပေးလိုက်ရုံပါပဲ အောက်ပါပုံလေးထဲကလိုဝင်ရောက်ထည့်ပေးလိုက်ပါဗျာ


( ၂ )
( ၃ )
( မှတ်ချက် )=( မိမိတို ့ပိုစ်တင်တိုင်းမှာသတိထားရမှာကအောက်ပါပုံထဲကအတိုင်းလေးရေးပေးပါရန်
နိဒါန်း ပျိုးမဲ ့နေရာမှာ နှစ်ကြောင်းသုံးကြောင်းလောက်ရေးပေါ့ဗျာ အပြည့်စုံနေရာမှာမိမိတို ့ရေးချင်သလောက်ရေးထည့်ပေါ့ ဆက်ဖတ်ရန်နေရာမှာကျွန်တော်ပုံလေးနဲ ့ထည့်ပေးထားပါတယ်တကယ်လို ့မကြိုက်ဘူးဆိုလျှင်မိမိတို ့ ကြိုက်နှစ်သက်တဲ ့ ( read more )ပုံပြောင်းနိုင်ပါတယ် အားလုံးအဆင်ပြေပါစေဗျာ အကြင်နာနန်း အဆင်ပြေရင်တော့ comments မှာနဲနဲလောက်အော်သွားပေါ့ဗျာမအော်တဲ ့သူ အပျိုကြီးနဲ ့ညားပါစေ :D

<center><div id="spoiler"><div><input value="" style="width:100px ;font-size:20px;background-image: url(http://s14.postimage.org/871ow15bh/anigif.gif);-moz-border-radius: 10px; border-radius: 10px;margin:13px;padding:0px;border-style: 2px solid #ff9fcc;" type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" />
<div id="show" style="display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-width:0px; padding:3px; width:90%">
<center><center>ဒီနေရာမှာမိမိတို ့ရေးသားမဲ ့ပိုစ့် အပြည့်စုံရေးပါ</center></center></div></div></div></center>

              အကြင်နာနန်းမှ မျှဝေဖေါ်ပြပါသည်...

အောင်အောင်(မကစ) ရဲ့ ဘလော့ခရီးသည်လေးအား အားပေးနေကြတဲ့အတွက် ကျေးဇူးအထူးတင်ပါတယ်.. တုန့်ပြန်မှုအနေနဲ့ fb like လေးတော့ လုပ်ပေးခဲ့ကြပါနော်.. တတ်စွမ်းသမျှ တွေ့ ရှိသမျှလေးတွေကို ပြန်လည် မျှဝေနေပါ့မယ်...။ အဆင်မပြေတာများရှိခဲ့ပါက...cbox မှာ ပြောခဲ့ကြပါနော်..
<<<မန်ဘာဝင်ပြီး...Fb Like ခြင်းဖြင့် အားပေးကြပါနော်>>>
အောင်အောင်(မကစ) ပိုင်ဆိုင်သော နေရာလေးများကိုလာလည်ကြပါ။
လယ်တီမြေသား www.ledimyethar.com
ဘလော့ခရီးသည် http://aungsanmks.blogspot.com/
မှတ်စုစာအုပ် http://aungsan96.blogspot.com/
ဓမ္မနှင့်စာပေနန်းတော် http://ninilayy.blogspot.com/
Rate this posting:
{[['']]}

Blog တစ်ခုအတွင်း ဘောင်ခပ်ခြင်းအထွေထွေ


ဘလော့ Template တစ်ခုလုံးကိုပဲဖြစ်ဖြစ် ဘလော့ Template ထဲက Widget တစ်ခုချင်းစီကိုပဲဖြစ်ဖြစ်
ကိုယ်နှစ်သက်သလို ဘောင်ခပ်တဲ့ နည်းပညာလေးတစ်ခုကို မျှဝေပေးချင်ပါတယ် ..
အရင်ဆုံး Template ကြီး တစ်ခုလုံးကို ဘောင်ခပ်တဲ့နည်းကို မျှဝေပေးပါ့မယ်
ဒီနည်းရဲ့ နမူနာ ( Demo ) ကို ကြည့်ချင်တယ်ဆိုရင်တော့ ကျွန်တော်အခုသုံးထားတဲ့ Template ကြီးတစ်ခုလုံးရဲ့ ဘေးပတ်ပတ်လည်မှာခပ်ထားတဲ့ ဘောင်ကိုသာ ကြည့်လိုက်ကြပါလို့ ..


ကဲ .. အရင်ဆုံး Blogger ကို Lon in ဝင်လိုက်ပါ ..
ပြီးရင် Template က နေ Edit HTML ကို ဝင်ပါ
HTML ကုဒ်တွေထဲက ]]></b:skin>  ကို လိုက်ရှာပါ ...
တွေ့ပြီဆိုရင် အဲဒီ ]]></b:skin> ရဲ့ အပေါ်မှာ အောက်ကကုဒ်တွေကို ကော်ပီကူးပြီး ထည့်ပေးလိုက်ပါ


#mblwrap {
      background: #Ffffff;
      width: 960px;
      margin: 10px auto 5px auto;
      padding: 0;
      position: relative;
      border-right: 15px solid #333;
      border-left: 15px solid #333;
      border-top: 10px solid #333;
      border-bottom: 15px solid #333;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border-radius:10px;
      box-shadow: #333 0px 1px 3px;
    }



အဲဒီကုဒ်တွေထဲက ကျွန်တော် အနီရောင်နဲ့ ပြထားတဲ့နေရာမှာ ကိုယ်နှစ်သက်တဲ့ အရောင်ကုဒ်ကို ပြောင်းလဲပေးနိုင်သလို Border ရဲ့ အထူအပါးကိုလည်း 15px, 15px, 10px စတဲ့နေရာတွေမှာ လိုက်ပြီး ချိန်ညှိပေးနိုင်ပါသေးတယ်

ပြီးရင် <body> ကို ထပ်ရှာပါ ..
တွေ့ပြီဆိုရင် အဲဒီ <body> ရဲ့ အောက်မှာ


<div id='mblwrap'>  

အဲဒီကုဒ်ကို ကူးထည့်လိုက်ပါ

ပြီးရင် </body> ကို ထပ်ရှာပါ ..
တွေ့ပြီဆိုရင် အဲဒီ </body> ရဲ့ အပေါ်မှာ</div> ဆိုတဲ့ကုဒ်ကို ထည့်ပေးလိုက်ပါ
အပေါ်မှာထည့်တာ အောက်မှာထည့်တာတွေကို သေချာ ဂရုစိုက်ပေးစေချင်ပါတယ်
Preview Template ကနေ ဘလော့ကို ကြည့်လို့ အဆင်ပြေသွားပြီဆိုရင်တော့
Save Template ကို နှိပ်လိုက်ရုံပါပဲ ...
ဒါဆိုရင်တော့ Template ကြီးတစ်ခုလုံးကို ဘောင်ခပ်လို့ ပြီးသွားပါပြီ ..

နောက်တစ်နည်းကတော့ Template ထဲမှာ ရှိတဲ့ Widget တစ်ခုချင်းစီကို ဘောင်ခပ်မယ်ပေါ့
အရင်ဆုံး ကိုယ်ဘောင်ခပ်ချင်တဲ့ Widget ID ကို သိအောင်လုပ်ထားပါ ..
ဥပမာ .. Post ရဲ့ Widget ID ကို သိချင်တယ်ပေါ့ .. Layout ကနေ အဲဒီ Post ရဲ့ ညာဖက်အောက်ဒေါင့်က Edit ကိုနှိပ်လိုက်ရင် ပွင့်လာတဲ့ ဝင်းဒိုးအသေးလေးရဲက Address bar ထဲမှာ Widget ID ကို ရှာလို့ရပါတယ် .. Template ထဲမှာ ရှာတတ်ရင်လည်း ရပါတယ် ..
များသောအားဖြင့်တော့ Post ရဲ့ Widget ID က Blog1 ဖြစ်နေလေ့ရှိပါတယ် ..
ကဲ .. အဲဒီ Post တွေကို ဘောင်ခပ်တော့မယ်ပေါ့ဗျာ ..
Template က နေ Edit HTML ကို သွားလိုက်မယ်ပေါ့

HTML ကုဒ်တွေထဲက ]]></b:skin> ကို လိုက်ရှာပါ ..
တွေ့ပြီဆိုရင် သူ့ရဲ့ အပေါ်မှာ အောက်ကကုဒ်တွေကို ကော်ပီကူးပြီး ထည့်ပေးလိုက်ပါ



#YourWidgetID {
padding: 5px;
border: 1px solid #ff0000;
}


ကုဒ်တွေထဲက #ff0000 ကတော့ ကိုယ် ဘောင်အဖြစ်ခပ်မယ့် အရောင်ပေါ့ .. 
ကုဒ်တွေထဲမှာ အနီရောင်နဲ့ပြထားတဲ့ YourWidgetID ဆိုတဲ့နေရာမှာ ကိုယ် ဘောင်ခပ်ချင်တဲ့ Widget ရဲ့ ID ကို ထည့်ပေးရမှာပါ
ဥပမာ .. ကျွန်တော်က Post တွေကို ဘောင်ခပ်ချင်တယ်ဆိုပါတော့ Post ရဲ့ ID က Blog1 ဆိုပါတော့
ကုဒ်က ဒီလိုဖြစ်သွားမယ်

#Blog1 {
padding: 5px;
border: 1px solid #ff0000;
}

ပြီးရင်တော့ Save Template ပေါ့ ...
ကဲ .. အဆင်ပြေပါစေဗျာ

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

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

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

Sunday, March 30, 2014

ဘလော့မှာ 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/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:
{[['']]}

အသဲပုံစံ နှင့် အသဲပုံစံ social widgets လေးပါ



အောင်မြင်ရင်တော့ Comment လက်ဆောင်ထားခဲ့ပေါ့နော်
►1.  Login လုပ်လိုက်ပါ ဘလော့ကာကို ►2.  Template  ကိုသွားပါ
►3. Edit HTML နှိပ်ပြီး ဖွင့်လိုက်ပါ.... ►4. CTRL+F   ကိုနှိတ် ပါ အောက်က ဘားလေးတတ်လာမယ်
►5. </head>ထည့်ပြီးအန်းတားခေါက်ပါ</head> တွေ့ရင် အပေါ် ကနေ ထည့်လိုက် ပါ
<!-- Start Heart Bookmarking Gadget Code From http://www.blogtariff.com/ -->
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- End Heart Bookmarking Gadget Code From http://www.blogtariff.com/ -->

►6. CTRL+F  ခေါ်ထားတဲ့ ထဲမှာ </body>  ထက်ရှာတွေ့ရင်

</body> အပေါ်ကနေ ထည့်ပြီး SAVE ပါ   ok သွား ပါပြီး

<!-- Start Heart Share Code From http://www.blogtariff.com/ -->
<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareHeart&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;pinterest&#39;,&#39;linkedin&#39;,&#39;stumbleupon&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareheart&#39;});</script><a href="http://aunglaybc.blogspot.com/2013/01/social-widgets.html">ထိုဟာလေးလိုချင်ရင်လာခဲ့ပါ</a>
<!-- End Heart Share Code From http://www.blogtariff.com/ -->

အောင်အောင်(မကစ) ရဲ့ ဘလော့ခရီးသည်လေးအား အားပေးနေကြတဲ့အတွက် ကျေးဇူးအထူးတင်ပါတယ်.. လိ်ုခြင်တာကို ကြိုက်နှစ်သက်သလို ယူဆောင်သုံးစွဲနိုင်ပါတယ်.... အဆင်မပြေတာများရှိခဲ့ပါက...cbox မှာ ပြောခဲ့ကြပါနော်..
<<<မန်ဘာဝင်ပြီး...Fb Like ခြင်းဖြင့် အားပေးကြပါနော်>>>
အောင်အောင်(မကစ) ပိုင်ဆိုင်သော နေရာလေးများကိုလာလည်ကြပါ။ 
 www.herostown.blogspot.com 
www.ledimyethar.com 
www.ninilayy.blogspotcom
Rate this posting:
{[['']]}

Blog ရေးသားနည်း အခြေခံ

Blog ရေးသားချင်သူများ၊ ဘယ်ကနေစပြီး ရေးရမယ်ဆိုတာ မသိသူများအတွက် အခြေခံ Blog ရေးသားနည်းအား ပုံနှင့်တကွ ရှင်းလင်းချက်များနှင့် Ebook စာအုပ်လေး ကို ရေးသားပြီး မျှဝေလိုက်ပါသည်။ မမိုးရေးသားသောစာအုပ်အား မည်သူမဆို၊ မည်သည့်နေရာသို့မဆို ကူးယူ ဖော်ပြနိုင်ပါသည်။









အောက်မှာ ဒေါင်းပါ။



မြန်မာ့ နည်းပညာလောကကို အကျိုးပြုနိုင်သော Blog များ Blogger များ ပေါ်ထွန်းလာပါစေ။

လေးစားစွာဖြင့်
မိုး


Rate this posting:
{[['']]}

Saturday, March 29, 2014

Recent Posts စလိုက်လေးပြု လုပ်နည်း (7)


]Tooltips Recent Post Widget For Blogger With Thumbnail
Go To Blogger > Layout > Add A Gadget > HTML/Javascript   ထဲကိုအောက်က ကုဒ် ထည့် ပါ
ပြီးရင်တော့ အဲ ထဲမှာ (ဘလော့နာမည်) ဆိုပြီ ရှိတယ် မိးမိးဆိုက် ကို ပြင် ပေး ရမယ်
ဆေ့ပါ ....
အောင်မြင် သွား ပါပြီ



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>


<style type="text/css">
#post-gallery {
width:304px;
margin:0px auto;
font:normal 11px Arial,Sans-Serif;
color:##000000
;
padding:8px;
background-color:#1BA1E2
;
-webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
-moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#post-gallery h2 {
font:20px Arial,Sans-Serif;
color:white;
text-shadow:0px 3px 2px black;
text-transform:uppercase;
margin:2px 2px 2px;
padding:7px 14px;
background-color:#000000;
text-align: center;
}
#post-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0px 0px;
background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJJtWnvsS2k2w-Aq8zOuOMPutkI8rha74h5O6_DqNRZK6tC-ihcDMX7up9CtEWN0FWg75hON8_7-ujNhqKviRMyAfHlxb5_JyGh_dQawviABYgOR6nbRL57haYGPrw0PSEfvRz3Dfu4AGC/s1600/24work.blogspot.com.loading.gif') no-repeat 50% 50%;
width:72px;
height:72px;
}
#post-gallery .rp-item img {
width:72px;
height:72px;
border:none !important;
margin:0px 0px !important;
padding:0px 0px !important;
background:transparent !important;
display:none;
}
#post-gallery .rp-item .rp-child {
position:relative;
top:10%!important;
left:10%!important;
z-index:1000;
width:200px;
background-color:white;
border-top:5px solid #1BA1E2;
-webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
padding:10px 15px;
overflow:hidden;
word-wrap:break-word;
display:none;
opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
font-size:12px;
margin:0px 0px 5px;
color:#1BA1E2;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript">


var rpTitle = "Latest Post", // Widget Title

numposts = 20, // The number of thumbnails / posts to display
numchar = 200, // Number of characters in the description tooltip
rcFadeSpeed = 600, // Speed of the effect. fadeIn () tooltip appears

pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjghh3K0WvVURQ4Ommul88ew3DZl2n2uPZg5jcp3WjfcrDxE2bAxxBgn8bbpEB4SbbTz6PgZ8rRIwEhiq94tUDAEXV5Ionw5giVKm4QINMvmfN0E_Ns8_8k3bgM9ZkSs15jnVgMTVeQIXvX/s1600/noimage.png", // Image that show up if the post doesn't have a image
blogURL = "http://ဘလော့နာမည်.blogspot.com/"; // Your Blog Address
</script><script src="http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-6.js" type="text/javascript"></script>




ဆက်လက်ကြိုးစားရေးသားပေးပါဦးမယ်ဗျာ
အောင်လေး
Rate this posting:
{[['']]}

Blog Template များ၏ width အား ချဲ့ခြင်း/ချုံ့ခြင်း


အားလုံးမင်္ဂလာပါခင်ဗျာ..။ အကြောင်းအကြောင်းအမျိုးမျိုးကြောင့် ပို့စ်အသစ်တွေ မတင်နိုင်တဲ့အတွက် လာလည်ကြသူ မိတ်ဆွေအပေါင်းအား အလွန်ပဲ အားနာမိပါတယ်ခင်ဗျာ..။ အခုလည်း မအားတဲ့ကြားကပဲ တောင်းဆိုထားတဲ့သူများအတွက် ဘလော့မှာ width ကို မိမိတို့လိုသလို ချဲ့နိုင်/ချုံ့နိုင်အောင် ဒီပို့စ်လေးကို ရေးသားလိုက်ရပါတယ်။ မိမိနားလည်သလို တင်ပြထားခြင်းဖြစ်တဲ့အတွက် အားနည်းချို့ယွင်းချက်များရှိပါက နားလည်ခွင့်လွှတ်ပေးကြပါလို့ ဦးစွာတောင်းပန်အပ်ပါတယ်။ လိုအပ်ချက်များရှိခဲ့ရင်လည်း ဖြည့်စွက်ပေးကြစေလိုပါတယ်။
ဘလော့ရဲ့ width ကိုချဲ့ခြင်း/ချုံ့ခြင်းပြုလုပ်ဖို့အတွက် သူ့ရဲ့ အခြေခံသဘောတရားလေးကိုတော့ သိဖို့လိုအပ်ပါတယ်။ ဒါမှသာ မိမိတကယ် ပြင်ဆင်တဲ့အခါ နားလည်လွယ်မှာဖြစ်ပါတယ်။ ဒါကြောင့် Template ကို အကြမ်းဖျဉ်းအားဖြင့် header-wrapper ၊ outer-wrapper နဲ့ footer ဆိုပြီး (၃)ပိုင်း ပိုင်းခြားထားကြောင်းကို သိထားရပါ့မယ်။ အဲဒီ (၃)ပိုင်းစလုံးရဲ့ width တွေကလည်း တူညီနေရပါ့မယ်။ ဥပမာ.. header-wrapper ရဲ့ width က 980px ဆိုရင် outer-wrapper နဲ့ footer တို့ရဲ့ width တွေကလည်း 980px စီပဲ ရှိကြရပါမယ့်။ ဒါမှသာ အချိုးညီလှပတဲ့ Template တစ်ခု ဖြစ်ပါလိမ့်မယ်။


header-wrapper = outer-warpper = footer
အဲဒီ အပိုင်းကြီး(၃)ပိုင်းအနက် outer-wrapper အကြောင်းကို ထပ်ပြောပါ့မယ်။ outer-warpper ဆိုတာကတော့  main-wrapper နဲ့ sidebar-wrapper နှစ်ခုကို ပေါင်းထားတာပဲဖြစ်ပါတယ်။ သဘောကတော့ outer-wrapper ရဲ့ width ဟာ main-wrapper နဲ့ sidebar-wrapper နှစ်ခုပေါင်းတာနဲ့ ညီပါတယ်။
ဥပမာ...
outer-wrapper = 980px ဆိုပါက..
main-wrapper + sidebar-wrapper = 980px ဖြစ်ရပါမယ်။
outer-wrapper = main-wrapper + sidebar-wrapper (sidebar တစ်ခုသာပါသည့် template များအတွက်)
outer-wrapper = main-wrapper + right-sidebar-wrapper + left-sidebar-wrapper (sidebar နှစ်ခုပါသည့် template များအတွက်)
ဒါပေမယ့် main-wrapper နဲ့ sidebar-wrapper နှစ်ခုအကြားမှာတော့ margin တော့ထားပေးရပါတယ်။ တစ်ခုနဲ့တစ်ခု ထိစပ်နေရင် ကြည့်ရတာလည်း အဆင်ပြေမှာမဟုတ်ပါဘူး.။ ဒါကြောင့် margin အတွက် 30px, 40px.. စသည်ဖြင့် ထားပေးရပါတယ်။ အောက်မှာ ပေးထားတဲ့ နမူနာပုံလေးတွေကိုကြည့်ကြပါခင်ဗျာ..။


အပေါ်ကပုံတွေကိုကြည့်မယ်ဆိုရင်...
Sidebar တစ်ခုသာပါတဲ့ Template အတွက်..
Main + margin + sidebar = outer
640px + 30px + 310px = 980px

Sidebar နှစ်ခုပါတဲ့ Template အတွက်
left-sidebar + margin + main + margin + right-sidebar = outer
200px         + 30px   +520px + 30px + 200px             = 980px
ဒါဆိုရင်တော့ Template ရဲ့အခြေခံသဘောတရားကို နားလည်လောက်ပြီလို့ထင်ပါတယ်။ အခု မိမိတို့ရဲ့ Template width တွေကို လိုအပ်သလိုပြင်ကြည့်ကြရအောင်..။ မူလက 980px ရှိတဲ့ Sidebar (၂)ခုပါ Template ကို 1200px အဖြစ် ပြင်ကြည့်ပါမယ်..။ 
မိမိတို့ရဲ့ဘလော့မှာ sign in လုပ်ပြီး Design အောက်က Edit HTML ကိုသွားပါ။ ထုံးစံအတိုင်း Download Full Template လုပ်ပြီး မိမိတို့ရဲ့ ဘလော့ကို backup လုပ်ထားလိုက်ပါ။




Ctrl + F နဲ့ “#header-wrapper”, “#outer-wrapper”, “#main-wrapper”, and “#footer” ဆိုတဲ့ code တွေကိုရှာပါ..

#header-wrapper {
width:980px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width: 980px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 520px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#right-sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#left-sidebar-wrapper {
width: 200px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#footer {
width:980px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
980px ရှိတဲ့ Template ကို 1200px အထိချဲ့မှာ ဖြစ်တဲ့အတွက် အပေါ်က code တွေထဲက header-wrapper, outer-wrapper, footer တို့ရဲ့ width တွေကို 1200px လို့ပြင်လိုက်ပါ့မယ်။


outer-wrapper ရဲ့ width ဟာ 1200px ဖြစ်သွားပြီးဖြစ်တဲ့အတွက် main-wrapper နဲ့ sidebar (2)တို့ရဲ့ width စုစုပေါင်းကိုလည်း 1200px ဖြစ်အောင် ပြင်ပေးရပါ့မယ်။ sidebar တွေရဲ့ width ဟာ မိမိဘလော့ရဲ့ လိုအပ်ချက်နဲ့ ကိုက်ညီပြီးသားဆိုရင်တော့ ပြင်စရာမလိုပါဘူး။ အကယ်၍ မကိုက်ဘူးဆိုရင်တော့ ပြောင်းပေးနိုင်ပါတယ်။ မူလ sidebar ရဲ့ 200px ကို 220px အထိ်ချဲ့ချင်တယ် ဆိုပါစို့ ။ ဒါဆိုရင် 1200 ထဲက နေ margin (၂)ခုအတွက် 60 (30px + 30px) ကိုဖယ်ပြီး အောက်ပါအတိုင်းပြောင်းပေးရပါမယ်။ ဒါမှသာ စုစုပေါင်း 1200 px ဖြစ်ပါလိမ့်မယ်။

main-wrapper=700px
left-sidebar=220px
right-sidebar =220px

အားလုံး ပြောင်းပြီးသွားရင်တော့ save မလုပ်သေးဘဲ preview အရင်ကြည့်ပါ။ အဆင်ပြေတယ်ဆိုမှသာ Save လုပ်ပါ။
Template ချဲ့ခြင်း/ချုံ့ခြင်းအတွက်ကတော့ ဒီလောက်ဆိုရင် အနည်းငယ် အထောက်အကူဖြစ်ပြီလို့ ယူဆပါတယ်။ မရှင်းလင်းတဲ့အချက်အလက်များရှိရင်လည်း ဆွေးနွေးမေးမြန်းနိုင်ကြပါတယ်။ တစ်လက်စတည်း ဒီပို့စ်လေးနဲ့ ဆက်စပ်နေတဲ့ မိမိတို့ဘလော့ header banner ပုံလေးကို မိမိတို့စိတ်ကြိုက် ပုံလေးတွေနဲ့ အစားထိုးတဲ့အကြောင်းကို ပြောချင်ပါတယ်။ အချို့သော ဘလော့တွေမှာ Header Banner ပုံတွေ အချိုးမကျတာကို တွေ့နေရပါတယ်။ ဘာကြောင့်လဲဆိုတော့ မိမိဘလော့ Header ရဲ့ width နဲ့ မိမိအစားသွင်းမယ့် banner ပုံရဲ့ width တို့ မကိုက်ညီတာကြောင့်ပဲဖြစ်ပါတယ်။ ဒါကြောင့် မိမိဘလော့ရဲ့ Header width က 1200px ဆိုရင် မိမိအစားသွင်းမယ့်/အသုံးပြုလိုတဲ့ Header image ရဲ့ width ကိုလည်း 1200px ဖြစ်အောင် photoshop လို image editor တစ်ခုခုကိုအသုံးပြုနိုင်ကြပါတယ်။ အားလုံးအဆင်ပြေ ပျော်ရွှင်ချမ်းမြေ့ကြပါစေခင်ဗျာ.......။

Guest post by - IT-Traveller

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

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

ကွန်ပျူတာအတွက်လုပ်ဆောင်သင့်သောနည်းလမ်းများ ( ၁ ) မှ ( ၅ ) ထိ စုစည်းမှု စာအုပ်


 မင်္ဂလာပါ  ကျွန်တော် ရေးသား ထားတဲ့ စာအုပ်လေးတွေကို  ယခင်က တနေ့ တစ်အုပ် တင်ခဲ့ပါတယ်..
ခုတော့ အားလုံး ပြီးဆီးနေတဲ့အတွက်  တနေရာထဲကနေ တကြိမ်ထဲ ဒေါင်းယူလိုသူများအတွက် စုစည်း ပြီးတင်လိုက်ပါတယ်နော်...
ကွန်ပျူတာဆိုင်ရာလု်ပဆောင်သင့်သောနည်းလမ်းလေးများ  နံပါတ်  ( ၁ )  ကနေ ( ၅ ) ထိ
ရေးသားထားရာ  အကုန် ဒေါင်းနိုင်ပါတယ်

ကွန်ပျူတာအတွက်လုပ်ဆောင်သင့်သောနည်းလမ်းများ ( ၁ )
------------------------------------------------------------
Download with Mediafire 
 ( OR )
Download with Zippyshare


ကွန်ပျူတာအတွက်လုပ်ဆောင်သင့်သောနည်းခမ်းများ ( ၂ )
-------------------------------------------------------------

ကွန်ပျူတာအတွက်လုပ်ဆောင်သင့်သောနည်းခမ်းများ ( ၃ )
-------------------------------------------------------------
 ( OR )
Download with Zippyshare


ကွန်ပျူတာအတွက်လုပ်ဆောင်သင့်သောနည်းခမ်းများ ( ၄ )
 ( OR )
Download with Zippyshare


ကွန်ပျူတာအတွက်လုပ်ဆောင်သင့်သောနည်းခမ်းများ ( ၅ )
----------------------------------------------------------


ခုလိုအားပေးတဲ့အတွက် အထူးကျေးဇူးတင်ပါကြောင်း ပြောကြားပါရစေ..ဘလော့ခရီးသည်မှ နည်းပညာများအား မည်သူမဆို လွတ်လပ်စွာ ကူးယူသုံးစွဲနိုင်ပါတယ်.. ကျွန်တော် ပိုင်ဆိုင်သောနေရာလေးများအား ဆက်လက် လည်ပါတ်လိုပါက ***************************************
ဘလော့ခရီးသည်သို့ { ဒီမှာ } သွားလိုက်ပါ
လယ်တီမြေသားသို့{ ဒီမှာ } သွားလိုက်ပါ
စာပေနန်းတော်သို့{ ဒီမှာ } သွားလိုက်ပါ
Rate this posting:
{[['']]}

ဘလော့ကာတစ်ယောက်အတွက် သိသင့်စရာထွေထွေရာရာ ( စာအုပ် )



 မင်္ဂလာပါဗျာ ကျွန်တော် သည်နေ့ ရေးဖြစ်တာလေးကတော့  ဘလော့ကာများအတွက်  သိသင့်စရာ နည်းလမ်း ထွေထွေရာရာလေးတွေပါဘဲ... အတိုအစလေးတွေပေါ့ဗျာ... ဘလော့ကာဆရာကြီးများအတွက် မလိုအပ်ပေမယ့်  ဘလော့ကာ အသစ်များအတွက် လိုအပ် မယ်ထင်လို့ ခုလို ရေးသားလိုက်ရခြင်းဖြစ်ပါတယ်.. အောက်မှာ ဒေါင်းယူနိုင်ပါတယ်.....
ပါဝင်တဲ့ နည်းလမ်းလေးတွေကတော့
( ၁ ) Template ဒေါင်းယူနည်း  ထည့်သွင်းနည်း
( ၂ ) Author ( or ) Admin ဖိတ်ခေါ်နည်း ......
( ၃ ) ဘလော့တစ်ခုလုံး Post အပါဝင် ဒေါင်းယူနည်း ထည့်သွင်းနည်း
တို့ဖြစ်ပါတယ်... စာအုပ်လေးကတော့အောက်မှာ ဒေါင်းယူပါ

( OR )

<<<တာဝန်မလေးပါကတချက်လောက်ကလစ်ပေးခဲ့စေလို>>>

ရေးပြီးသမျှ ဘလော့ဆိုင်ရာစာအုပ်များ

( ၁ )   ဘလော့မှာ LABELS ထည့်နည်း LINK ချိတ်နည်း အပြည့်အစုံ( PDF-စာအုပ်)

( ၂ )  ဘလော့တခုရဲ့ မုရင်း Template အလွယ်ဆုံးပြင်နည်း

( ၃ )    ဘလော့ကာရဲ့ Template ကို Download ရယူနည်း နှင့် ထည့်သွင်းနည်း ( pdf စာအုပ် )

 

ခုလိုအားပေးတဲ့အတွက် အထူးကျေးဇူးတင်ပါကြောင်း ပြောကြားပါရစေ..ဘလော့ခရီးသည်မှ နည်းပညာများအား မည်သူမဆို လွတ်လပ်စွာ ကူးယူသုံးစွဲနိုင်ပါတယ်.. ကျွန်တော် ပိုင်ဆိုင်သောနေရာလေးများအား ဆက်လက် လည်ပါတ်လိုပါက ***************************************
ဘလော့ခရီးသည်သို့ { ဒီမှာ } သွားလိုက်ပါ
လယ်တီမြေသားသို့{ ဒီမှာ } သွားလိုက်ပါ
စာပေနန်းတော်သို့{ ဒီမှာ } သွားလိုက်ပါ
Rate this posting:
{[['']]}

Friday, March 28, 2014

Recent Posts စလိုက်လေးပြု လုပ်နည်း (6)

Flexible Recent Posts Widget With Thumbnail
Go To Blogger > Layout > Add A Gadget > HTML/Javascript   ထဲကိုအောက်က ကုဒ် ထည့် ပါ
ပြီးရင်တော့ အဲ ထဲမှာ (ဘလော့နာမည်) ဆိုပြီ ရှိတယ် မိးမိးဆိုက် ကို ပြင် ပေး ရမယ်
ဆေ့ပါ ....
အောင်မြင် သွား ပါပြီ



<style type="text/css">
/*<![CDATA[*/
img.label_thumb{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;float:left;padding:0;border:3px solid #cccccc;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:#fff;margin-right:10px;height:70px;width:70px}
img.label_thumb:hover{-moz-transform:scale(1.2) rotate(-350deg);-webkit-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 10px 2px 0;adding:0}ul.label_with_thumbs li{background:#f5f5f5;list-style-type:none;padding:8px 0;min-height:65px;margin-bottom:5px}
.label_with_thumbs a{color:#3395BF;font-size:12pt;outline:0;text-decoration:none}
.label_with_thumbs a:hover,.label_with_thumbs a:focus{color:#F4A557}.credits,.credits a{font-size:12px!important;text-align:left;text-shadow:0 1px 0 #fff;color:#888}
#mdjumplink{font-weight:800;background:#f7f8f9;background:-webkit-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-moz-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-o-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-ms-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0);border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);color:#888!important;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;font-weight:bold;text-decoration:none!important}
#mdjumplink:hover{background:#f1f1f1;background:-webkit-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-moz-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-o-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-ms-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0);text-decoration:none!important}
#mdjumplink a{color:#888!important;text-decoration:none;display:block;margin:2px}
#mdjumplink a:hover{color:#888!important;text-decoration:none}
#mdcomments{padding:6px 12px;background:#3395BF;color:#FFFFFF!important;font-size:13px;font-weight:800}
#mdcomments:hover{background:#F4A557;text-decoration:none}
/*]]>*/
</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript" src="http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-5.js"></script>
<script type='text/javascript'>
//<![CDATA[
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 80;
//]]>
</script>
<script src='http://ဘလော့နာမည်.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs'></script>



ဆက်လက်ကြိုးစားရေးသားပေးပါဦးမယ်ဗျာ
အောင်လေး
Rate this posting:
{[['']]}

ဘလော့မှာ ဧရာ Plugin vertical ToolBar ထည့်ခြင်သူများအတွက်





Ayar Myanmar Unicode Font ဧရာမြန်မာယူနီကုဒ်စာလုံးပြောင်းရန်

Zawgyi Font ဇော်ဂျီမြန်မာစာလုံး

Ayar Online Editor အွန်လိုင်းမြန်မာစာရေးနိုင်သော အယ်ဒီတာ

Ayar Online Converter အွန်လိုင်းတွင် မြန်မာယူနီကုဒ်စာလုံးသို့ပြောင်းရန်

Ayar Online Dictionary အွန်လိုင်းမြန်မာ အင်္ဂလိပ်  မြန်မာ  မြန်မာ အဘိဓာန်

Ayar Myanmar Unicode Group ဧရာမြန်မာယူနီကုဒ်အဖွဲ့ လိပ်စာ


သည်လို နည်းလေးတွေကို မိမိတို့ဘလော့မှာ ထားခြင်တယ်ဆိုသူများအတွက်  နည်းလမ်းလေး ပြန်လည်
မျှဝေလိုက်ပါတယ်... အောက်မှာ နည်းလမ်းပါ...

►1-  Blogger Singin ဝင်လိုက်ပါ။
►2-  Dashboard  ကိုသွားလိုက်ပါ။
►3-  Template    ကိုကလစ်ပါ..။
►4-  Edit  Html   ကိုဝင်ပါ..
►5-  Ctrl+F  (သို့မဟုတ်) F3  အကူညီဖြင့် ပေးထားတဲ့ ကုဒ်ကို ရှာလိုက်ပါ။
                                           <head>   ကို တွေ့တာနဲ့  သူ့အောက်ကကပ်လျှက်  အောက်ကပေးထားသောကုဒ်တွေကို  ထည့်လိုက်ပါ။

<link href='http://joomlamyanmar.net/ayartool.css' rel='stylesheet' type='text/css'/> 
<script type='text/javascript'>
//<![CDATA[
eval(function(m,c,h){function z(i){return(i< 62?'':z(parseInt(i/62)))+((i=i%62)>35?String.fromCharCode(i+29):i.toString(36))}for(var i=0;i< m.length;i++)h[z(i)]=m[i];function d(w){return h[w]?h[w]:w;};return c.replace(/\b\w+\b/g,d);}('||var||convertAyarToZawgyi|function|u1004|u103A|u1039|u1036|u108D||u102D|u108C|u108B|u1064||u1018|u1093|u101C|u1085|u1012||u1019|return|String|fromCharCode|charCodeAt|99|u1011|u1074|u1010|u1072|u100A|u106B|u1009||||||||||||||u106A|u1008|u1069|u1007|u1068|u1006|u1067|u1005|u1065|u1000|u1003|96|u103B|u107D|u1037|u1095|u100B|u100C|u1092|u100F|u100D|u1091|u106D|u106C|u108E|u103D|u103E|u108A|u1030|u1089|u102F|u1088|u1087|u103F|u1086|u103C|u107E|u106E|u102B|u105A|u104E|u1038|u1033|for|length|replace|u1021|u1034|u1001|u1002|u1013|u1017|u101D|u102E|u1032|u1080|u107F|u1014|u1075|u108F|convertTextNodes|if|typeof|string|document|getElementById|else|body|parentElement|parentNode|false|fontFamily|childNodes|split|style|indexOf|nodeType|nodeValue|match|true|defaultView|getComputedStyle|null|toZ|Zawgyi|one|Myanmar3|Padauk|Parabaik'.split('|'),'2 4=5 (A){2 B=[[/\\6\\7\\8\\9/g,\'\\a\'],[/\\6\\7\\8\\c/g,\'\\d\'],[/\\6\\7\\8\\c/g,\'\\e\'],[/\\6\\7\\8/g,\'\\f\'],[/\\8\\h/g,\'\\i\'],[/\\8\\j/g,\'\\k\'],[/\\8([\\l-\\n])/g,5 (m,b){o p.q(b.r(0)+s);}],[/\\8\\t/g,\'\\u\'],[/\\8\\v/g,\'\\w\'],[/\\8\\x/g,\'\\y\'],[/\\8\\8\\z/g,\'\\N\'],[/\\8\\O/g,\'\\P\'],[/\\8\\Q/g,\'\\R\'],[/\\8\\S/g,\'\\T\'],[/\\8\\U/g,\'\\V\'],[/\\8([\\W-\\X])/g,5 (m,b){o p.q(b.r(0)+Y);}],[/\\Z/g,\'\\10\'],[/\\11/g,\'\\12\'],[/\\13\\8\\14/g,\'\\15\'],[/\\16\\8\\17/g,\'\\18\'],[/\\8\\14/g,\'\\19\'],[/\\8\\13/g,\'\\1a\'],[/\\c\\9/g,\'\\1b\'],[/\\1c\\1d/g,\'\\1e\'],[/\\1d\\1f/g,\'\\1g\'],[/\\1d\\1h/g,\'\\1i\'],[/\\1d/g,\'\\1j\'],[/\\1k/g,\'\\1l\'],[/\\1m/g,\'\\1n\'],[/\\17\\8\\17/g,\'\\1o\'],[/\\1p\\7/g,\'\\1q\'],[/\\1r\\6\\7\\1s/g,\'\\1r\'],[/[\\7-\\1d]/g,5 (m){o p.q(m.r(0)-1);}],[/\\1h/g,\'\\1t\']];1u(2 C=0;C<B.1v;C++){2 D=B[C][0];2 E=B[C][1];A=A.1w(D,E);};2 F=[[/\\10/g,\'\\7\'],[/\\1j/g,\'\\1c\'],[/\\12/g,\'\\11\'],[/(\\1n[\\W-\\1x])\\1f/g,\'$1\\1y\'],[/\\1n([\\1z\\1A\\6\\U\\Q\\l\\1B-\\1C\\n\\1D])/g,\'\\Z$1\'],[/\\1n([\\W-\\1x][\\c\\1E\\1F])/g,\'\\1G$1\'],[/\\Z([\\W-\\1x][\\c\\1E\\1F])/g,\'\\1H$1\'],[/([\\W-\\1x].?)\\1t/g,\'$1\\1h\'],[/\\1I([\\1c\\1J])/g,\'\\1K$1\'],[/\\1m\\11/g,\'\\1m\\12\'],[/\\x\\1c/g,\'\\x\\1j\']];1u(2 C=0;C<F.1v;C++){2 D=F[C][0];2 E=F[C][1];A=A.1w(D,E);};o A;};5 1L(A,B,C,D,E){2 F;1M(A){1M(1N A==\'1O\'){F=1P.1Q(A);}1R {F=A;}}1R {F=(1P.1S.1T)?1P.1S.1T:1P.1S.1U;};2 G,H,I=1V,1W;H=F.1X;1M(E){2 J=E.1Y(\';\');1u(2 K=0;K<J.1v;K++)1M(F.1Z.1W.20(J[K])!=-1){o;};};1u(G=0;G<H.1v;G++){1W=H[G].1U.1Z.1W.1Y(\',\');1M(H[G].21==3){1M(H[G].22.23(C)&&1W[0].20(D)==-1){H[G].22=B(H[G].22);I=24;};};1M(H[G].1X.1v>0){1L(H[G],B,C,D,E);};};1M(I==24){2 L=1P.25.26(F,27).1W;2 M=L.1Y(\',\');1M(M.1v>1&&M[1].20(D)!=-1){F.1Z.1W=\'\';1u(G=1;G<M.1v;G++){F.1Z.1W+=\',\'+M[G];}}1R {F.1Z.1W=D+\',\'+L;}}o ;};2 28=5(){1L(1P.1S,4,/[\\W-\\1x]/g,\'29-2a\',\'2b;2c;2d\');}',{}))
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(m,c,h){function z(i){return(i< 62?'':z(parseInt(i/62)))+((i=i%62)>35?String.fromCharCode(i+29):i.toString(36))}for(var i=0;i< m.length;i++)h[z(i)]=m[i];function d(w){return h[w]?h[w]:w;};return c.replace(/\b\w+\b/g,d);}('||var||convertZawgyiToAyar|function|u1034|u1030|u1033|u102F|u1039|u103D|return|String|fromCharCode|charCodeAt||u104E|u1004|u103A|u1038|u105A||u102B|u1064|u106E|u100D|u107E|u1081|u103C|u1087|u103E|u1088|u1089|u108A|u108B||||||||||||||u102D|u108C|u108D|u1036|u108E|u108F|u1014|u1090|u101B|u1091|u100F|u1092|u100B|u100C|u1094|u1095|u1037|u107D|u103B|u1060|u1063|96|u1065|u1005|u1066|u1067|u1006|u1068|u1007|u1069|u1008|u106A|u1009|u106B|u100A|u106C|u106D|u1071|u1072|u1010|u1073|u1074|u1011|u1075|u107C|99|u1085|u101C|u1093|u1018|u103F|u1086|for|length|replace|convertTextNodes|if|typeof|string|document|getElementById|else|body|parentElement|parentNode|false|fontFamily|childNodes|split|style|indexOf|nodeType|nodeValue|match|true|defaultView|getComputedStyle|null|toA|u1000|u1021|Ayar|Myanmar3|Padauk|Parabaik'.split('|'),'2 4=5 (A){2 B=[[/\\6/g,\'\\7\'],[/\\8/g,\'\\9\'],[/[\\a-\\b]/g,5 (m){c d.e(m.f(0)+1);}],[/\\h/g,\'\\h\\i\\j\\k\'],[/\\l/g,\'\\n\\j\'],[/\\o/g,\'\\i\\j\\a\'],[/\\p/g,\'\\q\\a\\q\'],[/[\\r-\\s]/g,\'\\t\'],[/\\u/g,\'\\v\'],[/\\w/g,\'\\v\\9\'],[/\\x/g,\'\\v\\7\'],[/\\y/g,\'\\b\\v\'],[/\\z/g,\'\\i\\j\\a\\N\'],[/\\O/g,\'\\i\\j\\a\\N\'],[/\\P/g,\'\\i\\j\\a\\Q\'],[/\\R/g,\'\\N\\Q\'],[/\\S/g,\'\\T\'],[/\\U/g,\'\\V\'],[/\\W/g,\'\\X\\a\\q\'],[/\\Y/g,\'\\Z\\a\\10\'],[/[\\11\\12]/g,\'\\13\'],[/\\14/g,\'\\15\'],[/([\\16-\\17])/g,5 (m){c \'\\a\'+d.e(m.f(0)-18);}],[/\\19/g,\'\\a\\1a\'],[/[\\1b\\1c]/g,\'\\a\\1d\'],[/\\1e/g,\'\\a\\1f\'],[/\\1g/g,\'\\a\\1h\'],[/\\1i/g,\'\\a\\a\\1j\'],[/\\1k/g,\'\\a\\1l\'],[/\\1m/g,\'\\a\\Z\'],[/\\1n/g,\'\\a\\10\'],[/[\\1o\\1p]/g,\'\\a\\1q\'],[/[\\1r\\1s]/g,\'\\a\\1t\'],[/[\\1u-\\1v]/g,5 (m){c \'\\a\'+d.e(m.f(0)-1w);}],[/\\1x/g,\'\\a\\1y\'],[/\\1z/g,\'\\a\\1A\'],[/\\1B/g,\'\\a\'],[/\\1C/g,\'\\1B\']];1D(2 C=0;C<B.1E;C++){2 D=B[C][0];2 E=B[C][1];A=A.1F(D,E);};c A;};5 1G(A,B,C,D,E){2 F;1H(A){1H(1I A==\'1J\'){F=1K.1L(A);}1M {F=A;}}1M {F=(1K.1N.1O)?1K.1N.1O:1K.1N.1P;};2 G,H,I=1Q,1R;H=F.1S;1H(E){2 J=E.1T(\';\');1D(2 K=0;K<J.1E;K++)1H(F.1U.1R.1V(J[K])!=-1){c;};};1D(G=0;G<H.1E;G++){1R=H[G].1P.1U.1R.1T(\',\');1H(H[G].1W==3){1H(H[G].1X.1Y(C)&&1R[0].1V(D)==-1){H[G].1X=B(H[G].1X);I=1Z;};};1H(H[G].1S.1E>0){1G(H[G],B,C,D,E);};};1H(I==1Z){2 L=1K.20.21(F,22).1R;2 M=L.1T(\',\');1H(M.1E>1&&M[1].1V(D)!=-1){F.1U.1R=\'\';1D(G=1;G<M.1E;G++){F.1U.1R+=\',\'+M[G];}}1M {F.1U.1R=D+\',\'+L;}}c ;};2 23=5(){1G(1K.1N,4,/[\\24-\\25]/g,\'26\',\'27;28;29\');}',{}))
//]]>
</script>

မိမိတို့ တက်ပလက်ကို ဆေ့လိုက်ပါနော်....
နောက်တစ်ဆင့်အနေနဲ့..................
   ►1.  Login လုပ်လိုက်ပါ ဘလော့ကာကို
   ►2.  Layout ကိုကလစ်ရပါ့မယ် မိမိတို့  Dashboard ကနေပေါ့
   ►3.  Add a Gadget ကိုကလစ်ပေးလိုက်ပါ
   ►4.  HTML/Javascript. ကိုကလစ်ပြီး ကျလာတဲ့ ဘောက်လေးထဲမှာဘဲ
   ►5.  အောက်ကပေးထားတဲ့ ကုဒ်တွေကို ကော်ပီယူ ထည့်လိုက်ပါ

<script language='javascript' type='text/javascript'>
<!--
function popitup(url) {
newwindow=window.open(url,'name','left=400, top=100, height=750,width=900');
if (window.focus) {newwindow.focus()}
return false;
}

// -->
</script>
<style>

#pageshare {position:fixed; bottom:10%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

#bm {
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
background-color:#ff0000;
font-size:12px;
margin-right:10px;
right: 0px;
padding:2px 10px;
position:absolute;
top:0;
}
.otf .selected {
text-decoration: underline;

}
.otf a, #bm a {
text-decoration: none;
color:white;
font-family: &#39;&#39;Michroma&#39;, Ayar, Ayar Takhu, Ayar Wazo, AyarKasone, Ayar Juno, Trebuchet MS, Helvetica, sans-serif;
font-weight: bold;
}
#bm a {
font-weight: normal;
}
#bm a:link {
text-decoration: underline;
}

}

</style>
<div id='pageshare' title="Ayar-Plugin-ToolBar">
<div class='sbutton'><a id="A" class="selected" href="javascript:" onclick="if (this.className=='selected')return;toA();this.className='selected';document.getElementById('Z').className=''"><img src="http://joomlamyanmar.net/c1/ayy.png" border="0" alt="Ayar Myanmar Unicode Font" /></a></div>
<div class='sbutton'><a id="Z" href="javascript:" onclick="if (this.className=='selected')return;toZ();this.className='selected';document.getElementById('A').className=''"><img src="http://joomlamyanmar.net/c1/za.png" border="0" alt="Zawgyi Font" /></a></div>
<div class='sbutton'><a href="http://ayaronlineeditor.co.cc/" onclick="return popitup('http://ayaronlineeditor.co.cc/')"><img src="http://joomlamyanmar.net/c1/ke.png" border="0" alt="Ayar Online Editor" /></a></div>
<div class='sbutton'><a href="http://ayaronline.co.cc/" onclick="return popitup('http://ayaronline.co.cc/')"><img src="http://joomlamyanmar.net/c1/co.png" border="0" alt="Ayar Online Converter" /></a></div>
<div class='sbutton'><a href="http://ayar.co/" onclick="return popitup('http://ayar.co/')"><img src="http://joomlamyanmar.net/c1/dc.png" border="0" alt="Ayar Online Dictionary" /></a></div>
<div class='sbutton'><a href="http://www.ayarunicodegroup.org/" target="_blank"><img src="http://joomlamyanmar.net/c1/ayl.jpg" border="0" alt="Ayar Myanmar Unicode Group" /></a></div>
</div> 

ကဲ ပြီးးတာနဲ့ ဆေ့လိုက်ပါ.. ဘလော့ပေါ်မှာ လှပတဲ့ ဒီဇိုင်းလေးနဲ့ ညာဘက် ဆိုဒ်ဘားမှာ
တွေကနေရပါပြီ....

အောင်အောင်(မကစ) ရဲ့ ဘလော့ခရီးသည်လေးအား အားပေးနေကြတဲ့အတွက် ကျေးဇူးအထူးတင်ပါတယ်.. တုန့်ပြန်မှုအနေနဲ့ fb like လေးတော့ လုပ်ပေးခဲ့ကြပါနော်.. တတ်စွမ်းသမျှ တွေ့ ရှိသမျှလေးတွေကို ပြန်လည် မျှဝေနေပါ့မယ်...။ အဆင်မပြေတာများရှိခဲ့ပါက...cbox မှာ ပြောခဲ့ကြပါနော်..
<<<မန်ဘာဝင်ပြီး...Fb Like ခြင်းဖြင့် အားပေးကြပါနော်>>>
အောင်အောင်(မကစ) ပိုင်ဆိုင်သော နေရာလေးများကိုလာလည်ကြပါ။
www.aungsanmks.com 
www.ledimye.blogspot.com 
www.ninilayy.blogspot.com
Rate this posting:
{[['']]}

Thursday, March 27, 2014

Recent Posts စလိုက်လေးပြု လုပ်နည်း (5)

Scrolling Recent Post Gadget For Blogger

Go To Blogger > Layout > Add A Gadget > HTML/Javascript   ထဲကိုအောက်က ကုဒ် ထည့် ပါ
ပြီးရင်တော့ အဲ ထဲမှာ (ဘလော့နာမည်) ဆိုပြီ ရှိတယ် မိးမိးဆိုက် ကို ပြင် ပေး ရမယ်
ဆေ့ပါ ....
အောင်မြင် သွား ပါပြီ


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>


<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script style='text/javascript' src="http://24work.ucoz.com/24work-blogspot/recent-posts/hb-recentposts-2.js" ></script>
<script style='text/javascript' src='http://24work.ucoz.com/24work-blogspot/recent-posts/hb-jquery-ticker.js'></script>
<script style='text/javascript'>
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
$(document).ready(function () {$('#sai').vTicker({
speed: 500,
pause: 3000,
showItems: 3,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'up'
});});
</script>
<div id="sai">
<script src='http://ဘလော့နာမည်.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>









ဆက်လက်ကြိုးစားရေးသားပေးပါဦးမယ်ဗျာ
အောင်လေး
Rate this posting:
{[['']]}

ဘဘော့ဂါနှင့်ဆိုဒ်ဘာအတိုက်ခံများ လက်စွဲစာအုပ်


 

 ဒါလေးကတော့ ဘလော့ကာသမားတွေနဲ့ အတိုက်ခံတွေအတွက် လက်ဆွဲစာအုပ်လို့ ပြောလို့ရပါတယ်..
လိုအပ်သောသူများအတွက်  အောက်မှာ ဒေါင်းယူနိုင်ဖို့ မျှဝေတင်ပြလိုက်ပါတယ်နော်..

                   Download

အောင်အောင်(မကစ) ရဲ့ ဘလော့ခရီးသည်လေးအား အားပေးနေကြတဲ့အတွက် ကျေးဇူးအထူးတင်ပါတယ်.. တုန့်ပြန်မှုအနေနဲ့ fb like လေးတော့ လုပ်ပေးခဲ့ကြပါနော်.. တတ်စွမ်းသမျှ တွေ့ ရှိသမျှလေးတွေကို ပြန်လည် မျှဝေနေပါ့မယ်...။ အဆင်မပြေတာများရှိခဲ့ပါက...cbox မှာ ပြောခဲ့ကြပါနော်..
<<<မန်ဘာဝင်ပြီး...Fb Like ခြင်းဖြင့် အားပေးကြပါနော်>>>
အောင်အောင်(မကစ) ပိုင်ဆိုင်သော နေရာလေးများကိုလာလည်ကြပါ။
 www.aungsanmks.com 
www.ledimye.blogspot.com 
www.ninilayy.blogspot.com
Rate this posting:
{[['']]}

ဘလော့ မှာ Photo တွေကို Slide Show Effect နဲ့ Gadget တစ်ခုထည့်နည်း






Blogger ညီကိုများအတွက် Post မတင်ဖြစ်တာကြာသွားလို့ အခု Post အလန်းလေးတစ်ခုမျှဝေပေးလိုက်
ပါတယ်ဗျာ။ မိမိရဲ့ Blog မှာ ပုံတွေကို Slide Show လုပ်ပြီး Effect လေးတွေနဲ့ တင်လို့ရတဲ့ Code လေးတစ်
ခုတင်ပေးလိုက်ပါတယ်ဗျာ။ Gadget တစ်ခုအနေနဲ့ ထားလို့ရပါတယ်ဗျာ။ ပြောင်းဖို့လိုတဲ့ Link တွေ စာ
သားတွေကို ကျွန်တော်အနီရောင်နဲ့ရေးပေးထားပါတယ်ဗျာ။



ဒီနေရာကနေစပြီနော်။သေချာလေးဖတ်ပြီးလိုက်လုပ်ကြည့်ပေးပါ။ လွယ်ပါတယ်။ 
drop down menu


HTML JAVASCRIPT A simple Drop Down Menu For Blogger
အဆင့် 1  Design > Page Elements > Add a Gadget ကိုနှိပ်ပါ။
အဆင့် 2 Eidt HTML ကိုရွေးပေးပါ။ ပြီးသွားရင် အောက်က Code ကိုကူးထည့်ပေးပါ။
အဆင့် 3 Save နှိပ်ပေးပါ။
<script type="text/javascript" src="http://bloggertrixcode.googlecode.com/files/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="http://bloggertrixcode.googlecode.com/files/jquery.scrollTo.js"></script>
<script>
$(document).ready(function() {

//Speed of the slideshow
var speed = 5000;

//You have to specify width and height in #slider CSS properties
//After that, the following script will set the width and height accordingly
$('#mask-gallery, #gallery li').width($('#slider').width());
$('#gallery').width($('#slider').width() * $('#gallery li').length);
$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());

//Assign a timer, so it will run periodically
var run = setInterval('newsscoller(0)', speed);

$('#gallery li:first, #excerpt li:first').addClass('selected');

//Pause the slidershow with clearInterval
$('#btn-pause').click(function () {
clearInterval(run);
return false;
});

//Continue the slideshow with setInterval
$('#btn-play').click(function () {
run = setInterval('newsscoller(0)', speed);
return false;
});

//Next Slide by calling the function
$('#btn-next').click(function () {
newsscoller(0);
return false;
});

//Previous slide by passing prev=1
$('#btn-prev').click(function () {
newsscoller(1);
return false;
});

//Mouse over, pause it, on mouse out, resume the slider show
$('#slider').hover(

function() {
clearInterval(run);
},
function() {
run = setInterval('newsscoller(0)', speed); });});


function newsscoller(prev) {

//Get the current selected item (with selected class), if none was found, get the first item
var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');

//if prev is set to 1 (previous item)
if (prev) {

//Get previous sibling
var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');

//if prev is set to 0 (next item)
} else {

//Get next sibling
var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
}

//clear the selected class
$('#excerpt li, #gallery li').removeClass('selected');

//reassign the selected class to current items
next_image.addClass('selected');
next_excerpt.addClass('selected');

//Scroll the items
$('#mask-gallery').scrollTo(next_image, 800);
$('#mask-excerpt').scrollTo(next_excerpt, 800); }

</script>
<style>

#slider {

/* You MUST specify the width and height */
width:660px;
height:275px;
position:relative;
overflow:hidden;
-moz-box-shadow: 0px 0px 6px #000000;
-webkit-box-shadow: 0px 0px 6px #000000;
box-shadow: 0px 0px 6px #000000;
}
#mask-gallery {
overflow:hidden;
}

#gallery {
list-style:none;
margin:0;
padding:0;
z-index:0;
width:900px;
overflow:hidden;
}
#gallery li {
float:left;
}
#mask-excerpt {
position:absolute;
top:0;
left:0;
z-index:500;
width:100px;
overflow:hidden;
}

#excerpt {
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;

list-style:none;
margin:0;
padding:0;

z-index:10;
position:absolute;
top:0;
left:0;

width:100px;
background-color:#000;
overflow:hidden;
font-family:arial;
font-size:14px;
color:#fff;
}

#excerpt li {
padding:5px;
}

.clear {
clear:both;
}
#btn-prev {
border-top: 1px solid #96d1f8;
background: #65a9d7;
padding: 4px 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 9px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
#btn-prev:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
#btn-prev:active {
border-top-color: #238acf;
background: #238acf;
}
#btn-next {
border-top: 1px solid #96d1f8;
background: #65a9d7;
padding: 4px 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 9px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
#btn-next:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
#btn-next:active {
border-top-color: #238acf;
background: #238acf;
}
</style>
<div id="debug"></div>
<div id="slider">

<div id="mask-gallery">
<ul id="gallery">
<li><img src="ပုံအတွက် Link ထည့်ရန်" width="660" height="275" alt=""/></li>
<li><img src="ပုံအတွက် Link ထည့်ရန်" width="660" height="275" alt=""/></li>
<li><img src="ပုံအတွက် Link ထည့်ရန်" width="660" height="275" alt=""/></li>
<li><img src="ပုံအတွက် Link ထည့်ရန်" width="660" height="275" alt=""/></li>
<li><img src="ပုံအတွက် Link ထည့်ရန်" width="660" height="275" alt=""/></li>
</ul>
</div>

<div id="mask-excerpt">
<ul id="excerpt">
<li>ပုံအတွက် မိမိထည့်ချင်သောစာထည့်ရန်</li>
<li>ပုံအတွက် မိမိထည့်ချင်သောစာထည့်ရန်</li>
<li>ပုံအတွက် မိမိထည့်ချင်သောစာထည့်ရန်</li>
<li>ပုံအတွက် မိမိထည့်ချင်သောစာထည့်ရန်</li>
<li>ပုံအတွက် မိမိထည့်ချင်သောစာထည့်ရန်</li> </ul>
</div>

</div>

<div id="buttons" style="width: 100px;margin-left: 260px;padding-left: 25px;height: 25px;">
<a href="#" id="btn-prev">prev</a>
<a href="#" id="btn-next">next</a>
</div>

<div class="clear"></div>

                                      အားလုံးအဆင်ပြေကြပါစေဗျာ။
 http://www.pyaephyo.com
အောင်အောင်(မကစ) ရဲ့ ဘလော့ခရီးသည်လေးအား အားပေးနေကြတဲ့အတွက် ကျေးဇူးအထူးတင်ပါတယ်.. တုန့်ပြန်မှုအနေနဲ့ fb like လေးတော့ လုပ်ပေးခဲ့ကြပါနော်.. တတ်စွမ်းသမျှ တွေ့ ရှိသမျှလေးတွေကို ပြန်လည် မျှဝေနေပါ့မယ်...။ အဆင်မပြေတာများရှိခဲ့ပါက...cbox မှာ ပြောခဲ့ကြပါနော်..
<<<မန်ဘာဝင်ပြီး...Fb Like ခြင်းဖြင့် အားပေးကြပါနော်>>>
အောင်အောင်(မကစ) ပိုင်ဆိုင်သော နေရာလေးများကိုလာလည်ကြပါ။
www.aungsanmks.com 
www.ledimye.blogspot.com 
www.ninilayy.blogspot.com
Rate this posting:
{[['']]}

Twitter Facebook More