မဂၤလာပါခင္ဗ်ာ :::: ကၽြန္ေတာ္တင္သမွ် Post ေလးမ်ားသည္ ကၽြန္ေတာ္ေလ႕လာဖူးသမွ်ကို ျပန္လည္မွ်ေ၀ေပးျခင္းျဖစ္ပါတယ္။ သူငယ္ခ်င္းအားလံုးလည္း ကၽြန္ေတာ္႕ site မွႀကိဳက္ႏွစ္သက္တဲ႕ မည္႕သည္႕ Post ကိုမဆို ျမန္မာ IT နည္းပညာဖြံ႕ၿဖိဳးတိုးတက္ေရးအတြက္ ျပန္လည္မွ်ေ၀ေပးေစလိုပါတယ္ဗ်ာ။ ::::

Dashboard

Showing posts with label Blogspot နည္းပညာ. Show all posts
Showing posts with label Blogspot နည္းပညာ. Show all posts

Tuesday, February 5, 2013

မိမိရဲ႕ Blog မွာ Email Subscription ထည္႕မယ္။

             ဒါကေတာ႕ Blogger ညီကိုမ်ားအတြက္သီးသန္႕ပါဗ်ာ။ပံုေလးကိုၾကည္႕လိုက္တာနဲ႕တင္ဘာ Post လည္းဆိုတာသိၾကမွာပါ။ မိမိရဲ႕ Website မွာတင္သမွ် Post ေတြကို Email ထဲကို ပို႕ေပးတဲ႕ Code ေတြကို စတိုင္ သံုးမ်ိဳးေပးလိုက္ပါတယ္ေနာ္။ အဆင္ေျပျပီး မိမိသေဘာက်တဲ႕ Styleကိုသာ ေရြးသံုးၾကပါဗ်ာ Code ထည္႕သြင္းနည္းကိုလည္းေအာက္မွာပံုနဲ႕တကြရွင္းျပေပးထားပါတယ္ဗ်ာ။လြယ္လြယ္ေလးပါေနာ္။

ဒီေနရာကေနစျပီေနာ္။ေသခ်ာေလးဖတ္ျပိးလိုက္လုပ္ၾကည္႕ေပးပါ။ လြယ္ပါတယ္။ 
drop down menu


HTML JAVASCRIPT A simple Drop Down Menu For Blogger
အဆင့္ 1  Design > Page Elements > Add a Gadget ကိုႏွိပ္ပါ။
အဆင္႕ 2 Eidt HTML ကုိေရြးေပးပါ။ ျပီးသြားရင္ ေအာက္က Code ကိုကူးထည္႕ေပးပါ။
အဆင္႕ 3 Save ႏွိပ္ေပးပါ။

 

Email Form Style 1



<style type="text/css"> #truebloggertricks-emailbox { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYZ1XQ1ovmGzT2vUX-AlBlC18S-TUx1fJVJcOP_Nu3O7WRkfnLJHLlG_4utPROtmZgJs_uXmgaZphK9t0qMWhF7qTCaX7gwVBMUmmQF7mU2iNzMbJxZIGMQooo9I8X9poKant-PlOrcLA/s1600/truebloggertricks.com-blue.png)no-repeat scroll center center transparent; height: 143px; width: 368px; } form#truebloggertricks-emailform { display: block; margin: 0; padding-left: 42px; padding-top: 67px; } form#truebloggertricks-emailform #s { background: transparent; border: none; color: #444242; font-family: georgia; font-size: 15px; font-style: italic; height: 30px; margin-top: -2px; padding-left: 2px; vertical-align: top; width: 227px; } form#truebloggertricks-emailform #sbutton { background: transparent; border: none; cursor: pointer; height: 30px; padding-right: 45px; }</style> <div id="truebloggertricks-emailbox"> <form id="truebloggertricks-emailform" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Pyae Phyo (MMiTD)', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input type="hidden" value="Pyae Phyo (MMiTD)" name="uri" /> <input type="text" id="s" name="email" value="Enter Your E-Mail Here" onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}' onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}' /> <input type="hidden" name="loc" value="en_US" /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>

Email Form Style 2



<style type="text/css"> #truebloggertricks-emailbox { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBasH0euVex87U_MgG7IIpeQ4vfbQl-pOzNYVgnVRLHAlMZ9SNpXMak-Povd8z0yVwq83MwU0PiP0jObY2CLtWYM_6LbUsXk-caxvzjDHWrSGIXbfLQEGmBlxwtl6uqY47acJ1xfXyD_8/s1600/truebloggertricks.com-silver.png)no-repeat scroll center center transparent; height: 143px; width: 368px; } form#truebloggertricks-emailform { display: block; margin: 0; padding-left: 42px; padding-top: 67px; } form#truebloggertricks-emailform #s { background: transparent; border: none; color: #444242; font-family: georgia; font-size: 15px; font-style: italic; height: 30px; margin-top: -2px; padding-left: 2px; vertical-align: top; width: 227px; } form#truebloggertricks-emailform #sbutton { background: transparent; border: none; cursor: pointer; height: 30px; padding-right: 45px; }</style> <div id="truebloggertricks-emailbox"> <form id="truebloggertricks-emailform" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Pyae Phyo (MMiTD)', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input type="hidden" value="Pyae Phyo (MMiTD)" name="uri" /> <input type="text" id="s" name="email" value="Enter Your E-Mail Here" onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}' onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}' /> <input type="hidden" name="loc" value="en_US" /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>

Email Form Style 3


<style type="text/css">
#truebloggertricks-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyDMocvTLQYbcqEFFy_hHgKq_758HjpWa3pbb-4uSol-E6G1MyinDCa8hLu4tZxF9VE9GjYnUcMzhfBQ8ZAEvtxbvwZw82NZixI0F0Vaglh2zSDpgnEDqMT1fSjxi-Eu4N3wKV6LyHFoE/s1600/truebloggertricks.com-red.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}

form#truebloggertricks-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}

form#truebloggertricks-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}

form#truebloggertricks-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>

<div id="truebloggertricks-emailbox">
    <form id="truebloggertricks-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Pyae Phyo (MMiTD)', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="Pyae Phyo (MMiTD)" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>
အနီေရာင္ျပထားတဲ႕ Pyae Phyo (MMiTD) ဆိုတဲ႕ေနရာမွာေတာ႕မိမိရဲ႕  feedburner username. ကိုေရးေပးရမွာပါဗ်ာ။
Read More ...

Sunday, January 27, 2013

မိမိရဲ႕ Website မွာ စီးပြားေရး ေၾကာ္ျငာထည္႕ရန္အတြက္ Widges ထည္႕သြင္းနည္း


Click to enlarge the image (on the image)
                       ဒီတစ္ခါေတာ႕ Blogger သူငယ္ခ်င္းေတြအတြက္ သီးသန္႕ Post ေလးပါ။ မိမိရဲ႕ Blog မွာ
