Horizontal Menu and Navigation Bar

Text Link Menu Navigation Bars ျပဳလုပ္ဖုိ႔အတြက္ Minima Template ကုိအေျခခံၿပီး ေဖာ္ျပေပးသြားမွာ ျဖစ္ပါတယ္။ အဆင့္(၄)ဆင့္ေလာက္ေတာ့ လုပ္ရပါလိမ့္မယ္-

1. အရင္ဆံုး ရုိးရွင္းတဲ့ Simple Navigation Bar ျပဳလုပ္ဖုိ႔အတြက္ ေအာက္ေဖာ္ျပပါ CSS code ကုိထည့္ေပး ရပါမယ္-

#newnavbar ul li{
font-size:100%;
font-aling:top;
list-style-type: none;
display:inline;
padding:10px;
margin:0px;
border:0px solid;
}

(က) Dashboard ကုိသြားပါ။ Layout==>Edit HTML ကုိ၀င္ပါ။ ထံုစံအတုိင္း Download Full Template ကုိႏွိပ္ၿပီး Template Backup လုပ္ပါ။ ၿပီးရင္ #header-wrapper (သုိ႔မဟုတ္) #header-wrapp စသျဖင့္ တစ္ခုခုကုိ Find box(Ctrl+F) မွာ ထည့္သြင္း ရွာၾကည့္ပါ။ မိမိ Template အေပၚမူတည္ၿပီး မတူညီႏုိင္တဲ့အတြက္ အနီးစပ္ဆံုးကုိ ရွာၿပီး ေတြ႕ရင္ ၄င္းရဲ႕အေပၚမွာ အထက္ေဖာ္ျပပါ code ကုိထည့္သြင္းေပးလုိက္ပါ။ (က်ေနာ္ အသံုးျပဳထားတာကေတာ့ Minima Template Style ျဖစ္ပါတယ္ သူ႔ကုိဆိုရင္ေတာ့ /*Header*/ ကုိရွာၿပီး သူ႔ရဲ႕ေအာက္မွာထည့္သြင္းေပးလုိက္ရံုပါ။) ၄င္း code အတြင္း အနီေရာင္ျဖင့္ျပထားေသာ တန္ဖုိးမ်ားကုိ မိမိလုိအပ္သလုိခ်ိန္ညွိေပးရပါမယ္။
(ခ) <div id='header-wrapper'> ေအာက္မွာရွိတဲ့ ေအာက္ေဖာ္ျပပါ code ကုိရွာပါ
(<div id='header-wrapp'> လဲျဖစ္ခ်င္ျဖစ္ႏုိင္ပါတယ္ မိမိရဲ႕ Template အေပၚပဲ မူတည္ပါတယ္)

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

၄င္း code အတြင္း အနီေရာင္ျဖင့္ ျပထားသည္တုိ႔ကုိ ေအာက္ပါအတုိင္းေျပာင္းေပးလုိက္ပါ-

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

maxwidgets value ကုိ မိမိအသံုးျပဳခ်င္သေလာက္ထည့္ေပးႏုိင္ပါတယ္။ေအာက္ပါ ပံုကုိၾကည့္ပါ-

2. Text color ႏွင့္ mouse over Link တုိ႔အတြက္ကုိေတာ့ ေအာက္ေဖာ္ျပ အျပာေရာင္ျဖင့္ ျပထားေသာ code တုိ႔ကုိအပုိဒ္(၁)ပါအတုိင္းျပဳလုပ္ခဲ့ၿပီးေသာ CSS code ေအာက္တြင္ ထပ္မံ ထည့္သြင္းေပးလုိက္ရံုပါ-

#newnavbar ul li{
font-size:85%;
list-style-type: none;
display:inline;
padding:5px;
margin:0px;
border:1px solid;
}
#newnavbar li a{
color:#4CC417;
}
#newnavbar li a:visited {
color: #57E964;
}
#newnavbar li a:hover {
color: #F88017;
background: #ffff66;
}

