Template Width ခ်ဲ႔နည္း

ဒီပုိ႔စ္ေလးကုိ ျမန္မာဘေလာ႔ဂါဖုိရမ္ ကေန ယူလာခဲ႔ပါတယ္

တန္းပလိတ္ကို width change ခ်င္တယ္ဆိုရင္ေတာ့ ပထမဆံုးတန္းပလိတ္္ ကုဒ္ေတြကိုၾကည့္လိုက္ပါ။ ၿပီးရင္ေအာက္မွာျပထားတဲ့ကုဒ္ေတြကိုရွာပါ။

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% Georgia, Serif;
}

#main-wrapper {
width: 410px;
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 */
}

#sidebar-wrapper {
width: 220px;
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 */
}

#main-wrapper ကပို႔စ္အတြက္ width သတ္မွတ္ထားတဲ့ div ပါ။ ပို႔စ္ေနရာကို width ေျပာင္းခ်င္တယ္ဆိုရင္ အဲဒီ width: 410px; ဆိုတဲ့ေနရာမွာ ကိုယ္လိုခ်င္တဲ့ဂဏန္းကိုေျပာင္းေပးလိုက္ပါ။ ဒါေပမယ့္ အဲဒီလိုေျပာင္းရင္ #outer-wrapper ဆိုတဲ့ေနရာမွာပါလုိက္ၿပီးေျပာင္းေပးရပါမယ္။ ဥပမာ အထက္ကကုဒ္ေတြကိုၾကည့္ပါ။ #outer-wrapper ထဲက width: 660px; ဆိုတာ ပို႔စ္နဲ႔ဆိုဒ္ဘားႏွစ္ခုေပါင္းရဲ႕ width ပါ။ 660pixels ရွိပါတယ္။ ပို႔စ္အတြက္ #main-wrapper မွာက width: 410px နဲ႔ #sidebar-wrapper အတြက္ width: 220px ျဖစ္ပါတယ္။ ႏွစ္ခုေပါင္း 630pixels ရွိပါတယ္။ ပိုေနတဲ့ 30pixels ကပို႔စ္နဲ႔ဆိုဒ္ဘားအလယ္မွာရွိေနတဲ့ gap ပါ။

တကယ္လို႔ ပို႔စ္ကို 700px နဲ႔ဆိုဒ္ဘားကို 250px ထားခ်င္တယ္ဆိုပါဆို႔။

#main-wrapper {
width: 500px;
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 */
}

#sidebar-wrapper {
width: 250px;
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 */
}

အဲဒီဂဏန္းေတြကိုေျပာင္းလိုက္ပါ။ ၿပီးရင္

#outer-wrapper {
width: 780px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% Georgia, Serif;
}

ဒါဆိုရင္ပို႔စ္က 500px ရွိၿပီး ဆိုဒ္ဘားကေတာ့ 250px ရွိေနမွာပါ။ သူတို႔ၾကားကအကြာအေ၀းကေတာ့ 30px ေပါ့။ ဒါေပမယ့္ header box ကေသးေနပါလိမ့္မယ္။ လိုက္ႀကီးခ်င္တယ္ဆိုရင္ေတာ့

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #cccccc;
}

အဲဒီကုဒ္ကိုရွာၿပီး width:660px; ေနရာမွာ width:780px; ကိုေျပာင္းေပးလိုက္ရံုပါပဲ။ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။

Read More

Peekaboo Comments ေလးမ်ား လုပ္ၾကမယ္...

အားလုံးပဲ မဂၤလာပါခင္ဗ်ာ.

ဒီတစ္ခါလက္ဆင္႔ကမ္းေျပာျပခ်င္တာကေတာ႔ Peekaboo Comments ေလးေတြ အေၾကာင္းပါ. ဒီအေၾကာင္းကို ေရးမယ္လုိ႔ အားခဲထားခဲ႔တာ ၾကာပါျပီ. အခုမွပဲ ေရးျဖစ္ေတာ႔တယ္ဗ်ာ.

Peekaboo Comments ဆုိတာ ဘာလဲလုိ႔ သိခ်င္ေနသူမ်ား ကၽြန္ေတာ္႔ဘေလာ႔ဂ္ပုိ႔စ္ေတြထဲက ေကာ္မန္႔ရွိတဲ႔ပုိ႔စ္တစ္ခုခုကို သြားၾကည္႔ျပီး ေကာ္မန္႔ကို Click ေခါက္ၾကည္႔လုိက္ပါ. (Friendly Neighbors လုိ႔ ကၽြန္ေတာ္က နာမည္တစ္မ်ဳိးေပးထားတယ္ဗ်).

