Blogger Post Editor အတြက္ အသုံး၀င္ေသာ Keyboard Shortcut မ်ား

Keyboard Shortcuts ဆုိတာက အင္မတန္ကုိ အသုံး၀င္လွပါတယ္။ ကြန္ပ်ဴတာ အသုံးျပဳရာမွာလည္း ပုိမုိျမန္ဆန္ေအာင္ ဒီလုိ Shortcut ေတြကုိ အသုံးျပဳေလ့ရွိၾကတာကုိ ေတြ႕ရပါတယ္။ ကြန္ပ်ဴတာရဲ႕ Program တစ္ခုခ်င္းဆီ မွာလည္း သူနဲ႔ သက္ဆုိင္ရာ Shortcut ေလးေတြ မ်ားစြာ ရွိပါတယ္။

Blogger ဆုိတာ ဒီေန႔ ေခတ္မွာ ေတာ္ေတာ္ေလး အသုံး၀င္တဲ့ Blogging Platform တစ္မ်ဳိးပါ။ အဲဒါေၾကာင့္ Post ေတြ တင္ရာမွာ ပုိမုိ ျမန္ဆန္ေအာင္ Post Editor ရဲ႕ Keyboard Shortcut တခ်ဳိ႕ကုိ စုစည္း တင္ျပ ေပး လုိက္ပါတယ္ဗ်ာ။

ေအာက္မွာ ေဖာ္ျပထားတဲ့ ကီးေတြဟာ Google Chrome,  Internet Explorer 5.5+ နဲ႔ Mozilla family (1.6+ and Firefox 0.9+) ေတြနဲ႔ ေကာင္းစြာ အလုပ္လုပ္ပါတယ္။

SHORTCUT	OPERATION
Ctrl + C	Copy Selected Text
Ctrl + V	Paste Copied Text
Ctrl + Z	Undo
Ctrl + Y	Redo
Ctrl + X	Cut
Ctrl + A	Highlight the All Text
Ctrl + D	AutoSave as Draft
Ctrl + S	AutoSave and keep editing
Ctrl + F	Find a Word or Phrase
Ctrl + B	Bold the Selected text
Ctrl + U	Underline the Selected text
Ctrl + I	Change to Italic
Ctrl + P	Publish the Post
Ctrl + L	Format selected text as blockquote (only works in HTML mode)
Ctrl +  Shift + A	Insert Hyperlink
Ctrl + Shift + P	Preview the Post

သူငယ္ခ်င္းတို႔ သိတဲ့ ဒီအထဲမွာ မပါတဲ့ Blogger Post Editor ဆုိင္ရာ Keyboard Shortcut မ်ားကုိလည္း Comment တြင္ ထပ္မံေဖာ္ျပေပးပါဗ်ာ။ အခု ေဖာ္ျပထားတဲ့ Shortcut ေလးတစ္ခ်ဳိ႕ကေတာ့ သူငယ္ခ်င္း တို႔အတြက္ တဖက္တလမ္းက အသုံး၀င္မယ္လုိ႔ ေမွ်ာ္လင့္ပါတယ္။

ေက်းဇူးတင္စြာျဖင့္
iTFree4U

Read More

Adding zoom effect to Post title

• ဘေလာ့အလွဆင္နည္းေလးေတြ ႏွင့္ မိမိ blogspot ေလးကို အလွ ဆင္လိုသူ သူငယ္ခ်င္းအတြက္ Post Title အကို အလွဆင္နည္းေလး တင္ျပလိုက္ပါတယ္ခင္ဗ်ာ။ ဒီနည္းေလးကေတာ့ Post Title ကို ေဘာင္ေလးထည့္ျပီး Zoom အထြက္စတုိင္ေလး ထည့္နည္းေလးပါ။ အခု က်ေနာ္ ဆိုဒ္ေလးမွာလဲ ထည့္ထားပါတယ္ခင္ဗ်ာ။ ဥမမာအေနနဲ႔ ၾကည့္လို႔ ရတာေပါ့ေနာ္ ဟီးဟီး :P။
• အဲဒီလို ဒီဇိုင္းေလးထည့္ခ်င္တယ္ဆိုရင္ေတာ့ စလုပ္ၾကည့္ရေအာင္ဗ်ာ။
• Css ကို ထည့္ေတာ့မယ္ဆိုရင္ေတာ့ ထံုးစံ အတိုင္းေပါ့ေနာ္..။ 
• Template>>
• Customize
• Advenced
• Add Css ကို သြားလိုက္ပါ။ ျပီးရင္ေတာ့ ေအာက္မွာေပးထားတဲ့ css code ေလးေတြကို copy ယူျပီး Paste လုပ္လိုက္ပါ။ ျပီးရင္ေတာ့ ေအာက္ကို scroll down ဆင္းျပီး မိမိ template ကို ၾကည့္လိုက္ပါ Ok ျပီ ဆိုရင္ေတာ့ template ကို Apply to Blog ကို click ျပီး Save လိုက္ပါ။

.post-title{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
border-radius:25px;
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;

}
.post-title:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
background:#FAFAFA;
}

ဖတ္ေပးပါအဆင္မေျပတာေလးေတြ ရွိခဲ့ရင္ comment ေလးေရးထားခဲ့ေပးပါေနာ္

• မိမိ ဘေလာ့ ႏွင့္ အဆင္ေျပမယ္ အေရာင္ ေလးေတြကို ျပန္လည္ျပင္ဆင္ႏိုင္ပါတယ္ background:#FAFAFA; တို႕ opacity: 1; ႏွင့္ margin: 0 10px 5px 0;  တို႔အား မိမိ၏ ဘေလာ့ႏွင့္ အဆင္ေအာင္ ျပင္ဆင္ပါ။ အားလံုးပဲ အဆင္ေျပမယ္ ေမွ်ာ္လင့္ပါတယ္။ ဆက္လက္မွ်ေဝပါဦးမည္။ အားလံုးေသာ သူငယ္ခ်င္းမ်ားအား အစဥ္ေလးစားလွ်က္။

ဒါေလးကို ဖတ္ေပးပါဒီဘေလာ့ေလးသည္ ဘူးေရမ်က္ရြာ (wall.fm) ဆိုဒ္ေလးမွ တည္ေထာင္ထားပါသည္ ဘာေၾကာင့္လဲဆိုေတာ့ wall.fm ဆိုဒ္မ်ား free မရေတာ့လွ်င္ ယၡဳဘေလာ့တြင္ ဆက္လက္မွ်ေဝသြားႏိုင္ရန္ စီစဥ္ထားျခင္းျဖစ္ပါသည္

Read More

blogger post မွာ keyboard ကီးေလးေတြ ထည့္ေရးမယ္

Ctrl +F ကို ႏိႈက္ျပီး ]]></b:skin> ကို ရွာလိုက္ပါ။]]></b:skin>ကုိေတြျပီဆိုရင္ေတာ့

ေအာက္မွာေပးထားတဲ့ code ေလးေတြကို ]]></b:skin> အေပၚကေန

 Paste လုပ္လိုက္ပါ။ျပီးရင္ေတာ့  Template ကို Save လိုက္ပါ။

• css ကုဒ္ကို ေနာက္တစ္နည္း ေအာက္က အတိုင္းေလး ထည့္လို႔႔ ရပါတယ္။ အေပၚမွာ ျပထားတဲ့ နည္းေလးကို မသံုးခ်င္ဘူးဆိုရင္ေပါ့ေနာ္။ ဒီအတိုင္းေလးထည့္လိုက္ပါ။


• ပထမဆံုး Template>>Customize>>Advenced>>Add Css ကို သြားလိုက္ပါ။ css ကုဒ္ေတြ ထည့္ရန္ေနရာမွာ ေအာက္က css code ေလးေတြကို ကူးထည့္ျပီး Apply to blog ကို ကလစ္ျပီး Template ကို သိမ္းလိုက္ပါ။ ဒါကေတာ့ css ထည့္တဲ့ အပိုင္းေလး ျပီးဆံုး သြားပါျပီ။

