Menu Tab လုပ္နည္း

http://mmbloggershelpdesk.blogspot.com/2008/06/menu-tab.html
တြင္

ဦးရန္ေအာင္ ဘာသာျပန္ဆုိထားသည္ကို တဆင့္တင္ျပျခင္းျဖစ္သည္။

မူရင္းႀကိဳက္သူမ်ားအတြက္ မူရင္းေဆာင္းပါးေလးကိုပါ ထည့္သြင္းေဖာ္ျပလုိက္ပါသည္။

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 ေလးေတြ ရွိပါတယ္. ကုိယ္႔စိတ္ၾကိဳက္ ပုံေလးေတြကုိ သိမ္းထားႏုိင္ပါတယ္.

blackleft          blackright


greenleft         greenright


redleft        redright


yellowleft       yellowright


unguleft          unguright


whiteleft          whiteright


blueleft         blueright

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

အဆင႔္ (၁)

- 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 လုပ္ရလဲဆုိတာကုိ သိခ်င္ရင္ေတာ႔ ပ်ိဳ႕ေမာင္ႀကီးရဲ႕ Free Hosting Sites မွာ ၾကည့္ပါေတာ့ခင္ဗ်ာ။ အခု သူမ်ား အရံသင့္ တင္ထားတာေလးနဲ႕ စမ္းၾကည့္ရေအာင္ပါခင္ဗ်ာ။

အဆင္႔ (၃)

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

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

<div id="tabshori">
<ul>
<!-- Change the links with your own links -->
<li><a href="Your Link Here">Your Link Name</a></li>
<li><a href="http://pyomaunggyi.blogspot.com/ ">မူလစာမ်က္ႏွာ</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 ၾကည္႔ၾကည္႔ပါ.

ကဲ. အဆင္ေျပေခ်ာေမြ႔ၾကပါေစဗ်ာ. အဆင္မေျပခဲ႔တာေတြ ရွိခဲ႔ရင္လည္း ေကာ္မန္႔မွာ ေမးျမန္းႏုိင္ပါတယ္.

Menu Tab တင္နည္း ပုံစံ (၂) ကုိ မၾကာခင္ ဆက္လက္ေရးသားေဆြးေႏြးေပးသြားပါမယ္.



Acknowledgement:
ဒီhttp://trick-blog.blogspot.com ပုိ႔စ္ေလးကုိ သင္႔ေတာ္သလုိ ဘာသာျပန္ဆုိ ျဖည္႔စြက္ေရးသားထားျခင္း ျဖစ္ပါတယ္ ခင္ဗ်ာ...
အားလုံးကုိ ခ်စ္ခင္ေလးစားလ်က္

ရန္ေအာင္


(မူရင္းေဆာင္းပါး)

How to Create Horizontal Tabs Menu

What is horizontal tabs menu? horizontal tabs menu is bla..bla..bla... I can't explain anymore, he..he., it's look like this: (image)

To create it is not as simple as it's look, it's complicated. You have to design button, you have to create CSS and HTML code. Now I will show you how to create "Horizontal tabs menu" in blogger.

The first thing you have to di is create an image like this:
 ( ) and ( )
If you can't to create it, you can use my below images:
blackleft.gif blackright.gif
greenleft.gif greenright.gif
redleft.gif   redright.gif
unguleft.gif    unguright.gif
yellowleft.gif  yellowright.gif
blueleft.gif    blueright.gif
whiteleft.gif  whiteright.gif

Ok, let's begin

1. Login to Blogger, chose "Lay out --> Template --> Edit HTML"
2. Don't forget to backup your template first.
3. Check the "Expand Widget Templates" checkbox.
4. Try to find this code ]]></b:skin>, if you found it then put the code below above it

/*credits : http://trick-blog.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /*Under Line, you can change or delete it */
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /* Menu position*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background:url("http://blogoholic.info/files/menu/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://blogoholic.info/files/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E; /*Text menu color*/
}
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

you can change the bold text with other image, for example, if you want to chose my red menu image the code will be like this:

background:url("http://blogoholic.info/files/menu/redleft.gif") no-repeat left top;

background:url("http://blogoholic.info/files/menu/redright.gif") no-repeat right top;

5. Then copy the code below

<div id="tabshori">
<ul>
<!-- Change the links with your own links -->
<li><a href="http://trick-blog.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Blog Dictionary</span></a></li>
<li><a href="http:/trick-blog.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >

change http://trik-tips.blogspot.com with your own link, and change the bold text with your own text.

6. Next step is to put the tabs menu into your blog, this more difficult because we have different templates. There are some methods to do this, Here is the methods, you can chose and try for any methods.

- methode A:
Find this code :<div id="content-wrapper">. if you found it, paste the above code (code number five) above it. Preview your template, if it looks good save your editting, but if it's not good try to put above this code </div>, you will find many codes like that, try to put the code above it and preview your your blog, do it more often until it's suitable for your template.

If you have nice with your menu position, is unnecessary to do methode B, but if you feel difficult to apply methode A you can try methode B
- methode B:
Find the below code :

<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>

change the green text so that to become like this:

<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 your setting, the go to "Page Elements" and click "Add page Element " on the header area, chose "HTML/JavaScript" then put the number five code above into "content" box, then click "save" and preview your new blog.
http://trick-blog.blogspot.com