kp3နည္းပညာ၊၃၁၉၊ဘေလာ့မွာ KP-3Horizontal ေလးထည့္နည္း

                     က်ေနာ္ေျပာေနက်ျဖစ္တဲ့၀က္ဆိုက္ဒ္နဲ႕ဘေလာ့ေတြကိုပိုျပီးျပည့္စံုလွပေအာင္အဓိကMenu ဆိုသလိုအခုလဲHORIZONTALMENUေလးထပ္တင္လိုက္ပါတယ္။ေအာက္မွာပံုနဲ႕တကြCodeရွိပါတယ္၊ DEMOလင့္ခ္ေလးလည္းသြားၾကည့္လို႕ရေအာင္ထားေပးပါတယ္။ဘေလာ့မိတ္ေဆြအားလံုးကိုခင္မင္ေလးစား လွ်က္kp3မိသားစု

ဒီမွာ သြားၾကည့္လိုက္ပါ။

၁။Design

၂။Edit HTML

ေအာက္က Code ကိုရွာပါ၊။

</head> 

ေတြ႕ျပီဆိုရင္ေအာက္မွာေအာက္က Code ကိုထည့္ေပးလိုက္ပါ။

<!--Horizontal-kp-3နည္းပညာ-->
<style type='text/css'>
 #tabs28 {
   float:left;
   width:100%;
   background:#EFF4FA;
   font-size:93%;
   line-height:normal;
 border-bottom:1px solid #DD740B;
   }
 #tabs28 ul {
 margin:0;
 padding:10px 10px 0 50px;
 list-style:none;
   }
 #tabs28 li {
   display:inline;
   margin:0;
   padding:0;
   }
 #tabs28 a {
   float:left;
   background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkqEWfVLU_qYJLSWEWEyb9isVlF7AMKiZCwcsVQ3xvnwuLwDH0i2DkM07zLqKwFLShg-XEXnUf6ERttN7BZ5xKNbQNQYS4BQcrm1b4ChNs8O8oYQut5t4Uba0HTRmv-Omph-cH9fjONU4D/&quot;) no-repeat left top;
   margin:0;
   padding:0 0 0 5px;
   text-decoration:none;
   }
 #tabs28 a span {
   float:left;
   display:block;
   background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-bLhf1DWBAbC1RLgfkWk0AZv7Sl6vVDY32NuMhQEqtfmDN2cSonLEB-nnxbVc_SBaUQOTrUw_kX1J_8ta9_85hsXVU0DHHETsFBDhNW_wBMSvq-085MjfuaECZpADPj1DRvV2VJZXo935/&quot;) no-repeat right top;
   padding:5px 15px 4px 6px;
   color:#FFF;
   }
 #tabs28 a span {float:none;}
 /* End IE5-Mac hack */
 #tabsI a:hover span {
   color:#FFF;
   }
 #tabs28 a:hover {
   background-position:0% -42px;
   }
 #tabs28 a:hover span {
   background-position:100% -42px;
   }
</style>
<!--Horizontal-Tabs-END-http://kp3family.blogspot.com--> 

၃။Save Template ကိုႏိုပ္လိုက္။

၄။Design>>>Add a Gadget>>>HTML/JavaScript မွာေအာက္က Code ကိုထည့္လိုက္ပါ။

<div id="tabs28">

<ul>
<li><a href="http://kp3family.blogspot.com#"><span>kp3နည္းပညာ</span></a></li>
<li><a href="http://kp3family.blogspot.com#"><span>kp3နည္းပညာ</span></a></li>
<li><a href="http://kp3family.blogspot.com#"><span>kp3နည္းပညာ</span></a></li>
<li><a href="http://kp3family.blogspot.com#"><span>kp3နည္းပညာ</span></a></li>
<li><a href="http://kp3family.blogspot.com#"><span>kp3နည္းပညာ</span></a></li>
<li><a href="http://kp3family.blogspot.com#"><span>kp3နည္းပညာ</span></a></li>
<li><a href="http://kp3family.blogspot.com#"><span>kp3နည္းပညာ</span></a></li>
<li><a href="http://kp3family.blogspot.com#"><span>kp3နည္းပညာ</span></a></li>
</ul>

</div>

၅။Save ႏိုပ္လိုက္ပါ။ျပီးပါျပီ။ ။

မွတ္ခ်က္။ ။http://kp3family.blogspot.com နဲ႕kp3နည္းပညာေနရာေတြမွာမိမိရဲ႕လင့္ခ္နဲ႕နာမည္ေတြကိုအစားထိုးေပးလိုက္ပါ။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

Related Post

MENU

• 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-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 ေလးသံုးခ်င္ရင္

Posted in: MENU