RD{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid gray;padding:1px 5px;margin:0 5px;font-family:courier new;font-size:1.2em;-webkit-box-shadow:1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;-moz-box-shadow:1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;box-shadow:1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;background:-moz-linear-gradient(left, #fff 0%, #e2e2e2 25%);background:-webkit-gradient(linear, left top, right top, color-stop(0%, #ffffff), color-stop(25%, #e2e2e2));background:-webkit-linear-gradient(left, #fff 0%, #e2e2e2 25%);background:-o-linear-gradient(left, #fff 0%, #e2e2e2 25%);background:-ms-linear-gradient(left, #fff 0%, #e2e2e2 25%);background:linear-gradient(left, #fff 0%, #e2e2e2 25%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e2e2', GradientType=1 )}RD.space{padding:0 90px}RD:hover{cursor:default}

ဖတ္ေပးပါအဆင္မေျပတာေလးမ်ားရွိ ရင္ comment ေလးေရးျပီး ေျပာသြားေပးပါေနာ္

ဒီတစ္ခါေတာ့ က်ေနာ္တို႔ ကိုယ္တင္လိုက္တဲ့ Post မွာ keyboard ကီးေလးေတြကို ေပၚေအာင္ ဘယ္လိုေရးမယ္ဆိုတဲ့ အပိုင္းေလးျဖစ္ပါတယ္။ ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ေလးေတြကို အသံုးျပဳျပီး ေရးရမွာ ျဖစ္ပါတယ္။
Post  ေရးသားရာတြင္ html tab ကိ္ုေရြးျပီး ေအာက္ပါအတိုင္းေလး ေရးပါ။
<rd>ဒီမွာကီးဘုတ္ကီးကိုဖည့္ပါ</rd>

နမူနာ ေလးေရးျပလိုက္ပါတယ္
Ctrl Alt F
ဒါေလးကို ဖတ္ေပးပါဒီဘေလာ့ေလးသည္ ဘူးေရမ်က္ရြာ (wall.fm) ဆိုဒ္ေလးမွ တည္ေထာင္ထားပါသည္ ဘာေၾကာင့္လဲဆိုေတာ့ wall.fm ဆိုဒ္မ်ား free မရေတာ့လွ်င္ ယၡဳဘေလာ့တြင္ ဆက္လက္မွ်ေဝသြားႏိုင္ရန္ စီစဥ္ထားျခင္းျဖစ္ပါသည္

Read More

photo css effect for blogger

ဓါတ္ပံု effect

4wadi.blogspot.com

မိမိ၏ ဘေလာ့တြင္ ဓါတ္ပံုေလးေတြကို Effect လွလွေလးႏွင့္ တင္လိုသူမ်ားအတြက္ တင္ေပးလိုက္ပါတယ္။နမူနာ အား ယၡဳပံုတြင္ ၾကည့္ရႈႏိုင္ပါတယ္

CSS code

@import url(http://fonts.googleapis.com/css?family=Neucha);

@import url(http://fonts.googleapis.com/css?family=Medula+One);

.photo_container.turn {
  perspective: 800px;
  position: relative;
}

.photo_container.turn{
  background: #084138;
  border: 10px solid #000;
  border-radius: 6px;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
  width: 500px;
}

.photo_container.turn .label {
  color: #fff;
  font-family: 'Neucha', sans-serif;
  font-size: 28px;
  left: 20px;
  letter-spacing: 6px;
  opacity: 1;
  position: absolute;
  text-shadow: 0 0 10px #000;
  top: 14px;
  z-index: 9999;
}

.photo_container.turn img {
  height: 520px;
  margin: -10px 0 0 -10px;
  width: 520px;
}

.photo_container.turn .front,
.photo_container.turn .back{
  left: 0;
  position: absolute;
  top: 0;
}

.photo_container.turn .front{
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-transition: all 0.8s;
  -ms-transition: all 0.8s;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  z-index: 999;
}

.photo_container.turn .back{
  opacity: 1;
  position: relative;
  -moz-transition: all 0.8s;
  -ms-transition: all 0.8s;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
}

.photo_container.turn .description_container {
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.photo_container.turn.hover .front,
.photo_container.turn:hover .front{
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.photo_container.turn.hover .back,
.photo_container.turn:hover .back{
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.photo_container.turn .description {
  color: #fff;
  text-align: left;
}

.photo_container.turn .description .photo_title{
  border-bottom: 4px solid #fff;
  font-family: 'Medula One', serif;
  font-size: 48px;
  margin: 100px 20px 10px 20px;
  padding-bottom: 10px;
}

.photo_container.turn .description p{
  font-family: 'Medula One', serif;
  font-size: 24px;
  margin: 0;
  padding: 20px;
}

html code

<div class="photo_container turn">
  <div class="label">အေၾကာင္းအရာ</div>
  <img src="http://ibrahimjabbari.com/images/stories/effect3.jpg" class="front" />
  <div class="description back">
    <div class="description_container">
      <div class="photo_title">အေၾကာင္းအရာ ေခါင္းစဥ္</div>
      <p>အေၾကာင္းအရာ စာကို ထည့္ပါ </p>
    </div>
  </div>
</div>

မိမိ ဘေလာ့မွာ အလွဆင္လိုသူမ်ား အလွဆင္ႏိုင္ေအာင္ တင္ေပးလိုက္ပါတယ္။
Css code  ကို္ေတာ့ Template>>customize>> add css မွာ ထည့္ရမွာပါ။
Html ကိုေတာ့ ကိုယ္ Post တင္တဲ့ အခ်ိန္မွာ အသံုးျပဳရမွာ ျဖစ္ပါတယ္ ခင္ဗ်ာ.။

Read More

Mouse Hover Rounded image Css code

ပံုေလးေတြကို css code ႏွင့္ကစားလိုသူမ်ားအတြက္ ေနာက္ထပ္ကုဒ္ေလး တစ္ခု ထပ္တင္လိုက္ပါတယ္ က်ေနာ္ကိုယ္တိုင္စမ္းျပီးေတာ့ မွ တင္ေပးလိုက္ပါတယ္ခင္ဗ်ာ။

/* Solve problem where border size changes on hover */
.hover-4wadi-reounded img{
border: 0px solid black;
}
.hover-4wadi-reounded img:hover {
border: 0px solid #BADA55;
margin: 0;
padding: 0;
border-radius: 900px;
-moz-border-radius: 900px;
}

• ဒီကုဒ္လးေတြကေတာ့ အေပၚမွာ ျပထားတဲ့ ပံုေလးလိုေပါ့ Mouse ကိုေရြ႕လိုက္ရင္ ပံုေလးက ဝုိုင္းသြားမွာ ျဖစ္ပါတယ္။ စက္ဝိုင္းပံု အညီျဖစ္ဖို႔ အတြက္ကေတာ့ မိမိ တင္တဲ့ပံုေလးဟာ ေလးေထာင့္ညီ စတုရန္းေလး ျဖစ္ဖို႔ေတာ့ လိုပါမယ္ ဒါမွမဟုတ္ရင္ေတာ့ စက္ဝိုင္းပံု အညီ ထြက္မွာ မဟုတ္ပါဘူးခင္ဗ်ာ။


• ေအာက္မွာ ကေတာ့ Posting တြင္ အသံုးျပဳ ရန္ ကုဒ္ေတြျဖစ္ပါတယ္ခင္ဗ်ာ။

<center>
 <div class="hover-4wadi-reounded">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFjKmp42gV_FlhPxqIlLu2oCI3nvP_clTkqMb2H8F1PmcmiA-gZyGa0uqGipSNe6GzU8yIQp2tez-MFVUpydaANV6aPrg0Eqe1SYVsT46v2m3hHzZGskZFmcIIEJga3M398AFCPYCi7Avi/s200/ardae4.png" /></div>
</center>

HOW TO ADD CSScss ကို ဘယ္မွာထည့္ရတယ္ဆိုတာ မသိေသးေသာ သူငယ္ခ်င္းမ်ား ဒီေအာက္က how to add css ဆိုတဲ့ေနရာမွာ click ျပီးၾကည့္ႏိုင္ပါတယ္။

• အဆင္ေျပၾကလိမ့္မယ္လို႔ ေမွ်ာ္လင့္ပါတယ္ ခင္ဗ်ာ။


• အဆင္မေျပတာရွိရင္ ေကာ့မက္ေလးျဖစ္ျဖစ္ ခ်န္ထားခဲ့ေပးပါ။

ဒါေလးကို ဖတ္ေပးပါဒီဘေလာ့ေလးသည္ ဘူးေရမ်က္ရြာ (wall.fm) ဆိုဒ္ေလးမွ တည္ေထာင္ထားပါသည္ ဘာေၾကာင့္လဲဆိုေတာ့ wall.fm ဆိုဒ္မ်ား free မရေတာ့လွ်င္ ယၡဳဘေလာ့တြင္ ဆက္လက္မွ်ေဝသြားႏိုင္ရန္ စီစဥ္ထားျခင္းျဖစ္ပါသည္

Read More

blogger မွာ css ကုဒ္ေလးေတြကစားၾကမယ္

ပံု(၁) မူလပံုစံ အတိုင္း

ပံု(၂)

ပံု(၃)

ဒီတစ္ခါေတာ blogger မွာ css ကုဒ္ေလးေတြ ကစားၾကည့္ၾကမယ္ေလ။ သိတဲ့သူငယ္ခ်င္းေတြ ေက်ာ္ဖတ္ေပးပါ။ က်ေနာ္ အခုေျပာခ်င္တာေလးက blogger မွာ css code ေလးေတြႏွင့္ ပံုေလးေတြကို ဒီဇိုင္းေလးေတြ ေျပာင္းျပီး ကစားၾကည့္တာ ကိုေျပာျပခ်င္ပါတယ္။ အရင္ကလဲ css ႏွင့္ ပံုေလးေတြ တင္တဲ့ နည္းေလးေတြကို ေျပာခဲ့ပါတယ္...။ အခုေျပာမယ္ နည္းလမ္းေလးကေတာ့ ပံုေလးေတြကို rounded ေလးေတြ လုပ္တဲ့ နည္းေလးေတြပါ။

က်ေနာ္တို႔ blogger မွာ css ကုဒ္ေတြကို ထည့္တဲ့ အခါ ေနရာကို သတ္မွတ္ထားလို႔ ရပါတယ္။

Css လို႔ ျမင္လိုက္တာနဲ႔ [></:b:skin> အေပၚက ထည့္ရမယ္ဆိုတာ နားလည္ျပီးသားျဖစ္မယ္လို႔ ေမွ်ာ္လင့္ပါတယ္။ ဒါမွ မဟုတ္ရင္လဲ Template>>Customize>>Add Css>>Add Custom Css မွာ ထည့္ရပါမယ္။ ျပီးရင္ေတာ့ Css code ကို Posting ပိုင္းမွာ ခ်ိတ္ဆက္မိေအာင္ <div class="CSS name"> ဆိုျပီး ခ်ိတ္ဆက္ရပါမယ္။ ကိုယ္ဖာသာ css code ေလးေတြ ကို ဆက္ျပီး ကလိႏိုင္ေအာင္ က်ေနာ္ သိသေလာက္လဲ ပဲ ေျပာျပတာပါ။ ျပည့္စံုမႈ ရွိမ်ာ မဟုတ္ပါ။ ဆရာမ်ားအေနႏွင့္လဲ အျပဳသေဘာျဖင့္ ဝင္ေရာက္ေဆြးေႏြးေပးေစလိုပါတယ္။

ေအာက္မွာ css code ေလးေတြ ေပးလိုက္ပါတယ္။ ဒါကေတာ့ ပံု(img) ေလးရဲ႕ အနားစြန္းေလး(corners) ေတြကို Rounded လုပ္မွာ ျဖစ္လို႔  .roundedcorners img လို႔ေပးထားလိုက္ပါတယ္။

ပံု(၂) ကို သံုးထားေသာကုဒ္

.roundedcorners2 img {
border: 2px solid #BADA55;
margin: 0;
padding: 0;
border-radius: 45px;
-moz-border-radius: 45px;
}

ပံု(၃)ကို ကစာထားေသာ ကုဒ္

.roundedcorners img {
border: 2px solid #BADA55;
margin: 0;
padding: 0;
border-radius: 900px;
-moz-border-radius: 900px;
}

ဒီေနရာမွာ က်ေနာ္တို႔ ကစားႏိုင္တာေတြကေတာ့
border: 2px solid #BADA55;
margin: 0;
padding: 0;
border-radius: 900px;
-moz-border-radius: 900px;
ေတြမွာ px (Pixel) ေတြကို ကိုလိုခ်င္သလို ေျပာင္းျပီးကစားႏိုင္ပါတယ္။ D အပိုင္းကေတာ့ css ပိုင္းမွာ ကိုယ္သလို ေျပာင္းျပီး Template ကို Save လိုက္ပါ။
ေနာက္အပိုင္းကေတာ့ က်ေနာ္တို႔ Post တင္ရာမွာ ျပင္ဆင္ရမွာပါ။
မိမိ Post တင္ရာမွာ ဒီလိုမ်ိဳး ပံုေလးေတြကို ဒီဇိုင္ႏွင့္ တင္မယ္ဆိုရင္ေတာ့ Setting>>Post and Comment>> Comment Form Message ဆိုတာမွာ အျမဲ သံုးလို႔ ရေအာင္ထည့္ထားလို႔ ရပါတယ္။
ေအာက္က code ေလးေတြကိုေပါ့။ ေအာက္မွာ က်ေနာ္ စမ္းေရးျပပါမယ္။
Post တင္ရာမွာ HTML ကို ေရြးပါမယ္။


<div class="roundedcorners"><img src="ပံု၏URL ကို ထည့္ပါ"/></div>

<div class="roundedcorners2"><img src="ပံု၏URL ကို ထည့္ပါ"/></div>
လို႔ ေရးရင္ က်ေနာ္ ဒီပို႔စ္မွာ တင္ထားတဲ့ ပံုေလးေတြ လို မိမိ၏ Post မွာ ျမင္ေတြ႕ႏိုင္မွာ ျဖစ္ပါတယ္ ခင္ဗ်ာ။
အားလံုးပဲ အဆင္ေျပမယ့္ေမွ်ာ္လင့္ပါတယ္ အဆင္ မေျပတာေလးေတြ ရွိပါက ေကာ့မက္ေရးထားခဲ့ေပးပါ။ က်ေနာ္ သိသေလာက္ေလးကို အစြမ္းကုန္ေျပာျပပါမယ္ခင္ဗ်ာ။ ေပ်ာ္ရႊင္ခ်မ္းေျမ့ၾကပါေစ။

Read More

Post a Comment စာသားကိုေျပာင္းၾကည့္ၾကမယ္

• ဘေလာ့ဂါက Comment Section မွာ "Post a Comment" ဆိုတဲ့ စာသားေလးကို ေျပာင္းၾကည့္မယ္ဗ်ာ။ က်ေနာ္ အရင္ဆံုး တစ္ခုေျပာထားခ်င္တာကေတာ့ မိမိ၏ Template ကို တစ္ခုခု ျပင္ဆင္ေတာ့မယ္ဆိုရင္ရင္ေတာ့ Backup လုပ္ထားေပးပါ။ Backup လုပ္ရန္ မသိေသးသူမ်ား ဒီမွာသြား ျပီး ဖတ္ၾကည့္ပါ။


• စျပီးလုပ္ၾကည့္ ရေအာင္ဗ်ာ။ ထံုးစံ အတိုင္းေပါ့ အရင္ဆံုး Dashboard>>Template>>Edit HTML ကိုသြားလိုက္ပါ။
• ျပီးရင္ေတာ့ <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
  <data:postCommentMsg/></a> ဆိုတာကို [Ctrl+F] ကို ႏိႈပ္ျပီး ရွာလိုက္ပါ။ ဒီေနရာမွာ က်ေနာ္တို႔ တစ္ေယာက္ႏွင့္တစ္ေယာက္ သံုးေနတဲ့ Template ေတြ မတူၾကတာေၾကာင့္ ကြဲလြဲ ႏိုင္ပါတယ္။ ဒါေပမယ့္ လုပ္လို႔ ရပါတယ္။ အဓိက က်ေနာ္တို႔လိုတာက <data:postCommentMsg/>  ရွာရမွာ ျဖစ္ပါတယ္။ ဒီလိုမ်ိဳး ေလးေတြလဲ ေတြ ႏိုင္ပါတယ္။ 

<h4 id='comment-post-message'><data:postCommentMsg/></h4> ဒီလိုေလးပါ့။
ေတြ႔တဲ့ <data:postCommentMsg/>ဆိုတဲ့ စာသားတိုင္း ကို ေအာက္မွာ ေပးထားတဲ့ စာသားႏွင့္ အထိုးေပးလိုက္ပါ။
ျပီရင္ေတာ့ Template ကို Save လုပ္လိုက္ပါ။

အသံုးျပဳရန္ကုဒ္

<img src="ဒီမွာ မိမိ အသံုးျပဳလိုေသာ ပံု၏ URL ကို ထည့္ပါ"/>

ပံု upload တင္ရန္ပံုတင္ရန္ မိမိ ဘေလာ့မွာ တင္ႏိုင္သလို ImageShack မွာတင္လဲ ေကာင္းပါတယ္ ImageShack မွာ တင္လိုပါက ဒီမွာ ကလစ္ျပီးသြားလိုက္ပါ အေကာင့္အသစ္ဖြင့္လိုက္ပါ။ ျပီးရင္ေတာ့ upload တင္လို႔ရပါျပီ။

အားလံုးပဲအဆင္ေျပၾကမယ္လို႔ ေမွ်ာ္လင့္ပါတယ္ခင္ဗ်ာ။ ဆက္လက္မွ်ေဝပါဦးမည္။

ဒါေလးကို ဖတ္ေပးပါဒီဘေလာ့ေလးသည္ ဘူးေရမ်က္ရြာ (wall.fm) ဆိုဒ္ေလးမွ တည္ေထာင္ထားပါသည္ ဘာေၾကာင့္လဲဆိုေတာ့ wall.fm ဆိုဒ္မ်ား free မရေတာ့လွ်င္ ယၡဳဘေလာ့တြင္ ဆက္လက္မွ်ေဝသြားႏိုင္ရန္ စီစဥ္ထားျခင္းျဖစ္ပါသည္

Read More

Template အား Backup လုပ္ထားျခင္း

• က်ေနာ္တို႔ blogger မွာ Template ကို ျပဳျပင္ ျပင္ဆင္ေတာ့မယ္မယ္ဆိုရင္ အဓိက လုပ္ေဆာင္ထားသင့္ေသာ အေၾကာင္းအရာေလးျဖစ္ပါတယ္။ ဒီလို backup လုပ္ထားျခင္းက မိမိ Template ကို ျပဳျပင္တဲ့အခါမွာ အမွား တစ္ခုခု ျဖစ္သြားခဲ့ရင္ ယခင္အတိုင္းမပ်က္စီးပဲ ျပန္ရေအာင္ လုပ္ေဆာင္ထားျခင္းျဖစ္ပါတယ္။


• က်ေနာ္တို႔ သံုးေနတဲ့ ဘေလာ့ေလးမွာ တစ္ခုခု ထပ္မံ ျပဳျပင္ေတာ့မယ္ဆိုရင္ေတာ့ အရင္ဆံုး မျပဳျပင္မွ Backup ျပဳလုပ္ထားျခင္းဟာ အေကာင္းဆံုးျဖစ္ပါတယ္။

ဒီ Post ေလးကေတာ့ Blogger ကို စတင္ေလ့လာသူမ်ား အတြက္ ရည္ရြယ္ျပီး တင္ေပးလိုက္တာျဖစ္ပါတယ္ ခင္ဗ်ာ။

Backup လုပ္ရန္အတြက္ အရင္ဆံုး  Dashboard>>Template ကိုသြားလိုက္ပါ။ ျပီးရင္ေတာ့ ညာဘက္အေပၚနားမွာ ရွိတဲ့ Backu/Restore ကို ကလစ္လိုက္ပါ။

ျပီးရင္ေတာ့ Download full template ကို ကလစ္ျပီ Backup ျပဳလုပ္ထားေပးပါ။

ဒါကေတာ့ က်ေနာ္တို႔ Template ကို backup လုပ္ထားလိုက္တာျဖစ္ပါတယ္။ ကကယ္လို႔မ်ား မွာယြင္းတစ္ခုခုျဖစ္ခဲ့လို႔ နဂိုအတိုင္း ျပန္ထားခ်င္တယ္ဆိုရင္ေတာ့ က်ေနာ္တို႔ Backup လုပ္ထားတဲ့ TemplateId.xml ဖိုင္ေလးကို Upload a template from a file on your hard drive ဆိုတဲ့ စာတန္းေအာက္က Browser ကို ကလစ္ျပီး upload ျပန္တင္လိုက္ရင္ နဂို အတိုင္း ပံုစံမပ်က္ ျပန္လည္ရ ရွိမွာ ျဖစ္ပါတယ္ခင္ဗ်ာ။

ဒါေလးကို ဖတ္ေပးပါဒီဘေလာ့ေလးသည္ ဘူးေရမ်က္ရြာ (wall.fm) ဆိုဒ္ေလးမွ တည္ေထာင္ထားပါသည္ ဘာေၾကာင့္လဲဆိုေတာ့ wall.fm ဆိုဒ္မ်ား free မရေတာ့လွ်င္ ယၡဳဘေလာ့တြင္ ဆက္လက္မွ်ေဝသြားႏိုင္ရန္ စီစဥ္ထားျခင္းျဖစ္ပါသည္

Read More

မိမိဘေလာ့အား ျပင္ဆင္ျခင္း

• က်ေနာ္ေျပာခ်င္တာေလးက မိမိ၏ ဘေလာ့ေလးကို ဝင္ၾကည့္တဲ့သူမ်ား အဆင္ေျပေအာင္ လုပ္ေဆာင္ထားသင့္တဲ့ နည္းလမ္းအခ်ိဳ႕ ျဖစ္ပါတယ္။ က်ေနာ္တတ္ကၽြမ္းလို႔ ေျပာျခင္း မဟုတ္ပါ. သိတာေလးေတြကို မွ်ေဝ ျခင္းမွ်သာျဖစ္ပါတယ္ ခင္ဗ်ာ...။ ဝင္ၾကည့္တဲ့ သူတိုင္း အဆင္ေျပေစရန္ ေအာက္ပါ အခ်က္မ်ားအား ျပင္ဆင္ထားသင့္ပါတယ္။ တခ်ိဳ႕ေသာ blogger ဆိုဒ္မ်ားကို ဝင္ၾကည့္ရာမွာ Loading Time က အခ်ိန္ေတာ္ေတာ္ မ်ားမ်ားေပးေစာင့္ၾကည့္ရပါတယ္။ connection ေကာင္းတဲ့ သူေတြေတာ့ မၾကာေပမယ္ connection မေကာင္းတဲ့ သူေတြအတြက္ေတာ့ ဒီအခ်က္ဟာ အင္မတန္ စိတ္ကို ကသိကေအာက္ျဖစ္ေစတယ္ ဆိုတာ ၾကံဳဖူးသူတိုင္း ခံစားဖူးၾကမွာပါ..။ ဒီေတာ့ က်ေနာ္တို႔ ကိုယ့္ ဘေလာ့ေလးကို လာၾကည့္တဲ့ သူတိုင္းကို အဆင္ေျပေစခ်င္တာဟာ blogger တိုင္း၏ ရင္ထဲက ခံစားခ်က္ရယ္ပါ။ ဒီေတာ့ က်ေနာ္တို႔ ကိုယ့္ဘေလာ့ေလးကို Loading အခ်ိန္မၾကာရေအာင္ေအာက္ပါ အခ်က္မ်ားကို လုပ္ထားသင့္တယ္လို႔ ထင္လို႔ ဒီစာေလးကို ေရးလိုက္တာျဖစ္ပါတယ္။က်ေနာ္ blogger မ်ားအား ဆရာလုပ္ျခင္း မလုပ္ပါ။က်ေနာ္ကိုယ္တိုင္ကလဲ ဘာကိုမွ ေရေရ ရာရာ မတတ္ေသးပါဆုိတာကို ဝန္ခံပါတယ္ခင္ဗ်ာ...။ လိုအပ္ေနာက္ထပ္အခ်က္အလက္မ်ားကိုလဲ ဝင္ေရာက္ေဆြးေႏြးႏိုင္ပါတယ္ ခင္ဗ်ာ...။


• ေရွာင္ရန္ေဆာင္ရန္မ်ား

• ပံု Size ၾကီးေသာ ပံုမ်ားအား အသံုးျပဳျခင္း ေရွာင္ရန္
• တျခားေသာ Hosting Site မွာ တင္ထားေသာ ပံုမ်ားကို အသံုျပဳျခင္း ေရွာင္ရန္
• တျခား Hosting Site ကုိသံုးခ်င္လွ်င္ http://imageshack.us/ ကို သံုးသင့္ပါသည္ ေဆာင္ရန္
• gif animation ပံု မ်ားမ်ား သံုးျခင္း ေရွာင္ရန္
• Template အလွဆင္ရန္ Script မ်ားကို မ်ားမ်ား အသံုးျပဳျခင္း
• widget မွာတင္တြင္ size ေသးေသာ ပံုမ်ားကိုသာ သံုးျခင္း
• အသံုးျပဳမည့္ပံုအား မိမိဘေလာ့တြင္ Upload တင္ျပီးသံုးျခင္း
• ဆိုဒ္အား ျပင္ဆင္ရာတြင္ Css မ်ားအကို ဦးစားေပး ျပင္ဆင္ျခင္း

အေပၚက ေျပာခဲ့ေသာ အခ်ိဳ႕ေသာ လုပ္ေဆာင္သင့္ေသာ အေၾကာင္းအရာမ်ား ျဖစ္ပါသည္။ ထိုအေၾကာင္းအရာမ်ားအား အတိုင္းလုပ္ထားလွ်င္ေတာ့ က်ေနာ္တို႔ ျမန္မာမွ လိုင္းမေကာင္းပဲ
သံုးေနၾကရေသာ သူငယ္ခ်င္းေတြ အတြက္ပါ အဆင္ေစမည္ဟု ေမွ်ာ္လင့္ရင္း ယခုလို႔ ေဆြးေႏြးလိုက္တာပါ။ ေနာက္လိုအပ္သည္မ်ားကို လဲ ဝင္ေရာက္ေဆြးေႏြးေပးပါဦး

ဒါေလးကို ဖတ္ေပးပါဒီဘေလာ့ေလးသည္ ဘူးေရမ်က္ရြာ (wall.fm) ဆိုဒ္ေလးမွ တည္ေထာင္ထားပါသည္ ဘာေၾကာင့္လဲဆိုေတာ့ wall.fm ဆိုဒ္မ်ား free မရေတာ့လွ်င္ ယၡဳဘေလာ့တြင္ ဆက္လက္မွ်ေဝသြားႏိုင္ရန္ စီစဥ္ထားျခင္းျဖစ္ပါသည္

Read More

Blogger wedget ရွည္လြန္းရင္

• ဒီ Wedget ေလးကေတာ့ မိမိ ဘေလာ့မွာ wedget ေလးေတြ ရွည္လြန္းအားၾကည့္ရင္ scroll box ေလးနဲ႔ထားခ်င္ရင္ အသံုးျပဳႏိုင္ပါတယ္။ တခ်ိဳေသာ ဘေလာ့ဂါဆိုဒ္ေတြမွာ ေတြ႔ႏိုင္ပါတယ္။ ေဘးမွာ တင္ထားတဲ့ wedget ေလးေတြက ရွည္လြန္းေတာ့ ဆိုဒ္ေလးကို ၾကည့္ရတာ Posting box မွာ ဟာေနျပီး စာမ်က္ႏွာက အရမ္းကို ရွည္ေနတာ ေတြရတတ္ပါတယ္။ တကယ္တန္းေျပာရရင္ေတာ့ ဘေလာ့စာမ်က္ႏွာ ၾကည့္ရတာ အရုပ္ဆိုးတယ္ေပါ့ဗ်ာ...။ အဓိက ရွည္တဲ့ wedget ေတြကေတာ့ Blog Archive ႏွင့္ lebel wedget တို႔ ျဖစ္ပါတယ္။ ရွည္လြန္းေနတဲ့ wedget ေလးေတြကို ေအာက္က နည္းလမ္းအတိုင္း Scroll Box ေလးနဲ႔ လုပ္ထားလိုက္ရင္ ဘေလာ့စာမ်က္ႏွာေလးဟာ ဗရမ္းဗဒါ ရွည္မေနေတာ့ပဲ သိပ္သီးက်စ္လစ္ လွပေသသပ္ေသာ ဘေလာ့ စာမ်က္ႏွာေလးကို ဖန္တီး ႏႈိင္မွာ ျဖစ္ပါတယ္ခင္ဗ်ာ။ စျပီး လုပ္ၾကည့္ၾကမယ္ဗ်ာ...။


• အရင္ဆံုး Template>>Edit HTML ကို သြားလိုက္ပါ။ ျပီးရင္ေတာ့ [Ctrl+F] ကိုႏိႈက္ျပီး ]]></b:skin> ကို ရွာလို္က္ပါ ေတြ ျပီဆိုရင္ေတာ့ ေအာက္မွာ ေပးထားတဲ့ Code ေတြကို Cpoy ယူျပီး ]]></b:skin> အေပၚမွာ ထည့္ေပးလိုက္ပါ။

/* Scroll box by 4wadi START */
# YourWidgetId .widget-content{
height:200px;
overflow:auto;
}
/* Scrool box END */

• YourWidgetId ဆုိေသာ ေနရာမွာ မိမိ Scroll box ထည့္လိုေသာ widget id ကို ေျပာင္းထည့္ေပးပါ။ widget id ကို ရွာရန္ ေအာက္က ပံုမွာ ၾကည့္ႏိုင္ပါတယ္။



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

ဒါေလးကို ဖတ္ေပးပါဒီဘေလာ့ေလးသည္ ဘူးေရမ်က္ရြာ (wall.fm) ဆိုဒ္ေလးမွ တည္ေထာင္ထားပါသည္ ဘာေၾကာင့္လဲဆိုေတာ့ wall.fm ဆိုဒ္မ်ား free မရေတာ့လွ်င္ ယၡဳဘေလာ့တြင္ ဆက္လက္မွ်ေဝသြားႏိုင္ရန္ စီစဥ္ထားျခင္းျဖစ္ပါသည္

Read More

Pop up Enlarge image css code

css ကုဒ္ေလးေတြနဲ႔ Bolgger မွာ ကစားလိုသူမ်ား အတြက္ပါ

• 
  ဘူးေရမ်က္ရြာ
• 
  css code မ်ား စမ္းၾကည့္ျခင္း
• 
  မ်က္စိေနာက္ေအာင္လုပ္တာ

css code

ul.enlarge{ list-style-type:none; /*remove the bullet point*/ margin-left:0; } ul.enlarge li{ display:inline-block; /*places the images in a line*/ position: relative; z-index: 0; /*resets the stack order of the list items - later we'll increase this*/ margin:10px 40px 0 20px; } ul.enlarge img{ background-color:#eae9d4; padding: 6px; -webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75); -moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75); box-shadow: 0 0 6px rgba(132, 132, 132, .75); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } ul.enlarge span{ position:absolute; left: -9999px; background-color:#eae9d4; padding: 10px; font-family: 'Droid Sans', sans-serif; font-size:.9em; text-align: center; color: #495a62; -webkit-box-shadow: 0 0 20px rgba(0,0,0, .75)); -moz-box-shadow: 0 0 20px rgba(0,0,0, .75); box-shadow: 0 0 20px rgba(0,0,0, .75); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius:8px; } ul.enlarge li:hover{ z-index: 50; cursor:pointer; } ul.enlarge span img{ padding:2px; background:#ccc; } ul.enlarge li:hover span{ top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/ left: -20px; /*distance from the left of the thumbnail to the left of the popup image*/ } ul.enlarge li:hover:nth-child(2) span{ left: -100px; } ul.enlarge li:hover:nth-child(3) span{ left: -200px; } /**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/ ul.enlarge img, ul.enlarge span{ behavior: url(pie/PIE.htc); }

html code

<ul class="enlarge">
    <li><img src="assets/image-enlarge01-sml.jpg" width="150px" height="100px" alt="4Wadi" /><span><img src="ဒီမွာ ပံု၏ URL ကိုထည့္" alt="Deckchairs" /><br />ဒီမွာ အေၾကာင္းအရာ စာထည့္</span></li>
    <li><img src="assets/image-enlarge02-sml.jpg" width="150px" height="100px" alt="4Wadi" /><span><img src="ဒီမွာ ပံု၏ URL ကိုထည့္" alt="Blackpool sunset" /><br />ဒီမွာ အေၾကာင္းအရာ စာထည့္</span></li>
    <li><img src="assets/image-enlarge03-sml.jpg" width="150px" height="100px" alt="4Wadi" /><span><img src="ဒီမွာ ပံု၏ URL ကိုထည့္" /><br />ဒီမွာ အေၾကာင္းအရာ စာထည့္</span></li>
    </ul>

Read More

Blogger မွာ Slide Out Menu လွလွေလးထည့္ၾကမယ္

Blogger Template မွာ ေတာ္ေတာ္ မ်ားမ်ား ေတာ့ မူလပါတဲ့ Menu ေလးေတြပါပါတယ္။ လန္းလဲ လန္းပါတယ္။ တကယ္လို႔ မ်ား မူရင္းပါျပီးသား Menu ကို မၾကိဳက္လို႔ ပဲျဖစ္ျဖစ္ ထပ္ျပီးေတာ့ Menu အသစ္ေလး ထည့္ခ်င္လို႔ ပဲ ျဖစ္ျဖစ္ အခု Menu ေလးက အဆင္ေျပေစမယ္လို႔ ေမွ်ာ္လင့္ပါတယ္။ ဘာလို႔ လဲ ဆိုေတာ့ ဒီ Mouse Hover Slide Out Menu ေလးက Template မွာ ေနရာ သိပ္မယူတာေၾကာင့္ ျဖစ္ပါတယ္..။ ထည့္ခ်င္တဲ့ သူငယ္ခ်င္မ်ား ေအာက္ေျပာျပထားတဲ့ နည္းလမ္းေလးအတိုင္း လုပ္ၾကည့္လိုက္ပါ...။

နမူနာ အေနနဲ႔ ဒီမွာ သြားေရာက္ ၾကည့္ႏိုင္ပါတယ္။

• ဒီတစ္ခါေတာ့ ဘေလာ့ဂါမွာ Slide out Menu အလန္းစားေလး ထည့္ၾကည့္မယ္ဗ်ာ။ မိမိ ဘေလာ့ေလးကို အလန္းစားျပင္ဆင္လိုသူမ်ား အတြက္ေတာ့ အၾကိဳက္ေတြမယ္လို႔ ေမွ်ာ္လင့္ပါတယ္ ခင္ဗ်ာ...။


• စလုက္ၾကည္ၾကရေအာင္ဗ်ာ...။ 
• ပထမဆံုး အေနနဲ႔ ေတာ့ မိမိ template ေလးကို back လုပ္ထားလိုက္ပါ..။ တစ္ခုခု လႊဲမွားသြားရင္ မိမိ template ကို အရင္အတိုင္း ျပန္ထည့္ႏိုင္ေအာင္ေပါ့ေနာ္.။
• အရင္ဆံုး Template>> Edit HTML ကို သြားလိုက္ပါ..။ ျပီးရင္ေတာ့ [Ctrl+F] ကီးကို ႏိႈက္ျပီး   ]]></b:skin> ကိုရွာလုက္ပါ။ ေတြျပီဆိုင္ရင္ေတာ့ ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ေတြကို ]]></b:skin> ၏ အေပၚက ထည့္ေပးလိုက္ပါ။
• တစ္ခုေလာက္ က်ေနာ္တို႔ မွတ္ထားရမွာက Blogger မွာ css ကုဒ္ေတြကို  ]]></b:skin> ၏ အေပၚတြင္ ထည့္ေပးရျပီး script ကို ေတာ့ </head> အေပၚမွာ ထည့္ရတယ္ဆိုတာေလးကို မွတ္ထား ေစလို႔ပါတယ္ခင္ဗ်ာ။

ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 10px; left: 0px; list-style: none; z-index:9999; } ul#navigation li { width: 100px; } ul#navigation li a { display: block; margin-left: -2px; width: 100px; height: 70px; background-color:#CFCFCF; background-repeat:no-repeat; background-position:center center; border:1px solid #AFAFAF; -moz-border-radius:0px 10px 10px 0px; -webkit-border-bottom-right-radius: 10px; -webkit-border-top-right-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-top-right-radius: 10px; /*-moz-box-shadow: 0px 4px 3px #000; -webkit-box-shadow: 0px 4px 3px #000; */ opacity: 0.6; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); } ul#navigation .home a{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEoKVub74Ks-SJCE9hygMk9S9jwGvA1yO0wyZa310Eecz0LVOtdA7myDIT0y-bEZ0v7TZkaUlQyLrsMRt41MSPqzxj-taLOuEUokpIS5SRQdDBgSTsFbGN27uNTsnrr0kELyC_xE5U_TM/s1600/home.png); } ul#navigation .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiset_ic3t9FQ4fwqaimVyld-VwX9_0hUTDH7qxDxkGKeoFBhipOiRhxfiN-qOaZp7sO_B-bd0WH7dRZRBzp5HgmIuROcPOcxrNlfV4ks7tQtcRQNCEpdEFnVyTD7N87B4_mOjp_YVpfUk/s1600/idcard.png); } ul#navigation .search a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0MfjpYilKYM2n4Ak_TjP3Tk678tyaTJcUsGFEzYUbZ_N5Cd5TgnsIh1Itv3G-6yxVWAf3aZkDkLFMbQBK8IJP8yUWNsFhk-blziP9hU7i8cIwIILvnPjegb3PcHp0MKpfrOSCMSeKdQw/s1600/search.png); } ul#navigation .podcasts a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkLNG_xRK0aavoJW9WKbBIpR6yXtdvW_gceOSAQnOPAMHQOUV-mJZBLdUY6B30MUHymcQqz0LG3m2GnhShaMiikbrR0yFSa_0vfBwiqxQ_S5cDN5mLjycE2Mum-okR2Q5_nyxHjkvvb9s/s1600/ipod.png); } ul#navigation .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8M-y-uktXv-RQvXPw1v43edxJ2TPfrxG1sqlICk_3noHKcSZNkUH4p5oNmp8rNx_NEUW1zhm9IOoT7RWbed9zJgmUV33o8eYerB8DCN1IpjzTH8iccPPqDWxT5aNyQz1MyAlHm4swdu0/s1600/rss.png); } ul#navigation .photos a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggrDxaR1Zdic025hjoCwwQFQf7OriLMdqTnmIzB9D6kCcAtXLnAO8GHOVzUOFBz8txVvnv3ocy7VxLlk6mBijr66rArag4AZHUMLeLjF2yYKdn5aTAfQOvS61I8Yo89bFpOp0mVLD3j9U/s1600/camera.png); } ul#navigation .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxMPh9S9V9bMUCeoK14doIYcUZkGOOM1YMQO-1IKrxS-4ho7nwkzEjf8pxC9HBcErepmu6f7YdhQ5bj70ekTAhx1WwRcp2kYA3UmDEvc6OrACwF9pWCaZlatNQ2S9zMIZvFAakA-_4Vns/s1600/mail.png); }

