မဂၤလာပါခင္ဗ်ာ :::: ကၽြန္ေတာ္တင္သမွ် Post ေလးမ်ားသည္ ကၽြန္ေတာ္ေလ႕လာဖူးသမွ်ကို ျပန္လည္မွ်ေ၀ေပးျခင္းျဖစ္ပါတယ္။ သူငယ္ခ်င္းအားလံုးလည္း ကၽြန္ေတာ္႕ site မွႀကိဳက္ႏွစ္သက္တဲ႕ မည္႕သည္႕ Post ကိုမဆို ျမန္မာ IT နည္းပညာဖြံ႕ၿဖိဳးတိုးတက္ေရးအတြက္ ျပန္လည္မွ်ေ၀ေပးေစလိုပါတယ္ဗ်ာ။ ::::

Dashboard

Thursday, September 27, 2012

Attractive Drop Down Menubar For Blogger


              Blogger ညီကိုမ်ားအတြက္ Drop Down Menu ေလးတစ္ခု ထပ္ျပီး မွ်ေ၀ေပးလိုက္ပါတယ္ဗ်ာ။
ျပဳလုပ္ပံုအဆင္႕ဆင္႕ကိုလည္း ေအာက္မွာ အေသးစိတ္ လူတိုင္းနားလည္လြယ္ေအာင္ရွင္းျပေပးထားပါ
တယ္ဗ်ာ။ အဆင္ေျပၾကပါေစေနာ္။

Facebook ရဲ႕ Like button ကိုႏွိပ္ျခင္းျဖင္႕ မိမိရဲ႕ Facebook ေပၚမွာ ဒီ Post ေလးေရာက္သြားမွာပါ။ 
ဒီ Post ေလးကိုသေဘာက်တယ္ဆိုရင္လည္း Like Button ေလးကိုႏွိပ္ခဲ႕ေပးပါေနာ္။

ဒီေနရာကေနစျပီေနာ္။ေသခ်ာေလးဖတ္ျပိးလိုက္လုပ္ၾကည္႕ေပးပါ။ လြယ္ပါတယ္။
drop down menu
HTML JAVASCRIPT A simple Drop Down Menu For Blogger

အဆင့္ 1  Design > Page Elements > Add a Gadget ကိုႏွိပ္ပါ။
အဆင္႕ 2 Eidt HTML ကုိေရြးေပးပါ။ ျပီးသြားရင္ ေအာက္က Code ကိုကူးထည္႕ေပးပါ။
အဆင္႕ 3 Save ႏွိပ္ေပးပါ။

<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Portfolio</a></li>
<li><a href="#">One Dropdown</a>
<ul>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 4</a></li>
<li><a href="#">Level 5</a></li>
</ul>
</li>
<li><a href="#">Three Levels</a>
<ul>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 3</a>
<ul>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 4</a></li>
<li><a href="#">Level 5</a></li>
<li><a href="#">Level 6</a></li>
<li><a href="#">Level 7</a></li>
</ul>
</li>
<li><a href="#">Level 4</a></li>
<li><a href="#">Level 5</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
</ul>
</div>


ၿပီးသြားရင္ေအာက္ကအဆင္႕အတိုင္းလုိက္လုပ္ေပးပါ။


အဆင္႕ 4  Design > Edit HTML > Expand Widget Templates မွာအမွန္ျခစ္ေပးပါ။
အဆင္႕ 5 Ctrl + F ကိုႏွိပ္ျပီး ဒီကုတ္ေလးကိုရွာပါ  ]]></b:skin>
အဆင္႕ 6 ေတြ႕ျပီဆိုရင္ ]]></b:skin> ရဲ႕ အေပၚမွာေအာက္က Code ကို ကူးထည္႕ေပးပါ။
အဆင္႕ 7 အရင္ဆံုး Preview နဲ႕အရင္ၾကည္႕ပါ။ အဆင္ေျပျပီဆိုမွ Save ႏွိပ္ေပးပါ။

#nav {   float: left;
font: bold 12px Arial, Helvetica, Sans-serif;
border: 1px solid #121314;
border-top: 1px solid #2b2e30;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;}
#nav ul {
margin:0;
padding:0;
list-style:none;}
#nav ul li {
float:left;}
#nav ul li a {
float: left;
color:#d4d4d4;
padding: 10px 20px;
text-decoration:none;
background:#3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0,0,0,0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);}
#nav li ul {
background:#3C4042;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
left: -999em;
margin: 35px 0 0;
position: absolute;
width: 160px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
}

