Mr ThangMing: blogger menu

Add Facebook Style DropDown Menu Bar To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔တင္ေပးလုိက္တဲ့ ပုိ႔(စ္)ေလးကေတာ့ Blog မွာ Facebook Style DropDown Menu Bar ေလးထည့္နည္း/သုံးနည္းေလးပါ။ ဒီ Cond ေလးကုိေတာ့ က်ေနာ္ေလ့လာၿပီး ေရးၾကည့္တဲ့ Cond ေလးပါ။ HTMl Cond နဲ႔ CSS Cond ကုိေပါင္းစပ္ၿပီး ေရးလုိက္တာပါ။ CSS Cond ကုိ သီသန္႔ထည့္ေပးစရာမလုိေတာ့ပါ။ ေအာက္မွာ နမူနာ(Demo) သြားၾကည့္လုိ႔ရေအာင္ Link နဲ႔ တကြ Cond လည္းေပးထားပါတယ္။ Cond အဆင္မေျပတာေတြရွိခဲ့လွ်င္္ Comment ျဖင့္ ေမးနုိင္ပါတယ္။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZujg_jIMSBZfs-31pcdfo3OlFJgzP58F_x-f_gGob5OaRPkyZ5YxvSt2L5VyuJnVYHQBamotEm2rDz3ObFfckERRVkLLX5tqiC8TG20ulHAylQu1xnN-_h6QT_GYbasnLe5-HM2NG93Q/s1600/FACEBO~1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="174" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZujg_jIMSBZfs-31pcdfo3OlFJgzP58F_x-f_gGob5OaRPkyZ5YxvSt2L5VyuJnVYHQBamotEm2rDz3ObFfckERRVkLLX5tqiC8TG20ulHAylQu1xnN-_h6QT_GYbasnLe5-HM2NG93Q/s400/FACEBO~1.PNG" width="400" /></a></div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://demo-mrthangming.blogspot.com/2013/01/Facebook-Style-DropDown-Menu.html" style="font-size: 100%;" target="_blank" title="Go Check Out The Demo Live.. "><img height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq1T28UHnYJ5c-Ex3Ny43eJnOtCKu7-B5i89oMD567ndzdTkPp1fe3cKRx0wML9n1gBEjL1GQKWl3FDQaMGkarx4DR-ElThuqLOrbFtLAVoZiKijVBkhJJppCP25N1e44COnxUJle_gXw/s1600/live-demo-icon.jpg" width="180" /></a></div>
၁။<a href="http://blogger.com/" target="_blank" title="Enter Blogger">Sign In Blogger</a><br />
<br />
၂။ Layout<br />
<br />
၃။ Add a Gadget<br />
<br />
၄။ HTML/JavaScript<br />
<br />
၅။ ေအာက္က ေပးထာတဲ့ Cond ေလးကုိထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code"><style>

#thangmingnavbar {

background: #3B5998;

width: 100%;

color: #FFF;

margin: 10px 0;

padding: 0;

position: relative;

border-top:0px solid #960100;

height:35px;

}

#thangmingnav {

margin: 0;

padding: 0;

}

#thangming ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#thangmingnav li {

list-style: none;

margin: 0;

padding: 0;

}

#thangmingnav li a, #thangmingnav li a:link, #thangmingnav li a:visited {

color: #FFF;

display: block;

font:bold 12px Helvetica, sans-serif;

margin: 0;

padding: 9px 12px 11px 12px;

text-decoration: none;

border-right:0px solid #627AAD;

}

#thangmingnav li a:hover, #thangmingnav li a:active {

background: #627AAD;

color: #FFF;

display: block;

text-decoration: none;

margin: 0;

padding: 9px 12px 11px 12px;

}

#thangmingnav li {

float: left;

padding: 0;

}

#thangmingnav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 160px;

margin: 0;

padding: 0;

}

#thangmingnav li ul a {

width: 140px;

}

#thangmingnav li ul ul {

