လာျပန္ပီဘေလာ့ဂါသမားမ်ားအတြက္ရည္ရြယ္ပါတယ္

ကဲရည္ရည္ိေ၀းေ၀းေျပာမေနေတာ့ဘူးဗ်ာ...ဒီကုတ္ေလးကေတာ့အကိုတစ္ေယာက္ေတာင္းထားလို႔ရွာပီးတင္ေပးလိုက္ပါတယ္
ကဲစမယ္ေနာ္
၁(အေနနဲ႕မိမိဘေလာ့ဂါကိုsign in  ၀င္ပါပီးရင္ေတာ့ထံုးစံတုိင္ူးေပ့ါdesignsဆိုတာနိပ္ပါပီးရင္ေတာ့ေအာက္ကနာမည္ကိုနိပ္ပါ
(Edit  HTML)ဆိုတာနိပ္ပါပီးရင္ေတာ့templateကိုback  upၾကီဳလုပ္ထားပါပါ
၂(အေနနဲ႕ဒီကုတ္ကို၇ွာပါ(CTRL+F)ကိုနိပ္ပါ(]]></b:skin>ဒီကုတ္ကိုရွာပါေတြ႕၇င္အဲ့ကုတ္ေနာက္ကေနဒီေအာက္ကကုတ္ကိုေကာ္ပီယူပီးထည့္ပါ

code  copy in

.nav {
height:35px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC_DJOhZsA-Iws1ewGjIz95kSKqWPuKMV8H-O5d9fMFoaeNRhBuaGFYovAlEgRWz4eMAzM4_D9y-4bDLssLqIOUnrou9Jn_U8UBSic-_K0mdQDAzscX29v0D0jKObQ9u7UXI0B9TZXYkvy/s1600/bg.gif) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
width:100%;
z-index:100;
margin:0;
padding:0;
}

.nav .table {
display:table;
margin:0 auto;
}

.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}

.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}

.nav .select a {
display:block;
height:35px;
float:left;
font-weight:bold;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC_DJOhZsA-Iws1ewGjIz95kSKqWPuKMV8H-O5d9fMFoaeNRhBuaGFYovAlEgRWz4eMAzM4_D9y-4bDLssLqIOUnrou9Jn_U8UBSic-_K0mdQDAzscX29v0D0jKObQ9u7UXI0B9TZXYkvy/s1600/bg.gif);
padding:0 30px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#2b3238;
}


.nav .select a:hover,
.nav .select li:hover a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNs4dyUOwLa6CApIZORRGCFB0CtxkvY1ObftXXhmPV3ZML_7DveJRdiIrARcPU24JT1ffHb19Lw6YFgX0z2JcKOVz3YLY_GX4eUhuTPCE5XaYc-ILotTmxpnqPxEZxY-7W1f0_ByqHKufH/s1600/hover.gif);
padding:0 0 0 15px;
cursor:pointer;
color:#2b3238;
}

.nav .select a b{
font-weight:bold;
}

.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 30px 0 15px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNs4dyUOwLa6CApIZORRGCFB0CtxkvY1ObftXXhmPV3ZML_7DveJRdiIrARcPU24JT1ffHb19Lw6YFgX0z2JcKOVz3YLY_GX4eUhuTPCE5XaYc-ILotTmxpnqPxEZxY-7W1f0_ByqHKufH/s1600/hover.gif) right top;
cursor:pointer;
}

.nav .select_sub {
display:none;
}

/* IE6 only */
.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}

.nav .sub {
display:table;
margin:0 auto;
padding:0;
list-style:none;
}

.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#2b3238;
}

.nav .select :hover .select_sub,
.nav .current .show {
display:block;
position:absolute;
width:100%;
top:35px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi21inm-X4vYqU-uw8CtNwRwmUe56Nfo3WT4fbtrMraEmmNId0vdlMWcdf4DojnMXS05FaIAovd0fKxUKTDxmvi2-krzjFYQo-5QN9Ym0_tlIQTkLtFnIyEvqyPFkDdXp0TQSWaOFCg_uN-/s1600/back.gif);
padding:0;
z-index:100;
left:0;
text-align:center;
}

.nav .current .show {
z-index:10;
}

.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 10px 0 10px;
margin:0;
white-space:nowrap;
border:0;
color:#2b3238;
}

.nav .current .sub li.sub_show a {
color:#2b3238;
cursor:default;
}

.nav .select .sub li a {
font-weight:normal;
}

.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
color:#73a0d2;
}
<!--[if IE]>
.nav ul {display:inline-block;}
.nav ul {display:inline;}
.nav ul li {float:left;}
.nav {text-align:center;}
.nav .select a:hover b,
.nav .select li:hover a b {float:none;}
<![endif]-->

ဒီကုတ္ေတြေကာ္ပီလုပ္ပီးထည့္ပီးပီဆိုရင္ေတာ့save  templateဆိုတာနိပ္ပါပီရင္ေအာက္မွာၾကည့္မယ္



ဘယ္ဘက္ခ်မ္းမွာပဲရွိတယ္layoutဆိုတာနိပ္ပါပီးရင္အဲ့ကေနအေပကၚဆံုးကAdd  a  gadgetဆိုတာနိပ္ပါအဲ့က်လာတဲ့ေဘာက္စ္ေလးကေနဒီနာမည္ကိုရွာနိပ္ပါHtml/Javascriptနိပ္ပီးပီဆိုရင္ေဘာက္စ္ေလးတစ္ခုထြက္ပါမယ္ေအာက္ကအကြကင္ထဲကိုဒီေအာက္ကကုတ္ေတြေကာ္ပီကူးပီးထည့္ိေပးလိုက္ပါ


ကုဒ္ေတြကူးရန္<div class="nav">
<div class="table">

<ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>

<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</div>
</li>
</ul>

<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">

<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
</ul>

</div>
</li>
</ul>


<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>

<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
</ul>
</div>
</li>
</ul>


<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">

<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">ဒီလိုေနရာမွာမိမိၾကိဴက္တာနာမည္တစခုေရးေပးနိုင္ပါသည္ 4</a></li>
</ul>

</div>
</li>
</ul>

</div>
</div>


အေပၚကSample Menu 4ဒီလိုေနရာေတြမွာမိမိၾကိဴက္ရာနာမည္တစ္ခုေပးလို႕ရပါတယ္ျမန္မာလိုူလဲအဆင္ေျပပါတယ္



အဆင္ေျပက်ပါေစေနာ္..ကိုေစာမင္းူေအာင္ေရ..........အဆင္ေျပမယ္လို႕ေမွ်ာ္လင့္ပါတယ္ေနာ္