Sunday, July 1, 2012

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

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

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

အဲဒီ႔လုိ အခက္အခဲမ်ိဳးေလးေတြကုိ အသစ္မြမ္းမံထြက္ရွိလာတဲ႔ 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 ကေန ၀င္ေနၾကတာေလ. အဲဒါပါပဲ.

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


(၁) ရုိးရုိးတန္းပလိတ္မ်ားကုိ ခ်ဲ႔နည္းနဲ႔
(၂) 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 လုိက္မယ္. ျပီးေတာ႔ ကၽြန္ေတာ္တုိ႔ ရင္ခုန္စြာ ျပန္ၾကည္႔လုိက္ၾကရေအာင္လား.

ဘေလာ့ 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ကေျပာင္းျပီးသြားေၾကာင္းေဖၚျပထားတဲ့အေပၚကပံုအတိုင္းေတြ႕ရမွာျဖစ္ပါတယ္.။

Saturday, June 16, 2012

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


Youtubeသီခ်င္း၇ဲ႕မူ၇င္းကုဒ္သစ္ေပါ့ေနာ္။အေဟာင္းကုဒ္ကမ်ားပါတယ္။
  1. <iframe width="425" height="349" src="http://www.youtube.com/embed/Azy3WXSjF0o" frameborder="0" allowfullscreen></iframe>  
AutoPlayလုပ္နည္းကုဒ္ကေအာက္ကဟာေလးပါ။
  1. <iframe width="425" height="349" src="http://www.youtube.com/embed/Azy3WXSjF0o&autoplay=1" frameborder="0" allowfullscreen></iframe>  
သီခ်င္းလင့္ခ္၇ဲ႕ေနာက္မွာ&autoplay=1 ေလးထပ္ထည့္ေပးလိုက္ပါ၇င္၇ပါျပီး။

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

၁။Design

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

  1. </head>  
ေတြ႕ျပီဆိုရင္ေအာက္မွာေအာက္ကCodeကိုထည့္ေပးလိုက္ပါ။
  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>  
မွတ္ခ်က္။ ။ၾကယ္ပံုလင့္ခ္ေနရာမွာမိမိႀကိဳက္ရာအစားထုိးႏုိင္သည္။

ဘေလာ့ဝါသနာရွင္ေတြအတြက္ အရမ္းကို အသံုးဝင္တဲ့ အခမဲ့ 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/