margin: -25px 0 0 161px;

}

#thangmingnav li:hover ul ul, #thangmingnav li:hover ul ul ul, #thangmingnav li.sfhover ul ul, #thangmingnav li.sfhover ul ul ul {

left: -999em;

}

#thangmingnav li:hover ul, #thangmingnav li li:hover ul, #thangmingnav li li li:hover ul, #thangmingnav li.sfhover ul, #thangmingnav li li.sfhover ul, #thangmingnav li li li.sfhover ul {

left: auto;

}

#thangmingnav li:hover, #thangmingnav li.sfhover {

position: static;

}

#thangmingnav li li a, #thangmingnav li li a:link, #thangmingnav li li a:visited {

background: #EDEFF4;

width: 120px;

color: #3B5998;

display: block;

font:normal 12px Helvetica, sans-serif;

margin: 1px 0 0 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

z-index:9999;

border:1px solid #ddd;

-moz-border-radius:4px;

-webkit-border-radius:4px;

}

#thangmingnav li li a:hover, #thangmingnav li li a:active {

background: #627AAD;

color: #FFF;

display: block;

}

#thangmingnav li li li a, #thangmingnav li li li a:link, #thangmingnav li li li a:visited {

background: #EDEFF4;

width: 120px;

color: #3B5998;

display: block;

font:normal 12px Helvetica, sans-serif;

padding: 9px 12px 10px 12px;

text-decoration: none;

z-index:9999;

border:1px solid #ddd;

margin: 1px 0 0  -14px;

}

#thangmingnav li li li a:hover, #thangmingnav li li li a:active {

background: #627AAD;

color: #FFF;

display: block;

}

</style>

<br />

<li>

</li>

<li>

<a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">About &amp; Contact</a>

</li>

<li>

<a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Windown </a>

</li>

<li>

<a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Myanmar Font</a>

</li>

<li>

<a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Free Download</a>

<ul>

<li><a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Template</a></li>

<li><a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Blogger Technology»</a>

<ul>

<li><a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Blogger Tutorial</a></li>

</ul>

</li>

</ul>

</li>

<li>

<a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Android Technology</a>

</li>

<li>

</li>

</ul>

</div>

</pre>
<br />
၆။ ထည့္ၿပီးရင္ Save ကုိနုိပ္ေပးလုိက္ပါ။</div>

Add Facebook Style DropDown Menu Bar To Blogger

ဒီေန႔တင္ေပးလုိက္တဲ့ ပုိ႔(စ္)ေလးကေတာ့ Blog မွာ Facebook Style DropDown Menu Bar ေလးထည့္နည္း/သုံးနည္းေလးပါ။ ဒီ Cond ေလးကုိေတာ့ က်ေနာ္ေလ့လာၿပ...

How To Add Animated CSS3 Bubble Buttons To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔တင္တဲ့ပုိ႔(စ္) ေလးကေတာ့ Animated CSS3 Bubble Buttons ေလးကုိဘေလာ့ ထည့္နည္း ေလးပါ။ သိၿပီးၾကေသာ မိတ္ေဆြေတြလည္းမ်ားနုိင္သလုိ မသိေသးတဲ့ မိတ္ေဆြေတြလည္းရွိေကာင္းရွိနုိင္ပါတယ္။ ဒါေၾကာင့္ မသိေသးတဲ့မိတ္ေဆြေတြ အတြက္ထပ္ေ၀မွ်ေပးလုိက္တာပါ။ ႀကဳိက္ၾကမယ္လုိ႔လည္း ေမွ်ာ္လင့္ပါတယ္။ ေအာက္မွာ Demo သြားၾကည့္နုိင္ရန္ လင့္(ခ္) နဲ႔ တကြ Cond လည္းေပးထားပါတယ္။ အဆင္မေျပတာရွိရင္ Comment မွာ ျပန္ေမးလုိ႔ရပါတယ္။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFocr7RQpXhZCxyr2Du33QpSo1dwY6tMYzmwP-H5YWRHbtlsQVd_7IWNWkQbhByjK4NE0IgzEwcyamoauMXFVahxmn8AWXLEL3xBMH_ARiH6hr7TfqyoNZ0pctjQI8G98JY746zALEbH0/s1600/live+demo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Animated CSS3 Bubble Buttons"><img border="0" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFocr7RQpXhZCxyr2Du33QpSo1dwY6tMYzmwP-H5YWRHbtlsQVd_7IWNWkQbhByjK4NE0IgzEwcyamoauMXFVahxmn8AWXLEL3xBMH_ARiH6hr7TfqyoNZ0pctjQI8G98JY746zALEbH0/s1600/live+demo.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://exe-idea.blogspot.com/2012/10/blog-post_28.html" target="_blank" title="Go Check Out The Demo Live"><span style="font-size: large;">Preview</span></a></div>
 ၁။<a href="http://blogger.com/" target="_blank" title="Enter Blogger">Sign In Blogger</a><br />
