11/08/12 ~ ဘေလာ့ခရီးသည္

8 Nov 2012

ဘေလာ့ရဲ႕အလွဆင္တဲ့Lavalamp Menu ေလးေနာ္

9:49:00 pm လယ္တီေျမသား No comments

မိတ္ေဆြတို႕ အတြက္ လာျပီေနာ္ Fancy CSS3 & jQuery Lavalamp Menu ဆိုတဲ့ စတိုင္းအလန္းစားေလးေတြပါ..မိမိတို႕ဘေလာ့မွာ စိတ္တိုင္းက် တည္ေဆာက္လို႕ ရပါျပီဗ်ာ...
သိပ္လွတဲ့ Menu ေလးေတြလို႕ေတာ့ လက္ခံၾကမွာပါေနာ္.. စမ္းသတ္ၾကည့္လိုက္ပါ... မိမိရဲ႕
ေဘလာ့ဆိုဒ္ေလး စပါယ္ရွယ္..ဂြမ္းသြားးမယ္...ေိေိ....
လုပ္နည္းနဲ႕တစ္ကြ လိုအ္ပတဲ့ကုဒ္ေတြကို ရွင္းျပထားပါတယ္...

အဆင့္ (၁)   အေနနဲ႕ ၾကည့္လုိက္ပါေနာ္...
►1- Blogger Singin ၀င္လိုက္ပါ။
►2- DASHBOARD ကိုသြားလိုက္ပါ။
►3- LAYOUT    ကိုကလစ္ပါ..။
►4- EDIT HTML ကို၀င္ပါ..
►5- Ctrl+F အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

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

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

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

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

}

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

}

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

}

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

}

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

}

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

}

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

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

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

    text-align: center;
    }

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

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

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

အဆင့္ (၂) အေနနဲ႕ ဆက္ၾကည့္ၾကပါေနာ္.... အေပၚကလိုဘဲ html ထဲမွာေပါ့ေနာ္...
</hrad> ဆိုတာေလးကို ထပ္ရွာပါ..ေတြ႕တာနဲ႕ သူ႕ေအာက္မွာ ကပ္ျပီးး ေပးထားတဲ့ ေအာက္ကကုဒ္ကို ထည့္ေပးလိုက္ပါ။

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

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

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

Highlighted Background ေလးနဲ႕ ပို႕စ္တင္နည္း

9:49:00 pm လယ္တီေျမသား No comments

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

ေဘာင္ေလးနဲ႕ ျဖစ္ေစ ဖန္တီးနိဳင္ဖို႕ ကြ်န္ေတာ္ ေတြ႕ရွိသမွ် ျပန္လည္ မွ်ေ၀ျခင္းပါ... သုံးဖို႕လဲ

သင့္တဲ့ နည္းလမ္းေလးျဖစ္ေနလို႕ပါေနာ္... ကဲစမ္းၾကည့္ၾကမယ္..

နည္းလမ္း (၁) ကေတာ့ ေနာက္ခံကာလာ အ၀ါေရာင္ေလးနဲ႕ ေအာက္ကကုဒ္ပါ။

<span style="background-color: rgb(255, 255, 0);">TEXT TO BE HIGHLIGHTED</span>

TEXT TO BE HIGHLIGHTED

နည္းလမ္း (၂) ကေတာ့ ေနာက္ခံ အစိမ္းေရာင္ေလးနဲ႕ ေအာက္ကကုဒ္ပါ။

<span style="background-color: rgb(51, 204, 0);">TEXT TO BE HIGHLIGHTED</span>

TEXT TO BE HIGHLIGHTED

နည္းလမ္း (၃) ကေတာ့ ေနာက္ခံကာလာ စိမ္းနဳေလးနဲ႕ ေအာက္ကကုဒ္ပါ။

<span style="background-color: rgb(51, 204, 255);">TEXT TO BE HIGHLIGHTED</span>

TEXT TO BE HIGHLIGHTED

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

<table border="1" cellpadding="1" width="200"><tbody><tr> <td bgcolor="#33ffcc">TEXT IN COLORED BOX </td></tr></tbody></table>

မိမိတို႕ဇယားကြက္ေလးကို လိုအပ္သလို width=200 ဆိုတာေလးကို ေျပာင္းေပးနိဳင္ပါတယ္။

TEXT IN COLORED BOX

ကဲ အားလုံးသည္ေလာက္ဆိုအဆင္ေျပပါျပီေနာ္....
အသုံးျပဳရမွာကေတာ့ ပို႕စ္တင္တဲ့ေနရာမွာ... ထည့္သုံးရမွာပါ... ပို႕စ္တင္တဲ့ေနရာမွာ..
သည္ကုဒ္ေလးေတြ မထည့္မွီ.. html ကိုကလစ္လိုက္ပါ.. ကုဒ္တခ်ိဳ႕က်လာမယ္...
ဖ်က္လိုက္ပါ.. အဲခါမွာ မိမိတို႕ တင္လိုသည့္ ကုဒ္ကို ထည့္ေပးပါ။။။
ဥပမာ။ ။
<span style="background-color: rgb(51, 204, 255);">TEXT TO BE HIGHLIGHTED</span>

