Blogger Labels ေတြကို Scorrl Bar ေလးနဲ႕ထားနည္း

 မဂၤလာပါ  ဘေလာ့မိတ္ေဆြအေပါင္းးတို႕....သည္တခါတင္မဲ့ နည္းလမ္းေလးကေတာ့  ဘောလ့ကာ မ်ားးအတြက္ အေတာ္ေလးကိုအသုံး၀င္ျပီး  ထိေရာက္ေစတဲ့နည္းပညာေလးပါ...ဘာလဲဆိုေတာ့

က်ေနာ္တို႕ ဘေလာ့ကာေတြမွာ Labels  ေတြမ်ားပ်ားလာတာနဲ႕အမွ် ေနရာအခက္ခဲေတြ႕ေနၾကရပါတယ္.

အဲအတြက္  ေလဘယ္ေတြကို  cloud  ထားၾကရျပန္တယ္.အဲလို ထားျပန္ေတာ့ ေလဘယ္  ေတြက

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

ေလဘယ္ေတြ အရမ္းမ်ားေနေတာ့မွ  ျပန္သတိယတယ္... သိမ္းးထားတာ မနည္းလုိက္ရွာယူရတယ္...

လက္ေတြ႕က်က် စမ္းသတ္ေပးျပီး  မွျပန္လည္ မွ်ေ၀ျခင္းပါ ယုံၾကည္စြာ  အသုံးျပဳ နိုႈ္ပါတယ္...ေနာ္

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

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

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

#Label1 ul{
max-height:500px;
overflow:auto;
}
#Label1 ul::-webkit-scrollbar {
height:12px;
width: 12px;
background: #333;}
::-webkit-scrollbar-thumb {
background-color: #ccc;
-moz-border-radius: 10px;
border-radius: 10px;
}

ကုဒ္ထဲမွာ  max-height:500px; ဆိုတာမွာ အေပၚေအာက္ လိုသေလာက္ နံပါတ္ ခ်ိန္းပါ။

 Preview Template နဲ႕ၾကည့္ေပးပါ စိတ္ၾကိဳက္ျပီဆိုမွ ေဆ့ပါ....

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

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

ဘေလာ့ခရီးသည္ 

www.ledimye.blogspot.com 

www.aungsanmks.com 

www.ninilayy.com 

တို႕မွာ လည္ပါတ္နိဳင္ပါတယ္.....ေနာ္

Read more »

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

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

မ်ားေသာအားျဖင့္ေတာ့ 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 မွာေျပာခဲ့ၾကနိဳင္ပါတယ္... အတတ္နိဳင္ဆုံး ၾကိဳးစား ကူညီ မွ်ေ၀သြားပါမည္...

ဘေလာ့ခရီးသည္
www.ledimye.blogspot.com
www.aungsanmks.com
www.ninilayy.com
တို႕မွာ လည္ပါတ္နိဳင္ပါတယ္.....ေနာ္

Read more »

Tab Menu Circle Style လွလွေလးေနာ္ ( Blogger Only )

မဂၤလာပါ ဘေလာ့ခရီးသည္ ခ်စ္မိတ္ေဆြ တို႕... သည္နည္းပညာေလးကေတာ့  မိမိတို႕... ဘေလာ့မွာ
Menu  လို႕ေခၚတဲ့ ေခါင္းစဥ္ေလးရဲ႕ စတိုင္တမ်ိဳးးေလးပါ... လိုျခင္သုံးနိဳင္ဖို႕  တင္ေပးလိုက္တာပါ.....
သူကေတာ့ ေခါင္းစဥ္နည္းတဲ့ ဆိုဒ္ေတြဘဲ  ပိုူသင့္ေတာ္ပါတယ္..ေနရာ ယူလြန္းးျပီး  Dropdown မဟုတ္ေတာ့  ေနရာယူတယ္ဗ်....လိုျခင္ သုံးနိဳင္ပါတယ္....

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

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