<br />
၂။ Template<br />
<br />
၃။ Edit HTML<br />
<br />
 ၄။ Proceed<br />
<br />
၅။ ေအာက္က Cond ကုိရွာ ပါ။ Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။<br />
<br />
<pre class="cpp" name="code">]]></b:skin>
</pre>
<br />
<br />
၆။ ေတြ႕ၿပီးဆုိရင္ ]]></b:skin> ရဲ႕ အေပၚမွာ ေအာက္က Cond ကုိ ထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code">.button {
    font: 15px Calibri, Arial, sans-serif;
/* A semi-transparent text shadow */
    text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
/* Overriding the default underline styling of the links */
    text-decoration: none !important;
    white-space: nowrap;
    display: inline-block;
    vertical-align: baseline;
    position: relative;
    cursor: pointer;
    padding: 10px 20px;
    background-repeat: no-repeat;
/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */
    background-position: bottom left;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png');
/* Multiple backgrounds version. The background images
are defined individually in color classes */
    background-position: bottom left, top right, 0 0, 0 0;
    background-clip: border-box;
/* Applying a default border raidus of 8px */
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
/* A 1px highlight inside of the button */
    -moz-box-shadow: 0 0 1px #fff inset;
    -webkit-box-shadow: 0 0 1px #fff inset;
    box-shadow: 0 0 1px #fff inset;
