Mr.K-night

Tuesday, August 11, 2015

ဘေလာ့မွာ Drop Down Menu ေလးလုပ္နည္း

By Paing Thu Kha8:03 AMBlogger နည္းပညာမ်ားNo comments

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

ပုံေလးေတြ ၾကည့္ျပီးးလုိက္ စမ္းၾကည့္လိုက္ပါ

အဆင့္ 1 ဘေလာ့ကာ၀င္လိုက္ပါ > Page Elements >Layout> 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="#">facebook</a></li>
<li><a href="#">gmail-gtalk</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="#">contact me</a></li>
</ul>
</div>

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

အဆင္႕ 4 ဘေလာ့ကာရဲ႕ Template > Edit HTML >process> 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;
}

ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
ဘေလာ့ဆုိင္ရာနည္းပညာမ်ား{ ဒီမွာ } သြားလိုက္ပါ
စြယ္စုံစာအုပ္စင္{ ဒီမွာ } သြားလိုက္ပါ

ေခါင္းစဥ္ Menu လွလွေလး လုပ္လိုပါက

By Paing Thu Kha7:58 AMBlogger နည္းပညာမ်ားNo comments

သည္နည္းေလးကေတာ့ ဘေလာ့မိတ္ေဆြမ်ားအတြက္ ေါခင္းစဥ္ေလးေတြကို လွလွပပေလးနဲ႕
မိမိတို႕ဘေလာ့ေဘးကေန ထားျခင္တယ္ဆိုရင္ ယူလုိက္ၾကပါေနာ္..ပုံေလးျပထားသလိုပါဘဲ..
အရမ္းလွပါတယ္ဗ်ာ... အေပၚမွာ မထားျခင္ဘဲ ေဘးမွာ သည္လိုေလး လွလွပပထားမယ္ဆိုလည္း
သင့္ဘေလာ့ေလး လွပေနမွာေသျခာပါတယ္..စမ္းၾကည့္ပါေနာ္..

ထည့္နည္းကေတာ့ ရိုးရွင္းလြယ္ကူလွပါတယ္..
    ►1. Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2. Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕ Dashboard ကေနေပါ့
   ►3. Page Elements
   ►4. Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►5. HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►6. ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

<center><div id="menu">
<ul>
<li><a class="current" href="http://aungsanmks.blogspot.com">မူလစာမ်က္ႏွာ</a></li>
<li><a href="http://aungsanmks.blogspot.com">ကဗ်ာ</a></li>
<li><a href="http://aungsanmks.blogspot.com">ေဆာင္းပါး</a></li>
<li><a href="http://aungsanmks.blogspot.com">ဗဟုသုတ</a></li>
<li><a href="http://aungsanmks.blogspot.com">သီခ်င္း</a></li>
<li><a href="http://aungsanmks.blogspot.com">ေဆာ့၀ဲလ္</a></li>
<li><a href="http://aungsanmks.blogspot.com">ဘေလာ့ပညာ</a></li>
<li><a href="http://aungsanmks.blogspot.com">contact us</a></li>
</ul>
</div></center>
<style>
/* --------------------------
AUTHOR : STYLED MENUS
URL : http://www.styledmenus.com
Copyrights by STYLED MENUS
Widget From http://bloggerstop.Net
----------------------------*/
*{
margin:0;
padding:0;
}
#menu{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5jZSjofacXc4VhzKaEI1AcczovxvlZLTIt-5Ax4uNvBDyzlkUKd6ojTZlekPvfDOeKm-0qf3HYLuRMH63VL55jWBD2IJYtujUxzlnqzl9kiPWZt4GpD7870YZJ2DxDokzikv8l3rB4ZM/s1600/menu_026_bg.jpg) no-repeat;
width:172px;
height:191px;
padding:15px;
}
#menu ul{
list-style:none;
padding:0 0 0 8px;
}
#menu li{
list-style:none;
display:block;
padding:10px 0;
}
#menu li a{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikfQcRvzOsKu4yuxxOmDF3E3o5GD9gUddXJOIb4WaD_J2HI574aDlSLRJA3XMHen5FqriFiuxjHuKZ4CMispZ54a1vetyfq0_POlueAQm_WlIlpQ9jwopceIg1qSQpEJ4cMjLh3xVwQTA/s1600/menu_026_b.gif) no-repeat left center;
color:#ffe991;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
line-height:1.2em;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBL2WPzLA-uQ3ByDAbGB37vY6gWiVozcHOtrkqCebxCDEI3Ge7qMVj4rPKKchUKWfYKZbbMYUyWvA4IFeaChGOf9uO5TdfphKwaLsVTGyf6yuqCqD1Rf7ej9wJPDX8_9LwRPDnwSIjURg/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
#menu li .current{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBL2WPzLA-uQ3ByDAbGB37vY6gWiVozcHOtrkqCebxCDEI3Ge7qMVj4rPKKchUKWfYKZbbMYUyWvA4IFeaChGOf9uO5TdfphKwaLsVTGyf6yuqCqD1Rf7ej9wJPDX8_9LwRPDnwSIjURg/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a.current, #menu li a:hover.current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBL2WPzLA-uQ3ByDAbGB37vY6gWiVozcHOtrkqCebxCDEI3Ge7qMVj4rPKKchUKWfYKZbbMYUyWvA4IFeaChGOf9uO5TdfphKwaLsVTGyf6yuqCqD1Rf7ej9wJPDX8_9LwRPDnwSIjURg/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
</style>