-အနီေရာင္ျဖင့္ျပထားသည္တုိ႔ကုိ မိမိႀကိဳက္သလုိ color ထည့္သြင္း အသံုးျပဳႏုိင္ပါတယ္။ color ကုိေတာ့ တစ္ေရာင္စီ ထည့္ရမွာပါ။
-ၿပီးရင္ေတာ့ Template ကုိ Save လုိက္ပါ။

3. ဒီအဆင့္ထိၿပီးၿပီဆုိရင္ေတာ့ Dashboard ကုိသြားပါ။ Layout==>Page Elements ကုိသြားပါ။ Add a Gadget ထဲ၀င္ၿပီး HTML/JavaScript ထဲ၀င္ပါ။ ေအာက္ေဖာ္ျပပါ code ကုိ ထည့္သြင္းၿပီး Save ေပးလုိက္ပါ။ အနီေရာင္ျဖင့္ ျပထားေသာ ေနရာတုိ႔တြင္ မိမိ Link ေပးျခင္းေသာ URL ကုိ ထည့္သြင္းေပးရပါမယ္။

<div id='newnavbar'>
<ul>
<li><a href="URL of Home page">Home</a></li>
<li><a href="URL of Music page">Music</a></li>
<li><a href="URL of Books page">Books</a></li>
<li><a href="URL of Links page">Hot Links</a></li>
<li><a href="URL of Profile page">About Me</a></li>
<li><a href="mailto:EMAIL ADDRESS">Contact</a></li>
</ul></div>

4.ေနာက္ဆံုးအဆင့္အေနနဲ႔ ယခုလုိ header wrapper ကုိ align just ျပဳလုပ္ေပးရန္အတြက္ ေအာက္ေဖာ္ျပပါ code ကုိရွာပါ။ showaddelement value ကုိ no ေနရာတြင္ yes ဟု ေျပာင္း ရုိက္ေပး လုိက္ပါ၊ align center ျဖစ္သြားပါမယ္-

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

Template ကုိ Save လုိက္ပါၿပီးပါၿပီ။



အဆင္ေျပပါေစ။

အျပည့္အစံုသုိ႔>>>

ျပန္ေခါက္ခဲ့လုိလွ်င္>>>

အခ်စ္ဆုိတာ

အခ်စ္အေၾကာင္းတစ္ေစ့တစ္ေစာင္ ေရးရဦးမယ္ဆုိေတာ့ နည္းနည္းအိပ္မေပွ်ာ္ စားမ၀င္ ျဖစ္သြားတယ္၊ ဘာျဖစ္လို႔လဲဆုိေတာ့ က်ေနာ္က စာေရးတဲ့ေနရာမွာ အရမ္းထံုတယ္ေလ။ ခဏခဏ ဂိမ္းေဆာ့တဲ့ မက္မက္ ဆုိတဲ့ ေကာင္မေလးရဲ႕ တက္ဂ္ ဂိမ္းေၾကာင့္ပါ။ ဒါနဲ႔မသိခ်င္ေယာင္ေဆာင္ၿပီး နည္းနည္း အခ်ိန္ဆြဲထား လုိက္တယ္၊ ေကာင္မေလးက မွတ္ဥာဏ္ေကာင္းတယ္ဗ်။ လာလာၿပီးၾကည့္ၿပီးေတာ့ အိမ္ထဲမွာလာလာ ေအာ္သြားတယ္၊ အေၾကြးေပးပါတဲ့ေလ။ အဲ့ဒါေၾကာင့္ မျဖစ္မေနလက္စြမ္းျပလုိက္ရပါတယ္ -

အခ်စ္ဆုိသည္မွာ

အခ်စ္.. အခ်စ္... အခ်စ္.....