/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}
.button:hover {
/* The first rule is a fallback, in case the browser
does not support multiple backgrounds
*/
    background-position: top left;
    background-position: top left, bottom right, 0 0, 0 0;
}
.button:active {
/* Moving the button 1px to the bottom when clicked */
    bottom: -1px;
}
/* The three buttons sizes */
.button.big {
    font-size: 30px;
}
.button.medium {
    font-size: 18px;
}
.button.small {
    font-size: 13px;
}
/* A more rounded button */
.button.rounded {
    -moz-border-radius: 4em;
    -webkit-border-radius: 4em;
    border-radius: 4em;
}
/* Defining four button colors */
/* BlueButton */
.blue.button {
    color: #0f4b6d !important;
    border: 1px solid #84acc3 !important;
/* A fallback background color */
    background-color: #48b5f2;
/* Specifying a version with gradients according to */
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient(    center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'),
-webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover {
    background-color: #63c7fe;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient(    center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'),
-webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button {
    color: #345903 !important;
    border: 1px solid #96a37b !important;
    background-color: #79be1e;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover {
    background-color: #89d228;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button {
    color: #693e0a !important;
    border: 1px solid #bea280 !important;
    background-color: #e38d27;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);

background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
.gray.button {
    color: #525252 !important;
    border: 1px solid #a5a5a5 !important;
    background-color: #a9adb1;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover {
    background-color: #b6bbc0;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}</pre>
<br />
ရ။ ထည့္ၿပီးရင္ Save Template ကုိ နုိပ္ေပးလုိက္ပါ။<br />
<br />
၈။ Animated CSS3 Bubble Buttons ျဖင့္ေပၚေစခ်င္တဲ့ စာကုိ ေအာက္က Cond အတုိင္ ထည့္ေပးလုိက္ပါ။ <span style="background-color: white; line-height: 20px; text-align: left;"> </span><span style="background-color: white; line-height: 20px; text-align: left;">HTML Cond ထည့္လုိ႔ရတဲ့ ေနရာေတြမွာ ထည့္သြင္းအသုံးျပဳနုိင္ပါတယ္။</span><br />
<span style="background-color: white; line-height: 20px; text-align: left;"><br /></span>
<u><span style="color: blue; font-size: large;"><span style="background-color: white; line-height: 20px; text-align: left;">၁။ </span><span style="line-height: 20px;">HTML For Big Button</span></span></u><br />
<span style="background-color: white; line-height: 20px; text-align: left;"><br /></span>
<span style="background-color: white; line-height: 20px; text-align: left;"></span><br />
<pre class="cpp" name="code"><a href="LINK HERE" class="button big blue">TEXT HERE</a></pre>
<br />
<span style="color: blue; font-size: large;"><u>2။ <span style="background-color: white; line-height: 20px; text-align: left;">HTML For Medium Button</span></u></span><br />
<span style="background-color: white; line-height: 20px; text-align: left;"><span style="color: blue; font-size: large;"><u><br /></u></span></span>
<span style="background-color: white; line-height: 20px; text-align: left;"></span><br />
<pre class="cpp" name="code"><a href="LINK HERE" class="button blue medium">TEXT HERE</a></pre>
<br />
<span style="color: blue; font-size: large;"><u>3။ <b style="background-color: white; line-height: 20px; text-align: left;">HTML For Small Button</b></u></span><span style="background-color: white; color: #343333; font-size: 12px; line-height: 20px; text-align: left;"> </span><br />
<span style="background-color: white; color: #343333; font-size: 12px; line-height: 20px; text-align: left;"><br /></span>
<span style="background-color: white; line-height: 20px; text-align: left;"></span><br />
<pre class="cpp" name="code"><a href="LINK HERE" class="button small blue">TEXT HERE</a></pre>
<br />
<div style="text-align: left;">
<span style="color: blue; font-size: large;"><u><span style="line-height: 20px;">4။ </span><b style="background-color: white; line-height: 20px;">HTML For Small Rounded Buttons
</b></u></span></div>
<br />
<pre class="cpp" name="code"><a href="LINK HERE" class="button small blue rounded">TEXT HERE</a>
</pre>
<br />
မွတ္ခ်က္။  ။ blue ေနရာ မွာ မိမိ ႀကဳိက္တဲ့ အေရာင္/Colour

ေျပာင္းနုိင္ပါတယ္။</div>

How To Add Animated CSS3 Bubble Buttons To Blogger

ဒီေန႔တင္တဲ့ပုိ႔(စ္) ေလးကေတာ့ Animated CSS3 Bubble Buttons ေလးကုိဘေလာ့ ထည့္နည္း ေလးပါ။ သိၿပီးၾကေသာ မိတ္ေဆြေတြလည္းမ်ားနုိင္သလုိ မသိေသးတဲ့ မိတ...

ဘေလာ့မွာ Fancy CSS3 & jQuery Lavalamp Menu သုံးခ်င္းရင္

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီပုိ့(စ္)ေလးကေတာ့  Fancy CSS3 & jQuery Lavalamp Menu  ေလးသုံးခ်င္သူေတြအတြက္ သတင္းေကာင္းေလးပါ။ ဘေလာ့ေတြမွာ သုံးတဲ့သူ သိပ္မွသေလာက္ ပဲ။ မႀကဳိက္ၾကတာလာေတာ့ မသိပါ။ က်ေနာ္ အျမင္ေျပာရရင္ ဒီ  Fancy CSS3 & jQuery Lavalamp Menu ေလးဟာ ေကာင္းတယ္လုိ့ျမင္တာပဲ။ ေအာက္မွာ DEMO ပုံ နွင့္တကြ Cond ေလးေပးထားပါတယ္။<br />
<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsgVykfHLbAHLMmlnkhqr0mkgJ_S9TUNuHEMK85l15REAXoOpzPc_iUC_l3R5HHfcR29GbYlVkC6D1kdgQgSIA-Y_OeSLRVUWCMqRRqSz9ZWS6iEbBz3jbcENruDmWE_TMB-GWvFLua3w/s1600/mr+thangming.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsgVykfHLbAHLMmlnkhqr0mkgJ_S9TUNuHEMK85l15REAXoOpzPc_iUC_l3R5HHfcR29GbYlVkC6D1kdgQgSIA-Y_OeSLRVUWCMqRRqSz9ZWS6iEbBz3jbcENruDmWE_TMB-GWvFLua3w/s1600/mr+thangming.jpg" /></a></div>
</div>
</div>
<span style="color: purple; font-size: large;">အဆင့္ ၁။</span><br />
၁။ Design 
<br />
<br />
၂။ Edit HTML <br />
<br />
၃၊၊ Proceed
<br />
<br />
၅။ ေအာက္က Cond ကုိရွာပါ။
<br />
<pre class="cpp" name="code">]]></b:skin>

</pre>
</div>
ေတြ့ၿပီးဆုိရင္ ]]></b:skin> ရဲ့ အေပၚမွာ ေအာက္က Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code">/*LAVALAMP MENU BY http://www.mrthangming.blogspot.com/ START*/

.lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
 -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
 height: 18px;
        font-family: calibri;
}