အေကာင္းဆုံး WordpressThemes ဆိုက္ဒ္၇၉ခု

  1.  The Wordpress.Org Directory
  2. http://www.wordpressmanual.com/
  3. http://wordpressthemesbase.com
  4. http://www.freewpthemes.net/
  5. http://www.wpthemesfree.com/
  6. http://www.freethemelayouts.com/
  7. http://topwpthemes.com/
  8. http://www.themelab.com/free-wordpress-themes/
  9. http://www.freewordpressthemes4u.com/
  10. http://www.blogohblog.com/wordpress-theme-dictum/
  11. http://themetation.com/category/themes/free-themes/
  12. http://www.wpzoom.com/free-wordpress-themes/
  13. http://www.freewebsitethemes.com/
  14. http://www.web2feel.com/
  15. http://www.graphicmania.net/category/wordpress/
  16. http://www.freewpthemesite.com/
  17. http://www.clone24.com/
  18. http://www.acosmin.com/wordpress-themes/
  19. http://free-wordpress-themes.com/
  20. http://wpthemes.info/
  21. http://www.ezwpthemes.com/
  22. http://www.freethemewordpress.com/
  23. http://www.wpskins.org/
  24. http://wplayout.com/
  25. http://www.magpress.com/
  26. http://themeboss.com/
  27. http://www.themes-wp.com/
  28. http://newwpthemes.com/
  29. http://www.prowordpressthemes.com/
  30. http://wpshower.com/
  31. http://www.widgetreadythemes.com/
  32. http://forthelose.org/ftl-themes
  33. http://iwordpressthemes.com/
  34. http://www.templatelite.com/
  35. http://www.themesplice.com/
  36. http://www.amazingwordpressthemes.com/
  37. http://www.themespreview.com/
  38. http://fthemes.com/videozone-free-wordpress-theme/
  39. http://www.wpdaddy.com/
  40. http://www.fresheezy.com/
  41. http://wpthemesdb.com/
  42. http://themes.rock-kitty.net/
  43. http://wpcorner.com/
  44. http://www.tastythemes.net/free-wordpress-themes/
  45. http://www.wordpresssupplies.com/
  46. http://wordpress2u.com/
  47. http://www.wpthemes360.com/
  48. http://www.mygreencorner.com/freewordpressthemes.php
  49. http://www.themes2wp.com/
  50. http://www.wordpressthemes2.com/
  51. http://www.themesbase.com/WordPress-Templates/
  52. http://ithemes.com/free-wordpress-themes/
  53. http://www.iloveyouwp.com/wordpress-themes
  54. http://www.mkels.com/
  55. http://www.premiumwp.com/category/free-premiumwp-wordpress-themes/
  56. http://freewpthemes.name/
  57. http://www.freewpblogthemes.com/
  58. http://www.themza.com/Wordpress/
  59. http://www.theme-time.com/
  60. http://www.gothemes.com/
  61. http://www.free-wp-themes.com/
  62. http://wpcrunchy.com/tag/free/
  63. http://www.freewpthemes.net/wordpress-themes/
  64. http://www.productivedreams.com/tag/wordpress-theme/
  65. http://ericulous.com/category/free-wordpress-themes/
  66. http://newwpthemes.net/category/free-wordpress-themes/
  67. http://wptemplates.org/
  68. http://www.wp4themes.com/
  69. http://www.wptheme4free.com/
  70. http://www.wpfreetemplates.net/
  71. http://greatwordpressthemes.com/
  72. http://www.siteground.com/wordpress-hosting/wordpress-themes.htm
  73. http://www.paddsolutions.com/
  74. http://www.dynamicwp.net/category/free-themes/
  75. http://www.simplewpthemes.com/
  76. http://www.web3mantra.com/2011/03/04/50-free-wordpress-themes/
  77. http://tech2connect.com/blog/
  78. http://wpgpl.com/category/themes/
  79. http://wphacks.com/50-best-free-wordpress-themes-gallery/

changing blog template

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

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

                                                                       ၁။

                                                                       ၂။
Desktop မွာသိမ္းထားမယ္ေနာ္မိမိရဲ႕Tamplate ကုဒ္ ok
                                                                             ၃။
ဟုတ္ျပီေနာ္။ဒီထ္ိ                                             ၄။
က်ေနာ္အနီေရာင္နဲ႕လုပ္ထားေပးတာကမိမိdownloadယူလိုက္တဲ့Template Code ပါ။ Ok
က်ေနာ္ဘေလာ့ထဲမွာစထည့္ရေတာ့မယ္။
                                                                           ၅။

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

၇။
ပံုမွာျပထားတဲ့အတိုင္းၾကည့္ပါ.Browse ကို Template အသစ္ထည့္ဖုိ႕ႏိုပ္လိုက္တာ။windowတစ္ခုတက္လာပါ
တယ္။အေပၚပံုေနာ္Desktopကိုႏိုပ္ျပီးDesktopမွာသိမ္းထားတဲ့ပံု-၃နဲ႕ပံု-၄ကTemplateကုဒ္ကိုေရြးေပးလိုက္ပါ။
၈။

Desktopကသိမ္းထားတဲ့Template Code ေရာက္သြားျပီေနာ္။အေပၚပံုမွာျပထားတဲ့Uploadကုိႏိုပ္ေပးလိုက္ပါ။ 
၉။
အေပၚပံုကိုၾကည့္ပါ.။ျပီးသြားပါျပီ။
၁၀။
မိမိရဲ႕Templateကေျပာင္းျပီသြားေၾကာင္းေဖၚျပထားတဲ့အေပၚကပံုအတိုင္းေတြ႕ရမွာျဖစ္ပါတယ္.။