အခ်စ္ဆုိတာ
သမုဒယအႏြယ္ေတြနဲ႕ ရွင္းရခက္တဲ့ေႏွာင္ထံုးလား ..
အခ်စ္နဲ႔ေတြ႕တဲ့သူတုိင္း
ပန္းေပါင္းစံုဖူးဖြင့္ေ၀ဆာေနတဲ့ပန္းဥယ်ာဥ္ႀကီးထဲေရာက္ႏုိင္သလား..
တစ္ျခမ္းစီဆက္လုိက္တဲ့ဘ၀တစ္ခု
သံုးဥတုမွာ ၾကည္ႏွဴးမႈျမစ္တစ္စင္း ျဖစ္ႏုိင္ရဲ႕လား..
အခ်စ္ဆုိတာ
ေရခဲေသတၱာထဲကပန္းသီးတစ္လံုး ျဖစ္ႏုိင္သလုိ
လမ္းမေပၚတစ္ေယာက္တည္း တေပါင္းေနနဲ႔႔အတူ ေလွ်ာက္လွမ္းေနရသလုိလည္း ျဖစ္ႏုိင္ပါတယ္။
ေကာင္းကင္နဲ႔ေျမႀကီးလုိ ၾကည္ႏွဴးမွဳနဲ႔ လြမ္းေဆြးမွဳတုိ႔ရဲ႕ ျဖစ္စဥ္ေတြကလည္း
မာယာေတြမ်ားတဲ့ အတၱရဲ႕ေၾကာ့ကြင္းတစ္ခုေၾကာင့္ပါ။
(pethein)

စပ္မိစပ္ရာ ေတြးမိေတြးရာ ေရးမိေရးတာ ေရးခ်လုိ္က္တယ္ မက္မက္ေရ၊ အဆင္ေျပသလုိ ၾကည့္ဖတ္သြားၾကပါ။ မက္မက္လုပ္တာနဲ႔ ကာရန္ေတြဟုိခ်ိတ္ ဒီခ်ိတ္ လုိက္ခ်ိတ္ရင္း ကေသာင္းကနင္းေပါ့။ ဘယ္ရမလဲ ဒီကလည္း တစ္ကြက္ ႏွစ္ကြက္ သင္ထားလုိ႔ ေတာ္ေသးတာေပါ့။ ဘယ္သူကဘယ္လုိ စတင္ေမြးဖြားေပးလုိက္တဲ့ တက္ဂ္ဂိမ္းမွန္း မသိေသာ္လည္း၊ သုိ႔ေပေသာ္ျငာလည္း ေက်းဇူးပါမက္မက္ေရ။

တာ၀န္မေက်မွာစုိးလုိ႔ တစ္ေယာက္ေလာက္ေတာ့ တက္ဂ္ပါရေစ၊ လူအမ်ားႀကီးတက္ဂ္ရင္ စိတ္ဆုိးမွာ စုိးလုိ႔ပါ။
သူကေတာ့္ သူငယ္ခ်င္း မနီနီ၀င္း ပါ။ စာေရးအရမ္းေကာင္းပါတယ္။
ေနာက္တစ္ေယာက္တုိးညီေလး ေဆာင္းအိမ္မက္ ပါ။

ေပွ်ာ္ရႊင္ခ်မ္းေျမ႕ၾကပါေစ

အျပည့္အစံုသုိ႔>>>

ျပန္ေခါက္ခဲ့လုိလွ်င္>>>

Image Usage

မိမိ Blog အတြင္း ႏွစ္သက္ရာ အမ်ိဳးမ်ိဳးေသာ Image မ်ားကုိ စိတ္တုိင္းက်ထည့္သြင္း အသံုးျပဳရန္ေအာက္ေဖာ္ျပပါ Html code မ်ားကုိ အသံုးျပဳႏုိင္ပါတယ္-

Image Tag (Htmlcode)

<img src="Image URL" border="0" width="104" height="76" alt="Description" />

နမူနာပံုႏွင့္ ၄င္း code

<img src="http://pethein2006.googlepages.com/FaceAnimation.gif" border="0" width="104" height="76" alt="Smile" />

-ေဖာ္ျပပါ code ႏွစ္ခုကုိယွဥ္ၾကည့္ပါ သေဘာေပါက္မည္ဟုယူဆပါသည္။

---

Image Alignment (Html code)

<img src="Image URL" border="0" width="104" height="76" alt="Description"align="right" />

နမူနာပံုႏွင့္ ၄င္း code

<img src="http://pethein2006.googlepages.com/FaceAnimation.gif" border="0" width="104" height="76" alt="Description"align="right" />