ေၾကျငာထည္႕ခ်င္တဲ႕ Blogger မ်ားအတြက္ပါ။ Blog Post ေတြေရးရင္းနဲ႕ ေၾကျငာခလည္းရတာေပါ႕ဗ်ာ။
ဒါေပမယ္႕ ေၾကျငာထည္႕မယ္႕ဆိုဒ္ကေတာ႕ တေန႕ကို လူအနည္းဆံုး 1500 ၀န္းက်င္ေလာက္ ၀င္ၾကည္႕
တဲ႕ Site မွေၾကျငာထည္႕လို႕ေကာင္းမွာေပါ႕ေနာ္။ လူ၀င္ၾကည္႕တာ နည္းသည္ျဖစ္ေစမ်ားသည္ျဖစ္ေစ
လိုအပ္မယ္႕သူမ်ားအတြက္ ကၽြန္ေတာ္႕ကေတာ႕ Code ေလးကိုမွ်ေ၀ေပးလိုက္ျပီေနာ္။

Facebook ရဲ႕ Like button ကိုႏွိပ္ျခင္းျဖင္႕ မိမိရဲ႕ Facebook ေပၚမွာ ဒီ Post ေလးေရာက္သြားမွာပါ။ 
ဒီ Post ေလးကိုသေဘာက်တယ္ဆိုရင္လည္း Like Button ေလးကိုႏွိပ္ခဲ႕ေပးပါေနာ္။



ဒီေနရာကေနစျပီေနာ္။ေသခ်ာေလးဖတ္ျပီးလိုက္လုပ္ၾကည္႕ေပးပါ။ လြယ္ပါတယ္။ 
 
drop down menu


HTML JAVASCRIPT A simple Drop Down Menu For Blogger
အဆင့္ 1  Design > Page Elements > Add a Gadget ကိုႏွိပ္ပါ။
အဆင္႕ 2 Eidt HTML ကုိေရြးေပးပါ။ ျပီးသြားရင္ ေအာက္က Code ကိုကူးထည္႕ေပးပါ။
အဆင္႕ 3 Save ႏွိပ္ေပးပါ။
 
ေၾကျငာထည္႕ေစခ်င္တဲ႕ပံုရဲ႕အရြယ္အစားကိုေတာ႕မိမိႏွစ္သက္တဲ႕ အရြယ္အစားဘဲေရြးထည္႕ေပးပါေနာ္။
ေအာက္မွာအမ်ိဳးအစား 4 ခု ေပးလိုက္ပါတယ္ဗ်ာ။ ၾကိဳက္တာသာယူသံုးပါ။
 
The size of 125x125
<center>
<div id="bsap_125" class="bsap_125 bsap">
<a href="http://AddURL" class="ad1" title="Ad Title" id="bsa_1451626" target="_blank"> <img src = "http://Imageurl "alt ="AdName"height =" 125 "width =" 125 "/> </ a>
<a href="http://AdURL" class="ad2 even" title="Ad Title" target="_blank"> <img src = "http://AdURL"alt =" AdName "height =" 125 "width =" 125 "/> </ a>
<a href="http://AdURL" class="ad3" title="AdTitle" target="_blank"> <img src = "http://Ad Image URL "alt =" AdName "height =" 125 "width =" 125 "/> </ a>
<a href="http://AdURL" class="ad2 even" title="Ad Title" target="_blank"> <img src = "http://AdURL"alt =" AdName "height =" 125 "width =" 125 "/> </ a>
</ Div>
</ Center>

The size of 468x60

<div id="bsap_468" class="bsap_468 bsap">
<span class="bsap_468 bsap"> <a href="AdURL" title="Advertise Here" class="adhere ad4" target="_blank"> Advertise Here </ a> </ span>
</ Div>

The size of 728x90

<div id="bsap_728" class="bsap_728 bsap">
<span class="bsap_728 bsap"> <a href="ADURL" title="Advertise Here" class="adhere ad1" target="_blank"> Advertise Here </ a> </ span>
</ Div>

The size of 336x280

<div id="bsap_336" class="bsap_336 bsap">
<span class="bsap_336 bsap"> <a href="ADURL" title="Advertise Here" class="adhere ad1" target="_blank"> Advertise Here </ a> </ span>
</ div>



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

အဆင္႕ 4  Design > Edit HTML > Expand Widget Templates မွာအမွန္ျခစ္ေပးပါ။
အဆင္႕ 5 Ctrl + F ကိုႏွိပ္ျပီး ဒီကုတ္ေလးကိုရွာပါ  ]]></b:skin>
အဆင္႕ 6 ေတြ႕ျပီဆိုရင္ ]]></b:skin> ရဲ႕ အေပၚမွာေအာက္က Code ကို ကူးထည္႕ေပးပါ။
အဆင္႕ 7 အရင္ဆံုး Preview နဲ႕အရင္ၾကည္႕ပါ။ အဆင္ေျပျပီဆိုမွ Save ႏွိပ္ေပးပါ။



/* -------------------Ads------------------*/
div.bsap_125 a{width:125px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;float:left;line-height:100%;margin:0 4px 10px 0;}
div.bsap_125 img{border:2px solid #ddd;clear:right;padding:5px;}
div.bsap_125 a.adhere{color:#666;font-weight:bold;font-size:12px;border:2px solid #ccc;background:#e7e7e7;text-align:center;width:125px;height:125px;line-height:1000%;}
div.bsap_125 a.adhere:hover{border:2px solid #999;background:#ddd;color:#333;}
html>

body div.bsap_125 a.adhere{width:123px;height:123px;}
div.bsap_468 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}
div.bsap_468 img{border:0;clear:right;}
div.bsap_468 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:468px;height:60px;line-height:480%;}
div.bsap_468 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
html>

body div.bsap_728 a.adhere{width:726px;height:90px;}
div.bsap_728 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}
div.bsap_728 img{border:0;clear:right;}
div.bsap_728 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:128px;height:90px;line-height:730%;}
div.bsap_728 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
html>

body div.bsap_336 a.adhere{width:334px;height:280px;}
div.bsap_336 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}
div.bsap_336 img{border:0;clear:right;}
div.bsap_336 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:336px;height:280px;line-height:2200%;}
div.bsap_336 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
html>