ဖတ္ေပးပါကုဒ္ထဲမွာအနီေရာင္စာသားႏွင့္ေရးထားတားေတြကေတာ့ ပံုေတြရဲ႕ URL ျဖစ္ပါတယ္ မိမိ အသံုး ျပဳလိုေသာ ပံု၏ URL ႏွင့္ အထိုးႏိုင္ပါတယ္ ခင္ဗ်ုာ။

• ေနာက္တစ္ဆင့္ ထပ္လုပ္ရမွာ ျဖစ္ပါတယ္..။


• ေနာက္ခါ [Ctrl+F] ေစာေစာ က ရွာသလိုမ်ိဳးပဲ 

</head>
<body>
ကို ရွာလိုက္ပါ။ ေတြျပီ ဆိုရင္ေတာ့ ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ကို </head>ႏွင့္ <body> အေပၚက ထည့္ေပးလိုက္ပါ။

<script type="text/javascript">

            $(function() {

                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

                $('#navigation > li').hover(

                    function () {

                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);

                    },

                    function () {

                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);

                    }

                );

            });

        </script>

</head>

<body>

<p style="display:none;"> Navigation Menu by<a href="http://www.latesthack.com">Latest Hack</a></p>

<ul id="navigation">

            <li class="home"><a href="ဒီမွာ Link ထည့္ပါ" title="Home"></a></li>

            <li class="about"><a href="ဒီမွာ Link ထည့္ပါ" title="About"></a></li>

            <li class="search"><a href="ဒီမွာ Link ထည့္ပါ" title="Search"></a></li>

            <li class="photos"><a href="ဒီမွာ Link ထည့္ပါ" title="Photos"></a></li>

            <li class="rssfeed"><a href="ဒီမွာ Link ထည့္ပါ" title="Rss Feed"></a></li>

            <li class="podcasts"><a href="ဒီမွာ Link ထည့္ပါ" title="Podcasts"></a></li>

            <li class="contact"><a href="ဒီမွာ Link ထည့္ပါ" title="Contact"></a></li>

        </ul>

