Newer, Older and home မွာ ပုံအစားထုိးထည့္နည္း

* Blogger Dashboard ကို ၀င္လိုက္ပါ...။
* Dashboard ကေန Layout section ကို သြားပါ ..။
* ထိုမွတဆင္႔ Edit HTML Subtab ကို ထပ္ျပီး Expand Widget Templates ကို Check ေပးပါ...။
* HTML code ထဲမွာ ctrl + f ကုိႏွိပ္ၿပီး search အကူအညီျဖင့္ ေအာက္မွ ျပထားတဲ႔ ကုဒ္ေတြကိုရွာပါ..။

1. ( Newer Post ေနရာမွာ အစားထိုးရန္ )
2. ( Older Post ေနရာမွာ အစားထိုးရန္ )
3. ( Home ေနရာမွာ အစားထိုးရန္ )

<div class="codeview">
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>
</b:includable></div></span>
အထက္ပါ ကုဒ္ေတြကို ရွာေတြ႔ရင္ ေအာက္မွာ ျပထားသည္႔အတိုင္း မိမိထည္႔ခ်င္တဲ႔ ပံု URL ကိုအစားသြင္းေပးလိုက္ပါ..။ Home ေနရာမွာ ၂ ခုရွိပါတယ္ ။ ၂ ခုစလံုးေနရာမွာ အစားသြင္းေပးပါ။

ခရမ္းေရာင္ နဲ႔ ေရးထားတဲ႔ ေနရာမွာ Newer Post အစား ပံုထည္႔ပါ။
အျပာေရာင္ နဲ႔ ေရးထားတဲ႔ ေနရာမွာ Older Post အစား ပံုထည္႔ပါ။
အနီေရာင္ နဲ႔ ေရးထားတဲ႔ ေနရာမွာ Home အစား ပံုထည္႔ပါ။

<img src="Your Image URL"/> ပုံေလးျဖစ္ေအာင္ ထည့္ရမွာပါ ...
ပုံေတြကုိ url အတြက္ေတာ့ http://www.picoodle.com မွာ ကုိလုိခ်င္တဲ့ပုံကုိ upload သြားတင္ရမွာျဖစ္ပါတယ္ .. တင္တတ္မယ္လုိ႔ထင္ပါတယ္
ေအာက္ဆုံးက direct link က url ကုိ ယူၿပီးထည့္ရမွာပါ .. ပုံေတြကုိေတာ့ ကၽြန္ေတာ္တင္ေပးလုိက္ပါတယ္ . ကုိယ့္ဟာကုိ upload လုပ္ၿပီးတင္ၾကေပါ့ .

လုိခ်င္ရင္ ေအာက္မွာ ေဒါင္းလုိက္ပါ ... တစ္ခါတည္းလုပ္ထားၿပီးသားပါ တင္ေပးလုိက္ပါတယ္ ..

Download ifile.it

Read more »

ဘေလာ႔ဂ္ပုိ႔စ္ေလးမ်ားကုိ ၾကိဳေရးျပီး တင္ျခင္း...

ကၽြန္ေတာ္တုိ႔ေတြမွာ ကုိယ္စီကုိယ္ငွ အလုပ္အကုိင္၊ မိသားစု၊ စီးပြားေရး၊ ပညာေရး၊ က်န္းမာေရး စသည္ျဖင္႔ မအားလပ္ႏိုင္ေအာင္ ရွိေနတတ္ၾကပါတယ္. ဒါ႔ေၾကာင္႔မုိ႔ တစ္ခါတစ္ရံ (သုိ႔) အခ်ိန္ေတာ္ေတာ္မ်ားမ်ားမွာ ကုိယ္တင္ခ်င္တဲ႔ ပုိ႔စ္ေလးကုိ ကုိယ္တင္ခ်င္တဲ႔အခ်ိန္ေလးမွာ မတင္ျဖစ္လုိက္တာေတြ ရွိေကာင္းရွိမွာပါ. တစ္ခါတစ္ေလက်ျပန္ေတာ႔လည္း ကုိယ္႔အခ်စ္ဆုံး မိတ္ေဆြသူငယ္ခ်င္း (သုိ႔) တစ္ေယာက္ေယာက္အတြက္ ေမြးေန႔ဆုေတာင္းေလးေတြ၊ အမွတ္တရစာစုေလးေတြ ကုိယ္႔ဘေလာ႔ဂ္မွာ တင္ခ်င္တယ္. ဒါေပမယ္႔ အဲဒီ႔ရက္မွာ ကုိယ္က ကြန္ျပဴတာနား ရွိေနႏုိင္မွာ မဟုတ္ဘူး. ဒါမ်ိဳးေတြလည္း ျဖစ္တတ္ပါတယ္.