မွတ္ခ်က္ ။ ။http://aungsanmks.blogspot.com ေနရာမွာ သင့္ဘေလာ့ လိပ္စာအစားထိုးပါ။ ေခါင္းစဥ္ေတြကို လိုအပ္သလို ေကာ္ပီယူ ပြါးနိဳင္ပါတယ္...

ကဗ်ာ-ေဆာင္းပါး-ဗဟုသုတ အသရွိတဲ့ ေနရာမွာ သင္ထည့္လိုရာေရးပါ

လွပေသသပ္တဲ့ menu ေလးပိုင္ဆိုင္ပါျပီ။

ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ အဆင္မေျပတာမ်ားရွိခဲ့ပါက...

Easy Menu For Your Blog

By Paing Thu Kha5:32 AMBlogger နည္းပညာမ်ားNo comments

ဘေလာ့ဆိုတဲ့ နယ္ေျမထဲမွ၀င္ေရာက္စ သူငယ္ခ်င္းေတြအတြက္ အဆင္ေျပေခ်ေမြ႕႔ေစတဲ့ Menu အလြယ္ကူဆုံးထည့္နည္းေလးပါ... ဒါေလးကေတာ့ ဘယ္ html ေတြ ဘာေတြမွလဲ ၀င္စရာမလိုေတာ့ပါဘူး မိမိဘေလာ့ရဲ႕ layout ကေန အလြယ္တကူထည့္နိဳင္မွာ ျဖစ္ပါတယ္..
ကဲ ထည့္နည္းနဲ႕ ကုဒ္ေတြကို ေအာက္မွာ ေပးလို္ကတယ္ေနာ္..အရင္ကလဲ မ်ားစြာ တင္ေပးဘူးပါတယ္.... အလြယ္တကူထည့္နိဳင္တဲ့နည္းလမ္းေတြကိုေပါ့...
ၾကိဳက္တာ ယူသုံးနိဳင္ပါတယ္..

မွတ္ခ်က္ ။ ။ ပုံက သေဘာျပထားတာပါ အဲတိုင္းမဟုတ္ပါဘူးးးဟိဟိ..
# ေနရာမွာမိမိတို႕ လင့္ကိုထည့္ပါ.... link ခ်ိတ္နည္းမသိပါက သည္မွာ ေလ့လာလုိက္ပါ.။

Dropdown Menu လွလွေလးဖန္တီးၾကမယ္

By Paing Thu Kha5:27 AMBlogger နည္းပညာမ်ားNo comments