.magenta {
 background : rgb(190,64,120);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 border: 1px solid #841144;
 
}

.cyan {
 background : rgb(64,181,197);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 border: 1px solid #2f8893;
 
}

.yellow {
 background : rgb(255,199,79);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 border: 1px solid #c08c1f;
 
}

.orange {
 background : rgb(255,133,64);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 border: 1px solid #c04f11;
 
}

.dark {
 background : rgb(89,89,89);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 border: 1px solid #272727;
 
}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
 color: #fff;
 text-shadow: 0 -1px 0 rgba(0,0,0,.40);
 
}

.lavalamp a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}

.lavalamp ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}

.lavalamp ul li {
    list-style: none;
    float:left;

text-align: center;
    }

.lavalamp ul li a {
    padding: 0 20px;
    text-align: center;
    }

.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}

/*LAVALAMP MENU BY http://www.mrthangming.blogspot.com/ END*/

</pre>
၆။ ေအာက္က Cond ကုိ ထပ္ရွာပါ။<br />
<br />
<pre class="cpp" name="code"></head>

</pre>
</div>
ေတြ့ၿပီးဆုိရင္ </hrad> ရဲ့ ေအာက္မွာ ေအာက္က Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။</div>
<pre class="cpp" name="code"><script src="http://yourjavascript.com/2832232611/CSS3-Mrthangming.js" type="text/javascript"></script>
</pre>
ထည့္ၿပီးရင္ Save Template ကုိနုိပ္လုိက္ပါ။

<br />
<br />
<span style="color: purple; font-size: large;">အဆင့္ ၂။ </span><br />
<br />
၁။ Design<br />
<br />
၂။ Layout<br />
<br />
၃။ Add a Gadget<br />
<br />
၄။ HTML/JavaScript<br />
<br />
ေအာက္က Cond ေလးကုိ ထည့္ေပးလုိက္ပါ။<br />
<pre class="cpp" name="code"><div class="lavalamp dark">

<ul>

<li><a href="ဒီေနရာမွာ လင့္ထည့္ပါ">About</a></li>

<li><a href="ဒီေနရာမွာ လင့္ထည့္ပါ">Services</a></li>

<li><a href="ဒီေနရာမွာ လင့္ထည့္ပါ">Porfile</a></li>