အေပၚက title="..........."> ဆိုတဲ့ ေနရာမွာေတာ့ Link အေၾကာင္းအရာ နာမည္ေလးကို ထည့္ေပးႏိုင္ပါတယ္ခင္ဗ်ာ.. ဥပမာ>>[<li class="home"><a href="http://4wadi.blogspot.com/" title="ဘူးေရမ်က္ရြာ"></a></li>] ဒီလိုေလး ေျပာင္းေရးႏိုင္ပါတယ္။

အားလံုး Links ေတြ ပံုေတြကို  စိတ္ၾကိဳက္ ျပင္ဆင္ႏိုင္ပါတယ္ခင္ဗ်ာ..။ အားလံုး အဆင္ေျပၾကမယ္လို႔ ေမွ်ာ္လင့္ပါတယ္။ အဆင္ေျပတာ ရွိရင္ ေကာ့မက္ေလး ေရးထားခဲ့ေပးပါ ခင္ဗ်ာ။ :=d

ဒါေလးကို ဖတ္ေပးပါဒီဘေလာ့ေလးသည္ ဘူးေရမ်က္ရြာ (wall.fm) ဆိုဒ္ေလးမွ တည္ေထာင္ထားပါသည္ ဘာေၾကာင့္လဲဆိုေတာ့ wall.fm ဆိုဒ္မ်ား free မရေတာ့လွ်င္ ယၡဳဘေလာ့တြင္ ဆက္လက္မွ်ေဝသြားႏိုင္ရန္ စီစဥ္ထားျခင္းျဖစ္ပါသည္