blog ဆိုတာဘာလဲ

http://mmhan.net/wp-content/uploads/2008/10/what_is_blog1.gif

Menu Tab လုပ္နည္းမ်ား



Menu Tab လုပ္နည္းေလးပါပဲ
Menu Tab ဆုိတာ ဘာလဲဆုိတာကေန စၾကည္႔လုိက္ရေအာင္. ပုံေလးေတြကုိ ၾကည္႔လုိက္ပါ. အဲဒါ Menu Tab ေလးေတြပါပဲ.






ဘေလာ႔ဂ္တန္းပလိတ္တုိင္းမွာ Menu Tab မပါၾကပါဘူး. ပါတဲ႔ တန္းပလိတ္ တစ္ခ်ိဳ႔ ရွိပါတယ္. ဒါေပမယ္႔ Wordpress အတြက္ အမ်ားစုျဖစ္ေနၾကတယ္. Blogger Platoform အတြက္က်ျပန္ေတာ႔လည္း ရွိေတာ႔ရွိပါရဲ႔. Classic Template အတြက္ ျဖစ္ေနတတ္ျပီးေတာ႔ New Blogger Widget Template အတြက္ Menu Tab ထည္႔ေပးျပီးသား မရွိတတ္ၾကပါဘူး. ဒီေတာ႔ ကုိယ္တုိင္ကုိယ္က် ထည္႔တတ္ေအာင္ ေလ႔လာသင္ယူလုိက္တာ အေကာင္းဆုံးပဲ မဟုတ္ဘူးလားဗ်ာ…

ပထမဦးဆုံးအေနနဲ႔ ကုိယ္လုပ္မယ္႔ Menu Tab အတြက္ Button ေလးေတြကုိ ဖန္တီးယူရပါမယ္. Photoshop ႏုိင္နင္းတဲ႔သူေတြအတြက္ဆုိရင္ေတာ႔ ကုိယ္ပုိင္ Button ေလးေတြကုိ ဖန္တီးႏုိင္မွာပါ. Flash သမားေတြဆုိရင္ ပုိေတာင္မွ အဆင္႔ျမင္႔တဲ႔ Button ေလးေတြ လုပ္ဖုိ႔ အခြင္႔အလမ္းအမ်ားၾကီးရွိပါတယ္. အဲ. ကုိယ္တုိင္ မလုပ္တတ္ရင္လည္း စိတ္မပူပါနဲ႔. ဒီမွာ အဆင္သင္႔ လုပ္ေပးျပီးသား Button ေလးေတြ ရွိပါတယ္. ကုိယ္႔စိတ္ၾကိဳက္ ပုံေလးေတြကုိ သိမ္းထားႏုိင္ပါတယ္.




Black




Blackleft.gif




Blackright.gif


Blue




Blueleft.gif




Blueright.gif


Green




Greenleft.gif




Greenright.gif


Red




Redleft.gif




Redright.gif


Ungu




Unguleft.gif




Unguright.gif


White




whiteleft.gif




whiteright.gif


Yellow




yellowleft.gif




yellowright.gif


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

အဆင႔္ (၁)

- Blogger ထဲကုိ Sign in ၀င္ပါ. Layout>Template>Edit Html ကုိသြားပါ.

- တန္းပလိတ္ကုိ Backup လုပ္ဖုိ႔ လုံး၀ (လုံး၀) မေမ႔ပါနဲ႔. ဒါမွ မေတာ္တဆ အမွားလုပ္ခဲ႔မိရင္ေတာင္ ကုိယ႔္ဘေလာ႔ဂ္ေလး မပ်က္စီးႏုိင္ေတာ႔ဘူးေပါ႔.

- Expand Widget Templates ဆုိတဲ႔ Box ေလးကုိ Check လုပ္ခဲ႔ပါ.