အဲဒီ႔လုိ အခက္အခဲမ်ိဳးေလးေတြကုိ အသစ္မြမ္းမံထြက္ရွိလာတဲ႔ Blogger Draft က ေအာင္ျမင္စြာ ေျဖရွင္းေပးလုိက္ပါျပီ။

ဘာလဲဆုိေတာ႔ ပုိ႔စ္ေလးေတြကုိ ကုိယ္ေရးခ်င္တဲ႔အခ်ိန္မွာ ေရးထားျပီး ကုိယ္တင္ေစခ်င္တဲ႔ ရက္မွာ သူ႔အလုိလုိ Publish လုပ္သြားႏုိင္ေအာင္ ၾကိဳတင္ျပီး Schedule ဆြဲလုိ႔ရတဲ႔ Function ေလးတစ္ခု ေပးထားတာပဲ ျဖစ္ပါတယ္။

ဒါမ်ိဳးေလးေပါ႔ဗ်ာ.

အဲဒီ႔အေၾကာင္းေလး ဆက္မသြားခင္ ကၽြန္ေတာ္တုိ႔ ေနာက္ျပန္ ျပန္စဥ္းစားလုိက္ရေအာင္။

ဆုိပါေတာ႔. ဒီေန႔ ဒီဇင္ဘာ (၄) ရက္၊ Happy New Year ပုိ႔စ္ေလးကုိ ဇန္န၀ါရီလ (၁) ရက္ မနက္ ၁၂ နာရီတိတိမွာ တင္ခ်င္တယ္. အဲဒီ႔အခ်ိန္မွာ ကုိယ္က သူငယ္ခ်င္းေတြနဲ႔ ပါတီလုပ္ေနမွာ ျဖစ္လုိ႔ ကြန္ျပဴတာနား ရွိမွာမဟုတ္ဘူး. ကဲ. ကၽြန္ေတာ္တုိ႔ ဘာလုပ္ဖုိ႔ လုိမလဲ.

(၁) ေသခ်ာတာကေတာ႔ ကၽြန္ေတာ္တုိ႔ ပုိ႔စ္အရင္ေရးရမွာေပါ႔ဗ်ာ. မဟုတ္ဘူးလား. ဟုတ္ျပီ.. ေရးခ်လုိက္.

(၂) ရက္စဲြကို ေျပာင္းရေတာ႔မယ္. Schedule ဆဲြရေတာ႔မယ္. ဘယ္မွာလုပ္ရေတာ႔မလဲ. စဥ္းစားလုိက္ရေအာင္.
ကုိယ္တင္မွာက ပုိ႔စ္ဆုိေတာ႔ ပုိ႔စ္နဲ႔ပတ္သက္တဲ႔ Mode တစ္ခုခုမွာ အဲဒီ႔ Schedule ဆဲြတဲ႔ function ေလး ရွိရမယ္.

ဟုတ္ျပီ. ဘယ္မွာလဲ.

(၃) ေတြ႔ပါျပီ။ Post Options ဆုိတာေလးကုိ Publish ဆုိတဲ႔ ခလုတ္ေလးရဲ႔ အေပၚမွာ ေတြ႔ရပါလိမ္႔မယ္. အဲဒါေလးကို ႏွိပ္လုိက္ရင္ ဒီလုိျမင္ရမယ္ဗ်.

အဲဒီ႔ထဲမွာမွ ညာဖက္ေထာင္႔မွာ ရွိေနတဲ႔ Post date and time ေနရာေလးကုိသြား. အေနာက္ႏုိင္ငံေတြမွာက ရက္စဲြကို လ၊ရက္၊ႏွစ္ လုိ႔သတ္မွတ္တယ္. အဲဒါေလးေတာ႔ သတိထားေပါ႔ဗ်ာ. ေနာ္. ကဲ. ကၽြန္ေတာ္တင္မွာက ၂၀၀၉ ခုနွစ္၊ ဇန္န၀ါရီလ (၁) ရက္ေန႔ မနက္ ၁၂း၀၀ နာရီ ဆုိေတာ႔ ဒီလုိေလး ေရးလုိက္တယ္ဗ်.