Read More

Blogger post မွာ အညႊန္းေလးထည့္ၾကမယ္(tooltip)

• ဒီတစ္ခါေျပာခ်င္တာေလးကေတာ့ ဘေလာ့ဂါမွာ pop up မက္ေဆ့ပ္ ေဘာက္စ္ေလးထည့္တဲ့ နည္းေလးျဖစ္ပါတယ္။ အညႊန္းစာေလးကို လင့္ေလးနဲ႔ တြဲျပီး ထည့္ထားတာေလးျဖစ္ပါတယ္။ e လိုေျပာရ ရင္ေတာ့ tooltip ေပါ့ေနာ္ က်ေနာ္ကေတာ့ အညႊန္း လို႔ပဲ လြယ္လြယ္ေလးေျပာ လိုက္ေတာ့မယ္ဗ်ာ..။ အေပၚက ပံုေလးမွာ ျပထားသလိုမ်ိဳးေပါ့ေနာ္။ ဒီမွာ မူနာၾကည့္ဒီစာသာေလးကေတာ့ဦးပမာအေနနဲ႔
  ေရးျပထားတာျဖစ္ပါတယ္ခင္ဗ်ာေက်းဇူးတင္ပါတယ္ႏိုင္ပါတယ္ 

• စျပီး လုပ္ၾကည့္ၾကမယ္ေနာ္ ။
• ပထမဆံုး မိမိ ဘေလာ့၏ Template> Customize> ကိုသြားလိုက္ပါ ေအာက္မွာ ပံုေလးျပထားပါတယ္။