ခုတင္တဲ့ နည္းလမ္းေလးကေတာ့ ခဏခဏ တင္ေပးထားဘူးတဲ့ dropdown menu ဆိုတဲ့ ေခါင္းစဥ္ လွလွ
နည္းလမ္းေလးတစ္ခုပါဘဲ.. ဒါေပမယ့္ တမ်ိဳးတမ်ိဳးဆီ အဆင္ေျပသလို သုံးစြဲနိဳင္ရန္အတြက္ တင္ျပေပးလုိက္ျခင္းျဖစ္ပါတယ္...
လုပ္နည္းနဲ႕ လိုအပ္တဲ့ ကုဒ္ေတြ ကို ေအာက္မွာဆက္လက္ ေလ့လာလုိက္ပါေနာ္..

►1- Blogger Singin ၀င္လိုက္ပါ။
►2- Dashboard ကိုသြားလိုက္ပါ။
►3- Template    ကိုကလစ္ပါ..။
►4- Edit Html   ကို၀င္ပါ.. Process ကိုကလစ္ျပီးဆက္၀င္လုိက္ပါ။
►5- Ctrl+F (သို႕မဟုတ္) F3 အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

   ]]></b:skin>    ကုဒ္ကိုရွာလုိက္ပါ ေတြ႕တာနဲ႕ သူ႕အေပၚမွာ သူမတုိင္မွီေပါ့
ေအာက္ကေပးထားတဲ့ကုဒ္ေတြကို ထည့္ေပးလုိက္ပါေနာ္....မေတြ႕ပါက b:skin ကိုသာရွာလိုက္ပါ ေတြ႕တာနဲ႕ သူ႕ေရွ႕က မွ်ားနက္ေလးကိုကလစ္ ျဖည္လုိက္ပါ ေနာက္ အန္းတား ေခါက္ပါ လိုျခင္ေသာကုဒ္ ေတြ႕ပါျပီ