-အျပာေရာင္ျဖင့္ျပထားေသာ align ကုိ left , hight , center တုိ႔ျဖင့္ လုိအပ္သလုိထည့္သြင္းအသံုးျပဳရပါမည္။

---

Text and Image Alignment (Html code)

<p><img src="Image URL"border="0" width="104" height="76" alt="Smile" align="right"/>--tetxt--</p>

နမူနာပုံစံ

ကိုယ္စိတ္ထဲေက်နပ္တာေတြလုပ္မယ္၊ စိတ္ဖိစီးမႈေတြေလ်ာ့ခ်မယ္၊ အတုိင္း အတာတစ္ခုထိ ေပ်ာ္ရႊင္စရာေတြ ဖန္တီးရယူမယ္၊ အခ်ိန္ ႏွစ္ လ ရက္ နဲ႔အတူ ေရွ႕ဆက္ ရွင္သန္ေနရဦးမွာမုိ႔ စိတ္က်န္းမာ ကုိယ္က်န္းမာဖုိ႔ လုိအပ္ ေနမွာျဖစ္တဲ့အတြက္ စိတ္က်န္းမာဖုိ႔အတြက္ သူေတာ္ေကာင္းတရားေတြ က်င့္ႀကံမယ္ တရားထုိင္မယ္၊ ကုိယ္က်န္းမာဘုိ႔ အတြက္ ကုိယ္လက္ လႈပ္ရွား အားကစား လုပ္မယ္ အစား အေသာက္ကုိ ခ်င့္ခ်ိန္ တြက္ဆ စားေသာက္ ေနထုိင္သြားရမယ္။

-အသံုးျပဳထည့္သြင္းနည္းကေတာ့

(၁) Compose box တြင္ text post ေရးၿပီး Edit Html ဘက္ေျပာင္း၍ Image Align Html code ကုိ ထည့္သြင္း ေပးရပါမည္။
(၂) ထည့္သြင္းပံုအေျခအေနကုိေအာက္ပါတုိင္း ေဖာ္ျပေပးလုိက္ပါတယ္-

<p><img src="http://pethein2006.googlepages.com/FaceAnimation.gif" alt="Smile" align="right" border="0" width="52" height="38" /><div style="text-align: justify;">ကိုယ္စိတ္ထဲ ေက်နပ္တာေတြလုပ္မယ္၊ စိတ္ဖိစီးမႈေတြ ေလ်ာ့ခ်မယ္၊ အတုိင္း အတာတစ္ခုထိ ေပ်ာ္ရႊင္စရာေတြ ဖန္တီးရယူမယ္၊ အခ်ိန္ ႏွစ္ လ ရက္ နဲ႔အတူ ေရွ႕ဆက္ ရွင္သန္ေနရဦးမွာမုိ႔ စိတ္က်န္းမာ ကုိယ္က်န္းမာဖုိ႔ လုိအပ္ ေနမွာျဖစ္တဲ့အတြက္ စိတ္က်န္းမာဖုိ႔အတြက္ သူေတာ္ေကာင္း တရားေတြ က်င့္ႀကံမယ္ တရားထုိင္မယ္၊ ကုိယ္က်န္းမာဘုိ႔ အတြက္ ကုိယ္လက္ လႈပ္ရွား အားကစား လုပ္မယ္ အစား အေသာက္ကုိ ခ်င့္ခ်ိန္ တြက္ဆ စားေသာက္ ေနထုိင္သြားရမယ္။
</div></p>

-အနီေရာင္ျဖင့္ျပထားသည္ကို အေပၚက html code နဲ႔ယွဥ္ၾကည့္ပါ၊ အျပာေရာင္ျဖင့္ ျပထားတာသည္ Image ၏ ေလ်ာ့ခ်လုိ္က္ေသာ Image size အခ်ိဳးအစားျဖစ္ပါသည္။

---

Image Link (Html code)

<a href="URL" target="_blank" title="TITLE"><img src="Image URL" border="0" width="104" height="78" alt="Description" /></a>

နမူနာပံုႏွင့္ ၄င္း code