body div.bsap_468 a.adhere{width:466px;height:58px;}
.bsap a{text-shadow:1px 1px 1px #111!important;color:#eee!important;overflow:visible!important;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;border:0 none!important;-webkit-border-top-left-radius:80px;-webkit-border-bottom-right-radius:80px;-moz-border-radius-topleft:80px;-moz-border-radius-bottomright:80px;border-top-left-radius:80px;border-bottom-right-radius:80px;margin:0 10px 10px 0 !important;padding:7px!important;}
.bsap a:hover{-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;}
.bsap a img{border:0 none!important;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px!important;}
.bsap .even{margin-right:0!important;}
.bsap .ad1{background:#e42b2b!important;}
.bsap .ad2{background:#ff8400!important;}
.bsap .ad3{background:#a800ff!important;}
.bsap .ad4{background:#49a7f3!important;}
.bsap .ad5{background:#41d05f!important;}
.bsap .ad6{background:#B24700!important;}
.bsap .ad7{background:#FFE500!important;}
.bsap .ad8{background:#007D47!important;}
.bsap .ad9{background:#330000!important;}
.bsap .ad10{background:#990000!important;}
.bsap .ad11{background:#f70000!important;}

အားလံုးအဆင္ေျပၾကပါေစေနာ္။
Read More ...

Friday, January 25, 2013

Website မွာတင္သမွ် Post ေတြကို Facebook သို႕ Auto ေရာက္ေအာင္ျပဳလုပ္နည္း။

How To Connect Your Blog to Facebook

                ဒီ Post ေလးကို Website တစ္ခုကေန ေဘာ္ဒါတစ္ေယာက္က ေမးထားလို႕ ျပန္လည္ျပီးမွ်
ေ၀ေပးလိုက္တာပါ။ အျခားေသာ Blogger သူငယ္ခ်င္းမ်ားလည္း ဒီနည္းလမ္းေလးကိုလိုက္လုပ္ႏိုင္ပါ
တယ္ေအာက္မွာ နည္းလမ္းႏွစ္မ်ိဳးနဲ႕ ျပထားပါတယ္ဗ်ာ။ အဆင္ေျပတဲ႕ နည္းလမ္းကိုသာေရြးသံုးႏိုင္ပါ
တယ္။
Credit to - ၀င္းကမၻာေက်ာ္

Facebook ရဲ႕ Like button ကိုႏွိပ္ျခင္းျဖင္႕ မိမိရဲ႕ Facebook ေပၚမွာ ဒီ Post ေလးေရာက္သြားမွာပါ။ 
ဒီ Post ေလးကိုသေဘာက်တယ္ဆိုရင္လည္း Like Button ေလးကိုႏွိပ္ခဲ႕ေပးပါေနာ္။

ပထမဆံုး ဒီေနရာကို သြားပါ  http://www.networkedblogs.com/
add your blog ကိုႏွိပ္ပါ..
Facebook Login ဝင္ပါ..
မိမိ ရဲ႕ Blog URL ကို ထည့္ျပီး Next ကိုႏွိပ္ပါ..
လိုအပ္တာေတြ ျဖည့္ေပးပါ... ဥပမာ Blog Name မွာ
ကိုယ့္ Blog နာမည္ေပါ့ဗ်ာ...
အားလံုး လိုအပ္တာေတြ ျဖည့္ျပီးရင္ Terms of service မွာ
Check (အမွန္ျခစ္ေလးထည့္) ျပီး Next ကိုဆက္သြားပါ...
Are you the author of (မိမိ Blog နာမည္)? YES , NO မွာ YES ကိုေရြးပါ...

ျပီးရင္ အေပၚနားမွာ  Blogger Dashboard ကိုႏွိပ္ပါ...  Grant Permissions ကိုဆက္ႏွိက္ပါ..
ပြင့္လာတဲ႔ Box မွာ Allow ကိုေရြးပါ ...
ဘယ္ဘက္နားက Blogger Tools ေအာက္က Syndiction ကိုႏွိပ္ပါ  Choose a blog to syndicate မွာ ကိုယ့္ Blog နာမည္ကိုေရြးေပးပါ....
ျပီးရင္ မိမိ Email ကိုဖြင့္ျပီး (Facebook Account Email)  Verify your email ကိုႏွိပ္လိုက္ပါ ....
Thanks. Your email is verified. ေအာက္က  Continue ကိုႏွိပ္ပါ...
Quick Publisher ကိုႏွိပ္ျပီး CLick to select one more target ကိုႏွိပ္ျပီး Blog က Post ေတြကို မိမိ ေရာက္ေစခ်င္တဲ႔ Facebook က မိမိ Profiles (or) Fan Page (or) Group စ,တာေတြ ကိုေရြးေပးျပီး Publish ကိုႏွိပ္လိုက္ပါ...။ 
အဲဒါမွအဆင္မေျပေသးဘူးဆိုရင္ ေအာက္က နည္းလမ္းအတိုင္းဆက္လုပ္ၾကည္႕ပါ။
ကၽြန္ေတာ္ကေတာ႕ အေပၚက နည္းလမ္းနဲ႕အဆင္ေျပပါတယ္။ ေအာက္ကနည္းလမ္းကေတာ႕ မစမ္းၾကည္႕ရေသးဘူးဗ်ာ။

1.ပထမဦးဆံုးအေနနဲ႕ Facebook Account ကို Login ၀င္ထားပါ။
2. Login ၀င္ျပီးရင္ ဒီေနရာ ေလးကိုသြားလိုက္ပါ။
3. အဲဒီမွာ Login ကိုထပ္၀င္လိုက္ပါ။
4.ေအာက္က ပံုအတိုင္း Log In with Facebook ကို ႏွိပ္ေပးပါ။



5.ေအာက္မွာျမင္ရတဲ႕ ပံုအတိုင္း “Click here to continue”ကိုႏွိပ္ပါ။

6.Click Register a Blog Tab.


7.Register your blog with all required data.
8.Confirm your ownership.
10.go to the NetworkedBlogs Home Page and click Blogger Dashboard.

11.click Syndication under Blogger Tools.

12.click the Grant Permissions tab and then click Allow button


13.choose your blog to syndicate and click Add Facebook Target

14.Select your profile or fan page and click Add button.

 
Read More ...

Tuesday, January 22, 2013

Post အသစ္တင္တိုင္း Email ထဲပို႕ေပးႏိုင္ဖို႕အတြက္ Gadget


                      Blogger သူငယ္ခ်င္းမ်ားအတြက္ မိမိရဲ႕ Blog မွာ မရွိမျဖစ္ ထည္႕ထားသင္႕တဲ႕ Email Subscription Widget အတြက္ Code ေလးတစ္ခုမွ်ေ၀ေပးလိုက္ပါတယ္ဗ်ာ။ ဒါေလးထည္႕ထားေတာ႕
မိမိ Post အသစ္တင္တိုင္း ၾကည္႕ခ်င္တဲ႕ သူမ်ားအတြက္ အဆင္ေျပတာေပါ႕ဗ်ာ။ ဘယ္ေတာ႕ Post အ
သစ္တင္မလည္းဆိုတာ ခဏခဏ ဆိုဒ္ကိုလာျပီး ၾကည္႕စရာမလိုေတာ႕ဘူးေပါ႕။ေအာက္မွလည္း ျပဳ
လုပ္ပံုအဆင္႕အဆင္႕ကို ပံုနဲ႕တကြရွင္းျပေပးလိုက္ပါတယ္ဗ်ာ။ လြယ္ပါတယ္။ ေတာ္ေတာ္လြယ္ပါတယ္။


Facebook ရဲ႕ Like button ကိုႏွိပ္ျခင္းျဖင္႕ မိမိရဲ႕ Facebook ေပၚမွာ ဒီ Post ေလးေရာက္သြားမွာပါ။ 
ဒီ Post ေလးကိုသေဘာက်တယ္ဆိုရင္လည္း Like Button ေလးကိုႏွိပ္ခဲ႕ေပးပါေနာ္။



ဒီေနရာကေနစျပီေနာ္။ေသခ်ာေလးဖတ္ျပိးလိုက္လုပ္ၾကည္႕ေပးပါ။ လြယ္ပါတယ္။ 
drop down menu


HTML JAVASCRIPT A simple Drop Down Menu For Blogger
အဆင့္ 1  Design > Page Elements > Add a Gadget ကိုႏွိပ္ပါ။
အဆင္႕ 2 Eidt HTML ကုိေရြးေပးပါ။ ျပီးသြားရင္ ေအာက္က Code ကိုကူးထည္႕ေပးပါ။
အဆင္႕ 3 Save ႏွိပ္ေပးပါ။


<style type='text/css'>#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ7BTGAJRpOAZElNKxk7s-al9hDw44OpuEfB2VcydlZ7Ywe3mlWugJEszuTnK0m0x_tE6UsI895swjtZGOgzOuaHdAc0jagegSP0Qs5zGNtjO5LxdMq13G-6mucgLXMFvPYrM1frvrnlQo/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIDqPll-4Dw6zGKbTmzUt74_C2Q7fZJwVdo7hUNTiKHqvtPN-H5vEdCO9-fl5IAkkzgYruPiovWojm9IDpu6sahTaefvgR0g6bjvLL1VMgT5r4Z5UmHWY9sRMwJ3ZR7x4e0NYj4peub91W/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUXwEjOTk1HISQOFTVlgKqqhhWEW4Thw3Lkl3U0PxnQMuNUCpJWZZpeT1V7PdXC9USzZDlzGrlFAAKyQbbvtzr1_zDndUm0_17Q1bFAMGqYVxDpiifKUYdhRAkvFF2LkNDRFZ83NKpBKta/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfj6ho8ly0Uq0bOtT2sMapCKYwHAbgB__5pJGGiOLWkKhnnUhUy8jtw5dgD6fgJ1Z9FS9Sh8POKdLHH2FwK7ITWPMwesC-fN-MM0hGi54JJZ-Vj4wIkDVsNw4wkkxTh_eMZ6lBPWwSzMqU/s0/bg-pattern.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}</style>
    <div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>Post အသစ္တင္တိုင္း Gmail ထဲသို႕ပို႕ေပးပါမည္။</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=Pyae Phyo (MMiTD)" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Pyae Phyo (MMiTD)', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="Pyae Phyo (MMiTD)" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div></div></div>

Pyae Phyo (MMiTD) ဆိုတဲ႕ ေနရာမွာ မိမိရဲ႕ feedburner Name ကိုထည္႕ေပးရမွာပါ။


အားလံုးျပီးသြားရင္ Save လုပ္ေပးပါေနာ္။ အဆင္ေျပၾကပါေစဗ်ာ။
Read More ...

Tuesday, January 15, 2013

ကိုယ္ပိုင္ Web Page တစ္ခု ရဲ႕ Loading Time ကို 50% ပိုမိုျမန္ဆန္လာေစရန္

when blog loads slow 

              ကိုယ္ပိုင္ Website တစ္ခုဟာ Web Page ေပၚမွာ တင္ထားတဲ႕ Gadget , Flash , Image ေတြ
တင္ထားတာမ်ားသြားရင္ ေႏွးေကြးေနတက္ပါတယ္။ ကၽြန္ေတာ္႕ရဲ႕ Site လည္း နည္းနည္းေတာ႕ေလး
လာတယ္ဗ်ာ။ အခုနည္းလမ္းေလးနဲ႕ ေျဖရွင္းၾကည္႕လိုက္တာ အဆင္ေျပသြားတယ္ဗ်။ အရင္ကထက္
သိပ္မေလးေတာ႕ပါဘူး။ Web Page တစ္ခုရဲ႕ Loading Time ကို 50% ေလာက္ေလွ်ာခ်ေပးႏိုင္ပါတယ္။
ဒါေၾကာင္႕အျခားေသာ သူငယ္ခ်င္းမ်ားလည္း ကိုယ္႕ရဲ႕ Web Page ကေလးေနတယ္ဆိုရင္ ေျဖရွင္းဖုိ႕အ
တြက္မွ်ေ၀ေပးလိုက္ပါတယ္ဗ်ာ။ ျပဳလုပ္ပံုအဆင္႕ဆင္႕ကိုလည္း ေအာက္မွာပံုနဲ႕တကြရွင္းျပေပးလိုက္ပါ
တယ္ေနာ္။

Facebook ရဲ႕ Like button ကိုႏွိပ္ျခင္းျဖင္႕ မိမိရဲ႕ Facebook ေပၚမွာ ဒီ Post ေလးေရာက္သြားမွာပါ။ 
ဒီ Post ေလးကိုသေဘာက်တယ္ဆိုရင္လည္း Like Button ေလးကိုႏွိပ္ခဲ႕ေပးပါေနာ္။

ဒီေနရာကေနစျပီေနာ္။ေသခ်ာေလးဖတ္ျပိးလိုက္လုပ္ၾကည္႕ေပးပါ။ လြယ္ပါတယ္။

 
 
ပထမဦးဆံုးအေနနဲ႕ မိမိရဲ႕ Template ကိုအရင္ဆံုး Backup လုပ္ထားလိုက္ပါေနာ္။
 
အဆင္႕ 1 Design > Edit HTML > Expand Widget Templates မွာအမွန္ျခစ္ေပးပါ။
အဆင္႕ 2 Ctrl + F ကိုႏွိပ္ျပီး ဒီကုတ္ေလးကိုရွာပါ  </head>
အဆင္႕ 3 ေတြ႕ျပီဆိုရင္ </head> ရဲ႕ အေပၚမွာေအာက္က Code ကို ကူးထည္႕ေပးပါ။
အဆင္႕ 4 အရင္ဆံုး Preview နဲ႕အရင္ၾကည္႕ပါ။ Error မတက္ဘူး အဆင္ေျပျပီဆိုမွ Save ႏွိပ္ေပးပါ။
 
 
<script type='text/javascript'>//<![CDATA[

(function(a){a.fn.lazyload=function(b){var

c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var


d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var


e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else


if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return

false}}});var
f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var


b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img


/>").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return


this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var

d=a(window).height()+a(window).scrollTop()}else{var
d=a(c.container).offset().top+a(c.container).height()}return
d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var

d=a(window).width()+a(window).scrollLeft()}else{var
d=a(c.container).offset().left+a(c.container).width()}return
d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var

d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return
d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var

d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return

d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a,

{threshold : 0, container:
window})","above-the-fold":"!$.belowthefold(a, {threshold : 0,
container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0,
container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0,
container:
window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDEIbKuRMSptLYzHN_0b4fDkwP_PZCsZsybmVIG2GJVoCQo1RXt_7Vc8we6LYxr1I0Da5J0NB0X-42g-f_tESQd4gSnGggQs0NbLfkgeAqxHGyGQOHijNaExgk7mZHUnUSGIs4sscMfso/s1600/truebloggertricks.blogspot.com.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>
 
အားလံုးဘဲအဆင္ေျပၾကပါေစေနာ္။
Read More ...

Monday, January 14, 2013

Attractive Effect CSS3 Drop Down Menu For Blogger


                Menu Bar ေလးတစ္ခုထပ္ျပီးမွ်ေ၀ေပးလိုက္ပါတယ္ဗ်ာ ကၽြန္ေတာ္ Menu Bar ေတြမ်ိဳးစံုကို
မွ်ေ၀ေပးထားပါတယ္ဗ်ာ တစ္ခုနဲ႕တစ္ခုေတာ႕ မတူတဲ႕ Design ေလးေတြနဲ႕ပါ။ ကၽြန္ေတာ္တင္ေပးလိုက္
တဲ႕Css3 code ေတြကလည္းအခုမွစတဲ႕ Blogger ညီကိုမ်ားအတြက္ အဆင္ေျပေျပလိုက္လုပ္ႏိုင္ပါတယ္။
ေအာက္မွာလည္း သူငယ္ခ်င္းမ်ား အဆင္ေျပေျပနဲ႕ လိုက္လုပ္ႏိုင္ေအာင္လို႕ Code ေတြကို ပံုနဲ႕တကြအ
ေသးစိတ္ရွင္းျပေပးလိုက္ပါတယ္ဗ်ာ။ လြယ္လြယ္ေလးပါ။

Facebook ရဲ႕ Like button ကိုႏွိပ္ျခင္းျဖင္႕ မိမိရဲ႕ Facebook ေပၚမွာ ဒီ Post ေလးေရာက္သြားမွာပါ။ 
ဒီ Post ေလးကိုသေဘာက်တယ္ဆိုရင္လည္း Like Button ေလးကိုႏွိပ္ခဲ႕ေပးပါေနာ္။


ဒီေနရာကေနစျပီေနာ္။ေသခ်ာေလးဖတ္ျပိးလိုက္လုပ္ၾကည္႕ေပးပါ။ လြယ္ပါတယ္။ 
drop down menu


HTML JAVASCRIPT A simple Drop Down Menu For Blogger
အဆင့္ 1  Design > Page Elements > Add a Gadget ကိုႏွိပ္ပါ။
အဆင္႕ 2 Eidt HTML ကုိေရြးေပးပါ။ ျပီးသြားရင္ ေအာက္က Code ကိုကူးထည္႕ေပးပါ။
အဆင္႕ 3 Save ႏွိပ္ေပးပါ။



<ul class="navblogtrix">
<li><a href="http://www.pyaephyo.com/">Home</a></li>
<li><a href="http://www.pyaephyo.com/">Tutorials</a>
<ul class="subs">
<li><a href="#">HTML / CSS</a></li>
<li><a href="#">JS / jQuery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">HTML / CSS</a></li>
</ul>
</li>
<li><a href="#">Resources</a>
<ul class="subs">
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">HTML / CSS</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Support</a>
<ul class="subs">
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Live</a></li>
<li><a href="#">Branches</a></li>
</ul>
</li>
<li><a href="#">Back</a></li>
</ul>

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

အဆင္႕ 4  Design > Edit HTML > Expand Widget Templates မွာအမွန္ျခစ္ေပးပါ။
အဆင္႕ 5 Ctrl + F ကိုႏွိပ္ျပီး ဒီကုတ္ေလးကိုရွာပါ  ]]></b:skin>
အဆင္႕ 6 ေတြ႕ျပီဆိုရင္ ]]></b:skin> ရဲ႕ အေပၚမွာေအာက္က Code ကို ကူးထည္႕ေပးပါ။
အဆင္႕ 7 အရင္ဆံုး Preview နဲ႕အရင္ၾကည္႕ပါ။ အဆင္ေျပျပီဆိုမွ Save ႏွိပ္ေပးပါ။

/* The CSS Code for the menu starts here pyaephyo.com */
.navblogtrix,.nav ul {
list-style:none;
margin:0;
padding:0;
height:600px;
}

.navblogtrix {
position:relative;
}

.navblogtrix ul {
height:0;
left:0;
overflow:hidden;
position:absolute;
top:46px;
}

.navblogtrix li {
float:left;
position:relative;
list-style: none;
}

.navblogtrix li a {
-moz-transition:0.5s;
-o-transition:0.5s;
-webkit-transition:0.5s;
background-color:#7770B4;
border:1px solid #6E67A6;
color:#FFF;
display:block;
font-size:16px;
line-height:35px;
padding:5px 20px;
text-decoration:none;
transition:0.5s;
}

.navblogtrix li:hover > a {
background:#8CCA33;
border-color:#6E67A6;
color:#fff;
}

.navblogtrix li:hover ul.subs {
height:auto;
width:180px;
}

.navblogtrix ul li {
-moz-transition:0.5s;
-o-transition:0.5s;
-webkit-transition:0.5s;
opacity:0;
transition:0.5s;
width:100%;
list-style: none;
}

.navblogtrix li ul li {
-moz-transition-delay:0s;
-o-transition-delay:0s;
-webkit-transition-delay:0s;
transition-delay:0s;
list-style: none;
}

.navblogtrix li:hover ul li {
opacity:1;
-moz-transition-delay:0.5s;
-o-transition-delay:0.5s;
-webkit-transition-delay:0.5s;
transition-delay:0.5s;
}

.navblogtrix ul li a {
background:#7770B4;
border-color:#6E67A6;
color:#fff;
line-height:1px;
-moz-transition:1.5s;
-o-transition:1.5s;
-webkit-transition:1.5s;
transition:1.5s;
}

.navblogtrix li:hover ul li a {
line-height:35px;
}

.navblogtrix ul li a:hover {
background:#8CCA33;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,25,0));

}
 
အားလံုးဘဲအဆင္ေျပၾကပါေစေနာ္။
Read More ...

Monday, January 7, 2013

Multilevel CSS3 Menu Bar With Icons For Blogger


           Blogger ညီကိုမ်ားအတြက္ အရင္က Menu Bar ေတြနဲ႕ မတူတဲ႕ ေနာက္ထပ္ Menu Bar အသစ္
ေလးတစ္ခုမွ်ေ၀ေပးလိုက္ပါတယ္ဗ်ာ။ အခုတင္ေပးလိုက္တဲ့ Menu Bar ကေတာ႕ Icon ေလးေတြနဲ႕ဆို
ေတာ႕ တစ္မ်ိဳးဆန္းတာေပါ႕ေနာ္။ ကၽြန္ေတာ္တင္ေပးလိုက္တဲ႕  Css3 code ေတြကလည္း အခုမွစတဲ႕ Blogger ညီကိုမ်ားအတြက္ အဆင္ေျပေျပလိုက္လုပ္ႏိုင္ပါတယ္။ ေအာက္မွာလည္း သူငယ္ခ်င္းမ်ား အ
ဆင္ေျပေျပနဲ႕ လိုက္လုပ္ႏိုင္ေအာင္လို႕ Code ေတြကို ပံုနဲ႕တကြ အေသးစိတ္ရွင္းျပေပးလိုက္ပါတယ္ဗ်ာ။ လြယ္လြယ္ေလးပါ။

Facebook ရဲ႕ Like button ကိုႏွိပ္ျခင္းျဖင္႕ မိမိရဲ႕ Facebook ေပၚမွာ ဒီ Post ေလးေရာက္သြားမွာပါ။ 
ဒီ Post ေလးကိုသေဘာက်တယ္ဆိုရင္လည္း Like Button ေလးကိုႏွိပ္ခဲ႕ေပးပါေနာ္။

 
ဒီေနရာကေနစျပီေနာ္။ေသခ်ာေလးဖတ္ျပိးလိုက္လုပ္ၾကည္႕ေပးပါ။ လြယ္ပါတယ္။ 
drop down menu


HTML JAVASCRIPT A simple Drop Down Menu For Blogger
အဆင့္ 1  Design > Page Elements > Add a Gadget ကိုႏွိပ္ပါ။
အဆင္႕ 2 Eidt HTML ကုိေရြးေပးပါ။ ျပီးသြားရင္ ေအာက္က Code ကိုကူးထည္႕ေပးပါ။
အဆင္႕ 3 Save ႏွိပ္ေပးပါ။

<ul id="navbt">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbv3OiFqw0duKrMnRh6r4zrJMdbCyECZHwc-TX3vLBsb5KvjsHTg_kwSjYqAZhwqAhAQCBmPEfKziZDVRs6RxF9aHc0jUXM1cAkCOz6_G6zE1K7Z3XM1MSBPZAYVjZAlzRfGBBwO2oncc/s1600/bloggetrix-home.png" /> Home</a></li>
<li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNXhxUL7Lm_r4iF8mZuK83WNiSwu7W5_9oQenUWPNapgVnLyFbpoBZGPKL3rjO8CcNJfMpAhym4WbPDp3TnlBYx7KFdXNEnMLI3J-J-9cMlvhVQ00dAdU4AzGNGV45ZBq_7KoM6juLzmo/s1600/bloggetrix-top1.png" /> HTML/CSS</span></a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 1</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 2</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 3</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 4</a></li>
<li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Sublinks</span></a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 41</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 42</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 43</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 44</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 45</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 46</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 47</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 48</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 49</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 6</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 7</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 8</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 9</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 10</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8C_igch69eQBim3Z-Wvr5aIqpbxV2Fdk5_9uXseLy9yZVdneW7JwqvmJinSsJJEN73oQdb0-ybPydtHGlKKHEFnmpRva18NaGv2YR-tStipMRX-k6AQffVb0z3R-MSKzGY_xGVW7IHgU/s1600/bloggetrix-top2.png" /> jQuery/JS</span></a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 1</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 2</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 3</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 4</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 5</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 6</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 7</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 8</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 9</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ_1Z1L9TA0JZIo7ZlxQ8e5utoMjvxIUkutZpQYp401wSZkWIeM73Y80CGAABVhR38pq4twa_iLQ9xj3uPzB18PQK2x-wEpUwGI9qan7rSnbSLKKXS9ogNy9aoLZ1p5NRuN0ik8-REcU/s1600/bloggetrix-bub.png" /> Link 10</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPgCMgYIp2kGUiSFva__HvlS3asszLQ3QiiK2a0W5-FtUgPYZzTA3VMvDPHi_8DtCUS5QLZ63251_hN-TCIlDEvZa40geHiYuY0Rxbi59TexLte45CI4Tl6qbw4MYCr6vS-l2koOLMqug/s1600/bloggetrix-top3.png" /> PHP</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwT49yllpHAcpqssbcFviVP0mtHpMwIeptbsVhj0bM6SEW6iCZg8MyyVX6i21zGknGmSo0rRKMKoaXP9QMxJ2vb9t2NVTbZQ-nPQqOKJn_p3c1wKkyKU6MlKgicm0PaAYCVouIiXLCTvo/s1600/bloggetrix-top4.png" /> MySQL</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAbq1aaV6v28PB4ACQYYo3DEE3lflUGObwd42ih6E5En4B_lOfMgklGBYJJIZERHRQWKRz6x4bVJFldSQcT7UmhxmOlWc8aHYHMCRQEkZU4tFdOwyf1W_mm1H5xR6qBa-UwHqrI9_RuWo/s1600/bloggetrix-top5.png" /> XSLT</a></li>
</ul>

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

အဆင္႕ 4  Design > Edit HTML > Expand Widget Templates မွာအမွန္ျခစ္ေပးပါ။
အဆင္႕ 5 Ctrl + F ကိုႏွိပ္ျပီး ဒီကုတ္ေလးကိုရွာပါ  ]]></b:skin>
အဆင္႕ 6 ေတြ႕ျပီဆိုရင္ ]]></b:skin> ရဲ႕ အေပၚမွာေအာက္က Code ကို ကူးထည္႕ေပးပါ။
အဆင္႕ 7 အရင္ဆံုး Preview နဲ႕အရင္ၾကည္႕ပါ။ အဆင္ေျပျပီဆိုမွ Save ႏွိပ္ေပးပါ။
/* icons Css3 menu www.pyaephyo.com*/

ul#navbt {
display:block;
float:left;
font-family:Trebuchet MS,sans-serif;
font-size:0;
padding:5px 5px 5px 0;

background: -moz-linear-gradient(#f5f5f5, #c4c4c4); /* FF 3.6+ */
background: -ms-linear-gradient(#f5f5f5, #c4c4c4); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #c4c4c4)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(#f5f5f5, #c4c4c4); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(#f5f5f5, #c4c4c4); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4')"; /* IE8+ */
background: linear-gradient(#f5f5f5, #c4c4c4); /* the standard */
}
ul#navbt,ul#navbt ul {
list-style:none;
margin:0;
}
ul#navbt,ul#navbt .subs {
background-color:#444;
border:1px solid #454545;

border-radius:9px;
-moz-border-radius:9px;
-webkit-border-radius:9px;
}
ul#navbt .subs {
background-color:#fff;
border:2px solid #222;
display:none;
float:left;
left:0;
padding:0 6px 6px;
position:absolute;
top:100%;
width:300px;

border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
}
ul#navbt li:hover>* {
display:block;
}
ul#navbt li:hover {
position:relative;
}
ul#navbt ul .subs {
left:100%;
position:absolute;
top:0;
}
ul#navbt ul {
padding:0 5px 5px;
}
ul#navbt .col {
float:left;
width:50%;
}
ul#navbt li {
display:block;
float:left;
font-size:0;
white-space:nowrap;
}
ul#navbt>li,ul#navbt li {
margin:0 0 0 5px;
}
ul#navbt ul>li {
margin:5px 0 0;
}
ul#navbt a:active,ul#navbt a:focus {
outline-style:none;
}
ul#navbt a {
border-style:none;
border-width:0;
color:#181818;
cursor:pointer;
display:block;
font-size:13px;
font-weight:bold;
padding:8px 18px;
text-align:left;
text-decoration:none;
text-shadow:#fff 0 1px 1px;
vertical-align:middle;
}
ul#navbt ul li {
float:none;
margin:6px 0 0;
}
ul#navbt ul a {
background-color:#fff;
border-color:#efefef;
border-style:solid;
border-width:0 0 1px;
color:#000;
font-size:11px;
padding:4px;
text-align:left;
text-decoration:none;
text-shadow:#fff 0 0 0;