1/1/2009 12:00 AM

ျပီးရင္ Publish လုပ္လုိက္ရုံပါပဲ. ဒါဆုိရင္ Schedule လုပ္တဲ႔အပိုင္း ျပီးပါျပီ။ အဲလုိမ်ိဳးေလး Publish လုပ္လုိက္ရင္ ကုိယ္႔ပုိ႔စ္ေလးေဘးမွာ Scheduled ဆုိတဲ႔ Label ေလး ထုိးထားျပီး သိမ္းေပးထားတာကုိ ေအာက္ပါပုံေလးထဲကအတုိင္း ေတြ႔ရပါလိမ္႔မယ္ခင္ဗ်ာ.

ဒီ Hacks ေလးကုိ ဥာဏ္ရွိသလုိ အသုံးခ်ႏုိင္ပါတယ္.

မွတ္ခ်က္။

တစ္ခ်ိဳ႔ကက်ေတာ႔ ပုိ႔စ္ေလးကုိ Schedule လုပ္ထားခ်င္တယ္. ဒါေပမယ္႔ အခု ခ်က္ခ်င္းလည္းပဲ ဘေလာ႔ဂ္မွာ တင္ခ်င္တယ္. ဖတ္ေနခ်င္တယ္ဆုိတာမ်ဳိးေလးေတြလည္း ရွိတတ္ေသးတယ္ဗ်. အဲလုိဆုိရင္ေတာ႔ နည္းနည္းေလး အလုပ္ရႈပ္သြားလိမ္႔မယ္. သိပ္ေတာ႔မခက္ပါဘူး. ဒါေလးေတြ လုပ္ေပးလုိက္ပါ.

(၁) ပုိ႔စ္ေလးကုိ ပုံမွန္ေရးပါ. ပုံမွန္ ရက္စဲြအတုိင္းပဲ ထားလုိက္ပါ. ျပီးရင္ Publish လုပ္လုိက္ပါ.

(၂) ပုံမွန္လုပ္ငန္းစဥ္အတုိင္း လုပ္သြားတာ ျဖစ္လုိ႔ ဘေလာ႔ဂ္မွာ ပုံမွန္အတုိင္းေလးပဲ ေပၚလာပါလိမ္႔မယ္.

(၃) Edit post ျပန္လုပ္ပါ. ဒီတစ္ခါက်မွ Date and Time ကုိ Future Date and Time သုိ႔ ေျပာင္းလဲေပးလုိက္ပါ.

(၄) Publish ျပန္လုပ္ပါ.

ရလာဒ္က ဘာျဖစ္လာမလဲဆုိေတာ႔ လက္ရွိတင္ထားတဲ႔ ပုိ႔စ္ေလးက ရွိျမဲအတုိင္း ရွိေနမွာ ျဖစ္ျပီးေတာ႔ Schedule ဆဲြထားတဲ႔ အခ်ိန္လည္း က်ေရာ အဲဒီ႔ရက္စဲြအတုိင္း ဟုိး ထိပ္ဆုံးမွာ Latest Post အျဖစ္ ျပန္ေပၚလာမွာ ျဖစ္ပါတယ္. ဒီေတာ႔ အခုလည္း ဖတ္လုိ႔ရတယ္. ေနာက္ သူ႔အခ်ိန္အခါက်ျပန္ေတာ႔လည္း ကုိယ္ schedule ဆဲြထားတဲ႔အတုိင္း ေပၚလာမွာ ျဖစ္တယ္. ကဲ. မနိပ္ေပဘူးလားဗ်.

သတိ။

ဒီ Function ေလးကုိ Blogger Draft မွာပဲ ရပါတယ္. Blogger Draft ဆုိတာ ကၽြန္ေတာ္တုိ႔ လက္ရွိသုံးေနတဲ႔ New Blogger ကုိ မြမ္းမံေရးသားထားတာပါပဲ. သိပ္ျပီးေတာ႔ အေထြအထူးမဟုတ္လွေပမယ္႔ Widgets ေတြ၊ Gadgets ေတြ ပုိထည္႔ေပးထားတာ ေတြ႔ရပါလိမ္႔မယ္. သုံးသင္႔တယ္လုိ႔ ကၽြန္ေတာ္ယူဆပါတယ္. စမ္းသပ္ၾကည္႔ၾကပါခင္ဗ်ာ.