• ေနာက္တစ္ဆင့္အေနနဲ႔ Advanced > Add Css ကိုသြားလိုက္ပါ..။ေအာက္က ပံုေလးကိုၾကည့္ပါ။ အဲမွာ css ထည့္ရန္ေဘာက္{ (၄) ေနရာအထိေရာက္ေအာင္သြားလိုက္ပါ...။ "ဒီေနရာမွာ ကုဒ္ထည့္ပါ" ဆိုတဲ့ ေနရာေလးမွာ ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ေလးေတြကို Copy ယူျပီး ထည့္ေပးလိုက္ပါ။ ျပီးရင္ေတာ့ Apply to Blog ကို ကလစ္ျပီး Temlpate ကို Save လိုက္ပါ။ တစ္ပိုင္းျပီး သြားပါျပီး။(မွတ္ခ်က္ css ကုဒ္မ်ားကို  Template>>edit HTML ကိုသြားျပီး ]]></b:skin>  ကုဒ္အေပၚက ထည့္ေပးရင္လဲ ရပါတယ္ အတူတူ ပါပဲ)
  

a:link,
a:visited {
position:relative;
}
.rbtooltip {
width:300px;
position:absolute;
bottom:100%;
margin:0 0 7px 0;
padding:5px;
font-family:Verdana,sans-serif;
font-size:13px;
font-weight:normal;
font-style:normal;
text-align:left;
text-decoration:none;
text-shadow:0 1px 0 rgba(255,255,255,0.3);
line-height:1.5;
border:solid 1px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
-moz-box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
-webkit-box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
cursor:default;
display:block;
visibility:hidden;
opacity:0;
z-index:999;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;
transition:all 0.4s linear;
color:#2B2B2B;
background:#C0C0C0;
background:-moz-linear-gradient(top,rgba(192,192,192,0.8),rgba(192,192,192,1));
background:-webkit-gradient(linear,left top,left bottom,from(rgba(192,192,192,0.8)),to(rgba(192,192,192,1)));
border-color:#999999;
}
.rbtooltip:before,
.rbtooltip:after
{
width:0;
height:0;
position:absolute;
bottom:0;
margin:0 0 -20px -10px;
border:solid 10px;
border-color:transparent;
display:table-cell;
content:"";
}
.rbtooltip:before
{
margin:0 0 -24px -12px;
border:solid 12px;
border-color:transparent;
z-index:-1;
}
a:hover .rbtooltip
{
text-decoration:none;
visibility:visible;
opacity:1;
-moz-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.rbtooltip,
.rbtooltip.left {
left:0;
right:0;
}
.rbtooltip:before,
.rbtooltip:after,
.rbtooltip.left:before,
.rbtooltip.left:after {
left:40px;
right:auto;
}
.rbtooltip:before {
border-top-color:#999999;
}
.rbtooltip:after {
border-top-color:#C0C0C0;
}

How to postေအာက္မွာ ေပးထားတဲ့ ကုဒ္ေလးေတြမွာ မိမိေရးသားလိုေသာ အေၾကာင္းအရာႏွင့္ Link ကို ထည့္သြင္းျပီး ေရးသားႏုိင္ပါတယ္ ခင္ဗ်ာ

<a href="LINK-URL">ဒီေနရာမွာ စာထည့္ပါ<span class="rbtooltip">ဒီေနရာမွာ အေၾကာင္းအရင္းေရးထည့္ပါ</span></a>

အေပၚက ေပးထားတဲ့ ကုဒ္ေတြကေတာ့ မိမိ post တင္ရာတြင္ အသံုးျပဳေရးသာရမွာ ျဖစ္ပါတယ္။ အားလံုးပဲ အဆင္ေျပပါေစ။

Read More

blogger မွာ Post ကို လန္းလန္းေလးတင္ၾကမယ္

• ဒီအေၾကာင္းအရာ အရာေလးကလဲ blogger သမားအတြက္ နည္းလမ္းပဲ ျဖစ္ပါတယ္.။ blogger မွာ ပံုေလးေတြကို Post တင္ရာမွာ ဒီဇိုင္းေလးေတြ သံုးျပီး တင္နည္းေလးေတြ တင္ျပခဲ့ပါတယ္။ အခုအေၾကာင္းအရာေလးကလဲ blogger သူငယ္ခ်င္းမ်ား Post တင္ရာမွာ ပံုေလးေတြကို ဒီဇိုင္းမ်ိဳးမ်ိဳး ႏွင့္တင္ႏိုင္ေအာင္ ေနာက္တစ္မ်ိး မွ်ေဝလိုက္ပါတယ္..။ ဒီေကာင္ေလးကေတာ့ Template မွာ css code ထည့္ထားရပါတယ္။ ေနာက္တစ္ခုက Post တင္ရာမွာ HTML Code ကို အသံုးျပဳျပီး ေရးသားရပါတယ္။  အဆင့္ကေတာ့ 2 ဆင့္လုပ္ေဆာင္ရမွာ ျဖစ္ပါတယ္။ သိျပီးသား  သူငယ္ခ်င္းမ်ား ေက်ာ္ဖတ္ေပးသြားပါ။မသိေသးေသာ သူငယ္ခ်င္းမ်ား စလိုက္ရေအာင္။
• ပထမဆံုး မိမိ ဘေလာ့၏ Template> Customize> ကိုသြားလိုက္ပါ ေအာက္မွာ ပံုေလးျပထားပါတယ္။

• ေနာက္တစ္ဆင့္အေနနဲ႔ Advanced > Add Css ကိုသြားလိုက္ပါ..။ေအာက္က ပံုေလးကိုၾကည့္ပါ။ အဲမွာ css ထည့္ရန္ေဘာက္{ (၄) ေနရာအထိေရာက္ေအာင္သြားလိုက္ပါ...။ "ဒီေနရာမွာ ကုဒ္ထည့္ပါ" ဆိုတဲ့ ေနရာေလးမွာ ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ေလးေတြကို Copy ယူျပီး ထည့္ေပးလိုက္ပါ။ ျပီးရင္ေတာ့ Apply to Blog ကို ကလစ္ျပီး Temlpate ကို Save လိုက္ပါ။ တစ္ပိုင္းျပီး သြားပါျပီး။(မွတ္ခ်က္ css ကုဒ္မ်ားကို  Template>>edit HTML ကိုသြားျပီး ]]></b:skin>  ကုဒ္အေပၚက ထည့္ေပးရင္လဲ ရပါတယ္ အတူတူ ပါပဲ)
  

