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

Posted in: MENU