ကဲ. ဘာသတိထားမိလဲ.

ေတြ႔ျပီေနာ္.

ပုံမွန္အရဆုိရင္ Comments ဆုိတာကုိ Click ေခါက္လုိက္ရင္ ေနာက္ထပ္ စာမ်က္ႏွာ အသစ္တစ္ခု ပြင္႔လာပါတယ္. အဲဒီ႔မွာပဲ ကၽြန္ေတာ္တုိ႔က Comments ေရးတာတုိ႔၊ ဖတ္တာတုိ႔ကုိ လုပ္ရပါတယ္.

Peekaboo Comments က်ေတာ႔ သူ႔ကို click ေခါက္လုိက္တာနဲ႔ ေရးထားတဲ႔ comments ေလးေတြကုိ same page မွာပဲ ဖတ္လုိ႔ရႏုိင္သလုိ ေရးလုိ႔လည္း ရပါတယ္. အခ်ိန္ကုန္သက္သာသလုိ ေကာ္နက္ရွင္လည္း ျမန္ဆန္သြက္လက္လာေစပါတယ္.

ကဲ. ဒါကုိ ဘယ္လုိလုပ္ရမလဲဆုိေတာ႔ ဒီလုိလုပ္ပါခင္ဗ်ာ.

အဆင္႔ (၈) ဆင္႔နဲ႔ ခြဲျပီး ေျပာျပသြားပါမယ္. တစ္ဆင္႔ခ်င္းကုိ ေသခ်ာဖတ္ျပီး လုပ္ရင္ ၁၅ မိနစ္နဲ႔ ဒီကိစၥ ေအာင္ျမင္ျပီးစီးပါလိမ္႔မယ္. စိတ္ေလာျပီး ဟုိေက်ာ္ဒီေက်ာ္ဖတ္ရင္ေတာ႔ Error ၾကီးနဲ႔ တုိးသြားမွာ ျဖစ္ပါေၾကာင္း….

(၁) မိမိဘေလာ႔ဂ္ထဲကေန Settings> Edit HTML ကိုသြားပါမယ္. Template ကုိ Backup လုပ္ရပါမယ္. ဒါမွ မေတာ္လုိ႔ မွားသြားရင္ အရင္ Template ကုိ restore ျပန္လုပ္လုိ႔ရမွာ ျဖစ္ပါတယ္. ဒီတုိင္း Backup လုပ္ခ်င္ရင္လုပ္. မဟုတ္ရင္ေတာ႔ Template တစ္ခုလုံးကုိ ကူးျပီး Ms Word ထဲမွာ Save လုပ္ထားလုိက္ပါ. အဓိကက Template ကုိ မျပင္ခင္ ကုိယ္႔မွာ Hard Copy ရွိေနဖုိ႔ပါပဲ.

(၂) Expand Widgets Box ေသးေသးေလးကုိ Tick လုပ္ေပးခဲ႔ရပါမယ္. ဒါဟာလည္း သိပ္အေရးၾကီးပါတယ္. Template ျပင္တဲ႔အခါမွာ တစ္ခ်ိဳ႔ Code ေလးေတြ ရွာမေတြ႔ဘူးလုိ႔ ခဏခဏ ေျပာတတ္ၾကပါတယ္. အဲဒါဟာ Expand Widgets ဆုိတဲ႔ Box ေလးကို Tick မလုပ္ခဲ႔တဲ႔ ျပႆနာေၾကာင္႔ပါပဲ.

(၃) </head> ဆုိတဲ႔ Tag ေလးမဆုံးခင္မွာ ဒီ Coding ေလးေတြကုိ ထည္႔ေပးလုိက္ပါ

<script type='text/javascript'>
//<![CDATA[
var comment_form_template = '<div class="commentelem" style="clear:both">\n'
+ '<div style="float:left;margin-right:5px;clear:both;" id="commentphoto[[CID]]"></div>'
+ '<div class="comment-poster">[[AUTHOR]]</div>\n'
+ '<div class="comment-body"><div class="innerCmntBody">[[BODY]]</div></div>\n'
+ '<div class="comment-timestamp"><a href="[[PERMALINK]]" title="comment permalink">[[DATE]]</a></div></div>\n';
//]]>
</script>
<script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;id=2941927' type='text/javascript'/>