Blogger Draft ကုိ ၀င္ခ်င္ရင္ http://draft.blogger.com ကေန log in ၀င္ပါ. ပုံမွန္အရဆုိရင္ ကၽြန္ေတာ္တုိ႔က http://blogger.com ကေန ၀င္ေနၾကတာေလ. အဲဒါပါပဲ.

Read more »

ဘေလာ႔ဂ္တန္းပလိတ္မ်ားကုိ ခ်ဲ႔ျခင္း

(၁) ရုိးရုိးတန္းပလိတ္မ်ားကုိ ခ်ဲ႔နည္းနဲ႔
(၂) Rounder Template မ်ားကုိ ခ်ဲ႔နည္း ဆုိျပီးရွိပါတယ္

အခု ေရးမွာကေတာ႔ နံပါတ္တစ္ျဖစ္တဲ႔ ရုိးရုိးတန္းပလိတ္မ်ားကုိ ခ်ဲ႔နည္းပဲ ျဖစ္ပါတယ္.


ကၽြန္ေတာ္တုိ႔ကုိ Blogger က ေပးထားတဲ႔ တန္းပလိတ္ရုိးရုိးေလးေတြထဲက Minima Ochre ဆုိတဲ႔ တန္းပလိတ္ေလးကုိ ေရြးလုိက္ပါမယ္.

Layout Tab ေလးထဲက Edit HTML ကိုသြားျပီး အဲဒီ႔တန္းပလိတ္ေလးရဲ႔ CSS Coding ပုိင္းေလးကုိ အရင္ဆုံး ေလ႔လာၾကည္႔ပါမယ္.

ကၽြန္ေတာ္တုိ႔ ေရွ႔ဆက္မသြားခင္မွာ တန္းပလိတ္ခ်ဲ႔တဲ႔ အုိင္ဒီယာေလးကုိ အလြတ္သေဘာ စဥ္းစားၾကည္႔ၾကပါမယ္.

အေပၚကပုံေလးကုိၾကည္႔ပါ.

ကၽြန္ေတာ္တုိ႔ စဥ္းစားရမယ္႔အပို္င္း (၃) ပုိင္းရွိပါတယ္. ဘာေတြလဲဆုိေတာ႔

Outer-wrapper ဆုိတာရယ္ Main-wrapper ဆုိတာရယ္နဲ႔ Sidebar-wrapper ဆုိတာရယ္ပါပဲ. တန္းပလိတ္ေတြ ဘယ္လုိေျပာင္းေျပာင္း အဲဒီ႔သုံးခုက တန္းပလိတ္ခ်ဲ႔မယ္ဆုိ သိထားရမယ္႔ Key Players ေတြပါ. 2-column-template ဆုိရင္ sidebar တစ္ခုပဲ ပါမယ္. 3-column-template ဆုိရင္ေတာ႔ left and right sidebars ေတြပါမယ္ေပါ႔ဗ်ာ.

တစ္ျခားသိထားသင္႔တဲ႔ အသုံးအႏႈန္းေလးေတြကေတာ႔ header-wrapper, content-wrapper စသည္တုိ႔ပဲ ျဖစ္ပါတယ္. ျဖည္းျဖည္းခ်င္းပဲ မိတ္ဆက္ေပးသြားမယ္ဗ်ာ.ေနာ္.

အခု ကၽြန္ေတာ္တုိ႔ရဲ႔ Minima Ochre တန္းပလိတ္ေလးမွာ Outer-wrapper ဆုိျပီး ရွာၾကည္႔လုိက္ရင္ ဒါမ်ိဳးေလးေတြ႔ရပါတယ္.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
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: $endSide;
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 + Sidebar-Wrapper+Space Between = Outer-Wrapper

ေခါင္းေတြခါကုန္ျပီလား. း)… ျပန္ရွင္းျပပါမယ္.

အခု ကၽြန္ေတာ္တုိ႔ရဲ႔ တန္းပလိတ္မွာ ဘာေလးေတြေတြ႔လဲဆုိေတာ႔ Width:660 px စတာေလးေတြေတြ႔ပါလိမ္႔မယ္. ဟုတ္တယ္ဟုတ္.

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

