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

Dashboard

Tuesday, January 1, 2013

3D Style Verticle Menu For Blogger


                           Blogger သူငယ္ခ်င္းေတြအတြက္ Menu ေတြတင္ေပးေနတာမွာ အခုေနာက္ပိုင္း
Vertical Menu ေတြခ်ည္းဘဲတင္ေပးျဖစ္ေနပါတယ္။ တစ္ေယာက္နဲ႕တစ္ေယာက္ေတာ႕အၾကိဳက္ခ်င္းမ
တူၾကဘူးဗ်။ Horizontal Menu ေလးကိုဘဲၾကိဳက္တယ္ဗ်ာ။ ဒါေပမယ္႕ Vertical Menu ေလးေတြထပ္တင္
ေပးပါဦးဆိုျပီး Mail ထဲမွာ ကိုေအာင္မင္းကေတာင္းထားလို႕ အျခားေသာ Blogger သူငယ္ခ်င္းမ်ားအတြက္
ပါတင္ေပးလိုက္ပါတယ္ဗ်ာ။ ေအာက္မွာလည္း ျပဳလုပ္ပံုအဆင့္ဆင့္ကိုပံုနဲ႕တကြရွင္းျပေပးထားပါတယ္။

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 ႏွိပ္ေပးပါ။
 
" # " ေနရာေတြမွာ မိမိရည္ညြန္းခ်င္တဲ႕ Link ကိုထည္႕ေပးရမွာပါ။
 
<div class="container">
<ul id="nav12">
<li><a href="http://www.pyaephyo.com/">Home</a></li>
<li><a href="#">Menu 1</a>
<ul class="subs">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul class="subs">
<li><a href="#">Submenu 2-1</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
<li><a href="#">Submenu 2-6</a></li>
<li><a href="#">Submenu 2-7</a></li>
<li><a href="#">Submenu 2-8</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul class="subs">
<li><a href="#">Submenu 3-1</a></li>
<li><a href="#">Submenu 3-2</a></li>
<li><a href="#">Submenu 3-3</a></li>
<li><a href="#">Submenu 3-4</a></li>
<li><a href="#">Submenu 3-5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="http://www.pyaephyo.com/">Add This</a></li>
</ul>

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

 
အဆင္႕ 4  Design > Edit HTML > Expand Widget Templates မွာအမွန္ျခစ္ေပးပါ။
အဆင္႕ 5 Ctrl + F ကိုႏွိပ္ျပီး ဒီကုတ္ေလးကိုရွာပါ  ]]></b:skin>
အဆင္႕ 6 ေတြ႕ျပီဆိုရင္ ]]></b:skin> ရဲ႕ အေပၚမွာေအာက္က Code ကို ကူးထည္႕ေပးပါ။
အဆင္႕ 7 အရင္ဆံုး Preview နဲ႕အရင္ၾကည္႕ပါ။ အဆင္ေျပျပီဆိုမွ Save ႏွိပ္ေပးပါ။
 
/* The CSS Code for the menu starts here pyaephyo.com */
#nav12,#nav ul {
background-color: #8899AA;
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav12 {
display: block;
padding: 5px;
position: relative;
width: 112px;

-moz-perspective: 200px;
-ms-perspective: 200px;
-webkit-perspective: 200px;
-o-perspective: 200px;
perspective: 200px;
}
#nav12 ul {
left: -9999px;
opacity:0;
overflow: hidden;
padding: 5px;
position: absolute;
top: -9999px;

-moz-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
transform: rotateY(70deg);

-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;

-moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear;
-ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear;
-o-transition: -o-transform 0.3s linear, opacity 0.3s linear;
-webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear;
transition: transform 0.3s linear, opacity 0.3s linear;
}
#nav12 li {
background-color: #FFFFFF;
position: relative;
}
#nav12 > li {
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#nav12 li a {
background-color: #AABBCC;
border-color: #DDDDDD #555555 #555555 #DDDDDD;
border-style: solid;
border-width: 1px;
color: #000000;
display: block;
font-size: 15px;
padding: 8px 10px 8px 5px;
text-decoration: none;
width:95px;

-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
#nav12 li:hover > a {
background-color: #8899AA;
border-color: #8899AA;
color: #FFFFFF;
}
#nav12 li:hover ul.subs {
left: 114px;
opacity:1;
top: 0;

-moz-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;

-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#nav12 ul li {
width: 100%;
}

အားလံုးဘဲအဆင္ေျပၾကပါေစေနာ္။

2 comments:

  1. "#"ဥပမာေလးေျပာျပပါလားအစ္ကိုရည္ညြန္းခ်င္တဲ႕ Linkဆိုတာနားမလည္လိုပါ

    ReplyDelete
  2. "#" ဥပမာ အားျဖင္႕ မိမိက Home Page ကိုရည္ညြန္းခ်င္တယ္ဆိုရင္ေတာ႕
    www.pyaephyo.com ဆိုျပီး ထည္႕ေပးရမွာပါ။
    Google ကိုရည္ညြန္းခ်င္ရင္ေတာ႕ www.google.com ဆိုျပီး ထည္႕ရမွာပါ။

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...