/* Flying Css3 menu www.bloggertrix.com*/  #flyingmenubt,#flyingmenubt ul {     list-style: none outside none;     margin: 0;     padding: 0;     height:500px;} #flyingmenubt {     font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;     font-size: 13px;     height: 36px;     list-style: none outside none;     margin: 40px auto;     text-shadow: 0 -1px 3px #202020;     width: 980px;     -moz-border-radius:4px;     -webkit-border-radius:4px;     border-radius:4px;     -moz-box-shadow: 0px 3px 3px #cecece;     -webkit-box-shadow: 0px 3px 3px #cecece;     box-shadow: 0 3px 4px #8b8b8b;     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));     background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);     background-color:#5f5f5f; } #flyingmenubt ul {     left: -9999px;     position: absolute;     top: -9999px;     z-index: 2; } #flyingmenubt li {     border-bottom: 1px solid #575757;     border-left: 1px solid #929292;     border-right: 1px solid #5d5d5d;     border-top: 1px solid #797979;     display: block;     float: left;     height: 34px;     position: relative;     width: 105px; } #flyingmenubt li:first-child {     border-left: 0 none;     margin-left: 5px; } #flyingmenubt li a {     color: #FFFFFF;     display: block;     line-height: 34px;     outline: medium none;     text-align: center;     text-decoration: none;     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));     background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);     background-color:#5f5f5f; }  /* keyframes #animation1 */ @-webkit-keyframes animation1 {     0% {-webkit-transform: scale(1);}     30% {-webkit-transform: scale(1.3);}     100% {-webkit-transform: scale(1);}} @-moz-keyframes animation1 {     0% {-moz-transform: scale(1);}     30% {-moz-transform: scale(1.3);}     100% {-moz-transform: scale(1);}} #flyingmenubt li > a:hover {      -moz-animation-name: animation1;     -moz-animation-duration: 0.7s;     -moz-animation-timing-function: linear;     -moz-animation-iteration-count: infinite;     -moz-animation-direction: normal;     -moz-animation-delay: 0;     -moz-animation-play-state: running;     -moz-animation-fill-mode: forwards;     -webkit-animation-name: animation1;     -webkit-animation-duration: 0.7s;     -webkit-animation-timing-function: linear;     -webkit-animation-iteration-count: infinite;     -webkit-animation-direction: normal;     -webkit-animation-delay: 0;     -webkit-animation-play-state: running;     -webkit-animation-fill-mode: forwards; } #flyingmenubt li:hover > a {     z-index: 4; } #flyingmenubt li:hover ul.subs {     left: 0;     top: 34px;     width: 150px; } #flyingmenubt ul li {     background: none repeat scroll 0 0 #838383;     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);     opacity: 0;     width: 100%;     /*-webkit-transition:all 0.3s ease-in-out;     -moz-transition:all 0.3s ease-in-out;     -o-transition:all 0.3s ease-in-out;     -ms-transition:all 0.3s ease-in-out;     transition:all 0.3s ease-in-out;*/ }  /* keyframes #animation2 */ @-webkit-keyframes animation2 {     0% {margin-left:185px;}     100% {margin-left:0px;opacity:1;} } @-moz-keyframes animation2 {     0% {margin-left:185px;}     100% { margin-left:0px;opacity:1;} } #flyingmenubt li:hover ul li {     /* css3 animation */     -moz-animation-name: animation2;     -moz-animation-duration: 0.3s;     -moz-animation-timing-function: linear;     -moz-animation-iteration-count: 1;     -moz-animation-direction: normal;     -moz-animation-delay: 0;     -moz-animation-play-state: running;     -moz-animation-fill-mode: forwards;     -webkit-animation-name: animation2;     -webkit-animation-duration: 0.3s;     -webkit-animation-timing-function: linear;     -webkit-animation-iteration-count: 1;     -webkit-animation-direction: normal;     -webkit-animation-delay: 0;     -webkit-animation-play-state: running;     -webkit-animation-fill-mode: forwards;      /*-webkit-transition:all 0.3s ease-in-out;     -moz-transition:all 0.3s ease-in-out;     -o-transition:all 0.3s ease-in-out;     -ms-transition:all 0.3s ease-in-out;     transition:all 0.3s ease-in-out;*/ } /* animation delays */ #flyingmenubt li:hover ul li:nth-child(1) {     -moz-animation-delay: 0;     -webkit-animation-delay: 0; } #flyingmenubt li:hover ul li:nth-child(2) {     -moz-animation-delay: 0.05s;     -webkit-animation-delay: 0.05s; } #flyingmenubt li:hover ul li:nth-child(3) {     -moz-animation-delay: 0.1s;     -webkit-animation-delay: 0.1s; } #flyingmenubt li:hover ul li:nth-child(4) {     -moz-animation-delay: 0.15s;     -webkit-animation-delay: 0.15s; } #flyingmenubt li:hover ul li:nth-child(5) {     -moz-animation-delay: 0.2s;     -webkit-animation-delay: 0.2s; } #flyingmenubt li:hover ul li:nth-child(6) {     -moz-animation-delay: 0.25s;     -webkit-animation-delay: 0.25s; } #flyingmenubt li:hover ul li:nth-child(7) {     -moz-animation-delay: 0.3s;     -webkit-animation-delay: 0.3s; } #flyingmenubt li:hover ul li:nth-child(8) {     -moz-animation-delay: 0.35s;     -webkit-animation-delay: 0.35s; }

ေနာက္ save template လုပ္နိဳင္ပါတယ္...
ျပီးတာနဲ႕ ေနာက္တဆင့္ ထပ္လုပ္ဖို႕ က်န္ပါေသးးတယ္ ေအာက္မွာ ဆက္ေလ့လာပါေနာ္

   ►1. Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2. Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕ Dashboard ကေနေပါ့
   ►3. Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4. HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5. ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

<ul id="flyingmenubt">
    <li><a href="http://www.bloggertrix.com/">Home</a></li>
    <li><a class="hsubs" 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 class="hsubs" href="http://www.bloggertrix.com/">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 class="hsubs" 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.bloggertrix.com/">Back</a></li>
</ul>

ကဲဒါဆို အဆင္ျပသေလာက္ပါျပီေနာ္... လုိအပ္သေလာက္ ေခါင္းစဥ္ေတြကိုလဲ ပြါးနိဳင္ပါတယ္..

<<< မန္ဘာ၀င္ျပီး... Fb Like ျခင္းျဖင့္ အားေပးၾကပါေနာ္ >>>

ဘေလာ့မွာ Horizontal Menu ( အလြယ္ထည့္သုံးနိဳင္ )

By Paing Thu Kha5:25 AMBlogger နည္းပညာမ်ားNo comments

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