ဒါေလးကို သုံးမယ္ဆိုပါစို႕... TEXT TO BE HIGHLIGHTED ဆိုတဲ့စာသားေနရာမွာ မိမိိတို႕ ထည့္လိုသည့္ စာမ်ား ကုဒ္မ်ားကို ထည့္နိဳင္ပါတယ္..

လင့္ေတြကို ေမာက္တင္တာနဲ႕ ေမာက္ပုံစံေျပာင္းေစတယ္

4:15:00 am လယ္တီေျမသား 1 comment

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

<style type="text/css">a:hover {cursor:url("ဒီေနရာမွာမိမိၾကိဳက္တဲ့ပုံရ့ဲလင့္ခ္ကုိထည့္ေပးပါ"),default}</style> </div>
</div>

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

http://fc04.deviantart.net/fs71/f/2010/094/d/6/Kalyan_hand_cursor_2_by_Zanten.gif

အဲတာေလးကို အေပၚကအနီစာသားေနရာ ထည့္ျပီး save လိုက္ပါေနာ္....

Never-Home-Older ေတြကို ပုံေလးနဲ႕ အစားထိုးနည္း(မွ်ေ၀ျခင္း)

3:54:00 am လယ္တီေျမသား 3 comments

ဒာီေန့မွ်ေ၀းေပးခ်င္တာကေတာ့ ဘေလာ့ေအာက္ေျခက newer post , home နဲ့

older post တုိ့ကုိ ပုံေလးနဲ့ေျပာင္းနည္းေလးပါ။သိျပီၾကေသာမိတ္ေဆြေတြရွိ

ရွိနုိင္သလုိမသိေသးတဲ့မိတ္ေဆြေတြလည္းရွိေကာင္းရိွနုိင္ပါတယ္။ဒါေၾကာင့္

တင္ေပးရခ်င္ျဖစ္ပါတယ္။

ကိုယ္ဟာကိုယ္မယံုၾကည္ရင္ BackUp အရင္လုပ္ေပးသင့္ပါတယ္။

၁။Layout

၂။Edit HTML

၃။ေအာက္က Code ကိုရွာပါ။Ctrl + F ျဖင့္ရွာပါ။

<data:newerPageTitle/>

၆။ေတြ့ျပီဆုိရင္ ေအာက္က cond ေလးနဲ့အစားထုိးေပးပါ

<img src="ဒီမွာမိမိႀကဳိက္တဲ့ပုံရဲ့လင့္ခ္ထည့္ပါ" />

၇။ေအာက္က cond ကုိထပ္ရွာပါ။
<data:olderPageTitle/>

၈။ ေတြ့ျပီဆုိရင္ ေအာက္က cond ေလးနဲ့အစားထုိးေပးပါ

<img src="ဒီမွာမိမိႀကဳိက္တဲ့ပုံရဲ့လင့္ခ္ထည့္ပါ" />

၉။ေအာက္က cond ကုိထပ္ရွာပါ။

<data:homeMsg/>

၁၀။ေတြ့ျပီဆုိရင္ ေအာက္က cond ေလးနဲ့အစားထုိးေပးပါ

<img src="ဒီမွာမိမိႀကဳိက္တဲ့ပုံရဲ့လင့္ခ္ထည့္ပါ" />

ျပီပါျပီ>>>>save template နုိပ္လုိက္ပါ။

ဒါေလးေတြကို စိတ္တိုင္းက် ယူသုံးနိဳင္ပါတယ္..

၁။ https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs3Z_CahtRyv7U4WTRR-vWHdcTYoZZQtXcKn1yqcNtXlpAmhfcfgoAxMeEu3_q9mvz8sOj0SA9NXhPEZrpsCBcKUU_GE3KA9NHrhW9cIzJ48Ubggf4YoGyemge_mEw0RJui_yNu2cZtoYD/s1600/Home-page.png

၂။ https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJttGnU96EURgRaquD9ulcJr1QzgrV-CZDrzEMw0sKjgIomGO1GcthS4OOHvVfXsRzlGlg9QoCPOCge9T_do2284WZR2AwVkUOozBYOJjR93w6t5KPTpWZ1EDcnYMwtq2tVGXFZ-kPqlk9/s1600/Next-page.png

၃။ https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRh_9Y11etSOzXMC4JVctd28LU_p-TntxsoE0Nm2udExX2nxJaU-4JY0yB-kVZUS1JstQq7DsW0i7PXcb4HWuCHiuKMlaKglIgNBpp6165Sl-R6QJ7No3WSID3D71mJAeDsjDzZBfBcm17/s1600/Previous-posts.png

ဒါကေတာ့ ေနာက္တမ်ိဳးးေလးပါ