border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
}
ul#navbt li:hover>a {
border-style:none;
color:#fff;
font-size:13px;
font-weight:bold;
text-decoration:none;
text-shadow:#181818 0 1px 1px;
}
ul#navbt img {
border:none;
margin-right:8px;
vertical-align:middle;
}
ul#navbt span {
background-position:right center;
background-repeat:no-repeat;
display:block;
overflow:visible;
padding-right:0;
}
ul#navbt ul span {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT-yy8zlYPkr_b9E5RB0vce0gQi8EE5JbsskLwg9AZWrHTjFsdCk9db3PlNMQ902CcWOJrzQiaLBKmD8euAcX0WbjyPk5BAS08alDNgwvAIXmXDq3V4xHHymLiQYn4TE9mZedpe3RzmIo/s1600/bloggetrix-arrow.png");
padding-right:20px;
}
ul#navbt ul li:hover>a {
border-color:#444;
border-style:solid;
color:#444;
font-size:11px;
text-decoration:none;
text-shadow:#fff 0 0 0;
}
ul#navbt > li >a {
background-color:transpa;
height:25px;
line-height:25px;

border-radius:11px;
-moz-border-radius:11px;
-webkit-border-radius:11px;
}
ul#navbt > li:hover > a {
background-color:#313638;
line-height:25px;
}

 
အားလံုးဘဲအဆင္ေျပၾကပါေစေနာ္။
Read More ...

