22/04/2012

blog မွာ navigation menu(bar) ျပုလုပ္ပုံ အဆင္႔ဆင္႔


                             (Blog မွာ menu(bar) တခုျပဳလုပ္ၾကရေအာင္)
step1:ပထမ အဆင္႔ အေနနဲ႔ သင္႔ရဲ႔  Blogger Dashboard, Layout >> Edit HTML >>
And find This code..........</b:skin> ဆုိတာေလးကုိ ရွာလုိက္ပါ.....................
 ေတြ႔ျပီဆုိတာနဲ႔  ေအာက္က ေပးထားတဲ႔ code ေလး ေတြ ကုိ  </b:skin> မွာထည္႔လုိက္ပါ

/*URL: http://www.AllBlogTools.com/ */

.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.basictab li{
display: inline;
margin: 0;
}

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #f6ffd5;
color: #2d2b2b;
}

.basictab li a:visited{
color: #2d2b2b;
}

.basictab li a:hover{
background-color: #DBFF6C;
color: black;
}

.basictab li a:active{
color: black;
}

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #DBFF6C;
color: black;
}
add ျပီးတာနဲ႔ template save လုိက္ပါ.............


step2:နံပါတ္၂ အဆင္႔မွာေတာ႔  Design...Page Element.............Add a Gadget............Choose Add HTML/JavaScript ကုိ ၀င္လုိက္ပါ.....အခု ေပးမဲ႔ Code ေတြကုိ အဲဒီထဲမွာ copy/paste လုပ္လုိက္ပါ.

<ul class="basictab">
<li class="selected"><a href="http://www.AllBlogTools.com.com">Home</a></li>
<li><a href="http://www.allblogtools.com/blogger-templates/">Blogger Templates</a></li>
<li><a href="http://www.allblogtools.com/blogger-tricks-and-hacks/">Blogegr Tricks</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
</ul>
အနီနဲ႔ ျပထားတဲ႔ ေနရာေတြ က မိမိ blogမွာ ေပးမဲ႔ title ေတြ ထဲ႔ရမဲ႔ ေနရာေတြ ျဖစ္ပါတယ္....





step3:  အဆင္႔ ၃....Menu color ေတြ ကုိ ဒီေနရာေတြမွာ change ႏုိင္ပါတယ္....................

background-color: #f6ffd5; .... background-color: #DBFF6C; .... color: black;..............................
 
 Color Code Generator Link ကေတာ႔ ဒီမွာပါ.....AllBlogTools.com html Colors Code Generator
 
အားလုံးလုပ္ျပီးတဲ႔ေနာက္မွာေတာ႔ ေကာင္းမြန္တဲ႔ menu title တခုကုိရရွိ မွာ ျဖစ္ပါတယ္..........