kyawkothein: Blog

Showing posts with label Blog. Show all posts

Sunday, September 30, 2012

Blog Post မွာ Read More ကို ပံုနဲ႕ အစားထိုးျပီး လန္းလန္းေလး အသံုးျပဳရေအာင္

Published : Sunday, September 30, 2012 Author : kyawkothein

မိုးေကာင္းကင္August 14, 2012 6:10 PM

မိတ္ေဆြ readmore ဘယ္မွာထည့္ရမွာလဲဗ် မသိေသးလို႔ပါ
မိုးေကာင္းကင္August 14, 2012 6:16 PM

မိတ္ေဆြ readmore ကို ဘယ္မွာထည့္ရမယ္ဆိုတာေလးေျပာေပးပါဦး မသိေသးလို႔ပါ။
ေမာင္ေပါက္August 28, 2012 9:02 AM

ေက်းဇူးတင္ပါတယ္။ ဘယ္လိုလုပ္ရမလဲမသိဘူးျဖစ္ေနတယ္

ကၽြန္ေတာ္ မိတ္ေဆြမ်ားကို အႏူးညႊတ္ေတာင္းပန္ပါတယ္ ကၽြန္ေတာ္ Comments ေတြကို

မႀကည့္ျဖစ္လို ့ အခုလို ့ျပန္မေျဖျဖစ္တာပါ ဒါအတြက္ ေႀကာင့္ ေတာင္းပန္ပါတယ္ ကၽြန္ေတာ္ အခု အေသးစိတ္ တင္ျပလိုက္ပါတယ္ ကၽြန္ေတာ္ နွင့္ အတူ လုပ္ႀကည့္လိုက္ရေအာင္....

အရင္ဆံုး မိမိ Blog ထဲကိုဝင္လိုက္ပါ....

Template ေအာက္က ပံုကို ႀကည့္ပါ ျပီးရင္   Edit HTML ကိုသြားပါ....



   Proceed ကိုထပ္ဝင္ပါ....

ျပီးရင္ ..Expand Widget Templates ေလးကို အမွတ္ျခစ္ထားပါ >> Ctrl + F ကိုႏွီပ္ျပီး   Find အေရွ ့ကအကြက္ထဲမွာ Read More ကို ရိုက္ထည့္ျပီးရွာပါ

ေအာက္ကပံုကို ႀကည့္ပါ

ျပီးရင္ Read More ကိုဖ်က္ျပီး ရင္ေအာက္က Code ေလးနဲ႕အစားထိုးေပးလိုက္ပါ။

<img src='ဤေနရာမွာပံုလင့္ခ္ကိုထည့္ပါ'/>

ဥပမာ ပံုစံ <a expr:href='data:post.url'> Read More >> </a></span>

ျပင္ဆင္ျပီး ပံုစံ

<a expr:href='data:post.url'> <imsrc=g ' ဒီေနရာမွာပံုလင့္ကိုထည့္ပါ '/> </a></span>

လင့္ထည့္ျပီး ပံုစံ

<a expr:href='data:post.url'> <imsrc=g ' http://i643.photobucket.com/albums/uu153/nirav07/purple-1.gif   '/> </a></span>

ဒီေနရာမွာပံုလင့္ကိုထည့္ပါ ဆိုတဲ့ေနရာမွာ ေအာက္မွာ ကၽြန္ေတာ္ ေပးထားတဲ့ Link ေတြကို Copy ကူးျပီး ထည့္ရင္လည္းရပါတယ္ ဒါမွ မဟုတ္ မိမိႀကိဳက္ရာ ပံုကို Upload site တစ္ခုခုမွာ တင္ျပီး Link ယူျပီးထည့္ရင္လည္းရပါတယ္...

Link ထည့္ျပီးရင္   Preview နဲ ့ အရင္ႀကည့္လိုက္ပါ ေသခ်ာျပီဆိုရင္ Save template ကိုႏွိပ္ေပးလိုက္ရင္ျပီးပါျပီ..