Tuesday, January 1, 2013

3D Style Verticle Menu For Blogger


                           Blogger သူငယ္ခ်င္းေတြအတြက္ Menu ေတြတင္ေပးေနတာမွာ အခုေနာက္ပိုင္း
Vertical Menu ေတြခ်ည္းဘဲတင္ေပးျဖစ္ေနပါတယ္။ တစ္ေယာက္နဲ႕တစ္ေယာက္ေတာ႕အၾကိဳက္ခ်င္းမ
တူၾကဘူးဗ်။ Horizontal Menu ေလးကိုဘဲၾကိဳက္တယ္ဗ်ာ။ ဒါေပမယ္႕ Vertical Menu ေလးေတြထပ္တင္
ေပးပါဦးဆိုျပီး Mail ထဲမွာ ကိုေအာင္မင္းကေတာင္းထားလို႕ အျခားေသာ Blogger သူငယ္ခ်င္းမ်ားအတြက္
ပါတင္ေပးလိုက္ပါတယ္ဗ်ာ။ ေအာက္မွာလည္း ျပဳလုပ္ပံုအဆင့္ဆင့္ကိုပံုနဲ႕တကြရွင္းျပေပးထားပါတယ္။

Facebook ရဲ႕ Like button ကိုႏွိပ္ျခင္းျဖင္႕ မိမိရဲ႕ Facebook ေပၚမွာ ဒီ Post ေလးေရာက္သြားမွာပါ။ 
ဒီ Post ေလးကိုသေဘာက်တယ္ဆိုရင္လည္း Like Button ေလးကိုႏွိပ္ခဲ႕ေပးပါေနာ္။
 
 
ဒီေနရာကေနစျပီေနာ္။ေသခ်ာေလးဖတ္ျပိးလိုက္လုပ္ၾကည္႕ေပးပါ။ လြယ္ပါတယ္။ 
 
