Tuesday, July 10, 2012

သူငယ္ခ်င္းတို ့ရဲ့ ဘေလာ့မွာ" Drogdown menu"ေလးထားခ်င္ရင္

                                                                       

          ပထမဆံုးအေနနဲ ့ကိုယ့္ရဲ့ "Blogger" အေကာင့္ကို၀င္ပါ။ျပီးရင္ " Design>Edit HTML" ကိုသြားပါ။
ေနာက္ "Expand Widget Templates" ကိုအမွန္ျခစ္ပါ။

                                                              


   ျပီးရင္ ေအာက္က "Codes" ကိုရွာပါ။
                                         ]]></b:skin>                 

   ေတြ ့ျပီဆိုရင္ အေပၚ မွာ ေအာက္မွာေပးထားတဲ့"CSS Codes" ကိုထည့္ေပးလိုက္ပါ။ျပီးရင္ "Save Templates"ကိုနွိပ္ပါ။


CSS Codes ယူရန္


div#container

{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }



h1

{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }

p { margin:0; padding:1.2em; }

p a:link,

p a:visited,

p a:hover,

p a:active

{ font-weight:bold; color:#b9121b; }



ul#navigation-1

{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}

ul#navigation-1 li

{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }



ul#navigation-1 li ul.navigation-2

{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }

ul#navigation-1 li:hover ul.navigation-2

{ display:block; }

ul#navigation-1 li ul.navigation-2 li

{ width:146px; clear:left; width:146px; }



ul#navigation-1 li ul.navigation-2 li a:link,

ul#navigation-1 li ul.navigation-2 li a:visited

{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li:hover a,

ul#navigation-1 li ul.navigation-2 li a:active,

ul#navigation-1 li ul.navigation-2 li a:hover

{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }



ul#navigation-1 li ul.navigation-2 li ul.navigation-3

{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }

ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3

{ display:block; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited

{ background:#b9121b; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active

{ background:#ec454e; }

ul#navigation-1 li ul.navigation-2 li a span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }

ul#navigation-1 li ul.navigation-2 li:hover a span,

ul#navigation-1 li ul.navigation-2 li a:hover span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }



        ေနာက္တစ္ဆင့္ကိုေတာ့အဆင့္ေလးေတြနဲ့ေျပာျပပါ့မယ္။
    (၁) "Design" ကိုျပန္သြားပါ။
    (၂)  "Add a gadget (or) Add a Page element" နွိပ္ပါ။
    (၃)  ေနာက္ "HTML/JavaScript widget" ကိုေရြးပါ။
    (၄) ေအာက္မွာေပးထားတဲ့ ကုိ HTMl Codes" ကို အဲဒီ "HTML/JavaScript Box" ထဲမွာ "Copy and    
         and Past" လုပ္ပါ။
    (၅) "Save" ကိုနွိပ္ပါ။   


<ul id="navigation-1">

<li><a href="  လင့္ထည့္ရန္#">Home</a></li>

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္္ိ</a>

<ul class="navigation-2">

<li><a href="လင့္ထည့္ရန္္္">နာမည္ထည့္ရန္္</a></li>

<li><a href="လင့္ထည့္ရန္">နာမည္ထည့္ရန္ <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a></li>

<li><a href="လင့္တည့္ရန္#">နာမည္ထည့္ရန္</a></li>

</ul>

</li>

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a></li>

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္ <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a></li>

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a></li>

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a></li>

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a></li>

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a></li>

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a></li>

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a>

<ul class="navigation-2">

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a></li>

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a></li>

</ul>

</li>

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a>

<ul class="navigation-2">

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a></li>

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a></li>

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a></li>

</ul>

</li>

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a>

<ul class="navigation-2">

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a></li>

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a></li>

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a></li>

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္<span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a></li>

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a></li>

<li><a href="လင့္ထည့္ရန္#">နာမည္ထည့္ရန္</a></li>

</ul>

</li>

</ul>

</li>

</ul>



                          အထက္ပါ"Codes"မ်ားတြင္ အနီေရာင္ျဖင့္ျပထားေသာစာလံုးမ်ားေနရာတြင္မိမိတို့၏
သက္ဆိုင္ရာ" Links" နွင့္ "နာမည္" မ်ား ေျပာင္းလဲထည့္ေပးပါ။
 
                    သူငယ္ခ်င္းမ်ားအားလံုးအဆင္ေျပၾကပါေစ.......................,
                                       ခင္မင္လွ်က္;
                                                           မ်ိဳးမင္း                       


No comments:

Post a Comment

Comments ေလးေပးမယ္ဆိုရင္ေပးနိုင္ပါတယ္။

Related Posts Plugin for WordPress, Blogger...