Read more ပံု မ်ား ႀကိဳက္ရာကို ေရြးျပီး link ကို ကူးျပီးထည့္ပါ..

http://i643.photobucket.com/albums/uu153/nirav07/black-1.gif

http://i643.photobucket.com/albums/uu153/nirav07/black.png

http://i643.photobucket.com/albums/uu153/nirav07/black1.gif

http://i643.photobucket.com/albums/uu153/nirav07/blue-dark.gif

http://i643.photobucket.com/albums/uu153/nirav07/blue-1.gif

http://i643.photobucket.com/albums/uu153/nirav07/blue.png

http://i643.photobucket.com/albums/uu153/nirav07/blue1.gif

http://i643.photobucket.com/albums/uu153/nirav07/bluish.png

http://i643.photobucket.com/albums/uu153/nirav07/brown.gif

http://i643.photobucket.com/albums/uu153/nirav07/dark-bluish.png

http://i643.photobucket.com/albums/uu153/nirav07/dark-grey.gif

http://i643.photobucket.com/albums/uu153/nirav07/dark-orange.gif

http://i643.photobucket.com/albums/uu153/nirav07/dark-purple.gif

http://i643.photobucket.com/albums/uu153/nirav07/green.png

http://i643.photobucket.com/albums/uu153/nirav07/green1.gif

http://i643.photobucket.com/albums/uu153/nirav07/greenish.png

http://i643.photobucket.com/albums/uu153/nirav07/grey-1.gif

http://i643.photobucket.com/albums/uu153/nirav07/grey.png

http://i643.photobucket.com/albums/uu153/nirav07/grey1.gif

http://i643.photobucket.com/albums/uu153/nirav07/light-blue.png

http://i643.photobucket.com/albums/uu153/nirav07/light-orange.gif

http://i643.photobucket.com/albums/uu153/nirav07/orange.png

http://i643.photobucket.com/albums/uu153/nirav07/original.gif

http://i643.photobucket.com/albums/uu153/nirav07/pink.png

http://i643.photobucket.com/albums/uu153/nirav07/purple-1.gif

http://i643.photobucket.com/albums/uu153/nirav07/purple.png

http://i643.photobucket.com/albums/uu153/nirav07/purple1.gif

http://i643.photobucket.com/albums/uu153/nirav07/red-dark.gif

http://i643.photobucket.com/albums/uu153/nirav07/red-1.gif

http://i643.photobucket.com/albums/uu153/nirav07/red.png

http://i643.photobucket.com/albums/uu153/nirav07/red1.gif

မိမိႀကိဳက္တဲ့ ပံု ကို သံုးခ်င္တယ္ဆိုရင္ http://imageshack.us/ ကိုသြားျပီး အေကာင့္တစ္ခုဖြင့္ လိုက္ပါ ဘယ္လိုလုပ္ရမလဲ ဆိုတာ ပံုနဲ ့ျပထားပါတယ္ ေအာက္ကပံု ကို ႀကည့္ပါ..

ပံု ၁ Sign Up ကို ဝင္လိုက္ပါ..

ပံု ၂ အကုန္လံုးျဖည့္စြက္ပါ ... ျပီးရင္ Sign UP ကို ႏွိပ္ပါ...

ပံု ၃ ျပီးရင္ login ကိုဝင္လိုက္ပါ >>> Browse ကိုႏွိပ္ျပီး မိမိ တင္မယ့္ ပံုကိုေရြးပါ >>> UPLOAD NOW ဆိုတာကိုႏွိပ္ပါ >>> ျပီးရင္ View full size ကိုႏွိပ္ပါ .....

.

ပံု ၄ ျပီးရင္ Link ကိုကူးယူပါ