/* The CSS Code for the menu starts here s2free.blogspot.com */ <style type="text/css"> .circlemenu{ width: 100%; overflow:hidden; } .circlemenu ul{ margin: 0; padding: 0; font: bold 14px Verdana; list-style-type: none; text-align: center; } .circlemenu li{ display: inline; margin: 0; } .circlemenu li a{ display:inline-block; text-align:center; text-decoration: none; color: white; background:#b30707; margin: 0; margin-right:5px; width:100px; height:100px; border-radius: 400px; -moz-border-radius: 400px; -webkit-border-radius: 400px; } .circlemenu a span{ position:relative; top:40%; } .circlemenu li a:visited{ color: white; } .circlemenu a:hover{ background: #ff1774; } </style>

ထည့္ျပီး ေဆ့လို႕ရပါျပီ... တစ္ခု အၾကံျပဳပါရေစ...

 ေနာက္တဆင့္အေနနဲ႕ကေတာ့......
ဘေလာ့ကာကို၀င္လိုက္ပါ.. Layout  ကိုသြား Add a gadget  ကိုကလစ္ပါ...

 html/java script  ကိုကလစ္ က်လာတဲ့ေဘာက္မွာ ေအာက္ကကုဒ္ေတြထည့္လိုက္ပါ..

<div class="circlemenu">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Download</span></a></li>
<li><a href="h#"><span>CSS</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="http://www.s2free.blogspot.com/"><span>Contact Us</span></a></li>
</ul>
</div>

မိမိတို႕ လိုသေလာက္ တိုးနိဳင္ပါတယ္...ပြါးးနိဳင္ပါတယ္..

  မွတ္ခ်က္အေနနဲ႕ ေျပာျခင္တာကေတာ့........။       ။.........ကုဒ္ထဲမွာ ၾကည့္လိုက္ပါ ..ေနာ္

width  100px

hight  100px ဆိုတာေတြကမယ္..အဲတာ  မိမိတို႕ မယ္ညဳ botton ေလးရဲ႕ အရြယ္အစားပါ...အဲတာကို အရမ္းၾကီးေနရင္
သည္ေနရာျပန္၀င္ျပီး  ျပဳျပင္ေပးလိုက္ပါ...ေလွ်ာ့ခ်ျပီး  Preview Template နဲ႕ျပန္ျပန္ၾကည့္ရင္း
စိတ္ၾကိဳက္ အရြယ္ရလာတာနဲ႕ ေဆ့နိဳင္ပါတယ္...တျခား ေနာက္ခံကာလာေတြ  ၀ိတ္ေတြလဲ ျပဳျပင္နိဳင္တာေတြပါပါတယ္.... ကုဒ္ထဲမွာ ေသချာ ၾကည့္ျပီး  ေလ့လာ လုိက္ပါေနာ္..
အဆင္ေျပပါေစ

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

ဘေလာ့ခရီးသည္ 

www.ledimye.blogspot.com 

www.aungsanmks.com 

www.ninilayy.com 

တို႕မွာ လည္ပါတ္နိဳင္ပါတယ္.....ေနာ္

Read more »

Blue Color Buttons Menu စတိုင္ေလးပါ

 

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

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

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

.a-btn{ -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; padding:10px 30px 10px 20px; position:relative; float:left; display:block; overflow:hidden; margin:10px; background:#9cedef; background:-webkit-gradient(linear,left top,left bottom,color-stop(#b7f2f4,0),color-stop(#7ce7ea,1)); background:-webkit-linear-gradient(top, #b7f2f4 0%, #7ce7ea 100%); background:-moz-linear-gradient(top, #b7f2f4 0%, #7ce7ea 100%); background:-o-linear-gradient(top, #b7f2f4 0%, #7ce7ea 100%); background:linear-gradient(top, #b7f2f4 0%, #7ce7ea 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7f2f4', endColorstr='#7ce7ea',GradientType=0 ); border:1px solid #90c6c8; border-color:#90c6c8 #78bdc0 #65b6ba; -webkit-box-shadow:0px -5px 0px 0px #458a8c, 0 1px 1px #d5d5d5, inset 0 1px 0 rgba(255,255,255,0.8); -moz-box-shadow:0px -5px 0px 0px #458a8c, 0 1px 1px #d5d5d5, inset 0 1px 0 rgba(255,255,255,0.8); box-shadow:0px -5px 0px 0px #458a8c, 0 1px 1px #d5d5d5, inset 0 1px 0 rgba(255,255,255,0.8); -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; } .a-btn-symbol{ font-family:'WebSymbolsRegular', cursive; color:#437b7d; text-shadow:0 1px 0 #bef3f5; font-size:20px; position:absolute; left:20px; width:20px; text-align:center; line-height:32px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .a-btn-text{ font-size:20px; color:#437b7d; text-shadow:0 1px 0 #bef3f5; line-height:16px; font-weight:bold; font-family:"Myriad Pro", "Trebuchet MS", sans-serif; display:block; } .a-btn-slide-text{ font-family:Arial, sans-serif; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:#555; text-shadow:0px 1px 1px rgba(255,255,255,0.9); } .a-btn:hover{ -webkit-transform:scale(1.05); -moz-transform:scale(1.05); -ms-transform:scale(1.05); -o-transform:scale(1.05); transform:scale(1.05); } .a-btn:hover .a-btn-symbol{ opacity:0.5; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); } .a-btn:active{ -webkit-transform:scale(0.95); -moz-transform:scale(0.95); -ms-transform:scale(0.95); -o-transform:scale(0.95); transform:scale(0.95); -webkit-box-shadow:0px 0px 0px 1px #458a8c, 0 1px 1px #d5d5d5, inset 0 1px 0 rgba(255,255,255,0.8), 0px 1px 1px 2px #fff; -moz-box-shadow:0px 0px 0px 1px #458a8c, 0 1px 1px #d5d5d5, inset 0 1px 0 rgba(255,255,255,0.8), 0px 1px 1px 2px #fff; box-shadow:0px 0px 0px 1px #458a8c, 0 1px 1px #d5d5d5, inset 0 1px 0 rgba(255,255,255,0.8), 0px 1px 1px 2px #fff; }

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

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

<div class="button-wrapper">
                    <a href="#" class="a-btn">
                        <span class="a-btn-symbol"></span>
                        <span class="a-btn-text">Download Now</span>
                       <span class="a-btn-slide-text">Blogger Tutorials</span>
                    </a>
                    <a href="#" class="a-btn">
                        <span class="a-btn-symbol"></span>
                        <span class="a-btn-text">Download Now</span>
                        <span class="a-btn-slide-text">Blogger Tutorials</span>
                    </a>
                    <a href="#" class="a-btn">
                        <span class="a-btn-symbol"></span>
                        <span class="a-btn-text">Download Now</span>
                        <span class="a-btn-slide-text">Blogger Tutorials</span>
                    </a>
                    <a href="#" class="a-btn">
                        <span class="a-btn-symbol"></span>
                        <span class="a-btn-text">Download Now</span>
                        <span class="a-btn-slide-text">Blogger Tutorials</span>
                    </a>
                </div>   

 #  အဲတာေလးေနရာမွာ မိမိတို႕ရဲ႕ link ေတြကို အစားထိုးေပးရပါမယ္..
အနီေရာင္  ကာလာေနရာကေတာ့ မိမိတို႕ ေခါင္းစဥ္အမည္ေပါ့...
               အဆင္ေျပေလာက္ပါျပီေနာ္  ..မေျပပါက ေအာ္ခဲ့ပါ............

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

Read more »

Dark Colour Dropdown Menu

ဒါေလးကေတာ့ မိမိတို႕ဘေလာ့ လွပေသသပ္ေစတဲ့ Dropdown Menu ေလးပါေနာ္  အနက္ေရာုင္
Menu လွလွေလးပါ..လိုအပ္ရင္ စမ္းသတ္ၾကည့္လိုက္ပါ...

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

/* The CSS Code for the menu starts here bloggertrix.com */ .containerbt {margin: 0 auto;width: 610px;text-align: center;height:300px;} ul.dark_menu { list-style: none;padding: 0; font-family: Arial;font-size: 14px;line-height: 14px;} ul.dark_menu:after {content: "";clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;} ul.dark_menu li {float: left;margin: 0 0 0 10px;position: relative;} ul.dark_menu li:first-child {margin: 0;} ul.dark_menu li a, ul.dark_menu li a:link {color: #FFFFFF;text-decoration: none; display: block;padding: 10px 26px;text-shadow: 0 1px 0 #4b433e; background: #362f2c; background: -moz-linear-gradient(top, #362f2c 0%, #282321 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#362f2c), color-stop(100%,#282321));background: -webkit-linear-gradient(top, #362f2c 0%,#282321 100%); background: -o-linear-gradient(top, #362f2c 0%,#282321 100%); background: -ms-linear-gradient(top, #362f2c 0%,#282321 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#362f2c', endColorstr='#282321',GradientType=0 ); background: linear-gradient(top, #362f2c 0%,#282321 100%); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 #564b46,0 1px 1px #181514; -moz-box-shadow: inset 0 1px 0 #564b46,0 1px 1px #181514; box-shadow: inset 0 1px 0 #564b46,0 1px 1px #181514; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;} ul.dark_menu li a:hover { color: #73635e; text-shadow: 0 1px 1px #000; background: #282321; background: -moz-linear-gradient(top, #282321 0%, #362f2c 99%, #362f2c 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#282321), color-stop(99%,#362f2c), color-stop(100%,#362f2c)); background: -webkit-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); background: -o-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); background: -ms-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282321', endColorstr='#362f2c',GradientType=0 ); background: linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;} ul.dark_menu li a.selected, ul.dark_menu li a:active { color: #73635e;background: #282321; text-shadow: 0 1px 1px #000; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f; -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;} ul.dark_menu li ul {display: none;} ul.dark_menu li ul:before {content: " ";position: absolute;display: block;z-index: 1500;left: 0;top: -10px;height: 10px;width: 100%;} ul.dark_menu li:hover ul { position: absolute;display: block;z-index: 1000;left: 0;top: 44px;padding: 5px 0;list-style: none;background: #282321; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f; box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;} ul.dark_menu li ul li { float: none;margin: 0 10px;border-bottom: 1px solid #191614;border-top: 1px solid #3a3230;} ul.dark_menu li ul li:first-child { margin: 0 10px; border-top: 0 none;} ul.dark_menu li ul li:last-child { border-bottom: 0 none;} ul.dark_menu li ul li a, ul.dark_menu li ul li a:link { color: #73635e;display: block;background: transparent none;padding: 10px 20px 10px 5px;white-space: nowrap;text-shadow: 0 1px 2px #000;-webkit-box-shadow: 0 0 0 rgba(0,0,0,0);-moz-box-shadow: 0 0 0 rgba(0,0,0,0);box-shadow: 0 0 0 rgba(0,0,0,0); -webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;} ul.dark_menu li ul li a:hover {text-decoration: underline;background: #2a2523;}

ျပီးတာနဲ႕ မိမိတို႕ တက္ပလက္ကို save template လု္ပလုိက္ပါ...

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

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

<div class="container"> <!-- Dark Menu Begin --> <ul class="dark_menu"><li><a href="#" class="selected">Home</a></li><li> <a href="#">Download</a> <!-- Sub Menu Begin --> <ul><li><a href="#">Menu Link 1</a></li><li><a href="#">Menu Link 2</a></li><li><a href="#">Menu Link 3</a></li><li><a href="#">Menu Link 4</a></li></ul><!-- Sub Menu End --> </li><li> <a href="#">Blog</a> <!-- Sub Menu Begin --> <ul><li><a href="#">Menu Link 1</a></li><li><a href="#">Menu Link 2</a></li><li><a href="#">Menu Link 3</a></li><li><a href="#">Menu Link 4</a></li></ul><!-- Sub Menu End --> </li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul><!-- Dark Menu End --> </div>

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

လင့္ခ်ိတ္နည္း (၁)   သည္မွာ  ေလ့လာနိဳင္ပါတယ္...
လင့္ခ်ိတ္နည္း(၂)    သည္မွာ   သြားလိုက္ပါ 

လာေရာက္ေလ့လာၾကတဲ့ မိတ္ေဆြအေပါင္း အဆင္မေျပမွဳေလးေတြ ရွိက ကြန္မက္ေသာ္လည္းေကာင္း
c-box မွေသာ္လည္းေကာင္း  ေျပာခဲ့နိဳင္ပါတယ္...

Read more »

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

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

• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ
• ဤေနရာတြင္အမည္ထည့္ပါ

<div class="widget-content">
<ul style="height:150px;width:150px; overflow:auto; ">

<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 ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ အဆင္မေျပတာမ်ားရွိခဲ့ပါက...cbox မွာ ေျပာခဲ့ၾကပါေနာ္..

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

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

www.ledimye.blogspot.com

www.ninilayy.com

Read more »