ဒါေလးကေတာ့ကိုယ္ပိုင္ Menu တည္ေဆာက္နည္းေလးေပါ့ေနာ္။
ရိုးရိုးရွင္းရွင္း Code ေလးတစ္ခုပါဘဲ။
ေအာက္မွာပံုနဲ႕တကြ Code
ထည့္နည္းေလးကလည္းထံုးစံတိုင္ပါဘဲ
၁။Layout
၂။ Add a Gadget
၃။ HTML/JavaScript
<center><div id="menu">
<ul>
<li><a class="current" href="http://kp3family.blogspot.com">home</a></li>
<li><a href="http://about.com">about as</a></li>
<li><a href="http://google.com">Google</a></li>
<li><a href="http://wikipedia.com">Wikipedia</a></li>
<li><a href="http://contact.com">contact us</a></li>
</ul>
</div></center>
<style>
/* --------------------------
AUTHOR : STYLED MENUS
URL : http://www.styledmenus.com
Copyrights by STYLED MENUS
Widget From http://bloggerstop.Net
----------------------------*/
*{
margin:0;
padding:0;
}
#menu{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwE4YIN9i6KO56Z2o9K5YjR_oCfoYJzv7Zmv0WEUf8q0pMjmyGXAlFH2d5d3ZCDk2nP65nHmrhBinZEY6ELlORVj_HgmWvBqjLv1zzDsPmI86vpR4fpgw61_7-Qw4U0BHLzjULJ1YcuqA/s1600/menu_026_bg.jpg) no-repeat;
width:172px;
height:191px;
padding:15px;
}
#menu ul{
list-style:none;
padding:0 0 0 8px;
}
#menu li{
list-style:none;
display:block;
padding:10px 0;
}
#menu li a{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieCghf4RbFF0FoDuCo9IRztAMGnRNmMR4TUksUGBr1lyZpDvuMyjV5kiVaCM55g4mknQlkOeFuYf0svTj2cg4vgMnRCdESjgkmEuAUZuVC9wBL6j1TzYq5BjJBFjFOMdH06FO1KT3x-hQ/s1600/menu_026_b.gif) no-repeat left center;
color:#ffe991;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
line-height:1.2em;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCPMu4ScYIFBXVuDfUFWuProm52WrQyKwK-zWzxpsTcf-289sX9VqmE-kVHGgp6STLoxx2nk99KsJA3poyyA5IC4sFhgCZMhtNhklK8nurETRuR2QMkVGoziOVYiDcooPnHC4MybAiS2E/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
#menu li .current{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCPMu4ScYIFBXVuDfUFWuProm52WrQyKwK-zWzxpsTcf-289sX9VqmE-kVHGgp6STLoxx2nk99KsJA3poyyA5IC4sFhgCZMhtNhklK8nurETRuR2QMkVGoziOVYiDcooPnHC4MybAiS2E/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a.current, #menu li a:hover.current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCPMu4ScYIFBXVuDfUFWuProm52WrQyKwK-zWzxpsTcf-289sX9VqmE-kVHGgp6STLoxx2nk99KsJA3poyyA5IC4sFhgCZMhtNhklK8nurETRuR2QMkVGoziOVYiDcooPnHC4MybAiS2E/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
</style>
အေပၚကCodeကိုpasteလုပ္ၿပီးရင္
၄။Save နိုပ္လိုက္ပါ။ ၿပီးပါၿပီ။။
kp3မွမိတ္ေဆြအားလုံးေက်းဇူးကမ႓ာ
အျပာေ၇ာင္ကေတာ့ပံုရဲ႕လင့္ခ္ပါဘဲမိမိနွစ္သက္သလိုျပန္ျပင္နိုင္ပါတယ္။
အနီေ၇ာင္ေန၇ာမွာမိမိလင့္ခ္ေတြကိုထည့္ေပးလိုက္ပါ။။
ရိုးရိုးရွင္းရွင္း Code ေလးတစ္ခုပါဘဲ။
ေအာက္မွာပံုနဲ႕တကြ Code
ထည့္နည္းေလးကလည္းထံုးစံတိုင္ပါဘဲ
၁။Layout
၂။ Add a Gadget
၃။ HTML/JavaScript
<center><div id="menu">
<ul>
<li><a class="current" href="http://kp3family.blogspot.com">home</a></li>
<li><a href="http://about.com">about as</a></li>
<li><a href="http://google.com">Google</a></li>
<li><a href="http://wikipedia.com">Wikipedia</a></li>
<li><a href="http://contact.com">contact us</a></li>
</ul>
</div></center>
<style>
/* --------------------------
AUTHOR : STYLED MENUS
URL : http://www.styledmenus.com
Copyrights by STYLED MENUS
Widget From http://bloggerstop.Net
----------------------------*/
*{
margin:0;
padding:0;
}
#menu{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwE4YIN9i6KO56Z2o9K5YjR_oCfoYJzv7Zmv0WEUf8q0pMjmyGXAlFH2d5d3ZCDk2nP65nHmrhBinZEY6ELlORVj_HgmWvBqjLv1zzDsPmI86vpR4fpgw61_7-Qw4U0BHLzjULJ1YcuqA/s1600/menu_026_bg.jpg) no-repeat;
width:172px;
height:191px;
padding:15px;
}
#menu ul{
list-style:none;
padding:0 0 0 8px;
}
#menu li{
list-style:none;
display:block;
padding:10px 0;
}
#menu li a{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieCghf4RbFF0FoDuCo9IRztAMGnRNmMR4TUksUGBr1lyZpDvuMyjV5kiVaCM55g4mknQlkOeFuYf0svTj2cg4vgMnRCdESjgkmEuAUZuVC9wBL6j1TzYq5BjJBFjFOMdH06FO1KT3x-hQ/s1600/menu_026_b.gif) no-repeat left center;
color:#ffe991;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
line-height:1.2em;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCPMu4ScYIFBXVuDfUFWuProm52WrQyKwK-zWzxpsTcf-289sX9VqmE-kVHGgp6STLoxx2nk99KsJA3poyyA5IC4sFhgCZMhtNhklK8nurETRuR2QMkVGoziOVYiDcooPnHC4MybAiS2E/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
#menu li .current{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCPMu4ScYIFBXVuDfUFWuProm52WrQyKwK-zWzxpsTcf-289sX9VqmE-kVHGgp6STLoxx2nk99KsJA3poyyA5IC4sFhgCZMhtNhklK8nurETRuR2QMkVGoziOVYiDcooPnHC4MybAiS2E/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a.current, #menu li a:hover.current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCPMu4ScYIFBXVuDfUFWuProm52WrQyKwK-zWzxpsTcf-289sX9VqmE-kVHGgp6STLoxx2nk99KsJA3poyyA5IC4sFhgCZMhtNhklK8nurETRuR2QMkVGoziOVYiDcooPnHC4MybAiS2E/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
</style>
အေပၚကCodeကိုpasteလုပ္ၿပီးရင္
၄။Save နိုပ္လိုက္ပါ။ ၿပီးပါၿပီ။။
kp3မွမိတ္ေဆြအားလုံးေက်းဇူးကမ႓ာ
အျပာေ၇ာင္ကေတာ့ပံုရဲ႕လင့္ခ္ပါဘဲမိမိနွစ္သက္သလိုျပန္ျပင္နိုင္ပါတယ္။
အနီေ၇ာင္ေန၇ာမွာမိမိလင့္ခ္ေတြကိုထည့္ေပးလိုက္ပါ။။
No comments:
Post a Comment