Blog မွာ Cool CSS3 Drop Down Menu ထည့္ျခင္းႏွင့္ စာတန္းေျပးေအာင္လုပ္နည္း

 ကိုေက်ာ္ကိုသိန္းထံမွ ကူးယူတင္ဆက္ထားျခင္းပါ။  မူရင္းဆိုက္သို႔သြားရန္...
ကၽြန္ေတာ္ Cool CSS3 Drop Down Menu  တင္ျပလိုက္ပါတယ္  ပံုေလးကို ႀကည့္လိုက္ပါ ႀကိဳက္တယ္ စိတ္တိုင္းႀက တယ္ အသံုးျပဳခ်င္တယ္ ဆိုရင္ ေတာ့ ေအာက္ေပးထားတဲ ့အတိုင္း ယူျပီးအသံုးျပဳ  ႏိုင္ႀကပါေစ....ေအာက္မွာ ေပးထားတဲ့ code ကို copy ကူးျပီး 
Design >>> Add a Gadget >>> /JavaScript မွာေအာက္ကကုဒ္ကိုထည့္ေပးလိုက္ပါ ။

<style>/*------ CSS3 Drop Down Menu By B2W (beautifulbloggerwidgets.blogspot.com)---------*/ #b2w-menu, #b2w-menu ul { margin: 0; padding: 0; list-style: none; } #b2w-menu { width: 100%; margin: 60px auto; border: 1px solid #222; background-color: #111; background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background-image: -webkit-linear-gradient(#444, #111); background-image: -o-linear-gradient(#444, #111); background-image: -ms-linear-gradient(#444, #111); background-image: linear-gradient(#444, #111); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 1px 1px #777; -webkit-box-shadow: 0 1px 1px #777; box-shadow: 0 1px 1px #777; } #b2w-menu:before, #b2w-menu:after { content: ""; display: table; } #b2w-menu:after { clear: both; } #b2w-menu { zoom:1; } #b2w-menu li { float: left; border-right: 1px solid #222; -moz-box-shadow: 1px 0 0 #444; -webkit-box-shadow: 1px 0 0 #444; box-shadow: 1px 0 0 #444; position: relative; } #b2w-menu a { float: left; padding: 12px 30px; color: #999; text-transform: uppercase; font: bold 12px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #b2w-menu li:hover > a { color: #fafafa; } *html #b2w-menu li a:hover { /* IE6 only */ color: #fafafa; } #b2w-menu ul { margin: 20px 0 0 0; _margin: 0; /*IE6 only*/ opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 9999; background: #444; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-box-shadow: 0 -1px rgba(255,255,255,.3); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); box-shadow: 0 -1px 0 rgba(255,255,255,.3); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } #b2w-menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #b2w-menu ul ul { top: 0; left: 150px; margin: 0 0 0 20px; _margin: 0; /*IE6 only*/ -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); box-shadow: -1px 0 0 rgba(255,255,255,.3); } #b2w-menu ul li { float: none; display: block; border: 0; _line-height: 0; /*IE6 only*/ -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; box-shadow: 0 1px 0 #111, 0 2px 0 #666; } #b2w-menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #b2w-menu ul a { padding: 10px; width: 130px; _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; text-transform: none; } #b2w-menu ul a:hover { background-color: #0186ba; background-image: -moz-linear-gradient(#04acec, #0186ba); background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background-image: -webkit-linear-gradient(#04acec, #0186ba); background-image: -o-linear-gradient(#04acec, #0186ba); background-image: -ms-linear-gradient(#04acec, #0186ba); background-image: linear-gradient(#04acec, #0186ba); } #b2w-menu ul li:first-child > a { -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } #b2w-menu ul li:first-child > a:after { content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #444; } #b2w-menu ul ul li:first-child a:after { left: -6px; top: 50%; margin-top: -6px; border-left: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #3b3b3b; } #b2w-menu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #b2w-menu ul ul li:first-child a:hover:after { border-right-color: #0299d3; border-bottom-color: transparent; } #b2w-menu ul li:last-child > a { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } </style> <ul id="b2w-menu"><li><a href="#">Home</a></li><li> <a href="#">Categories</a> <ul><li><a href="#">CSS</a></li><li><a href="#">Graphic design</a></li><li><a href="#">Development tools</a></li><li><a href="#">Web design</a></li></ul></li><li><a href="#">Work</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li><li><a href="http://beautifulbloggerwidgets.blogspot.com/">Create This »</a></li></ul>




  ျပီးရင္ Save  လိုက္ပါ ျပီးပါျပီ  ။
မသိေသးတဲ့ မိတ္ေဆြမ်ားအတြက္ျဖစ္ပါတယ္ ။
မိတ္ေဆြမ်ားအားလံုးေပ်ာ္ရႊင္ပါေစ.......


 ======================================================