#nav li ul a {
background: none;
border: 0 none;
margin-right: 0;
width: 120px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
#nav ul li a:hover,
#nav ul li:hover > a {
color: #252525;
background:#3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;

}

#nav li ul a:hover,
#nav ul li li:hover > a {
color: #2c2c2c;
background: #5C9ACD;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
border-bottom: 1px solid rgba(0,0,0,0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}

#nav li:hover ul {
left: auto;
}

#nav li li ul {
margin: -1px 0 0 160px;
-webkit-border-radius: 0 10px 10px 10px;
-moz-border-radius: 0 10px 10px 10px;
border-radius: 0 10px 10px 10px;
visibility:hidden;
}

#nav li li:hover ul {
visibility:visible;
}

5 comments:

  1. အကိုႀကီးကို ခဏတိုင္းေမးရတာ အားနာပါတယ္။
    ကြ်န္ေတာ္ အဆင့္-၄ ဘယ္လိုလုပ္ရမယ္ဆိုတာကို မသိတာ။ရွာလို႕လည္းမေတြ႕ဘူးျဖစ္ေနတယ္။ေက်းဇူးျပဳ၍ ပံုေလးနဲ႕တကြရွင္းျပေပးပါလို႕။အစဥ္ေလးစာလ်က္...။ကၽြန္ေတာ္႕ဘေလာ့က ၾကိဳက္တဲ႕ Post ကို မွ်ေ၀ေပးႏိုင္ပါတယ္။ Credit ေပးခ်င္မွေပးပါ။ ျပသာနာမရွိပါဘူး။အကိုႀကီးက ဘယ္ကလဲသိခ်င္လို႔ပါ။နီးလို႔ခ်င္ရင္ လာလည္မလို႔ပါ။:-) ေက်းဇူးပါ...

    ReplyDelete
  2. ကၽြန္ေတာ္ ပံုေလးနဲ႕ တင္ေပးလိုက္ျပီေနာ္။ အဆင္ေျပပါေစဗ်ာ။
    ကၽြန္ေတာ္က ရန္ကုန္မွာဘဲေနတာပါ။

    ReplyDelete
  3. ကိုျပည့္ျဖိဳး
    အကိုျပထားတဲ့ အတိုင္း Drop Down Menu ကေတာ့ အဆင္ေျပပါတယ္...
    ဒါေပမဲ့ ေလ... အကို႔ဆိုဒ္မွာလို menu ကို ေမာက္စ္ တင္လိုက္ရင္.. ေအာက္ကိုက်လာတဲ႔
    နည္းေလးဗ်ာ.... လင့္ခ်ိတ္နည္းလို႔ပဲေျပာရမလား... အဲတာနဲ႔ ပါတ္သက္ျပီးေတာ့ ေက်းဇူးျပဳျပီးေတာ့ ... ပုံေလးနဲ႔တကြ ရွင္းျပေပးပါလားခင္ဗ်...
    အဲတာန႔ဲ ပါတ္သက္ျပီးေတာ့ ဘယ္လိုလုပ္ရမယ္ဆို တကယ့္ကိုမသိေသးလို႔ပါ..
    ေနာက္ျပီးေတာ့ အကို႔ဆိုဒ္က post ကို လညး္ ကြ်န္ေတာ္ကူးယူ ေဖာ္ျပထားပါတယ္...
    ဆက္လက္ျပီးေတာ့လည္း ကူးယူ Share ခြင့္ျပဳပါေနာ္..အကို..
    ေက်းဇူးအထူးတင္လွ်က္...

    ReplyDelete
  4. ကၽြန္ေတာ္႕ဆီမွာ တင္ထားတဲ႕ Menu နဲ႕ အခု Menu က အတူတူပါဘဲဗ်ာ။ ပံုေလးနဲ႕ ေရာင္ေလးဘဲကြာသြားတာပါ။ ဒီေကာင္ေလးလည္း Mouse တင္လိုက္တာနဲ႕ေအာက္ကိုက်လာပါတယ္ဗ်ာ။

    ReplyDelete
  5. အကိုေျပာတာဟုတ္ပါတယ္ခင္ဗ်.... ကြ်န္ေတာ္ အကိုဆီက Menu ကို ယူသုံးလိုက္တာ ရပါတယ္ခင္ဗ်..ေက်းဇူးအရမ္းတင္ပါတယ္ ကိုျပည့္ျဖိဳး...
    ဆက္လက္ျပီးေတာ့လည္း နည္းပညာနဲ႔ပါတ္သက္ျပီးေတာ့ ဆက္လက္ေ၀မွ်ႏိုင္ပါေစ..

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...