ကူးယူျပၤီးေသာ link ကို ဒီေနရာမွာပံုလင့္ကိုထည့္ပါ ဆိုတဲ့ေနရာမွာ ထည့္ေပးရမွာ ျဖစ္ပါတယ္
ဒီေလာက္ဆို အဆင္ေျပမယ္လို ့ ထင္ပါတယ္ ....

မိတ္ေဆြမ်ားအားလံုးအဆင္ေျပပါေစ.......

Sunday, September 23, 2012

Blog အတြက္ drop down menu

Published : Sunday, September 23, 2012 Author : kyawkothein

ကၽြန္ေတာ္ drop down menu ေလးတစ္ခု တင္ျပလိုက္ပါတယ္ ရိုးရိုးေလးပါ မသိေသးတဲ့ မိတ္ေဆြမ်ားအတြက္ ျဖစ္ပါတယ္ အသံုးျပဳခ်င္ တဲ့ သူငယ္ခ်င္းမ်ား အလြယ္တကူ ယူျပီးအသံုးျပဳ ႏိုင္ေအာင္ တင္ျပေပးလိုက္ ျခင္းျဖစ္ပါတယ္...

DEMO

ေအာက္မွာေပးထားတဲ့ code ကို Copy ကူးျပီး .. Design >>> Add a Gadget >>> /JavaScript မွာေအာက္ကကုဒ္ကိုထည့္ေပးလိုက္ပါ ။

<form><select name=”dropdownmenu” onchange=”window.open
(this.options[this.selectedIndex].value,’_blank’)” size=”1″
style=”width:300px”>

<option /> -Select an option-
<option value=”Your URL“/>Your Anchor Text
<option value=”Your URL“/>Your Anchor Text
<option value=”Your URL“/>Your Anchor Text
<option value=”Your URL“/>Your Anchor Text

</select></form>

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

မွတ္ခ်က္ ။ ။ Your Anchor Text ဆိုတဲ့ ေနရာမွာ ေခါင္းစဥ္ ထည့္ပါ your url ဆိုတဲ့ေနရာမွာ ေခါင္းစဥ္ရဲ့လင့္ ထည့္ပါ -select an option - ဆိုတဲ့ေနရာမွာ မိမိေပးျခင္ေသာ ေခါင္းစဥ္ရဲ့ အမည္ေပးပါ.......

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

Friday, September 14, 2012

Blog မွာ Cool Vertical Menu သံုးရေအာင္

Published : Friday, September 14, 2012 Author : kyawkothein

ကၽြန္ေတာ္ Cool Vertical Menu ေလးတင္ျပလိုက္ပါတယ္ ပံုကုိ ႀကည့္ပါ ႀကိဳက္တယ္ ဆိုရင္ ေအာက္မွာေပးထားတဲ့ နည္းအတိုင္း လုပ္ယူျပီး အသံုးျပဳနိဳင္ႀကပါေစ ...

ေအာက္မွာေပးထားတဲ့ code ကို Copy ကူးျပီး ...
Design >>> Add a Gadget >>> /JavaScript မွာေအာက္ကကုဒ္ကိုထည့္ေပးလိုက္ပါ ။

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

ေနာက္ျပီး

၁ ။ Design >>> Edit HTML

၂ ။ Expand Widget Templates ကို အမွတ္ျခစ္ထားေပးပါ

၃ ။ ( ctrl+ f ) ကိုႏွိပ္ျပီး Find : ေရွ ့က အကြက္ထဲမွာ ]]></b:skin> ကိုရွာပါ ေတြ ့ျပီဆိုရင္ အဲဒီကုတ္ရဲ ့အေပၚမွာ ေအာက္ကကုတ္ကို ထည့္ေပးလိုက္ပါ....

*{
 list-style:none;
 margin:0px;
 padding:0px;
}

#menu4 {
 width: 200px;
 border-style: solid solid none solid;
 border-color: #D76100;
 border-size: 0px;
 border-width: 0px;
 }
 
#menu4 li a {
   height: 32px;
   voice-family: "\"}\""; 
   voice-family: inherit;
   height: 24px;
 text-decoration: none;
 }
 