ေအာက္က နမွူနာ အတုိင္ျမင္ရမွာပါ

   ►1. Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2. Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕ Dashboard ကေနေပါ့
   ►3. Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4. HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5. ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ အဆင္မေျပတာမ်ားရွိခဲ့ပါက...cbox မွာ ေျပာခဲ့ၾကပါေနာ္..

မိမိရ႕ဘေလာ႕linkေတြကိုscrolling နွင့္လုပ္ခ်င္ရင္ လုပ္ခ်င္ရင္

By Paing Thu Kha5:23 AMBlogger နည္းပညာမ်ားNo comments

ဒီေန႔က်ေနာ္တင္တဲ့ code ကလည္းဘေလာ့ဂါအတြက္အရမ္းကို သံုးလည္းသံုးေပ်ာ္သလို အသံုးလည္းဝင္ပါတယ္၊တစ္ခ်ိဳ႕ကေတာ့သိၿပီးၾကမွာပါ မသိၾကေသးတဲ့ခ်စ္မိတ္ေဆြသူငယ္ခ်င္းေတြအတြက္ပါ၊၊ တျခားcodeေတြလည္းက်ေနာ္ေတြ႕ဘူးပါတယ္ ဒီcodeေလးကအရမ္းရွင္းလို႕တင္လိုက္ျခင္းပါဘဲ၊

ေအာက္မွာပုံႏွင့္တကြ code

<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  m"> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li>
<li><a href="ဤေနရာတြင္linkထည့္ပါ  "> ဤေနရာတြင္အမည္ထည့္ပါ </a></li><span style="font-weight:bold;"></span>

</ul></div>

မွတ္ခ်က္-မိမိစိတ္တိုင္းsizeေျပာင္းလို႔ရပါတယ္။မိမိတို႕ေခါင္းစဥ္လင့္ခ်ိတ္ပါ ေခါင္းစဥ္အမည္ ထည့္ပါ....
ဒါဆို လွပေသသပ္တဲ့ ဘားေလးနဲ႕ မယ္ညဳေတြကို ရပါျပီ....

<<<မန္ဘာ၀င္ျပီး...Fb Like ျခင္းျဖင့္ အားေပးၾကပါေနာ္>>>

ေအာင္ေအာင္(မကစ) ပိုင္ဆိုင္ေသာ ေနရာေလးမ်ားကိုလာလည္ၾကပါ။

Sidebar Menu Style လွလွေလးလာျပီေနာ္... ( လန္းမွလန္း )

By Paing Thu Kha5:21 AMBlogger နည္းပညာမ်ားNo comments

ကဲ ဘေလာ့ကာ မိတ္ေဆြတို႕ေရ သည္နည္းေလးကေတာ့ ခပ္လန္းလန္းေလးေပါ့ဗ်ာ... ဘေလာ့မွာ

မ်ားေသာအားျဖင့္ေတာ့ Menu ေတြကို Dropdown ေတြႏွစ္သက္ၾကပါတယ္.... အဲတာကိုလည္း

ဘေလာ့ရဲ႕ အေပၚဘားမွာ ထားေလ့ရွိၾကပါတယ္... ပုံမွန္ေအနထားလို႕ဆိုရမယ္ေပါ့...

သည္တစ္ခါေတာ့ က်ေနာ္ တင္တဲ့နည္းလမ္းေလးကေတာ့ Sidebar Dropdown ေလးေနာ္

လန္းေတာ့လန္းတယ္..သူကလည္းး တမ်ိဳးခ်စ္စရာေလးေပါ့..အေပၚမထားျခင္တဲ့ ေဘာ္ဒါမ်ားအတြက္ ေဘးကေန ထားလို႕ရတာေပါ့...ကဲ

ေအာက္မွာ လုပ္နည္းေတြ ကုဒ္ေတြ ေလ့လာ ယူေဆာင္ၾကပါစို႕.....

►1- Blogger Singin ၀င္လိုက္ပါ။
►2- Dashboard ကိုသြားလိုက္ပါ။
►3- Template ကိုကလစ္ပါ..။
►4- Edit Html ကို၀င္ပါ..
►5- Ctrl+F (သို႕မဟုတ္) F3 အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

]]></b:skin> ကုဒ္ကို ရွာပါ ေတြ႕တာနဲ႕ သူ႕အေပၚကပ္လွ်က္ ေပးထားေသာကုဒး္ေတြ ယူထည့္ေပးလိုက္ပါေနာ္...။