<li><a href="ဒီေနရာမွာ လင့္ထည့္ပါ">Contacts</a></li>

<li><a href="ဒီေနရာမွာ လင့္ထည့္ပါ">Software</a></li>

</ul>

</div>
</pre>
<br />
ထည့္ၿပီးရင္  Save နုိပ္လုိက္ပါ။<br /><br /> မွတ္ခ်က္။  ။<span style="line-height: 15px; white-space: pre;"><span style="background-color: white;"><span style="color: purple;"><div class="lavalamp </span><b>dark</b></span><span style="color: purple;"><span style="background-color: white;">"> </span><span style="background-color: #76a5af;">
</span></span><span style="background-color: white;">ေနရာတြင္မိမိႀကဳိက္ရာ အေရာင္ ေျပာင္းနုိင္ပါတယ္။ <b>dark</b> ေနရာ </span></span><span style="background-color: white; line-height: 20px; text-align: -webkit-auto;"><span style="color: yellow;"><b>yellow</b></span><span style="color: yellow; font-weight: bold;">, </span><span style="color: red;"><b>red</b></span><span style="color: red; font-weight: bold;"> </span>စသည့္အေရာင္မ်ဳိးစုံ ေျပာင္းလုိ့ရပါတယ္။</span><br />
<div class="lavalamp dark">
</div>
</div>

ဘေလာ့မွာ Fancy CSS3 & jQuery Lavalamp Menu သုံးခ်င္းရင္

ဒီပုိ့(စ္)ေလးကေတာ့ Fancy CSS3 & jQuery Lavalamp Menu ေလးသုံးခ်င္သူေတြအတြက္ သတင္းေကာင္းေလးပါ။ ဘေလာ့ေတြမွာ သုံးတဲ့သူ သိပ္မွသေလာက္ ပ...

ဘေလာ့မွာ CSS Spotlight Menu သုံးခ်င္ရင္

<div dir="ltr" style="text-align: left;" trbidi="on">
ဒါေလးကေတာ့ CSS Spotlight Menu လုိ့ေခၚပါတယ္။ျမန္မာဘေလာ့ေတြမွာေတာ့<br />
သုံးတဲ့သူမရွိသေလာက္ပဲလုိ့ေျပာရရင္ရပါတယ္။မႀကဳိက္ၾကတာလားမသိ!<br />
 Menu ကုိ Mouse နဲ့ ထိလုိက္ရင္Menu ၀ုိင္းထားတဲ့ Design တစ္မ်ဳိးလည္းျဖစ္ပါတယ္။<br />
ေအာက္မွာ DEMO ပုံနဲ့ Cond ေလးေပးထားပါတယ္။ ႀကဳိက္ရင္ယူသုံးၾကည့္လုိက္ပါ။<br />
<br />
<a href="http://www.blogger.com/blogger.g?blogID=7388332448929021318" name="more"></a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUO0qAOfIz0ffp9iESbyQe19GtLCZYYniLoqaARoStvQReTG66KnaBi5ELDMkjl7-FybwDwrt74SBidc_wuCQQcZeSXtf9GTE_u3wJKawcdsYWNXs5qxQWWq45F8AGSLrPtdaRk7z0ZHWy/s1600/mrthang.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="153" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUO0qAOfIz0ffp9iESbyQe19GtLCZYYniLoqaARoStvQReTG66KnaBi5ELDMkjl7-FybwDwrt74SBidc_wuCQQcZeSXtf9GTE_u3wJKawcdsYWNXs5qxQWWq45F8AGSLrPtdaRk7z0ZHWy/s320/mrthang.png" width="320" /></a></div>
<div class="spotlightmenu">
၁။Design<br />
<br />
 ၂။Layout<br />
<br />
 ၃။Add a Gadget<br />
<br />
 ၄၊၊HTML/JavaScript<br />
<br />
၅။ေအာက္ကေပးထားေသာ cond ေလးကုိထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code">  <div class="circlemenu">