၁    ။  ကၽြန္ေတာ္ မိတ္ေဆြမ်ားကို  Blog အတြက္ CSS3 Drop Down Menu အေရာင္ႏွစ္မ်ိဳး  တင္ေပးလိုက္ပါတယ္ အသံုးျပဳရတာလည္း လြယ္ကူပါတယ္ အသံုးျပဳခ်င္တဲ့ မိတ္ေဆြမ်ား  ေအာက္မွာေပးထားတဲ့  code  ကို  Copy ကူးျပီး ...

Design >>> Add a Gadget >>> /JavaScript မွာေအာက္ကကုဒ္ကိုထည့္ေပးလိုက္ပါ ။ <style> #mbt-menu, #mbt-menu ul { margin: 0; padding: 0; list-style: none; } #mbt-menu { width: 960px; margin: 60px auto; border: 1px solid #000; background-color: #333; background-image: -moz-linear-gradient(#800000, #333); background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#800000)); background-image: -webkit-linear-gradient(#333, #800000); background-image: -o-linear-gradient(#800000, #999); background-image: -ms-linear-gradient(#333, #800000); background-image: linear-gradient(#800000, #333); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 1px 1px #777; -webkit-box-shadow: 0 1px 1px #777; box-shadow: 0 1px 1px #777; } #mbt-menu:before, #mbt-menu:after { content: ""; display: table; } #mbt-menu:after { clear: both; } #mbt-menu { zoom:1; } #mbt-menu li { float: left; border-right: 1px solid #222; -moz-box-shadow: 1px 0 0 #444; -webkit-box-shadow: 1px 0 0 #444; box-shadow: 1px 0 0 #444; position: relative; } #mbt-menu a { float: left; padding: 12px 30px; color: #FFFF00; text-transform: uppercase; font: bold 12px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #mbt-menu li:hover > a { color: #fff; } *html #mbt-menu li a:hover { /* IE6 only */ color: #000; } #mbt-menu ul { margin: 20px 0 0 0; _margin: 0; /*IE6 only*/ opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 9999; background: #444; background: -moz-linear-gradient(#800000, #999); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#333, #800000); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-box-shadow: 0 -1px rgba(255,255,255,.3); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); box-shadow: 0 -1px 0 rgba(255,255,255,.3); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } #mbt-menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #mbt-menu ul ul { top: 0; left: 150px; margin: 0 0 0 20px; _margin: 0; /*IE6 only*/ -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); box-shadow: -1px 0 0 rgba(255,255,255,.3); } #mbt-menu ul li { float: none; display: block; border: 0; _line-height: 0; /*IE6 only*/ -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; box-shadow: 0 1px 0 #111, 0 2px 0 #666; } #mbt-menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #mbt-menu ul a { padding: 10px; width: 130px; _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; text-transform: none; } #mbt-menu ul a:hover { background-color: #fff; background-image: -moz-linear-gradient(#800000, #000); background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background-image: -webkit-linear-gradient(#04acec, #0186ba); background-image: -o-linear-gradient(#04acec, #0186ba); background-image: -ms-linear-gradient(#04acec, #0186ba); background-image: linear-gradient(#04acec, #0186ba); } #mbt-menu ul li:first-child > a { -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } #mbt-menu ul li:first-child > a:after { content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #444; } #mbt-menu ul ul li:first-child a:after { left: -6px; top: 50%; margin-top: -6px; border-left: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #3b3b3b; } #mbt-menu ul li:first-child a:hover:after { border-bottom-color: #fff; } #mbt-menu ul ul li:first-child a:hover:after { border-right-color: #fff; border-bottom-color: transparent; } #mbt-menu ul li:last-child > a { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } </style> <ul id="mbt-menu"><li><a href=" ေခါင္းစဥ္ ရဲ့လင့္"> ေခါင္းစဥ္ </a></li><li> <a href=" ေခါင္းစဥ္ ရဲ့လင့္"> ေခါင္းစဥ္</a> <ul><li><a href=" ေခါင္းစဥ္ ရဲ့လင့္"> ေခါင္းစဥ္</a></li><li><a href=" ေခါင္းစဥ္ ရဲ့လင့္"> ေခါင္းစဥ္</a></li><li><a href=" ေခါင္းစဥ္ ရဲ့လင့္"> ေခါင္းစဥ္</a></li><li><a href=" ေခါင္းစဥ္ ရဲ့လင့္"> ေခါင္းစဥ္</a></li></ul></li><li><a href=" ေခါင္းစဥ္ ရဲ့လင့္"> ေခါင္းစဥ္</a></li><li><a href=" ေခါင္းစဥ္ ရဲ့လင့္"> ေခါင္းစဥ္</a></li><li><a href=" ေခါင္းစဥ္ ရဲ့လင့္"> ေခါင္းစဥ္</a></li></ul>


 ျပီးရင္ Save လိုက္ပါ...