drop down menu


HTML JAVASCRIPT A simple Drop Down Menu For Blogger
အဆင့္ 1  Design > Page Elements > Add a Gadget ကိုႏွိပ္ပါ။
အဆင္႕ 2 Eidt HTML ကုိေရြးေပးပါ။ ျပီးသြားရင္ ေအာက္က Code ကိုကူးထည္႕ေပးပါ။
အဆင္႕ 3 Save ႏွိပ္ေပးပါ။
 
" # " ေနရာေတြမွာ မိမိရည္ညြန္းခ်င္တဲ႕ Link ကိုထည္႕ေပးရမွာပါ။
 
<div class="container">
<ul id="nav12">
<li><a href="http://www.pyaephyo.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.pyaephyo.com/">Add This</a></li>
</ul>

</div>
 
 ၿပီးသြားရင္ေအာက္ကအဆင္႕အတိုင္းလုိက္လုပ္ေပးပါ။

 
အဆင္႕ 4  Design > Edit HTML > Expand Widget Templates မွာအမွန္ျခစ္ေပးပါ။
အဆင္႕ 5 Ctrl + F ကိုႏွိပ္ျပီး ဒီကုတ္ေလးကိုရွာပါ  ]]></b:skin>
အဆင္႕ 6 ေတြ႕ျပီဆိုရင္ ]]></b:skin> ရဲ႕ အေပၚမွာေအာက္က Code ကို ကူးထည္႕ေပးပါ။
အဆင္႕ 7 အရင္ဆံုး Preview နဲ႕အရင္ၾကည္႕ပါ။ အဆင္ေျပျပီဆိုမွ Save ႏွိပ္ေပးပါ။
 