.hover4wadi img {
     opacity: 1.0;
     filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
     zoom: 1;
     -moz-transition: all 0.5s ease-out;
     -o-transition: all 0.5s ease-out;
     -webkit-transition: all 0.8s ease-out;
     -ms-transition: all 0.5s ease-out;
     transition: all 0.5s ease-out;
}
.hover4wadi:hover img {
     opacity: 0.5;
     filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455,  sizingMethod='auto expand');
     -moz-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     -webkit-transform: rotate(360deg);
     -ms-transform: rotate(360deg);
     transform: rotate(360deg);
     zoom: 1;
     -moz-box-shadow: 1px 1px 4px #000;
     -webkit-box-shadow: 1px 1px 4px #000;
     box-shadow: 1px 1px 4px #000;
}

post တင္ရာမွာ ဘယ္လိုသံုးမလဲေအာက္မွာ ေပးထားေသာ ကုဒ္ေတြကို Copy ယူလိုက္ပါ ျပီးရင္ေတာ့ New Post ကို သြားျပီး Post အသစ္တင္ေတာ့မယ္ဗ်ာ..။ အဲမွာ HTML ကို ေရြး ျပီး Copy ယူလာတဲ့ html ကုဒ္ေတြကို Paste လုပ္လိုက္ပါ။


HTML Code

<center><a class="hover4wadi" href="'Dေနရာမွာ ပံု၏ URL ကို ထည့္ပါ" imageanchor="1"
style="margin-left: 1em; margin-right: 1em;"><img border="0" height="185"
 src="Dေနရာမွာလဲ ပံု၏ URL ကို ထပ္ထည့္ပါ" width="320" /></a></center>

• ဒီတစ္ခါေတာ့ မိမိ တင္လိုက္တဲ့ Post ေလးက ပံုေလးကို ၾကည့္လိုက္ပါ။လန္းေနတာကို ေတြရပါလိမ့္မယ္။ အားလံုးအဆင္ေျပလိမ့္မယ္လို႔ ေမွ်ာ္လင့္ပါတယ္ခင္ဗ်ာ..။ ဆက္လက္မွ်ေဝပါဦးမည္..။                    ေမာင္ေအးလြင္(ဘူးေရမ်က္ရြာ)

ဒါေလးကို ဖတ္ေပးပါဒီဘေလာ့ေလးသည္ ဘူးေရမ်က္ရြာ (wall.fm) ဆိုဒ္ေလးမွ တည္ေထာင္ထားပါသည္ ဘာေၾကာင့္လဲဆိုေတာ့ wall.fm ဆိုဒ္မ်ား free မရေတာ့လွ်င္ ယၡဳဘေလာ့တြင္ ဆက္လက္မွ်ေဝသြားႏိုင္ရန္ စီစဥ္ထားျခင္းျဖစ္ပါသည္

Read More

How To Add Zoom Effect To Images

• ဘေလာ့ဂါ Post မွာ ပံုေလးေတြကို Zoom effect ေလး ထည့္ျပီး Post တင္နည္းေလး ျဖစ္ပါတယ္။ css ကုဒ္ေလးေတြ မ်ားရင္ Blog site Loading အခ်ိန္ ၾကားလားလို႔ ေမး စရာ ရွိပါတယ္။ ကိုယ့္ဘေလာ့ေလးကို Loading Time မၾကာေအာင္ ေရွာင္သင့္တာက Script ပိုင္းကို ေရွာင္သင့္ပါတယ္။ Css ကုဒ္အပိုင္ေၾကာင့္ေတာ့ Blog Loading Time မၾကာပါဘူး။ ဆိုဒ္မေလးပါဘူး။ စလုပ္ၾကည့္ရေအာင္ေနာ္။
• ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ေတြကို Template>>>Customize>>>Add Css ကို သြားျပီး Css ကုဒ္ထည့္ရန္ေနရာမွာ Copy ယူျပီး Paste လိုက္ပါ။

Css Code

.zoomeffect img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.zoomeffect img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

ေအာက္မွာေအးထားတာကေတာ့ Post တင္ရတြင္ Html မွာ အသံုးျပဳ ရမယ္ ကုဒ္ေတြ ျဖစ္ပါတယ္ခင္ဗ်ာ။
HTML CODE

<a class="zoomeffect" href="http://www.blogger.com/YOUR-IMAGE-URL/" target="_blank">
<img src="http://YOUR-IMAGE-URL" />

အားလံုးပဲ Blogger မွာ Css ကုဒ္ေလးေတြႏွင့္ အလွဆင္ ကစားျပီး ေပ်ာ္ရႊင္ၾကပါေစ။ ဆက္လိုက္မွ်ေဝပါဦးမည္။

Read More

image effect in blogger post

• blogger post တင္ရာမွာ ပံုေလးကို အလန္းစားေလးတင္ခ်င္တဲ့ သူငယ္ခ်င္းမ်ားအတြက္ နည္းလမ္းေလးတစ္ခု ေျပာျပခ်င္ပါတယ္ သိျပီးသားသူငယ္ခ်င္းမ်ားေတာ့ ေက်ာ္ဖတ္သြားပါ။  ပံုေလးကို Mouse Hover effect ေလး ထည့္ျပီး ေရးနည္းေလးပါ..။အသံုးျပဳရမွာကေတာ့ ပံုေလး ႏွစ္ပံု လိုအပ္တယ္..။ မူလၾကည့္ေနတဲ့ အခ်ိန္မွာ ပံုေလးတစ္ ျဖစ္ျပီး ေမာက္ကို ပံုေပၚသို႔ ေရႊ႕လိုက္တဲ့ အခါမွာ ေနာက္တစ္ပံု ေျပာင္းသြားတဲ့ effect ေလးျဖစ္ပါတယ္..။Template မွာ ဘာ css ကုဒ္မွ ထည့္သြင္းထားစရာမလိုပဲ html ပံုတင္တဲ့ ကုဒ္ေလးေတြေလာက္ပဲ အသံုးျပဳျပီး တင္တာေၾကာင့္ အရမ္းကို လြယ္ကူပါတယ္..။လြယ္ေပမယ့္လည္း လန္းတယ္ေနာ္ စမ္းၾကည့္လုိက္ပါ။ ေအာက္မွာ DEMO အေနႏွင့္ တင္ထားေပးပါတယ္ခင္ဗ်ာ...။
• DEMO

          အသံုးျပဳရန္ကုဒ္

<img src="ပထမပံု၏ URL ကို ထည့္ပါ" onmouseover="this.src='ဒုတိယပံု၏ URL ကိုထည့္ပါ'" onmouseout="this.src='ပထမပံု၏ URL ကို ထပ္ထည့္ပါ'" /></a>