<a href="http://pethein.blogspot.com" target="_blank" title="Image Usage"> <img src="http://pethein2006.googlepages.com/FaceAnimation.gif" border="0" width="104" height="78"alt="Image Usage" /></a>

-အခုဆုိရင္ Image အေပၚကုိ mouse နဲ႔ေထာက္ၾကည့္ပါ Link ျဖစ္ေနပါမယ္၊ ႏွိပ္ၾကည့္လုိက္တာနဲ႔ မိမိ Link ေပးခ်င္တဲ့ Website တစ္ခုကုိ Newtab ေရာက္ရွိသြားမွာပါ။

အဆင္ေျပပါေစ

အျပည့္အစံုသုိ႔>>>

ျပန္ေခါက္ခဲ့လုိလွ်င္>>>

က်ေနာ္၏တစ္ေန႔တာျဖစ္သလုိ စားျခင္း

က်ေနာ့္ကုိ မက္မက္ ဆုိတဲ့ေကာင္မေလး ညစာထမင္းေခၚေကၽြးလုိ႔ က်ေနာ္လဲ ဒီေကာင္မေလးလက္ရာေတာ့ ေကာင္းမွာပဲ စားရခ်ည္ေသးရဲ႕ဆုိၿပီးသြားစားမိပါတယ္-----

စားမိလုိ႔.........

...Tag ရပါတယ္

အျပည့္အစံုသုိ႔>>>

ျပန္ေခါက္ခဲ့လုိလွ်င္>>>

Text Backgroung Image

မိမိေရးသားတဲ့ Post ေတြရဲ႕ ေနာက္ခံ background ကုိ စိတ္ကူးေကာင္းေကာင္းနဲ႔ လွတ ပတ ျဖစ္ေအာင္ ေရးၾကည့္မယ္ဆုိရင္ ေအာက္ပါ HTML code ကုိ အသံုးျပဳႏုိင္ပါတယ္-

<div style="background-image: url(Image URL); background-repeat: repeat; width: 450px; height: 500px;">--text--</div>

(၁)အနီေရာင္ျဖင့္ျပထားေသာ Image URL သည္ Hosting တစ္ခုမွာ Upload လုပ္ထားတဲ့ Image URL link ျဖစ္ရပါမယ္။ Image size ရဲ႕ Width ဟာလဲ မိမိ Template ၏ Main Wrapper width ခန္႔ရွိရပါမယ္။
(၂)အျပာေရာင္ျဖင့္ျပထားေသာ width, height တုိ႔သည္ မိမိ၏ post တြင္ ေပၚလြင္ေစမည့္ size ႏွင့္ Image size တုိ႔ ထပ္တူညီမွ်မႈရွိေနေစရပါမည္။
-ေအာက္တြင္ နမူနာေဖာ္ျပထားပါသည္။

ငါ့ဘ၀

ပံုစံခြက္ထဲက ဘ၀တစ္ခု
ပံုသ႑ာန္တစ္ခု
ေဘာင္တစ္ခုထဲမွာ ရွင္သန္ဆဲပါ၊
အေရြးမွားခဲ့တဲ့လမ္းမွာ
ပင္ပန္းစြာျဖတ္သန္းရင္း ဆင္းရဲ
မ၀ံ့မရဲနဲ႔ပဲ
မြန္းက်ပ္စြာ ရွင္သန္ေနရဆဲပါ။
ကုိယ့္ဘ၀ကုိယ္
တာ၀န္ယူရစၿမဲမုိ႔
အသိ သတိေတြနဲ႕ ေနာက္ျပန္လွည့္ဖုိ႔
ေရြ႕လ်ားလုိက္စဥ္မွာေတာ့
ပုိင္ဆုိင္ခဲ့ဖူးတဲ့ အခ်ိန္ေတာ္ေတာ္မ်ားမ်ားတုိ႔က
မထီမဲ့ျမင္နဲ႔
ေလွာင္ေျပာင္ေနၾကပါၿပီ။
(ေဖသိန္း)

အျပည့္အစံုသုိ႔>>>

ျပန္ေခါက္ခဲ့လုိလွ်င္>>>