================================================================


ကၽြန္ေတာ္ blog မိတ္ေဆြမ်ား အတြက္  textarea ေလးေတြ တင္ျပလိုက္ပါတယ္ textarea ကို အသံုးျပဳျပီး ေရမယ္ ဆိုရင္ေတာ့  Post ေရးတဲ့ အခါမွာ  HTML နဲ ့ေရးရမွာ ျဖစ္ပါတယ္ ေရးျပီးသြားျပီ ဆိုရင္  Compose ျပန္ေျပာင္းျပီ  Publish ႏွိပ္လိုက္ရင္ ရပါျပီ.....

( ပံုစံ ၁ )
 . ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ

<textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(251, 239, 255); border-color: rgb(202, 61, 217); border-radius: 7px 7px 7px 7px; border-style: solid; border-width: 1px 1px 1px 20px; color: #ca3dd9; height: 32px; line-height: 1.5em; padding: 5px; width: 400px;"> ေရးခ်င္တာေရးပါ   </textarea>


ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ.

 (  ပံုစံ ၂ )
ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ.

 <textarea cols="20" name="code" rows="3" style="-moz-border-radius: 5px 5px 5px 5px; background: none repeat scroll 0% 0% rgb(0, 0, 0); border: 2px inset rgb(204, 204, 204); color: white; line-height: 1.5em; padding: 0pt 7px;"> ေရးခ်င္တာေရးပါ </textarea>



( ပံုစံ ၃ )
  ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ


  <textarea cols="20" name="code" rows="3" style="-moz-border-radius: 10px 10px 10px 10px; background: none repeat scroll 0% 0% rgb(191, 250, 255); border-color: rgb(255, 233, 0) rgb(64, 255, 31) rgb(64, 255, 31) rgb(255, 233, 0); border-style: solid; border-width: 4px; color: red; line-height: 1.5em; padding: 5px;"> ေရးခ်င္တာေရးပါ </textarea>


( ပံုစံ ၄ )
  ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ

<textarea cols="20" name="code" rows="3" style="-moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; background: none repeat scroll 0% 0% rgb(255, 218, 175); border: 2px ridge rgb(127, 69, 0); color: #7f4500; line-height: 1.5em; padding: 5px;"> ေရးခ်င္တာေရးပါ </textarea> 



( ပံုစံ ၅ )

ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ


 <textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(218, 255, 191); border: 2px dashed rgb(41, 95, 0); color: #295f00; line-height: 1.5em; padding: 5px;"> ေရခ်င္တာေရးပါ </textarea>

ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ.


( ပံုစံ ၆ )

ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ


  <textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(239, 0, 144); border: 3px dotted rgb(255, 239, 249); color: #ffeff9; line-height: 1.5em; padding: 5px;">  ေရခ်င္တာေရးပါ </textarea>



( ပံုစံ ၇ )

ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ


  <textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(255, 0, 10); color: white; line-height: 1.5em; padding: 5px;"> ေရခ်င္တာေရးပါ  </textarea>


( ပံုစံ ၈ )

ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ 


  <textarea name="code" rows="2" cols="50" style="background:  #EFF5FB; color: #000; border: 1px solid #ccc; border-left: 20px solid  #0174DF; line-height: 1.5em; padding: 5px; -moz-border-radius: 7px;">   ေရခ်င္တာေရးပါ  </textarea>


ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ.


( ပံုစံ ၉ )

ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ 


<textarea name="code" rows="2" cols="40" style="background:#E0ECF8;  color:#FF0000; border-bottom: 4px solid #FE2E2E; border-right: 4px  solid #01DF01; border-top: 4px solid #01DF01; border-left: 4px solid  #FE2E2E; line-height:1.5em; padding:5px; -moz-border-radius:10px;">  ေရခ်င္တာေရးပါ    </textarea> 


( ပံုစံ ၁၀ )


ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ


<textarea name="code" rows="2" cols="42" style="background:  #FAAC58; color: #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em;  padding: 5px;">  ေရခ်င္တာေရးပါ </textarea>  



 ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ

( ပံုစံ ၁၁ )


ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ

   <textarea name="code" rows="2" cols="42" style="background:#AC58FA;  color:#fff; border:3px double #ffaf; line-height:1.5em;  padding:5px;">  ေရခ်င္တာေရးပါ </textarea> 



ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ


( ပံုစံ  ၁၂ )

ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ

<textarea style="height: 31px; width: 400px;">  ေရခ်င္တာေရးပါ </textarea>

ကိုယ္ထည့္ခ်င္တဲ့ စာသားကို ေရးခ်င္တာေရးပါ ဆိုတဲ့ေနရာမွာေရးပါ

မိတ္ေဆြမ်ားအားလံုးကို ေလးစားလွ်က္.....

မိုးေကာင္းကင္မွ သေဘာက်သျဖင့္ ကူးယူထားျခင္းျဖစ္ပါတယ္။...