• မွတ္ခ်က္
• အေရးၾကီးတာကေတာ့ပံု၏ URL ကို ထည္ရာမွာ ( 'URL'" ) အဲဒီပံုစံ အတိုင္းေလးျဖစ္ေအာင္ ထည့္ေပးပါ..။ ဒါဆိုရင္ OK ပါျပီး ..။ အားလံုး အဆင္ေျပၾကပါေစ၊

Read More

Change comment Avatar in blogger

• အေပၚမွာ ျပထားတဲ့ ပံုေလးမွာလို႔ blogger မွာ comment avatar ေလးေတြကို ဒီဇိုင္းေျပာင္း ၾကည့္ၾကမယ္..။ ဘေလာ့ကို အလွဆင္ခ်င္သူမ်ား စမ္းၾကည့္ၾကပါေနာ္..။ လုပ္နည္းေလးကေတာ့ လြယ္ပါတယ္..။စမ္းခ်င္သူမ်ား ေအာက္မွာ ပံုေလးႏွင့္ တကြ ရွင္းျပထားပါတယ္..။လိုက္လုပ္ၾကည့္လိုက္ပါေနာ္...။
• ပထမဆံုး မိမိ ဘေလာ့၏ Template> Customize> ကိုသြားလိုက္ပါ ေအာက္မွာ ပံုေလးျပထားပါတယ္။

• ေနာက္တစ္ဆင့္အေနနဲ႔ Advanced > Add Css ကိုသြားလိုက္ပါ..။ေအာက္က ပံုေလးကိုၾကည့္ပါ။ အဲမွာ css ထည့္ရန္ေဘာက္{ (၄) ေနရာအထိေရာက္ေအာင္သြားလိုက္ပါ...။

ေအာက္မွာေပးထားတဲ့ ကုဒ္ေတြကို ကူးယူျပီး css code ထည့္ရန္ျပထားေသာေနရာတြင္ ကူးထည့္လိုက္ပါ။ ျပီးရင္ေတာ့ Apply to Blog ကို ကလစ္ျပီး Template ကို Save လိုက္ပါ...။ ဒီတစ္ခါေတာ့ မိမိဘေလာ့ေလးမွာ ေပးထားတဲ့ comment ေလးေတြကို ၾကည့္လိုက္ပါ..။ စက္ဝိုင္းပံုေလးႏွင့္ လွပေနတာကို ေတြ ရပါလိမ့္မယ္..။ အားလံုးပဲ အဆင္ေျပၾကပါေစ။
css code

avatar-image-container, .avatar-image-container img { max-width: 50px !important; width: 50px !important; max-height: 50px !important; height: 50px !important; padding: 0 !important; border: 0px; -webkit-border-radius: 999px; -moz-border-radius: 999px; border-radius: 999px; } .avatar-image-container{ border:3px solid #fff !important; -webkit-box-shadow: 0 1px 2px #BBB; -moz-box-shadow: 0 1px 2px #BBB; box-shadow: 0 1px 2px #BBB; }

css ကုဒ္မ်ားသည္ Template မွာေပၚမူတည္၍ ေျပာင္းလဲႏိုင္ပါသည္...။

Read More

Post Image effect for blogger

•   blogger မွာ Post တင္တဲ့ အခါ ပံုေလးေတြကို effect ေလးေတြနဲ႔ တင္လို႔ ရေအာင္လုပ္တဲ့နည္းေလးကို ေျပာျပသြားပါမယ္။ Mouse Hover effect ေလးျဖစ္ပါတယ္။ ေအာက္မွာ နမူနာပံုေလးတင္ေပးထားပါတယ္..။ အဲလိုဒီဇိုင္းေလး ထည့္ခ်င္တယ္ဆိုရင္ေတာ့ ေအာက္က နည္းလမ္းအတိုင္းလုပ္ေဆာင္ၾကည့္ပါ။


•  နမူနာပံုေလးကိုၾကည့္ပါ..။

• ပထမဆံုး မိမိ ဘေလာ့၏ Template> Customize> Advanced > Add Css ကိုသြားလိုက္ပါ
ေအာက္မွာ ပံုေလးျပထားပါတယ္...။

• ေအာက္မွာေပးထားေသာကုဒ္ေတြကို ကူးယူျပီး ပံုမွာ ျပထားသလို css ေနရာမွာ Paste လုပ္လိုက္ပါ ။ျပီးရင္ေတာ့ Apply to blog ကို ႏႈိက္ျပီး Template ကို သိမ္းလိုက္ပါ...။ပံုတင္ျပီး Post စမ္းေရးၾကည့္ပါ.. .Mouse Hover Effect ေလးနဲ႔ ေတြရမွာျဖစ္ပါတယ္...။အားလံုးအဆင္ေျပၾကပါေစ။

/* Post Image Shadow Effect by ေမာင္ေအးလြင္ */ .post img:hover { -moz-transform: scale(1.2) rotate(-350deg); -webkit-transform: scale(1.2) rotate(-350deg); -o-transform: scale(1.2) rotate(-350deg); -ms-transform: scale(1.2) rotate(-350deg); transform: scale(1.2) rotate(-350deg); -webkit-box-shadow: 0 0 20px #45b942; -moz-box-shadow: 0 0 20px #45b942; box-shadow: 0 0 20px #45b942; }

Read More

ဘေလာ့ဂါ ပို႔တင္ရာတြင္ က်ည္ဆံစတိုင္ထည့္မယ္

• ေကာင္းစဥ္ေလးကိုေတာ့ က်ည္ဆံစတိုင္လို႔ပဲေပးလိုက္ပါတယ္..။ bullet style ေပါ့..။အခုေရးတဲ့ Post ေလးမွာ အဲဒီ ေလးကို ဥပမာအေနျဖင့္ ေဖာ္ျပထားပါတယ္..။ စာေရွ႕က ပံုေလးေတြေပါ့ေနာ္။
• OK စလိုက္ၾကရေအာင္ဗ်ာ....။
• ပထမဆံုး မိမိ ဘေလာ့၏ Template> Customize> Advanced > Add Css ကိုသြားလိုက္ပါ
ေအာက္မွာ ပံုေလးျပထားပါတယ္...။
•  ေအာက္မွာ ေပးထားတဲ့ Code ေလးေတြကို အေပၚက ပံုမွာ ျပထားတဲ့ Css ကုဒ္ထည့္ရန္ေနရာတြင္ ကူးထည့္လိုက္ပါ...။

ul.imglist { margin: 0; padding: 0; } ul.imglist li { margin: 0; list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNk2DT4L2H0yggGh5P7QdnzGApeB38Prw9PJ7jpSF3jtlB_1COyHRIC-POKq2-2xMlqJOL8oRT1_1ZLn6Sx-Co7yi_8Z5qShpJwdRBHa6w23UbEFEbJ7kWgI8d-ZVapVK1PemJBj-k3ym6/s1600/circle-bullet-point-image.png'); }

ျပီးရင္ေတာ့ Template ကို Save လိုက္ပါ..။တစ္ပိုင္းျပီးပါျပီ။
ေနာက္တစ္ဆင့္က Post တင္ေသာေနရာတြင္ က်ေနာ္တို႔ က်ည္ဆံပံုစဆိုင္ bullet style ကို သံုးမွာျဖစ္ပါတယ္
သံုးမည့္စာသးမ်ားကို ေအာက္က ကုဒ္ေလးအတိုင္းေရးသားပါ..။ အားလံုး OK သြားျပီး ဖလန္းဖလန္း လွပေသသပ္ေသာ Post ေလး ျဖစ္သြားပါျပီး။
Post တင္ရာတြင္ အသံုးျပဳရန္ကုဒ္
Post တင္ရာတြင္ အသံုးျပဳရန္ကုဒ္

<ul class="imglist">
<li>စာထည့္ရန္</li>
<li>စာထည့္ရန္</li>
</ul>

ref>>>  မူရင္ရင္း link

Read More

blogger မွာ ပံုေလးေတြကို effect နဲ႔ထည့္မယ္

• ပထမဆံုအေနနဲ႔ မိမိ၏ Blogger Account ႏွင့္ Log in ဝင္လိုက္ပါ...
• Templates >> Edit HTML ကိုသြားလိုက္ပါ...
•  ]]></b:skin>ကိုရွာလိုက္ပါ.....။
•  ]]></b:skin>ကိုေတြ႔ ျပီဆိုရင္ ေအာက္က ကုဒ္ေလးကို ]]></b:skin> ၏ေရွ႕မွာ ထည့္ေပးလိုက္ပါ....

img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
img:hover {
-webkit-transform:rotate(1080deg);
-moz-transform: rotate(1080deg);
-o-transform:  rotate(1080deg);
-ms-transform: rotate(1080deg);
transform: rotate(1080deg);
}

• ျပီး ရင္ေတာ့ Save လိုက္ပါ....။ အေပၚက ကုဒ္ေတြကေတာ့ မိမိ ၏ ဘေလာ့ပို႔စ္
• မွာ ရွိတဲ့ပံုတိုင္းဟာ ေမာက္ေလးနဲ႔ သြားတင္လိုက္ပါရင္ ပံုေလးဟာ လည္ေနတာကို ေတြရပါမယ္။

ေနာက္တစ္နည္း

ေနာက္တစ္နည္းကေတာ့ မိမိ၏ ဘေလာ့ပိုစ္မွာ ပံုအားလံုးကို မလည္ေစပဲ မိမိ လည္(rotate)လိုခ်င္ေသာ ပံုကိုသာလည္ေအာင္(rotate)လုပ္နည္းေလးပါ....။

• ပထမဆံုအေနနဲ႔ မိမိ၏ Blogger Account ႏွင့္ Log in ဝင္လိုက္ပါ...
• Templates >> Edit HTML ကိုသြားလိုက္ပါ...
•  ]]></b:skin>ကိုရွာလိုက္ပါ.....။
•  ]]></b:skin>ကိုေတြ႔ ျပီဆိုရင္ ေအာက္က ကုဒ္ေလးကို ]]></b:skin> ၏ေရွ႕မွာ ထည့္ေပးလိုက္ပါ....

.rotate {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.rotate:hover {
-webkit-transform:rotate(1080deg);
-moz-transform: rotate(1080deg);
-o-transform:  rotate(1080deg);
-ms-transform: rotate(1080deg);
transform: rotate(1080deg);
}

• ျပီး ရင္ေတာ့ Save လိုက္ပါ....။လုပ္ေဆာင္ခ်က္ေတာ့ ျပီးသြားပါျပီ...။
• ေနာက္တစ္ခ်က္ကေတာ့ rotate လုပ္ခ်င္တဲ့ ပံုေလးကို ဘယ္လိုထည့္ရလဲဆိုတာပါ...။

ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ေလးကို အသံုးျပဳျပီးကိုယ္

rotate လုပ္လိုေသာ ပံုေလးေတြကို Post တင္ရာမွာ ျဖစ္ျဖစ္ Widget ထည့္ရာမွာ ျဖစ္ျဖစ္ အသံုးျပဳႏိုင္ပါတယ္ ခင္ဗ်ာ.....။

<img class="rotate" src="ဒီေနရာမွာ ပံု၏ URL (link) ကိုထည့္ပါ" alt="ပံု၏အေၾကာင့္" title="ေခါင္းစဥ္ေရးပါ" />

ဘူးေရမ်က္ရြာဆိုဒ္ေလးမွ Post အသစ္တင္တိုင္း မိမိ Facebook စာမ်က္ႏွာေပၚက ဖတ္ရႈႏိုင္ရန္အတြက္ ဘူးေရမ်က္ရြာ Facebook Fan Page ေလးကို Like လုပ္ေပးပါေနာ္.... အားလံုးေသာ သူငယ္ခ်င္းမ်ားကို ခ်စ္ခင္ေလးစားလွ်က္....။

ေမာင္ေအးလြင္(ဘူးေရမ်က္ရြာ)

စာေရးသူအေၾကာင္း

က်ေနာ္သည္ ကြန္ပ်ဴတာနည္းပညာႏွင့္ပတ္သက္လွ်င္ အေျခခံ သင္တန္းေတာင္ တက္ခြင့္မရခဲ့သူပါ...မိမိကိုယ္ကို ကိုယ္ Self-Study လုပ္ေနရသူတစ္ေယာက္ျဖစ္ပါသည္ အေၾကာင္းအမ်ိဳးအမ်ိဳးေၾကာင့္ သင္တန္းတက္ခြင့္မရခဲ့သူေတြ အတြက္ အနည္းငယ္မွ် အသံုးတည့္မည္ဆိုပါက ေက်နပ္ေနသူ တစ္ေယာက္ပါ...။

Read More