post-image /* The CSS Code for the menu starts here s2free.blogspot.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%; }

အိုေက မိမိတို႕ တက္ပလက္ကို ေဆ့လုိက္ပါေတာေ့နာ္.....

ေနာက္တဆင့္အေနနဲ႕..........

Sing In Blogger....

Layout ကို၀င္လိုက္ပါ..ေနာက္... Add a Gadget ကိုကလစ္ေပးလိုက္ပါ

အဲမွာဘဲ Html/Java script ဆိုတာေတြ႕မယ္.. ရွာလိုက္ပါ.... ေတြ႕တာနဲ႕....

အဲထဲကို ေအာက္ကကုဒ္ေတြ ထည့္ေပးလိုက္ပါေတာ့.....ဗ်ာ...လန္းးမွလန္းးသြားးမယ္...ေိေိ

. ေအာက္မွာ ေပးထားေသာကုဒ္မ်ားေကာ္ပီယူ ထည့္လိုက္ပါ

<div class="container">
    <ul id="nav12">
        <li><a href="http://www.s2free.blogspot.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.s2free.blogspot.com/">Add This</a></li>
    </ul>
</div>

မွတ္ခ်က္    ။     ။ ေခါင္းစဥ္ေတြကို မိိမိတို႕ လိုအပ္သလို ထပ္တိုးနိဳင္ပါတယ္.... မ်ားျခင္သေလာက္ မ်ားနိဳင္တယ္... အဓိက <li><a href="#">Menu 6</a></li>   ဒါေလးဘဲ ေပါ့...

မိမိတို႕ ေခါင္းစဥ္ေတြ ထဲမွာ....ေတြကေနတဲ့   # ေနရာကေတာ့ ေခါင္းစဥ္ရဲ႕ Link ကိုထည့္ရမွာပါ။
Menu ေတြ   Submenu   ေတါေနရာမွာေတာ့ မိမိတို႕ ပို႕စ္တင္ထားတဲ့ Labels အမည္ေတြေပါ့...
အဆင္ေျပျပီေနာ္..ဒါဆို.... နမူနာေလးလည္းး ပုံျပထားပါတယ္.. ႏွစ္သက္မယ္ဆို သုံးလိုက္ပါေနာ္..

ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါတယ္... လိုအပ္တာမ်ားရွိပါက.. C-Box မွာေျပာခဲ့ၾကနိဳင္ပါတယ္... အတတ္နိဳင္ဆုံး ၾကိဳးစား ကူညီ မွ်ေ၀သြားပါမည္...

Mr.K-night

Follow us on Facebook

This is default featured slide 1 title

This is default featured slide 2 title

This is default featured slide 3 title

This is default featured slide 4 title

This is default featured slide 5 title

Tuesday, August 11, 2015

ဘေလာ့မွာ Drop Down Menu ေလးလုပ္နည္း

Monday, August 10, 2015

ေခါင္းစဥ္ Menu လွလွေလး လုပ္လိုပါက

Thursday, August 6, 2015

Easy Menu For Your Blog

Wednesday, August 5, 2015

Dropdown Menu လွလွေလးဖန္တီးၾကမယ္

Tuesday, August 4, 2015

ဘေလာ့မွာ Horizontal Menu ( အလြယ္ထည့္သုံးနိဳင္ )

Monday, August 3, 2015

မိမိရ႕ဘေလာ႕linkေတြကိုscrolling နွင့္လုပ္ခ်င္ရင္ လုပ္ခ်င္ရင္

Sunday, August 2, 2015

Sidebar Menu Style လွလွေလးလာျပီေနာ္... ( လန္းမွလန္း )

Blogger news

Text Widget

Total Pageviews

Social

Text Widget

Labels

Followers

Blog Archive

Popular Posts

Labels

Blog Archive

Recent Posts

Categories

Sample Text

Unordered List

Pages

Download

Labels

Text Widget