<ul>

<li><a href="http://www.mrthangming.blogspot.com/new.htm"><span>photo</span></a></li>

<li><a href="http://www.mrthangming.blogspot.com"><span>songs</span></a></li>

<li><a href="http://www.mrthangming.blogspot.com"><span>links</span></a></li>

<li><a href="http://www.mrthangming.blogspot.com"><span>abuot me</span></a></li>

</ul>

</div>

<div>
</div>
</pre>
<br />
<div>
ထည့္ျပီရင္ save နုိပ္လုိက္ပါ။  မျပီေသးပါဘူး<br />
<br />
ေအာက္ကေနရာတြင္ ထပ္သြားပါ။<br />
<br />
၁။Design<br />
<br />
 ၂။Edit HTML<br />
<br />
၃။Proceed<br />
<br />
၄။ေအာက္က cond ေလးကုိရွာပါ<br />
<br />
<span style="color: purple;">]]></b:skin></span><br />
<br />
 ၅။ေအာက္ကေပးထားေသာ cond ေလးကုိ]]></b:skin>ရဲ့အေပၚမွာ<br />
ထည့္ေပးလုိက္ပါ။ <br />
<br />
<pre class="cpp" name="code"> <<style type="text/css">  .spotlightmenu{ width: 100%; overflow:hidden; }  .spotlightmenu ul{ margin: 0; padding: 0; font: bold 14px Verdana; /* font style and size */ list-style-type: none; text-align: center; /* "left", "center", or "right" align menu */ }  .spotlightmenu li{ display: inline-block; position:relative; padding: 5px; margin: 0; margin-right: 5px; /* right margin between menu items */ }   .spotlightmenu li a{ display:inline-block; padding: 5px; min-width:50px; /* horizontal diameter of spotlight */ height:50px; /* vertical diameter of spotlight */ text-decoration: none; color: black; margin: 0 auto; overflow:hidden; -moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */ -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }  .spotlightmenu li:hover a{ color: white; background: #a71b15; /* background color of spotlight */ -webkit-border-radius: 50%; /* large radius to create circular borders */ -moz-border-radius: 50%; border-radius: 50%; }  .spotlightmenu li a span{ position:relative; top:35%; /* move text down so it appears centered within menu item */ }  </style>

</pre>
<br />
၆။ ထည့္ၿပီးရင္ Save Template ကုိ ႏွိပ္ေပးလုိက္ပါ။<br />
<br /></div>
</div>
</div>

ဘေလာ့မွာ CSS Spotlight Menu သုံးခ်င္ရင္

ဒါေလးကေတာ့ CSS Spotlight Menu လုိ့ေခၚပါတယ္။ျမန္မာဘေလာ့ေတြမွာေတာ့ သုံးတဲ့သူမရွိသေလာက္ပဲလုိ့ေျပာရရင္ရပါတယ္။မႀကဳိက္ၾကတာလားမသိ! Menu ကုိ Mou...

ဘေလာ့မွာ Horizontal Menu ေလးသုံးခ်င္ရင္

<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီပုိ့စ္ေလးကေတာ့ Horizontal Menu ေလးေပါ့ေနာ္။သုံးခ်င္တဲ့မိတ္ေဆြေတြအတြက္<br />
တင္ေပးလုိက္ပါတယ္ဗ်ာ။ cond ေလးကအရမ္းေပးလြယ္ပါတယ္။ႀကဳိက္ရင္ယူသုံး<br />
ၾကည့္လုိက္ၾကေပါ့။ဟီးဟီး>>>><br />
<br />
<br />
<a href="http://www.blogger.com/blogger.g?blogID=7388332448929021318" name="more"></a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtMWMc92Qog5Ez2geqrFGWm_TptTLWxqdGh-JPNpO_YcRkBbHXyHi6dVUAB1uBPDtGcKGqe5a-KQBgTgjG1ToZMXr-NQ6_eUy3h3-fyNKvi-dj8lGunu61ZbJ34VP7pGVpnGdC_oixRuaP/s1600/mrthangming.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtMWMc92Qog5Ez2geqrFGWm_TptTLWxqdGh-JPNpO_YcRkBbHXyHi6dVUAB1uBPDtGcKGqe5a-KQBgTgjG1ToZMXr-NQ6_eUy3h3-fyNKvi-dj8lGunu61ZbJ34VP7pGVpnGdC_oixRuaP/s320/mrthangming.PNG" width="480" /></a></div>
ေအာက္က နမွူနာ အတုိင္ျမင္ရမွာပါ<br />
<table align="center"><tbody>
<tr><td><table align="center" border="1" cellpadding="7"><tbody>
<tr><td><a href="http://mrthangming.blogspot.com/">Home</a></td><td><a href="http://mrthangming.blogspot.com/">Photos </a></td><td><a href="http://mrthangming.blogspot.com/">Videos  </a></td><td><a href="http://mrthangming.blogspot.com/">Misic</a></td><td><a href="http://mrthangming.blogspot.com/">download</a></td><td><a href="http://mrthangming.blogspot.com/">Links</a></td><td><a href="http://mrthangming.blogspot.com/">Windown 7</a></td><td><a href="http://mrthangming.blogspot.com/">Sign In</a></td></tr>
</tbody></table>
</td></tr>
</tbody></table>
၁။Design<br />
<br />
 ၂။Layout<br />
<br />
 ၃။Add a Gadget<br />
<br />
 ၄၊၊HTML/JavaScript<br />
<br />
၅။ေအာက္ကေပးထားေသာ cond ေလးကုိထည့္ေပးလုိက္ပါ။<br />
<br />
<br />
<pre class="cpp" name="code"> <table align="center">

<tr><td><a href="http://mrthangming.blogspot.com">Home</a> </td><td><a href="http://mrthangming.blogspot.com">Photos </a> </td><td><a href="http://mrthangming.blogspot.com">Videos  </a> </td><td><a href="http://mrthangming.blogspot.com">Misic</a> </td><td><a href="http://mrthangming.blogspot.com">download</a> </td><td><a href="http://mrthangming.blogspot.com">Links</a> </td><td><a href="http://mrthangming.blogspot.com">Windown 7</a> </td><td><a href="http://mrthangming.blogspot.com">Sign In</a> </td></tr>

</table>

</td></tr>

</table>

<div>
</div>
</pre>
ထည့္ျပီရင္ save နုိပ္လုိက္ပါ။<br />
<br />
မ်တ္ခ်က္။  ။http://mrthangming.blogspot.com ေနရာ တြင္မိမိႀုကဳိက္ရာလင့္ခ္ထည့္ ေပးပါ။<br />
                  home,photos စသည့္ေနရာတြင္လည္း မိမိႀကဳိက္ရာအမည္ေပးပါ။</div>

ဘေလာ့မွာ Horizontal Menu ေလးသုံးခ်င္ရင္

ဒီပုိ့စ္ေလးကေတာ့ Horizontal Menu ေလးေပါ့ေနာ္။သုံးခ်င္တဲ့မိတ္ေဆြေတြအတြက္ တင္ေပးလုိက္ပါတယ္ဗ်ာ။ cond ေလးကအရမ္းေပးလြယ္ပါတယ္။ႀကဳိက္ရင္ယူသုံး ၾ...

Mr ThangMing

Add Facebook Style DropDown Menu Bar To Blogger

How To Add Animated CSS3 Bubble Buttons To Blogger

ဘေလာ့မွာ Fancy CSS3 & jQuery Lavalamp Menu သုံးခ်င္းရင္

ဘေလာ့မွာ CSS Spotlight Menu သုံးခ်င္ရင္

ဘေလာ့မွာ Horizontal Menu ေလးသုံးခ်င္ရင္

Activity Find

Labels

Archives