410 +220 + Space between Main and Sidebar wrapper = 660
Space between Main and Sidebar wrapper = 660-(410+220) = 30

ဒါေၾကာင္႔ Space between Main and Sidebar Wrapper ဟာ 30 px ျဖစ္ပါတယ္.

Outer-wrapper ဆုိတာက တန္းပလိတ္ရဲ႔ ဘယ္ဖက္အစကေန ဟုိး ညာဖက္ အဆုံးထိတြက္ခ်က္ထားတာပါ. သူ႔ေအာက္မွာ ဘာေတြပါလဲဆုိေတာ႔ ပုိ႔စ္ေရးတဲ႔ေနရာျဖစ္တဲ႔ main-wrapper (or) content-wrapper ဆုိတာပါတယ္. ျပီးေတာ႔ အဲဒီ႔ Post Area နဲ႔ Sidebar ၾကားမွာ လပ္ေနတဲ႔ Space ေလးပါတယ္. အခုတန္းပလိတ္မွာ အဲဒီ႔ Space ေလးက 30 px ရွိတာေပါ႔. ျပီးေတာ႔ကာ sidebar-wrapper ပါတယ္. အဲဒီ႔သုံးခုေပါင္းလုိက္ရင္ outer-wrapper နဲ႔ ညီရပါမယ္. မဟုတ္ရင္ ကၽြန္ေတာ္တုိ႔ရဲ႔ တန္းပလိတ္ၾကီးဟာ အခ်ိဳးအစားမညီမွ်တာ ျဖစ္လာႏုိင္ပါတယ္.

ကဲ. ဒါဆုိရင္ အုိင္ဒီယာရျပီေပါ႔ေနာ္. ကၽြန္ေတာ္တုိ႔က ပုိ႔စ္ေရးတဲ႔ေနရာျဖစ္တဲ႔ main-wrapper (သုိ႔) content-wrapper ေနရာကုိ ခ်ဲ႔ရမွာပါ. သူ႔ကုိခ်ဲ႔သေလာက္ Outer-wrapper ကုိလည္း လုိက္ၾကီးေပးဖုိ႔ လုိပါတယ္.

ထားပါေတာ႔ဗ်ာ. အခုကိစၥမွာ Outer-wrapper က 660 px ျဖစ္ျပီးေတာ႔ main-wrapper က 410 px ပဲရွိတယ္. ကၽြန္ေတာ္က အဲဒီ႔ main-wrapper ကုိ ေနာက္ထပ္ 200 px ထပ္ေပါင္းခ်င္တယ္. ဆုိလုိတာက 410+200 = 610 px ျဖစ္ခ်င္တာေပါ႔.

ဒီေတာ႔ ကၽြန္ေတာ္တုိ႔အတြက္ ထပ္ေပါင္းထည္႔မယ္႔ နံပါတ္က 200 px ျဖစ္ေနတယ္. အဲဒီ႔ေကာင္ကုိ Outer-wrapper မွာ ျပန္ေပါင္းထည္႔ေပးဖုိ႔ လုိျပီေပါ႔. ဟုတ္တယ္ဟုတ္.

ဒါေၾကာင္႔ ကၽြန္ေတာ္တုိ႔ရဲ႔ တြက္ခ်က္မႈက ဒီလုိျဖစ္လာပါတယ္.

Main-wrapper = 410+200 = 610
Outer-wrapper = 660 + 200 = 860
Sidebar-wrapper = no change
Space Between = no change

အေပၚက ကုဒ္ဒင္းေလးေတြေနရာမွာ တစ္ခါတည္း အစားသြင္းလုိက္မယ္ေနာ္.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 860px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 610px;
float: $startSide;
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: $endSide;
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 */
}

အဲဒီ႔အတုိင္းျပင္ျပီး တန္းပလိတ္ကုိ Save လုိက္ပါတယ္. ကဲ. ကၽြန္ေတာ္တုိ႔ရဲ႔ Result ကုိ ျပန္ၾကည္႔ရေအာင္.

တန္းပလိတ္ေလး က်ယ္သြားျပီဟုတ္…

၀မ္းသာအားရျဖစ္သြားတဲ႔ မ်က္ႏွာေလးက တစ္စုံတစ္ခုကို တအံ႔တဩစိုက္ၾကည္႔ရင္း ေမးခ်င္ေနျပီထင္တယ္.