/* The CSS Code for the menu starts here pyaephyo.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%;
}

အားလံုးဘဲအဆင္ေျပၾကပါေစေနာ္။
Read More ...

Friday, December 28, 2012

Dark Style Css Drop Down Vertical Menu For Blogger

             
              Blogger ညီကိုမ်ားအတြက္ ေနာက္ထပ္ Menu Bar အလန္းေလးတစ္ခု မွ်ေ၀ေပးလိုက္ပါတယ္
ဗ်ာ။ Vertical Menu ကိုဒါနဲ႕ဆိုတင္တာ ႏွစ္ခုရွိသြားပါျပီ။ ဒါေလးကအရင္ဟာထက္ပိုမိုက္တယ္ဗ်ာ။ အခု
တင္ေပးလိုက္တဲ႕  Menu ေလးကလည္း အခုမွစတဲ႕ Blogger ညီကိုမ်ားအတြက္ အဆင္ေျပေျပလိုက္လုပ္
ႏိုင္ပါတယ္။ ေအာက္မွာလည္း သူငယ္ခ်င္းမ်ား အဆင္ေျပေျပနဲ႕ လိုက္လုပ္ႏိုင္ေအာင္လို႕ Code ေတြကို ပံုနဲ႕တကြ အေသးစိတ္ရွင္းျပေပးလိုက္ပါတယ္ဗ်ာ။ လြယ္လြယ္ေလးပါ။


Facebook ရဲ႕ Like button ကိုႏွိပ္ျခင္းျဖင္႕ မိမိရဲ႕ Facebook ေပၚမွာ ဒီ Post ေလးေရာက္သြားမွာပါ။ 
ဒီ Post ေလးကိုသေဘာက်တယ္ဆိုရင္လည္း Like Button ေလးကိုႏွိပ္ခဲ႕ေပးပါေနာ္။
 
 
ဒီေနရာကေနစျပီေနာ္။ေသခ်ာေလးဖတ္ျပိးလိုက္လုပ္ၾကည္႕ေပးပါ။ လြယ္ပါတယ္။ 
 
drop down menu


HTML JAVASCRIPT A simple Drop Down Menu For Blogger
အဆင့္ 1  Design > Page Elements > Add a Gadget ကိုႏွိပ္ပါ။
အဆင္႕ 2 Eidt HTML ကုိေရြးေပးပါ။ ျပီးသြားရင္ ေအာက္က Code ကိုကူးထည္႕ေပးပါ။
အဆင္႕ 3 Save ႏွိပ္ေပးပါ။

<ul id="pyaephyo_box_menu">
    <li><a href="#">Menu List 1</a>
        <ul>
              <li><a href="#">Menu List 1.1</a></li>
              <li><a href="#">Menu List 1.2</a></li>
              <li><a href="#">Menu List 1.3</a></li>
              <li><a href="#">Menu List 1.4</a></li>
        </ul>
    </li>
    
    <li><a href="#">Menu List 2</a>
        <ul>
              <li><a href="#">Menu List 2.1</a></li>
              <li><a href="#">Menu List 2.2</a></li>
              <li><a href="#">Menu List 2.3</a></li>
              <li><a href="#">Menu List 2.4</a></li>
              <li><a href="#">Menu List 2.5</a></li>
              <li><a href="#">Menu List 2.6</a></li>
        </ul>
    </li>
    
    <li><a href="#">Menu List 3</a>
        <ul>
              <li><a href="#">Menu List 3.1</a></li>
              <li><a href="#">Menu List 3.2</a></li>
        </ul>
    </li>
    
    <li><a href="#">Menu List 4</a>
        <ul>
            <li><a href="#">Menu List 4.1</a></li>
              <li><a href="#">Menu List 4.2</a></li>
              <li><a href="#">Menu List 4.3</a></li>
              <li><a href="#">Menu List 4.4</a></li>
              <li><a href="#">Menu List 4.5</a></li>
              <li><a href="#">Menu List 4.6</a></li>
        </ul>
    </li>
    
    <li><a href="#">Menu List 5</a>
          <ul>
            <li><a href="">Menu List 5.1</a></li>
              <li><a href="">Menu List 5.2</a></li>
              <li><a href="">Menu List 5.3</a></li>
              <li><a href="">Menu List 5.4</a></li>
              <li><a href="">Menu List 5.5</a></li>
              <li><a href="">Menu List 5.6</a></li>
              <li><a href="">Menu List 5.7</a></li>
              <li><a href="">Menu List 5.8</a></li>
        </ul>
    </li>
    
    <li><a href="#">Menu List 6</a>
        <ul>
            <li><a href="#">Menu List 6.1</a></li>
              <li><a href="">Menu List 6.2</a></li>
              <li><a href="#">Menu List 6.3</a></li>
              <li><a href="#">Menu List 6.4</a></li>
              <li><a href="#">Menu List 6.5</a></li>
              <li><a href="#">Menu List 6.6</a></li>
              <li><a href="#">Menu List 6.7</a></li>
              <li><a href="#">Menu List 6.8</a></li>
        </ul>
    </li>
    
    <li><a href="#">Menu List 7</a>
        <ul>
            <li><a href="#">Menu List 7.1</a></li>
              <li><a href="#">Menu List 7.2</a></li>
              <li><a href="#">Menu List 7.3</a></li>
              <li><a href="#">Menu List 7.4</a></li>
              <li><a href="#">Menu List 7.5</a></li>
              <li><a href="#">Menu List 7.6</a></li>
              <li><a href="#">Menu List 7.7</a></li>
              <li><a href="#">Menu List 7.8</a></li>
        </ul>
    </li>
    
    <li><a href="#">Menu List 8</a>
             <ul>
            <li><a href="#">Menu List 8.1</a></li>
              <li><a href="#">Menu List 8.2</a></li>
              <li><a href="#">Menu List 8.3</a></li>
              <li><a href="#">Menu List 8.4</a></li>
              <li><a href="#">Menu List 8.5</a></li>
              <li><a href="#">Menu List 8.6</a></li>
        </ul>
    </li>
    
    
</ul>
 
ၿပီးသြားရင္ေအာက္ကအဆင္႕အတိုင္းလုိက္လုပ္ေပးပါ။

 
အဆင္႕ 4  Design > Edit HTML > Expand Widget Templates မွာအမွန္ျခစ္ေပးပါ။
အဆင္႕ 5 Ctrl + F ကိုႏွိပ္ျပီး ဒီကုတ္ေလးကိုရွာပါ  ]]></b:skin>
အဆင္႕ 6 ေတြ႕ျပီဆိုရင္ ]]></b:skin> ရဲ႕ အေပၚမွာေအာက္က Code ကို ကူးထည္႕ေပးပါ။
အဆင္႕ 7 အရင္ဆံုး Preview နဲ႕အရင္ၾကည္႕ပါ။ အဆင္ေျပျပီဆိုမွ Save ႏွိပ္ေပးပါ။
 
 
/* The CSS Code for the menu starts here pyaephyo.com */
#bloggertrix_box_menu{padding:0;margin:0;width:245px;list-style:none outside none}
#bloggertrix_box_menu li{background:#252525;position:relative;border-bottom:1px solid #110f0e;border-top:1px solid #3d3732;}
#bloggertrix_box_menu li ul{position:absolute;padding:0;margin:0;left:245px;top:-1px;display:none;width:160px;list-style:none outside none;z-index:9990;background:#00CC33}
#bloggertrix_box_menu li a{background:url(http://4.bp.blogspot.com/-Z2rx2h9tJd8/UNv6FN_L0II/AAAAAAAAGFQ/ty4e9b5auHQ/s1600/bt-arrow-right-icon.png) no-repeat 5px 10px;display:block;min-height:30px;line-height:30px;margin:0;padding:0 5px 0 25px;text-decoration:none;color:#777;color:#b69786;font-size:14px;border-right:4px solid #35322c;cursor:pointer;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out}
#bloggertrix_box_menu li a:hover{border-right-color:#665d54;text-decoration:none;color:#ddd;background:#38332d url(http://4.bp.blogspot.com/-Z2rx2h9tJd8/UNv6FN_L0II/AAAAAAAAGFQ/ty4e9b5auHQ/s1600/bt-arrow-right-icon.png) no-repeat 5px 10px;}
#bloggertrix_box_menu li:hover ul, #bloggertrix_box_menu li.over ul{display:block}
 
အားလံုးဘဲအဆင္ေျပၾကပါေစေနာ္။
Read More ...
Related Posts Plugin for WordPress, Blogger...