ဒါေလးကေတာ့ကိုယ္ပိုင္ 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/AVvXsEizOhGUWMDh6mWSdAVAuzAHt7GWF4nJjEXpuRYJR6wQLbfyxCrz6zbJx9PRp_cvDi4WO2CDLnttqatrfUjcgekRP4Y79cz9M6B4Zc1p_6Hu0j3A9jbBh1hv0yUDj18I5jOiH1rkFP8ncZ0/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/AVvXsEg_VNi7sxZ1ws_7cKwBgkqiRP9qPlx-JP8nY6Qx24skaiZY3iRElFat8SPKXTCET9zNsfGu2fNmsfBhJ7zJC8P5Pqz7450c8_EKBOT6CfFNsA8rJW5vYvHewDDwdVyXQ0860ta0xxhTPb0/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/AVvXsEjTQYm4woSxGec34pnqGUfxCOaB4DWv4gXREijQGGN8NrMPL_2nI6aEBSGc_gFs-JHxHjgpqHhNwoXPPuTXd7lpwVu0IsppGrvP4IUZ5mXf3elgpk9rpYJMtV8R0mmTV66DXjql5Gxt2WA/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/AVvXsEjTQYm4woSxGec34pnqGUfxCOaB4DWv4gXREijQGGN8NrMPL_2nI6aEBSGc_gFs-JHxHjgpqHhNwoXPPuTXd7lpwVu0IsppGrvP4IUZ5mXf3elgpk9rpYJMtV8R0mmTV66DXjql5Gxt2WA/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/AVvXsEjTQYm4woSxGec34pnqGUfxCOaB4DWv4gXREijQGGN8NrMPL_2nI6aEBSGc_gFs-JHxHjgpqHhNwoXPPuTXd7lpwVu0IsppGrvP4IUZ5mXf3elgpk9rpYJMtV8R0mmTV66DXjql5Gxt2WA/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
</style>
အေပၚကCodeကိုpasteလုပ္ၿပီးရင္
၄။Save နိုပ္လိုက္ပါ။ ၿပီးပါၿပီ။။
kp3မွမိတ္ေဆြအားလုံးေက်းဇူးကမ႓ာ
အျပာေ၇ာင္ကေတာ့ပံုရဲ႕လင့္ခ္ပါဘဲမိမိနွစ္သက္သလိုျပန္ျပင္နိုင္ပါတယ္။
အနီေ၇ာင္ေန၇ာမွာမိမိလင့္ခ္ေတြကိုထည့္ေပးလိုက္ပါ။။
Related Post
- Kp3နည္းပညာ၊၄၃၅၊ဘေလာ့မွာAnimated Notice Box ေလးထည့္ခ်င္ရင္(၂)
- Kp3နည္းပညာ၊၄၂၁၊ဘေလာ့မွာRss Feed နဲ႕ Social Gadgetအသစ္ထည့္ခ်င္ရင္
- Kp3နည္းပညာ၊၃၅၇၊ဘေလာ့မွာ Kp3 ရဲ႕ၾကယ္ေလးကိုအေရာင္းနဲ႕က်ေအာင္ထည့္ခ်င္ရင္
- kp3နည္းပညာ၊၂၃၅၊ဘေလာ့ Sidebar မွာ Multi Tabbed Navigation Widget ေလးထည့္နည္း
- kp3နည္းပညာ၊၂၁၈၊ဘေလာ့မွာ Subscription Links ေတြကိုလြယ္ကူစြာထည့္နည္း
- kp3နည္းပညာ၊၂၁၁၊ဘေလာ့ ႏွင့္ ဝက္ဆိုက္အတြက္အသံုးဝင္တဲ့ Tool ၉ ခု
- kp3နည္းပညာ၊၁၆၄၊ဘေလာ့မွာ jQuery Text/Font Size Resizer ေလးထားခ်င္ရင္
- kp3နည္းပညာ၊၁၅၇၊Recent Comments ၾကိဳက္သေလာက္ေပၚေစခ်င္ရင္
- kp3နည္းပညာ၊၁၅၂၊ဘေလာ့မွာ Page Navigation ထည့္ခ်င္ရင္(၂)
- kp3နည္းပညာ၊၁၄၅၊ဘေလာ့Post FontကိုDropdownပံုစံေျပာင္းခ်င္ရင္
- kp3နည္းပညာ၊၁၁၈၊မိမိရဲ႕ဘယ္သူက Comments ဘယ္ေလာက္ေပးတယ္ဆိုတာသိခ်င္ရင္
- kp3နည္းပညာ၊၁ဝ၆၊မိမိရဲ႕ဘေလာ့မွာMulti tab Widgetထည္႔ ခ်င္ရင္
- kp3နည္းပညာ၊၉၈၊Pop Up Navigation Menu From Bucket
- kp3နည္းပညာ၊၉၇၊မိမိရဲ႕ဘေလာ့မွာ Google Search Engine စတိုင္ေလးသံုးခ်င္
- kp3နည္းပညာ၊၉ဝ၊Email Subscrtiption Form
- kp3နည္းပညာ၊၈၇၊Recent Comments ေတြကို Summariesနဲ႕လုပ္ခ်င္ရင္
- kp3နည္းပညာ၊၈၇၊မိမိရဲ႕ဘေလာ့မွာ Facebook Badge ထည့္နည္းေလး
- kp3နည္းပညာ၊၇ဝ၊Wibiya Widget Toolbar
- kp3နည္းပညာ၊၆၉၊Auto Scrolling - Recent Posts
- kp3နည္းပညာ၊၆၆၊မိမိရဲ့ဘေလာ့related posts ေတြကို thumbnails စတိုင္နဲ႕ Auto လုပ္ခ်င္ရင္
- kp3နည္းပညာ၊၅၇၊မိမိရဲ့ဘေလာ့မွာMouseေနာက္ကေန တေကာက္ေကာက္လိုက္ေနတဲ့စာေၾကာင္းေလးထားခ်င္ရင္
- kp3နည္းပညာ၊၅၅၊မိမိရဲ့ဘေလာ့မွာPopular Posts Widgetထားခ်င္ရင္
- kp3နည္းပညာ၊၅၄၊မိမိရဲ့ဘေလာ့Linkေတြကို Rollover Buttonလုပ္ခ်င္ရင္
- Kp3နည္းပညာ၊၄၈၅၊AUniqueStyleDropDownBarNavigationMenuသံုးခ်င္ရင္
- Kp3နည္းပညာ၊၄၇၅၊ဘေလာ့မွာFacebookStyleDropDownMenuသံုးခ်င္ရင္
- Kp3နည္းပညာ၊၄၇၂၊ဘေလာ့မွာအလြယ္ကူဆံုး Accordion Menu သံုးခ်င္ရင္
- Kp3နည္းပညာ၊၄၇၁၊ဘေလာ့မွာCSS3 Multi Level Drop Down Menu သံုးနည္း
- Kp3နည္းပညာ၊၄၃ဝ၊Kp-3 Blue Tabbed Drop Down
- Kp3နည္းပညာ၊၄၂၆၊Kp-3 Grey Impression Drop Down Menu
- Kp3နည္းပညာ၊၄၂၅၊Kp-3 Green Impression Drop Down Menu
- Kp3နည္းပညာ၊၄၂၄၊Kp-3 Blue Impression Drop Down Menu
- Kp3နည္းပညာ၊၄၂၃၊Kp-3 Blue Center Drop Bar Menu
- Kp3နည္းပညာ၊၄၂ဝ၊Kp-3 Sunrise Gloss Drop Down Menus
- Kp3နည္းပညာ၊၄၁၉၊Kp-3 Massive Blue Drop Down menu
- Kp3နည္းပညာ၊၃၉၃၊ဘေလာ့မွာ KP-3CSS Horizontal Navigation Menuသံုးခ်င္ရင္
- Kp3နည္းပညာ၊၃၉၂၊ဘေလာ့မွာ KP-3Horizontal Double Line Menu သံုးခ်င္ရင္
- Kp3နည္းပညာ၊၃၆၃၊Kp-3 ရဲ႕ Vertical Dropdown Menu ေလးသံုးခ်င္ရင္
- Kp3နည္းပညာ၊၃၅၉၊ဘေလာ့မွာKp-3 Tab Menu ေလးသံုးခ်င္ရင္
- kp3နည္းပညာ၊၃၁၉၊ဘေလာ့မွာ KP-3Horizontal ေလးထည့္နည္း
- kp3နည္းပညာ၊၃၁၂၊KP-3 ရဲ႕ HORIZONTAL MENU အသစ္ေလးသံုးခ်င္ရင္
- kp3နည္းပညာ၊၂၉၇၊ဘေလာ့မွာ kp-3 ရဲ႕ Menu အသစ္ေလးသံုးခ်င္ရင္
- kp3နည္းပညာ၊၂၆၇၊ဘေလာ့အတြက္ KP-3 Horizontal Tabs Menu ေလးထည့္နည္း
- kp3နည္းပညာ၊၂၅၄၊ဘေလာ့မွာလြယ္ကူတဲ ့KP-3ရဲ ့Horizontal CSS menu ေလးထည့္နည္း
- kp3နည္းပညာ၊၂၅၁၊ဘေလာ့မွာ KP-3 ရဲ႕ Horizontal Menu အသစ္ေလးသံုးခ်င္၇င္
- kp3နည္းပညာ၊၂၅၀၊ဘေလာ့မွာ KP-3 ရဲ႕ Drop Down Menu အသစ္ေလးသံုးခ်င္၇င္
- kp3နည္းပညာ၊၂၄၂၊ဘေလာ့မွာ Dancing Links လို႕ေခၚတဲ့ Jquery Link Nudging ေလးသံုးနည္း
- kp3နည္းပညာ၊၂၄၁၊ဘေလာ့မွာ CSS-driven tabs Menu ေလးထည့္နည္း
- kp3နည္းပညာ၊၂၁၇၊ဘေလာ့မွာNAVIGATION BUTTONS Menu ေလးသံုးခ်င္ရင္
0 comments:
Post a Comment
မွတ္ခ်က္မ်ားကို စိစစ္ၿပီးမွ ေဖာ္ျပေပးမည္ ျဖစ္ပါသျဖင့္ ဤစာမ်က္ႏွာေပၚမွာ ခ်က္ခ်င္း ျမင္ရမည္မဟုတ္ပါ။ မၾကာခင္ ေနာက္တခါ ျပန္လာၿပီး မိမိ၏ မွတ္ခ်က္ကို ျပန္ၾကည့္ပါရန္ ေမတၲာရပ္ခံပါသည္။