ကၽြန္ေတာ္သိတယ္. ဒီလုိပဲ ကၽြန္ေတာ္လည္း အေတြ႔အၾကဳံက ရင္းျပီး သင္ယူလာခဲ႔ရတာမုိ႔ အကုန္လုံးကုိ မေျပာျပဘဲ ဘာေၾကာင္႔ ဒီလုိျဖစ္ရတယ္ဆုိတာကုိ ခင္ဗ်ားကုိယ္တုိင္သိေစခ်င္လုိ႔ပါ. ဒါမွ ေနာက္ေနာင္ ဘယ္လုိအခက္အခဲပဲရွိရွိ ကုိယ္႔ဖာသာကုိယ္ ဆန္းစစ္အေျဖရွာတတ္လာမယ္ မဟုတ္ဘူးလား.

ေစတနာကုိ နားလည္ပါဗ်ာ. ေနာ္.

နားမလည္လည္းေနေတာ႔… ဘာျဖစ္တယ္ဆုိတာ ဆက္ေျပာျပမယ္. ဟတ္ဟတ္.

တန္းပလိတ္ရဲ႔ Post Area ကေတာ႔ က်ယ္သြားပါရဲ႔. ဒါေပမယ္႔ Header က လုိက္မက်ယ္ဘဲ က်န္ေနခဲ႔တယ္.

ဒီေတာ႔ ကၽြန္ေတာ္တုိ႔ ကိုယ္႔ကုိယ္ကုိ ဘယ္လုိေမးသင္႔လဲ.

Header ကုိ ထိန္းထားတဲ႔ coding တစ္ခုခုေတာ႔ ရွိရမယ္.

Alright! Let’s go, baby!

တန္းပလိတ္ထဲကုိ ျပန္သြား… Header-wrapper ဆုိျပီး ရိုက္ၾကည္႔လုိက္ေတာ႔

လားလား ( ျမင္းမဟုတ္ပါ)

/* Header
-----------------------------------------------
*/

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

အဲဒီ႔မွာ ေတြ႔ပါျပီဗ်ာ…

သူ႔ရဲ႔ width က 660 px တဲ႔. ကဲ. ကၽြန္ေတာ္တုိ႔ ဘယ္လုိဘာသာျပန္မလဲ

တန္းပလိတ္ကုိ မခ်ဲ႔ခင္က main-wrapper (or) content-wrapper ရဲ႔ width က ဘယ္ေလာက္ရွိခဲ႔လဲ. ျပန္ၾကည႔္လုိက္ရေအာင္.

610 px တဲ႔..

အင္း… ဒါဆုိရင္ေတာ႔ header-wrapper နဲ႔ main-wrapper မဆက္စပ္ဘူး. ေနာက္ထပ္လုိက္ရွာၾကည္႔လုိက္ရေအာင္. ဘာေတြ႔လဲ

ေတြ႔ပါျပီဗ်ာ.

Outer-wrapper ကလည္း 660 px ပဲ.

There you go!... We made it…

ဒါေၾကာင္႔ Outer-wrapper နဲ႔ Header-wrapper ဟာ အတူတူပဲ. ဘေလာ႔ဂ္တန္းပလိတ္ကုိ ခ်ဲ႔ရင္ Outer-wrapper ကုိတင္မကဘူး. Header-wrapper ကုိပါ လုိက္ရွာျပီး ျပင္ေပးဖုိ႔လုိတယ္လုိ႔ ကၽြန္ေတာ္တုိ႔ ေကာက္ခ်က္ခ်လုိက္ပါတယ္.

Header ေနရာဟာ တကယ္ေတာ႔ Banner ေနရာနဲ႔ အတူတူပါပဲ. ဒါေၾကာင္႔ ကုိယ္႔မွာ ဘန္နာေလးေတြ တင္ျပီးသားျဖစ္ေနခဲ႔ရင္လည္း အဲဒီ႔ဘန္နာကုိပါ လုိက္ျပီး ျပန္ခ်ဲ႔ေပးဖုိ႔လုိတယ္လုိ႔ မွတ္ရပါမယ္.

ကဲ. Header-wrapper ကုိ Outer-wrapper ရဲ႔ width အတုိင္းျပင္ျပီေနာ္.