(၄) ဒီ စာေၾကာင္းေလးေတြကုိ လုိက္ရွာပါ

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>

ေတြ႔ရင္ ဒုတိယလုိင္းကုိ ဒီလုိေလး အစားသြင္းေပးလုိက္ပါ.

<div class='comments' expr:id='"comments" + data:post.id'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
document.getElementById('comments<data:post.id/>').style.display = 'none';
</script>
</b:if>

(၅) ခုနက စာေၾကာင္းေလးေတြရဲ႔ ေအာက္ဖက္နားေလးမွာပဲ <dl id='comments-block'> ဆိုတာေလး ရွိပါတယ္. အဲဒါေလးကုိ ေတြ႔ေအာင္ရွာျပီးရင္ အဲဒီ႔စာေၾကာင္းေလး မတုိင္ခင္မွာ ဒါေလးကို ထည္႔ေပးလုိက္ပါ.

<div expr:id='"commentsul" + data:post.id'> </div>

(၆) ဒီထိရပါေသးတယ္ေနာ္. ျပီးခါနီးပါျပီ. ဒီတစ္ခါေတာ႔ ဒီစာေၾကာင္းေလးေတြကုိ ရွာပါခင္ဗ်ာ.

<b:includable id='main' var='top'>
<!-- posts -->

ေတြ႔ရင္ ဆက္ဖတ္ၾကည္႔ပါ. ဒီလုိမ်ိဳး Coding ေလးေတြ ေရးထားတာ ေတြ႔ရပါလိမ္႔မယ္.

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>

အဲဒါကုိ ေတြ႔ေအာင္ရွာျပီးရင္ ဒီလုိျပန္အစားသြင္းေပးလုိက္ပါ.


<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>

(၇) ေနာက္ဆုံးအဆင္႔ပါ.

ဒီ စာေၾကာင္းေလးကို ရွာပါခင္ဗ်ာ.

<b:includable id='post' var='post'>

ျပီးရင္ သူ႔ေအာက္နားေလးကို ဆက္ဖတ္ပါ. ဒါေလးေတြကိုေတြ႔တဲ႔ အထိေပါ႔

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>

ေတြ႔ျပီေနာ္.

အုိေက.

အဲဒီ႔တစ္ပုိဒ္လုံးကုိ ဒီလုိ ျပန္အစားသြင္းေပးရပါမယ္.

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<b:loop values='data:post.feedLinks' var='f'>
<a class="comments" rel="comments" expr:href='data:post.url + "#comments"' expr:onclick='"peekaboo_comments_display(&quot;" + data:f.url + "&quot;,&quot;commentsul" + data:post.id + "&quot;,&quot;&quot;,&quot;" + data:post.url + "#comments&quot;,&quot;max comments&quot;);toggleitem(&quot;comments" + data:post.id + "&quot;);return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:loop>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.url + "#comments"' expr:onclick='"toggleitem(&quot;comments" + data:post.id + "&quot;);return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>

Max comments ဆုိျပီး အနီေရာင္ေလးနဲ႔ ေရးထားတဲ႔ ေနရာမွာ ကုိယ္ၾကိဳက္သလုိ Edit လုပ္လုိ႔ရပါတယ္. ဥပမာ. ေကာ္မန္႔ေတြကုိ အမ်ားဆုံး (၅) ခုပဲ ေပၚေစခ်င္ရင္ 5 လု႔ိရုိက္ထည္႔ေပးရမွာပါ. အဲလုိမဟုတ္ဘဲ ရွိသမွ်၊ ေရးေပးထားသမွ် ေကာ္မန္႔ေတြ ေပၚေစခ်င္ရင္ေတာ႔ max comments ေနရာမွာ false လုိ႔ ရုိက္ေပးပါခင္ဗ်ာ.

(၈) Template ကုိ Save လုပ္လုိ႔ရပါျပီ.

(၉) Enjoy!!!!


Acknowledgement:

ဒီေနရာက ပုိ႔စ္ေလးကုိ သင္႔ေတာ္သလုိ ဘာသာျပန္ဆုိ ေရးသားပါတယ္…
ကိုရန္ေအာင္မွ မွ်ေ၀သည္။
ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ www.aungsanmks.blogspot.com
www.ledimyethar.com

Read More

Address ဘားမွာ လိုဂိုေလးေတြထည့္မယ္

ကၽြန္ေတာ္ တို႕ ဘေလာ့ဂ္တစ္ခုကိုဝင္လိုက္ျပီဆိုရင္ ဘေရာက္ဇာရဲ့ ထိပ္မွာရွိတဲ့ လိပ္စာ ဘားမွာ ဘေလာ္ဂါကြန္ ရဲ့လိုဂိုေလး ကိုဒီလိုေတြ႕ရမွာ ျဖစ္ပါတယ္...။

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

လုပ္ပံုလုပ္နည္းကေတာ့ အလြန္လြယ္ကူပါတယ္ ကဲစလိုက္ၾကရေအာင္...

(၁)  ပထမဦးဆံုး ဘေလာ့ဂ္ ရဲ့ Template  ကိုဝင္လိုုက္ပါ..

(၂)   ၿပီးရင္ေတာ့ Edit HTML ထဲကိုထပ္ဝင္လိုက္ပါ...
ctrl+f ျဖင့္တြဲကလစ္ျပီးက်လာတဲ႕  search box မွာ ေအာက္ကကုဒ္ထည့္ရွာပါ
အဲဒီမွာ ကုဒ္ေတြထဲက

<head>

ဆိုတဲ့ကုဒ္ေလးရဲ့ ေနာက္မွာဒီကုဒ္ကိုထည့္လိုက္ပါ...

<link href='http://www.fos.su.se/~arnold/travel/asia2001/myanmar_flag.gif'
rel='shortcut icon'/>

အထက္ကလင့္ေလးေတြဘဲေလ.. အျပာေရာင္လင့္ေတြက လိုဂို ပုံရဲ႕လင့္ပါ။
အေပၚကလင့္က ျမန္မာနိဳင္ငံအလံေလးပါ။

<link href='http://www.flagsimporter.com/american/images/buddhist_m.gif'
rel='shortcut icon'/>

အေပၚကေတာ့ သာသနာ့အလံေလးရဲ႕ လင့္ပါ။

 မိမိတို႕စိတ္တိုင္းၾကပုံရဲ႕ လင့္ကို လင့္ယူျပီး စိတ္ၾကိဳက္ ထည့္နိဳင္ပါတယ္....

အဆင္ေျပပါေစေနာ္..

ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ 

Read More

ကုိယ္နားဆင္ေနတဲ့ သီခ်င္းကုိ ကုိယ္သူငယ္ခ်င္းေတြကုိလည္း နားဆင္ေစခ်င္

ကုိယ္နားဆင္ေနတဲ့ သီခ်င္းကုိ ကုိယ္သူငယ္ခ်င္းေတြကုိလည္း နားဆင္ေစခ်င္တဲ့ သူငယ္ခ်င္းအတြက္

ကြ်န္ေတာ္လည္း ဘာတင္ရမွန္းမသိတာနဲ႔ မသိေသးတဲ့သူေတြ အတြက္ မွ်ေ၀ေပးလုိက္ပါတယ္ 

အဆင္ေျပပါေစ

အဲဒီအတြက္ သီခ်င္းဖြင့္မယ္ဆုိ  windows Media Play နဲ႔ဖြင့္ရပါမယ္ ျပီးေတာ

Windows Media Play>>>>>Tool>>>Options>>>Plug-ins>>>Backgroung

အထိ၀င္ျပီးေတာ့  ပံုမွာျပထားတဲ့အတုိင္း အမွတ္ေပးျပီးေတာ့ Ok လုပ္လုိက္ပါ 

အဲဒါဆိုရပါျပီ တစ္ဖက္နားေထာင္မယ္ဆို Gtalk call လုပ္လိုက္ပါ ကုိယ္က လက္ခံလိုက္ရင္ ကုိယ္ဖြင့္ထားတဲ့သီခ်င္း တစ္ဖက္က ၾကားရပါျပီ ကြန္နက္ရွင္ေကာင္းရင္ နားေထာင္ရအဆင္ေျပပါတယ္

ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ www.aungsanmks.blogspot.com
www.ledimyethar.com

Read More