အဆင္႔ (၂)

- ျပီးသြားရင္ေတာ႔ တန္းပလိတ္ထဲမွာ ]]></b:skin> ဆုိတဲ႔ Code ေလးကုိ လုိက္ရွာပါ. ေတြ႔ျပီဆုိတာနဲ႔ ေအာက္မွာ ေဖာ္ျပေပးမယ္႔ ကုဒ္ဒင္းေလးေတြကုိ အေပၚကေန ကပ္လ်က္ထည္႔ေပးလုိက္ပါ.

/* Menu Tab Starts Here */

tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background:url("http://www.fileden.com/files/2007/2/17/784534/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background:url("http://www.fileden.com/files/2007/2/17/784534/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

အေပၚမွာ ျပထားတဲ႔ ကုဒ္ဒင္းေလးေတြထဲမွာ Default အေနနဲ႔ Black Button ေလးကုိ ထည္႔ေပးထားပါတယ္. ကုိယ္ၾကိဳက္တဲ႔ အေရာင္ ေျပာင္းယူႏုိင္ပါတယ္. အနီေရာင္ၾကိဳက္ရင္ blackleft.gif ေနရာမွာ redleft.gif ဆုိျပီးေတာ႔ တစ္ခါ၊ blackright.gif ေနရာမွာ redright.gif ဆုိျပီးေတာ႔ တစ္ခါ ႏွစ္ေနရာမွာ ေျပာင္းေပးရပါမယ္. ဒီေလာက္ဆုိ သေဘာေပါက္ျပီထင္ပါတယ္.

ဒီေနရာမွာ တစ္ခု ျဖတ္ေျပာခ်င္ပါတယ္. ဘာလဲဆုိေတာ႔ အခုကၽြန္ေတာ္ေပးထားတဲ႔ Button ေလးေတြအတြက္ URL ေတြကုိ သူမ်ားတင္ေပးျပီးသား လင္႔ခ္ေတြကုိ ယူသုံးတာထက္ Hosting Site တစ္ခုခုမွာ ကုိယ္ပုိင္ေကာက္တင္ျပီး ယူသုံးတာ ကုိယ္႔အတြက္ ပုိစိတ္ခ်ရပါတယ္. မဟုတ္ရင္ေတာ႔ ၀ိုင္းျပီး သုံးသူေတြ မ်ားႏုိင္တာေၾကာင္႔ Bandwidth မႏိုင္တာေတြ ျဖစ္လာႏုိင္ျပီး ကုိယ္႔ဘေလာ႔ဂ္မွာ တင္ထားတဲ႔ Menu Tab ေလးေတြ ခဏခဏ ေဒါင္းသြားတတ္ပါတယ္.

File Hosting မလုပ္ခင္ ကုိယ္ၾကိဳက္တဲ႔ ပုံေလးေတြကုိ အရင္ဆုံး Save လုပ္ပါ. ဖုိင္လ္ေတြကုိ ဘယ္လုိမ်ိဳး Host လုပ္ရလဲဆုိတာကုိ သိခ်င္ရင္ေတာ႔ ဒီပုိ႔စ္ေလးကုိ ဖတ္ျပီး ေလ႔လာစမ္းသပ္ၾကည္႔ပါခင္ဗ်ာ….

Button ေလးတစ္ခုကို အစမ္းသေဘာအေနနဲ႔ တင္ျပေပးပါမယ္. အစိမ္းေရာင္ေလးကုိ ေရြးလုိက္ပါမယ္. တင္ရမယ္႔ ဖုိင္က ႏွစ္ခုပါ. Greenleft.gif နဲ႔ Greenright.gif ပါ.



File Hosting လုပ္နည္း အက်ဥ္းခ်ဳပ္


Free File Hosting ေပးတဲ႔ Site ေတြထဲကမွ Fileden ကုိ ကၽြန္ေတာ္ေရြးလုိက္ပါမယ္.

Upload ဆုိတဲ႔ Tab ေလးကို ေရြးပါမယ္.



ကုိယ္တင္ခ်င္တဲ႔ ဖုိင္ေလးေတြကုိ Browse ကေန တစ္ဆင္႔ ေရြးပါမယ္. ျပီးရင္ေတာ႔ Upload လုပ္ပါမယ္.



ကၽြန္ေတာ္တင္ခ်င္တဲ႔ Greenleft.gif နဲ႔ Greenright.gif ဖုိင္ေလးေတြကုိ ေရြးျပီးေတာ႔ Upload လုပ္ပါမယ္.



ေနာက္တစ္မ်က္ႏွာမွာ ေပၚလာမွာကေတာ႔ ကၽြန္ေတာ္တုိ႔တင္လုိက္တဲ႔ ဖုိင္ေလးေတြရဲ႔ URL လင္႔ခ္ေလးေတြပါပဲ. Selection လုပ္ျပထားတဲ႔ URL ေလးေတြကုိ ကူးယူလုိက္ရင္ File Hosting လုပ္တဲ႔ Process ေအာင္ျမင္စြာ ျပီးဆုံးသြားပါျပီ.



အခု ကၽြန္ေတာ္တုိ႔ရဲ႔ Case မွာေတာ႔ ဒီလင္႔ခ္ေလးႏွစ္ခုကုိ ယူလာရပါမယ္.

http://www.fileden.com/files/2007/2/17/784534/greenleft.gif နဲ႔

http://www.fileden.com/files/2007/2/17/784534/greenright.gif တုိ႔ပဲ ျဖစ္ပါတယ္.

အဲဒီ႔လင္႔ခ္ေလးႏွစ္ခုကုိ အေပၚမွာ ေဆြးေႏြးထားခဲ႔သလုိပဲ

http://www.fileden.com/files/2007/2/17/784534/blackleft.gif နဲ႔

http://www.fileden.com/files/2007/2/17/784534/blackright.gif ဆုိတဲဲ႔

ေနရာေလးေတြမွာ အသီးသီး အစားသြင္းေပးလုိက္ရင္ ကုိယ္႔စိတ္ၾကိဳက္ Button ေလးေတြကုိ Menu Tab လုပ္တဲ႔ အဆင္႔ျပီးသြားျပန္ပါျပီ….


အဆင္႔ (၃)

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

ပထမဦးဆုံး အခု ကၽြန္ေတာ္ေပးလုိက္မယ္႔ ကုဒ္ဒင္းေလးကုိ ေကာ္ပီကူးထားေစခ်င္ပါတယ္.

<div id="tabshori">
<ul>
<!-- Change the links with your own links -->
<li><a href=" http://yanaung.blogspot.com/ ">မူလစာမ်က္ႏွာသုိ႔</a></li>
<li><a href="Your Link Here">Your Link Name</a></li>
<li><a href="Your Link Here">Your Link Name</a></li>
</ul>
</div >


ဥပမာ လုပ္ျပေပးထားတဲ႔ လင္႔ခ္ေလးေတြေနရာမွာ ကုိယ္႔စိတ္ၾကိဳက္ လင္႔ခ္ေလးေတြ ထည္႔ေပးဖုိ႔ေတာ႔ မေမ႔ပါနဲ႔.

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

ကဲ. ဆက္လုပ္လုိက္ၾကရေအာင္.

နည္းလမ္း (၁)

<div id="content-wrapper"> ဆုိတဲ႔ ကုဒ္ဒင္းေလးကုိ ေတြ႔ေအာင္ ရွာပါ. ေတြ႔ခဲ႔ရင္ေတာ႔ အခုနက ကၽြန္ေတာ္တုိ႔ ေကာ္ပီကူးထားတဲ႔ ကုဒ္ဒင္းေလးေတြကုိ အခုေတြ႔ေနရတဲ႔ <div id="content-wrapper"> ဆိုတဲ႔ ကုဒ္ဒင္းေလးအေပၚကေန ကပ္လ်က္ ထည္႔ေပးလုိက္ပါ.

Template ကုိ Save မလုပ္ပါနဲ႔ဦး. အရင္ဆုံး Preview ၾကည္႔ၾကည္႔ပါ. ၾကိဳက္ျပီလား. အုိေက. ဒါဆုိရင္ Save လုပ္လုိ႔ရပါျပီ.

ဟာ. မဟုတ္ေသးဘူး. Menu Tab ေပၚေနတဲ႔ ေနရာကုိ မၾကိဳက္ဘူး. ဒါဆုိရင္ေတာ႔ ေနာက္တစ္မ်ိဳး ၾကိဳးစားၾကည္႔ပါမယ္.

တန္းပလိတ္ထဲမွာ </div> ဆုိတဲ႔ ကုဒ္ဒင္းေလးေတြ အမ်ားၾကီးရွိပါတယ္. အဲဒါေလးေတြကုိ ရွာျပီး အေပၚကေန ကပ္လ်က္မွာ ေကာ္ပီကူးဖုိ႔ ေျပာထားတဲ႔ ကုဒ္ဒင္းေလးေတြကုိ ထည္႔ေပးလုိက္ပါ. တန္းပလိတ္ထဲမွာ </div> ဆုိတာေလးေတြ အမ်ားၾကီးပါပါလိမ္႔မယ္. ၾကိဳးစားၾကည္႔ပါ. ကုိယ္႔စိတ္ၾကိဳက္ေနရာမွာ Menu Tab ေလးေပၚလာသည္အထိေပါ႔. Preview ခဏခဏ လုပ္ၾကည္႔ပါ. စိတ္ၾကိဳက္ရျပီဆုိေတာ႔မွ Save Template လုပ္ပါ.

ဒါက နည္းလမ္း (၁) ေပါ႔. တန္းပလိတ္အမ်ားစုက ဒီနည္းလမ္းနဲ႔ အဆင္ေျပတတ္ၾကပါတယ္.

မေျပဘူးဆုိခဲ႔ရင္ေရာ…

Fine! Here is another method…

နည္းလမ္း (၂)

တန္းပလိတ္ထဲမွာ ေအာက္ပါ ကုဒ္ဒင္းေလးေတြကုိ လုိက္ရွာပါ.

<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>

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

<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>

ျပီးသြားခဲ႔ရင္ေတာ႔ တန္းပလိတ္ကုိ Save လုပ္ခဲ႔ပါ. ျပီးရင္ Page Element> Add Page Element> HTML/Javascript ကို ေရြးပါ. ရျပီဆုိရင္ေတာ႔ ခုနက ေကာ္ပီကူးခုိင္းထားတဲ႔ ကုဒ္ဒင္းေလးေတြကုိ ေပၚလာမယ္႔ Content Box ေလးထဲမွာ ထည္႔ေပးလုိက္ပါ. Save လုပ္ပါ. Preview ၾကည္႔ၾကည္႔ပါ.



ကုိရန္ေအာင္ ဆီမွကူးယူထားပါသည္။

Wednesday, June 13, 2012

ဘေလာဂ္ကုိ ရည္ရြယ္ခ်က္ရွိရွိ တုိက္ခုိက္ေနတဲ့ သူေတြကုိ ဘယ္လုိ Ban မလဲ


ဒီပုိ႔စ္ကုိေတာ့ ကၽြန္ေတာ္ တင္ဖုိ႔ စိတ္ကူးမရွိပါဘူး . ဒါေပမယ့္ ကၽြန္ေတာ့္လုိပဲ အေျပာခံေနရ အဆုိခံေနရတဲ့သူမ်ား အတြက္ တင္ေပးလုိက္တာပါ . ကၽြန္ေတာ္တုိ႔ ဘေလာဂ္ကုိ တုိက္ခုိက္တဲ့လူက ႏွစ္နည္းနဲ႔ တုိက္ခုိက္ႏုိင္ပါတယ္ .
  • (၁) C-box မွာ ေရးျခင္း၊ ဆဲျခင္း
  • (၂) mail ကုိ add ၿပီးေတာ့ တုိက္ခုိက္ျခင္း၊ ဆဲျခင္း

ကဲ မိတ္ေဆြတို႔ေကာ ကၽြန္ေတာ့္လုိ အဆဲခံရရင္ ဘယ္လုိေနမလဲ ?? စဥ္းစားသာၾကည့္ ရင္ထဲမွာ တႏုံ႕ႏုံ႕နဲ႔ . ကၽြန္ေတာ္ ဒီေန႔ မထူးဘူးဆုိၿပီး လုပ္လုိက္တာပါ . ေသေသခ်ာခ်ာစဥ္းစားခဲ့ၿပီး ရွာလုိက္ေတာ့ လဒက တစ္ေယာက္တည္းဗ် သိလား . ေနာက္တစ္ခါလာေရးရင္လဲ ခ်မ္းသာလုိ႔ ကြန္ပ်ဴတာ 10 လုံးနဲ႔ လာေရးလဲ 10 လုံးစလုံးကုိ ဘန္းမယ္ဗ်ာ . လာေရးပါ ႀကိဳဆုိပါတယ္ .

IP Address: 115.67.4.182 အေသးစိတ္ကုိ သိခ်င္ရင္လဲ ရပါတယ္ . ေနာက္မွ ကၽြန္ေတာ္ေရးေပးပါဦးမယ္ . mail လိပ္စာသိရုံနဲ႔ သူ႔ရဲ႕ ကုိယ္ေရးဖုိင္ေတြကုိ ဘယ္လုိသိႏုိင္လဲဆုိတာကုိပါ . ဒါကေတာ့ ေနာက္ပုိင္းေပါ့ . အခုကေတာ့ ဘေလာဂ္ရွိတဲ့သူတုိင္း ဒီလူကုိ ဘန္းထားၾကဖုိ႔ကုိလဲ ကၽြန္ေတာ့္အေနနဲ႔ အၾကံဥာဏ္မ်ားေပးလုိပါတယ္ . ဘာျဖစ္လုိ႔လဲဆုိရင္ ဒီလုိလူမ်ိဳးေတြကုိ ဒီလုိလုပ္မွပဲ ကၽြန္ေတာ္တုိ႔အတြက္ အဆင္ေျပမွာမုိ႔လုိ႔ပါ . နာမည္မ်ိဳးစုံသုံးၿပီး တစ္ေယာက္တည္းကေန တုိက္ခုိက္ေနတာပါ . တုိက္ခုိက္တဲ့သူက ကုိ႔ဆုိက္ကုိ ရုိးရုိးလာၾကည့္တာမဟုတ္ပဲ gmail ကေန ေမးလ္ပုိ႔ၿပီးတုိက္ခုိက္မလား . ရတယ္ gmail ကေန ip address ကုိ ရွာၿပီး ဘန္းမယ္ ၊ cbox ကေန လာမလား ရတယ္ ip ကုိ ရွာၿပီးဘန္းမယ္ . ေရးခ်င္တဲ့ ဖက္ကေရး . ဘန္းလုိ႔ရပါတယ္ . မေရးပဲ ေအးေဆးေနရင္ေတာ့ သူဘာမွမလုပ္သလုိ ကုိလဲ ဘာမွမလုပ္ဘူးေလ . ဟုတ္တယ္ဟုတ္ . ကၽြန္ေတာ္ကေတာ့ ဘန္းလုိက္ပါၿပီ .
ကဲေအာက္မွာ blogger.com ကုိ အသုံးျပဳၿပီး blog ေရးေနသူမ်ားအေနႏွင့္ ဘယ္လုိ ဘန္းရမလဲဆုိတာကုိ ေျပာျပပါ့မယ္ .. မလုပ္ခ်င္ အခုကုိသုံးေနတဲ့ template ကုိ backup လုပ္ထားဖုိ႔ မေမ့ပါနဲ႔ . ဒါမွ တစ္ခုခုျဖစ္ရင္ အရင္အတုိင္း ျပန္ရမွာမုိ႔ပါ ..
. gmail လိပ္စာကုိ သိၿပီးေတာ့ ipaddress ကုိ မသိသူမ်ား ကၽြန္ေတာ့္ကုိ ဘန္းခ်င္တဲ့သူရဲ႕ email လိပ္စာသာ ပုိ႔ေပးလုိက္ပါ . ကၽြန္ေတာ္ အဲဒီ့လူရဲ႕ ip-address ကုိ ျပန္ပုိ႔ေပးပါ့မယ္ ...

Ban နည္း
  • (၁) blogger.com ကုိ ၀င္လုိက္ပါ .
  • (၂) Layout >> Edit html ကုိ သြားလုိက္ပါ ..
  • (၃) ctrl + f ကုိ ႏွိပ္ၿပီး ေပၚလာတဲ့ box ေလးထဲကုိ <head> ဆုိတာကုိ ရွာပါ့မယ္ .
  • (၄) ေဟာ့ေတြ႔ၿပီ . ေတြ႔ၿပီဆုိရင္ <head> ရဲ႕ ေအာက္တည့္တည့္ေလးမွာ ေအာက္က code ေတြကုိ ရုိက္ထည့္လုိက္ ..


<script type="text/javascript" src="http://code.vietwebguide.com/php/addr.php"></script>
<script type="text/javascript">
//<!CDATA[
// Banned ip script 2.0
//(C)2009 Anhvo
//homepage: http://vietwebguide.com

var banned_ip = new Array();

banned_ip[0] = '85.142';
banned_ip[1] = '22.98.69.1';
banned_ip[2] = '115.67.4.182';
banned_ip[3] = '85.78';

var mes_bi = "Your IP is banned so you cannot visit this website!";

for(var i=0;i<banned_ip.length;i++) {
eval('var re = /^' + banned_ip[i] + '/ ;');
if (re.test(mc_user_ip))
{
document.write('<style type="text/css">');
document.write('BODY{display:none;}');
document.write('<\/style>');
alert(mes_bi);
break;
}
}
//]]>
</script>

ဒီဇာတ္လမ္းမွာ 115.67.4.182 အဲ့ဒီ့ ip address ကေတာ့ မင္းသားကုိ အဲ့ဒီ့ေတာ့ မင္းသားကုိေတာ့ မပါမျဖစ္ ထည့္ေပးၾကဗ်ာ . ဟုတ္ၿပီလား . က်န္တဲ့သူက ဇာတ္ရံေပါ့ . အဲ့ဒီ့ ကုိေရႊေခ်ာကေတာ့ ဇာတ္လုိက္ေပါ့ . အေပၚကတုိင္းထည့္ဗ်ာ .. ထည့္ၿပီးတာနဲ႔ save လုိက္ .. အဲ့မယ္ စာလုံးအနီနဲ႔ျပထားတာေတြကေတာ့ ကုိဘန္းခ်င္တဲ့ ip address ကုိ ဘန္းထားဖုိ႔ ျဖည့္ရမွာပါ . ဘယ္ႏွစ္လုံးကုိ ဘန္းမလဲ နံပါတ္ေတြထပ္ျဖည့္လုိ႔ရပါေသးတယ္ .
မင္းသားကုိေတာ့ မေမ့ၾကနဲ႔ေနာ္ မဟုတ္ရင္ ဒီဇာတ္ကားက ၾကည့္ေကာင္းမွာမဟုတ္ဘူး . မင္းသားကုိသာထည့္ ဒီဇာတ္ကား ရုံျပည့္ရုံလွ်ံျဖစ္သြားမယ္ .

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Bluehost Review