/* Header
-----------------------------------------------
*/

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

တန္းပလိတ္ကုိ Save လုိက္မယ္. ျပီးေတာ႔ ကၽြန္ေတာ္တုိ႔ ရင္ခုန္စြာ ျပန္ၾကည္႔လုိက္ၾကရေအာင္လား.

Read more »

ဘေလာ့ Tamplate ေျပာင္းနည္း

Tamplate ရွိတဲ့လင့္ခ္ ဒီမွာ ႏိုပ္လိုက္ပါ။

ဝင္သြားျပီးဆိုရင္မိမိၾကိဳက္တဲ့Tamplate ဆိုက္ဒ္ကိုေရြးျပီးမိမိၾကိဳက္တဲ့Tamplate download ယူလိုက္ပါ။ေအာက္ပံု ဥပမာျပထားေပးပါတယ္.။

                                                                       ၁။

                                                                       ၂။

Desktop မွာသိမ္းထားမယ္ေနာ္မိမိရဲ႕Tamplate ကုဒ္ ok
                                                                             ၃။

ဟုတ္ျပီေနာ္။ဒီထ္ိ                                             ၄။

က်ေနာ္အနီေရာင္းနဲ႕လုပ္ထားေပးတာကမိမိdownloadယူလိုက္တဲ့Tamplate Code ပါ။ Ok
က်ေနာ္ဘေလာ့ထဲမွာစထည့္ရေတာ့မယ္။
                                                                           ၅။

Edit Html ႏိုပ္မယ္။အေပၚပံု

၆။

၇။

ပံုမွာျပထားတဲ့အတိုင္းၾကည့္ပါ.Browse ကို Tamplate အသစ္ထည့္ဖုိ႕ႏိုပ္လိုက္တာ။windowတစ္ခုတက္လာပါ

တယ္။အေပၚပံုေနာ္Desktopကိုႏိုပ္ျပီးDesktopမွာသိမ္းထားတဲ့ပံု-၃နဲ႕ပံု-၄ကTamplateကုဒ္ကိုေရြးေပးလိုက္ပါ။

၈။

Desktopကသိမ္းထားတဲ့Tamplate Code ေရာက္သြားျပီေနာ္။အေပၚပံုမွာျပထားတဲ့Uploadကုိႏိုပ္ေပးလိုက္ပါ။ 

၉။

အေပၚပံုကိုၾကည့္ပါ.။ျပီးသြားပါျပီ။

၁၀။

မိမိရဲ႕Tamplateကေျပာင္းျပီးသြားေၾကာင္းေဖၚျပထားတဲ့အေပၚကပံုအတိုင္းေတြ႕ရမွာျဖစ္ပါတယ္.။

Read more »

ဘေလာ့မွာ YoutubeVideo တင္နည္း

Youtubeသီခ်င္း၇ဲ႕မူ၇င္းကုဒ္သစ္ေပါ့ေနာ္။အေဟာင္းကုဒ္ကမ်ားပါတယ္။

view plainprint?

1. <iframe width="425" height="349" src="http://www.youtube.com/embed/Azy3WXSjF0o" frameborder="0" allowfullscreen></iframe>  

AutoPlayလုပ္နည္းကုဒ္ကေအာက္ကဟာေလးပါ။

view plainprint?

1. <iframe width="425" height="349" src="http://www.youtube.com/embed/Azy3WXSjF0o&autoplay=1" frameborder="0" allowfullscreen></iframe>  

သီခ်င္းလင့္ခ္၇ဲ႕ေနာက္မွာ&autoplay=1 ေလးထပ္ထည့္ေပးလိုက္ပါ၇င္၇ပါျပီး။

Read more »

မိမိရဲ႕ဘေလာ့မွာရွိတဲ့လင့္ခ္ေတြကိုMouseနဲ႕ေထာက္ရင္ၾကယ္ပံုေလးေတြ

၁။Design

၂။Edit HTML ကိုသြားျပီးေအာက္ကCodeကိုရွာပါ။

view plainprint?

1. </head>  

ေတြ႕ျပီဆိုရင္ေအာက္မွာေအာက္ကCodeကိုထည့္ေပးလိုက္ပါ။

view plainprint?