#menu4 li a:link, #menu4 li a:visited {
 color: #9E3C02;
 display: block;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr6pYCpbeWIypJgsYnQWLLjvKT7Ig0Mv0D_7neNGmC0Ss89tDdbksuR9sCLgAkbJvIDWFLOAM1ivm1IhbBSVW-H_Sbyb43kaWH6PHVTsXZaP45jP5B2poLVEjrr6IH6tZGcANFsVZ76ts/s1600/menu4.gif);
 padding: 8px 0px 0px 30px;
 }
 
#menu4 li a:hover {
 color: #fff;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr6pYCpbeWIypJgsYnQWLLjvKT7Ig0Mv0D_7neNGmC0Ss89tDdbksuR9sCLgAkbJvIDWFLOAM1ivm1IhbBSVW-H_Sbyb43kaWH6PHVTsXZaP45jP5B2poLVEjrr6IH6tZGcANFsVZ76ts/s1600/menu4.gif) 0 -32px;
 padding: 8px 0 0 30px;
 }
 
#menu4 li a:active {
 color: #fff;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr6pYCpbeWIypJgsYnQWLLjvKT7Ig0Mv0D_7neNGmC0Ss89tDdbksuR9sCLgAkbJvIDWFLOAM1ivm1IhbBSVW-H_Sbyb43kaWH6PHVTsXZaP45jP5B2poLVEjrr6IH6tZGcANFsVZ76ts/s1600/menu4.gif) 0 -64px;
 padding: 8px 0 0 30px;
 }

ျပီးရင္ Previwe နဲ ့ႀကည့္လိုက္ပါ

တကယ္လို ့မႀကိဳက္ လို ့ဘဲ ျဖစ္ျဖစ္ တစ္ခုခု မွာေနလို ့ဘဲျဖစ္ျဖစ္ Clear Edits ကိုနွိပ္ျပီး ျပန္ဖ်က္လို ့ရတာေပါ့

ok ျပီဆိုမွ Save Template ရင္ျပီးပါျပီ။

မိတ္ေဆြမ်ားကိုႀကိဳဆိုပါတယ္...........

Thursday, September 13, 2012

Blog အတြက္ Textarea လန္းလန္းေလး မ်ား

Published : Thursday, September 13, 2012 Author : kyawkothein

ကၽြန္ေတာ္ 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>

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

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

Blog အတြက္ CSS3 Drop Down Menu

Published : Thursday, September 13, 2012 Author : kyawkothein

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

Design >>> Add a Gadget >>> /JavaScript မွာေအာက္ကကုဒ္ကိုထည့္ေပးလိုက္ပါ ။

padding: 0;

list-style: none;

}

#mbt-menu {

width: 960px;

margin: 60px auto;

border: 1px solid #000;

background-color: #333;

background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#800000));

-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: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#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>

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

၂ ။ black အေရာင္ ကို ႀကိဳက္ရင္ ေအာက္မွာေပးထားတဲ့ code ကို Copy ကူးျပီး ...

Design >>> Add a Gadget >>> /JavaScript မွာေအာက္ကကုဒ္ကိုထည့္ေပးလိုက္ပါ ။

</style>

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

ေက်းဇူးတင္ပါတယ္.....

Thursday, September 6, 2012

Blog မွာ Cool CSS3 Drop Down Menu ထည့္ရေအာင္း

Published : Thursday, September 06, 2012 Author : kyawkothein

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

ေအာက္မွာ ေပးထားတဲ့ code ကို copy ကူးျပီး
Design >>> Add a Gadget >>> /JavaScript မွာေအာက္ကကုဒ္ကိုထည့္ေပးလိုက္ပါ ။

</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 လိုက္ပါ ျပီးပါျပီ ။
မသိေသးတဲ့ မိတ္ေဆြမ်ားအတြက္ျဖစ္ပါတယ္ ။
မိတ္ေဆြမ်ားအားလံုးေပ်ာ္ရႊင္ပါေစ.......