1. <style>  
2. a:hover { text-decoration:blink; background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1aKwQvqGTZPf_xOSN_h9W3d4_c-Q4a9g-d3-guaD4xTv17BXr_0MBjmI9XcelkodoPHZs6CxemB2MVi9LqGktovNzFnwOA9Mwzyk3VY53mMoY687bB11WjmM_sQHgRFyMGm2sDAcc_ew/s1600/blink.gif); }  
3. </style>  

မွတ္ခ်က္။ ။ၾကယ္ပံုလင့္ခ္ေနရာမွာမိမိႀကိဳက္ရာအစားထုိးႏုိင္သည္။

Read more »

ဘေလာ့ဝါသနာရွင္ေတြအတြက္ အရမ္းကို အသံုးဝင္တဲ့ အခမဲ့ Essential Toolsေ

 1. Free Code Converter/Phraser
ဒါကေတာ့ phrase Adsense ad code နဲ႕အျခားေသာ HTML/JAVA codesေတြကိုဘေလာ့ေပၚမွာတင္ရန္ကူညီေပးႏိုင္ပါတယ္။
1. http://www.blogcrowds.com/resources/parse_html.php
2. http://www.eblogtemplates.com/blogger-ad-code-converter/
2. Free ClipArt
ဒီေနရာေတြမွာအခမဲ့ clip art images ေတြကိုရွာျပီးသံုးႏိုင္ပါတယ္။
1. http://www.wpclipart.com/browse.html
2.http://free-clipart.net/3. http://office.microsoft.com/en-us/images/
4. http://www.free-graphics.com
3. Icons for RSS Feeds
 RSS feed အတြင္ Icon ေလးေတြယူသံုးခ်င္ရင္။
1. http://www.hongkiat.com/blog/free-rss-feed-icons-the-ultimate-list/
2. http://www.feedicons.com/
3. http://www.toxel.com/design/2008/08/13/collection-of-free-rss-feed-icons/
4. Free Image Watermark
မိမိရဲ႕ဓါတ္ပံုေတြကို online ကေနျပီးအမ်ိဳးမ်ိဳးျပဳျပင္ခ်င္ရင္။
1. http://picmarkr.com/
2. http://www.picture-shark.com
3. http://www.watermarktool.com/
5. Favicon Generator
ဒါကေတာ့ဘေလာ့နဲ႕ဝဘ္ဆိုက္ဒ္အတြက္ favicon လုပ္ရင္ဆိုက္ဒေကာင္းေလး။
1. http://tools.dynamicdrive.com/favicon/
2. http://www.favicon.cc/
3. http://www.degraeve.com/favicon/ (It creates,edit and generate the favicon)
6. Free HTML Tutorial
အေကာင္းဆံုး HTML ကုဒ္ေတြကိုလြယ္ကူစြာသင္ယူခ်င္ရင္.
1. http://www.2createawebsite.com/build/html.html
2. http://www.htmlcodetutorial.com/
3. www.w3schools.com/
7. Online Free File Storage
ဒါေလးကေတာ့ Online ေပၚမွာမိမိရဲ႕ Fileေတြကိုသိမ္းထားခ်င္ရင္ေပါ့ေနာ္။
1. http://filefactory.com/ (free up to 300MB)
2. http://skydrive.live.com/ (25GB)
3. https://www.box.net/ (1GB)
8. HTML Color code picker
ဒါကေတာ့ HTML value of a specific color ေတြေပါ့္ေနာ္
1. http://www.blogger-help.com/2009/02/get-html-color-code-values.html
9. Reveal exact color of HTML color code
အျခားေတာ့ HTML color code e.g. #CCCCCC ေတြကိုရႏိုင္ပါတယ္။
1. http://www.colorcombos.com/CCCCCC-hex-color
10. Social Bookmarking and Sharing
ဒါေလးကေတာ့add social bookmarking နဲ႕ sharing icons အတြက္ပါ။
1. http://addthis.com/
2. http://www.socialmarker.com/
3. http://sharethis.com/
11. Free website statistics
1. http://www.google.com/analytics/index.html
12. Free buttons and logo's
လွလွပပ Buttons ေတြနဲ႕ Logo ေတြအတြက္အသံုးဝင္တဲ့ဆိုက္ဒ္ေကာင္းေလးပါ။
1. http://www.buttonator.com/
2. http://www.simwebsol.com/ImageTool/
3. http://www.mycoolbutton.com/

Read more »