Wednesday, September 5, 2012

Blog မွာ Vertical Navigation Menu With Hover Fader and Animated Effects သံုးရေအာင္

Published : Wednesday, September 05, 2012 Author : kyawkothein

DEMO

ကၽြန္ေတာ္ မိတ္ေဆြမ်ားကို menu လန္းလန္းေလး တစ္ခုတင္ျပလိုက္ပါတယ္ demo link ကိုသြားျပီး menu အေပၚကို mouse တင္ႀကည့္လိုက္ပါ ကၽြန္ေတာ္ မိတ္ေဆြမ်ား အသံုးျပဳခ်င္တယ္ဆို ရင္ ေအာက္မွာ ျပထားတဲ့အတိုင္း လိုက္လုပ္ျပီး အသံုးျပဳနိုင္ႀကပါေစ.....

၁ ။ Design >>> Edit HTML

၂ ။ Expand Widget Templates ကို အမွတ္ျခစ္ထားေပးပါ

၃ ။ ( ctrl+ f ) ကိုႏွိပ္ျပီး Find : ေရွ ့က အကြက္ထဲမွာ ]]></b:skin> ကိုရွာပါ ေတြ ့ျပီဆိုရင္ အဲဒီကုတ္ရဲ ့အေပၚမွာ ေအာက္ကကုတ္ကို ထည့္ေပးလိုက္ပါ......

၄ ။ ( ctrl+ f) နဲ ့ <head> ကို ထပ္ရွာပါ ေတြ ့ျပီဆိုရင္ <head> ေအာက္မွာ ေအာက္က code ေတြကို ထည့္ေပးလိုက္ပါ....

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

၅ ။ ေအာက္မွာေပးထားတဲ့ code ေတြကို copy ကူးျပီး Design >>> Add a Gadget >>> HTML/JavaScript မွာေအာက္ကကုဒ္ကိုထည့္ေပးလိုက္ပါ ။

Uize.module ({
  required:[
    'UizeDotCom.Page.Example.library',
    'UizeDotCom.Page.Example',
    'Uize.Widget.HoverFader',
    'Uize.Curve.Rubber',
    'Uize.Fx.xShadows'
  ],
  builder:function () {
    /*** create the example page widget ***/
      var page = window.page = UizeDotCom.Page.Example ();

/*** create the hover fader instance ***/
      page.addChild (
        'hoverFader',
        Uize.Widget.HoverFader,
        {
          nodes:{className:/\bmenuLink\b/},
          defaultStyle:{marginLeft:0,marginTop:0,
        color:'f',borderColor:'#9F9797',
        backgroundColor:'044',
        textShadow:'-3 0 3 #0,3 0 3 #0,#0ff -30 0 .5em,#0ff 30 0 .5em,#0f0 -20 0 1em,#0f0 20 0 1em'
      },
      hoverStyle:{marginLeft:5,marginTop:5,borderColor:'0',
        color:'8',
        backgroundColor:'000',
        textShadow:'0 0 3 #0,0 0 3 #0,#0 0 0 .5em,#0 0 0 .5em,#0 -30 0 1em,#0 30 0 1em'
      },
      fadeIn:{duration:350},
      fadeOut:{duration:1000}
        }
      );

/*** wire up the page widget ***/
      page.wireUi ();
  }
});

</script>

ျပီးရင္ save လိုက္ပါ..... ( ျပီးပါျပီ )

(မွတ္ခ်က္ ) လင့္ထည့္ဖို ့အတြက္ ေခါင္းစဥ္ ဆို တဲ့ေနရာမွာ ေခါင္းစဥ္ ထည့္ပါ ေခါင္းစဥ္ရဲ ့လင့္ ဆိုတဲ့ေနရာမွာ ေခါင္းစဥ္ရဲ ့လင့္ ထည့္ပါ ......