အသစ္တင္ဦးမယ္ေနာ္

• ဘေလာ့မွာ Post အသစ္ေတြ မတင္ျဖစ္တာေတာင္ ေတာ္ေတာ္ ေလး ၾကာေနပီ
• အခုေနာက္ပိုင္းေတာ့ Mobile နဲ႔ ပတ္သက္တဲ့ Post ေလးေတြ တင္သြားမယ္စိတ္ကူးထားပါတယ္
• အရင္တင္ထားတဲ့ Post ေတြမွာ Dowload မရတဲ့ ဖိုင္ေတြ ရွိရင္လဲ
• ေကာ့မန္႔ေလး နဲ႕ အေၾကာင္းျပန္ေပးဖို႔ အလည္လာၾကတဲ့ မိတ္ေဆြမ်ားကို ေမတၱာရပ္ခံအပ္ပါတယ္
• နည္းပညာကုိ တတ္ကၽြမ္းလို႔ေတာ့ မဟုတ္ပါဘူး
• ေလ့လာရင္း ေလ့လာတာေလးေတြကို မွတ္တမ္း အျဖစ္ေသာ္လည္းေကာင္း
• က်ေနာ့္ကဲ့သို႔ self-study ေလ့လာေနသူမ်ားအတြက္ အနည္းငယ္မွ် အသံုး၀င္ႏိုင္ရန္ရည္ရြယ္ၿပီး
• ယခု ဘေလ့ေလးအား တည္ေဆာက္ခဲ့ျခင္းသာျဖစ္ပါသည္။
• ေမာင္ေအးလြင္(ဘူးေရမ်က္ရြာ)

3D Text & Slide out Info text in blogger post's Image

စမ္းၾကည့္တာ 4 နာရီေလာက္ၾကာသြားတယ္..။ ဒီလိုေလးေပါ့...။ ကိုယ္တိုင္ Post မွာ ပံုေတြကို mouse ေလးနဲ႔ ေထာက္လိုက္ရင္ info text ေလး Slide Out ေလး ထြက္လာေအာင္ ထည့္တာေလးပါ..။ Css ကုဒ္ေတြကို  ]]><b:skin> အေပၚက ထည့္ေတာ့ လဲ working မျဖစ္ css ဖိုင္ကို Hosting တင္ျပီး
<link rel='stylesheet' href='css/style.css'>
</head> ဒီလိုေလး ထည့္ေတာ့ လဲ working မျဖစ္..။
ေနာက္ဆံုးေတာ့ </head> အေပၚက <style>css code</style> ဒီလိုေလးထည့္လိုက္ေတာ့ အဆင္ေျပသြားပါတယ္။ ေအာက္က ပံုေလးက စမ္းျပီးေရးထားတာပါ..။ သူငယ္ခ်င္းမ်ားလဲ စမ္းခ်င္တယ္ဆိုရင္ေတာ့ ေအာက္မွာ code ေလးေတြ ေပးထားပါတယ္...။ သတိထားရမွာက သူငယ္ခ်င္းတို႔ Template နဲ႔ အေပၚ က်ေနာ္ ေျပာခဲတဲ့ နည္းသံုးနည္းထဲက တစ္နည္းနဲ႔ စမ္းလို႔ Working မျဖစ္မွ ေနာက္တစ္နည္းနဲ႔ စမ္းၾကည့္ပါ..။ မစမ္းခင္ေလးေတာ့ မိမိ Temlpate ကို Backup လုပ္ေပးထားပါ။

စမ္းေရးၾကည့္တာပါ..။

အဆင္ေျပရင္ Like ေလး တစ္ခ်က္ေလာက္ေတာ့ ေပးသြားပါ

တတ္ႏိုင္သည့္အခ်ိန္တိုင္း တတ္ႏိုင္တာေလးေတြကို မွ်ေဝေနမွာပါ

ေလ့လာရင္ ျပန္လည္ မွ်ေဝျခင္းသာျဖစ္ပါတယ္....တတ္သိလြန္၍ လုပ္ေနျခင္းမဟုတ္ပါ

Css Code


figure {
  display: block;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 0 20px 20px 0;
}
figcaption {
  position: absolute;
  background: rgba(0,0,0,0.75);
  color: white;
  padding: 10px 20px;
  opacity: 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease;
}
figure:hover figcaption {
  opacity: 1;
}
figure:before {
  content: "?";
  position: absolute;
  font-weight: 800;
  background: rgba(255,255,255,0.75);
  text-shadow: 0 0 5px white;
  color: black;
  width: 24px;
  height: 24px;
  -webkit-border-radius: 12px;
  -moz-border-radius:    12px;
  border-radius:         12px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  -moz-transition: all 0.6s ease;
  opacity: 0.75;
}
figure:hover:before {
  opacity: 0;
}

.cap-left:before {  bottom: 10px; left: 10px; }
.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }

.cap-right:before { bottom: 10px; right: 10px; }
.cap-right figcaption { bottom: 0; right: -30%; }
.cap-right:hover figcaption { right: 0; }

.cap-top:before { top: 10px; left: 10px; }
.cap-top figcaption { left: 0; top: -30%; }
.cap-top:hover figcaption { top: 0; }

.cap-bot:before { bottom: 10px; left: 10px; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }


html code ကို ေတာ့ post တင္ရာမွာ အသံုးျပဳရမွာ ျဖစ္ပါတယ္

html code

<figure class="cap-left">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlG8PTvRLiJ2MPgZbvpGjF1HDjrIRUXX8nfegCpA8WFUwalvTm2xTvNMrgGSqvwhjPJTsny5RwucjCDjWt9GWfCNUqI5kUmFkjb_GeHOzXuAKIykPi-7oI1kCcx1u7_Uavb4ansSMvlf9k/s320/b+fly.png" />
<figcaption>A country road at sunset.</figcaption>
</figure>

<figure class="cap-right">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlG8PTvRLiJ2MPgZbvpGjF1HDjrIRUXX8nfegCpA8WFUwalvTm2xTvNMrgGSqvwhjPJTsny5RwucjCDjWt9GWfCNUqI5kUmFkjb_GeHOzXuAKIykPi-7oI1kCcx1u7_Uavb4ansSMvlf9k/s320/b+fly.png" />
<figcaption>Where fairies live.</figcaption>
</figure>

<figure class="cap-top">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlG8PTvRLiJ2MPgZbvpGjF1HDjrIRUXX8nfegCpA8WFUwalvTm2xTvNMrgGSqvwhjPJTsny5RwucjCDjWt9GWfCNUqI5kUmFkjb_GeHOzXuAKIykPi-7oI1kCcx1u7_Uavb4ansSMvlf9k/s320/b+fly.png" />
<figcaption>Fall harvest</figcaption>
</figure>

<figure class="cap-bot">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlG8PTvRLiJ2MPgZbvpGjF1HDjrIRUXX8nfegCpA8WFUwalvTm2xTvNMrgGSqvwhjPJTsny5RwucjCDjWt9GWfCNUqI5kUmFkjb_GeHOzXuAKIykPi-7oI1kCcx1u7_Uavb4ansSMvlf9k/s320/b+fly.png" />
<figcaption>The green and pleasant lands of the Shire in Eriador - just West of the Brandywine River and East of the Far Downs.</figcaption>
</figure>

ကိုေအးလြင္

ေမာင္ေအးလြင္

<koayelwin style="-webkit-text-stroke-width: 0px; color: white; font-family: Zawgyi-One; font-size: 80px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: center; text-indent: 0px; text-shadow: rgb(153, 153, 153) 0px 1px 0px, rgb(136, 136, 136) 0px 2px 0px, rgb(119, 119, 119) 0px 3px 0px, rgb(102, 102, 102) 0px 4px 0px, rgb(85, 85, 85) 0px 5px 0px, rgb(68, 68, 68) 0px 6px 0px, rgb(51, 51, 51) 0px 7px 0px, rgb(0, 17, 53) 0px 8px 7px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">ေမာင္ေအးလြင္</koayelwin>

ဒီ အခု အေပၚက Code ေလးေတြက " ေမာင္ေအးလြင္" ေရးထားတဲ့ 3D စတိုင္းေလး ေရးခ်င္ရင္ အသံုးျပဳလို႔ ရေအာင္ ထည့္ေပးလိုက္ပါတယ္...။ Template မွာ ဘာမွ ျပင္စရာမလိုပဲ Post တင္ရာမွာ HTML Tab ကေန ေရးတင္ႏိုင္ပါတယ္...။

• font-size: 80px ကို ကို္ယ့္ စိတ္ၾကိဳက္ ျပန္လည္ျပင္ဆင္ႏိုင္ပါတယ္။ ဒီထက္မက အေရာင္ေတြကိုလဲ ျပင္ဆင္ႏိုင္ပါတယ္။
• "ေမာင္ေအးလြင္" လို႔ ေရးသားတဲ့ စာသာကိုေတာ့ ကိုယ္ေရးခ်င္တဲ့ စာသားကိုေျပာင္းလဲ ေရးသားႏိုင္ပါတယ္ခင္ဗ်ာ...။ အားလံုးပဲ အဆင္ေျပၾကပါေစ။ ဆက္လက္မွ်ေဝပါဦးမည္..။

blogger မွာ Post Slider ေလးထည့္ခ်င္ရင္

blogging

• မိမိ၏ ဘေလာ့မွာ Post Slider ေလး ကို လြယ္လြယ္နဲ႔ ထည့္ ၾကည့္မယ္..။ ထည့္နည္းေလးကေတာ့ အရအရမ္းကို လြယ္ပါတယ္ခင္ဗ်ာ...။


• Blogger>>Layout ကို သြားျပီး Add a Gadget ကိုေရြးလိုက္ပါ....။
• ျပီးရင္ေတာ့ ေအာက္မွာ ေပးထားတဲ့ Code ေလးေတြကို ထည့္ျပီး Gadget ကို Save လိုက္ပါ.။
• Gadget ေလးကို မိမိ ဘေလာ့နဲ႔ အဆင္ေျပမယ့္ ေနရာမွာ ထားေပးပါ။

<style scoped="" type="text/css">
ul.abt-sidebar-slider *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.abt-sidebar-slider{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.abt-sidebar-slider,ul.abt-sidebar-slider li{margin:0;padding:0;list-style:none;position:relative}
ul.abt-sidebar-slider{width:100%;height:500px}
ul.abt-sidebar-slider li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){display:block}
ul.abt-sidebar-slider img{border:0;width:100%;height:100%}
ul.abt-sidebar-slider li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%}
ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%}
ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}
ul.abt-sidebar-slider  .overlayx,ul.abt-sidebar-slider li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.abt-sidebar-slider .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeLFXOGxPgyxjRLGSISaiwU1UAe4a4POeegsOj4bPAGKAFEz9eFTzPlaQG4HZQW1wX8UWzjnj4hkqIk59ek5_V3_oAfq2PLhgYPz6X_CpKJOeEn58NlQuElwP-No2LfUdPxaTjxGPywYE/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{border:4px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.abt-sidebar-slider li:nth-child(1) .overlayx{background-position:50% 25%}
ul.abt-sidebar-slider .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
ul.abt-sidebar-slider h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{font-size:150%}
ul.abt-sidebar-slider .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
</style>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-sidebar-slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://4wadi.blogspot.com/",
MaxPost:15,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>

• http://4wadi.blogspot.com/ ဆိုတဲ့ ေနရာမွာ မိမိ ဘေလာ့ ဒိုမိန္းႏွင့္ အစားထိုးေပးပါ။


• 15 ဆိုတဲ့ ေနရာမွာ မိမိ ေဖာ္ျပလိုေသာ Post အေရအတြက္ျဖစ္ပါတယ္... မိမိ စိတ္ၾကိဳက္ ျပန္လည္ ျပင္ဆင္ႏိုင္ပါတယ္ခင္ဗ်ာ...။ အားလံုးပဲ အဆင္ေျပၾကပါေစ... ေမာင္ေအးလြင္(ဘူးေရမ်က္ရြာ)

ဒါေလးကို ဖတ္ေပးပါယခင္ဆိုဒ္ေလးျဖစ္တဲ့ (www.ayelwin.wall.fm) က Free မေပးေတာ့လို႔ အဖ်က္ခံလိုက္ပါတယ္.. အခုေနာက္ပိုင္း ယၡဳ ဘေလာ့ေလးတြင္ ဆက္လက္ မွ်ေဝသြားပါမည္..။ လာလည္ေသာ သူငယ္ခ်င္းမ်ား ေပ်ာ္ရႊင္ၾကပါေစ...ေမာင္ေအးလြင္ (ဘူးေရမ်က္ရြာ)

Magnifier Image effect for blogger

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

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

• မိမိ ဘေလာ့ထဲေရာက္ပီ ဆိုရင္ေတာ့ Template ကို သြားလိုက္ပါ...
  
  အဲကို ေရာက္ရင္ ကီးဘုတ္က Ctrl+F
  
  ကီးကို တြဲ ႏွိက္ျပီး Searh Box ကို ေခၚလိုက္ပါ။ Search Box မွာ </head> ကို ရွာ လိုက္ပါ။


• </head> ကို ရွာေတြ႔ျပီ ဆိုရင္ေတာ့ ေအာက္မွာ ေပးထားတဲ့ Code ေတြကို </head> အေပၚက ထည့္ေပးလိုက္ပါ။
• ျပီးရင္ေတာ့ Template ကို Save လိုက္လို႔ ရပါျပီး။
• က်ေနာ္ အၾကံေပးခ်င္တာ တစ္ခုကေတာ့ မိမိ Template ကို ျပင္ေတာ့မယ္ဆိုရင္ေတာ့ အရင္ဆံုး Template ကို Backup ယူထားဖို႔ကို မေမ့ပါနဲ႔..။ ကိုယ္ျပင္ရင္း တစ္စံုတစ္ခု အမွား ျဖစ္သြားတယ္ဆိုရင္ Backup ယူထားတဲ့ Template နဲ႔ နဂိုပံုစံမပ်က္ ျပန္လည္ အသံုးျပဳႏိုင္မွာ ျဖစ္ပါတယ္ ခင္ဗ်ာ..။

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <script type="text/javascript" src="https://rafiblog.googlecode.com/svn/magnify.js"> </script>

• Template ျပန္ဆင္တဲ့ အပိုင္း ျပီးသြားပါျပီ။ တစ္တစ္ခု က်ေနာ္တို႔ ဆက္ျပီး ပံုကို Post တင္တဲ့ အခါမွာ ဘယ္လိုတင္မလဲ ဆိုတဲ့ အပိုင္းပါ..။ New Post တစ္ခု တင္ဖို႔ ေနရာ ကို သြားလိုက္ပါ.။
• ျပီးရင္ ေတာ့ HTML tab ကို ေရြးလိုက္ပါ..။ ေအာက္မွာ ေပးထားတဲ့ html code ေလးေတြကို သံုးျပီး post တင္ရမွာ ျဖစ္ပါတယ္ခင္ဗ်ာ။

HTML CODE 

<img class="magnify" style="width: 210px; height: 250px;" src="YOUR IMAGE URL" />

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

ဒါေလးကို ဖတ္ေပးပါယခင္ဆိုဒ္ေလးျဖစ္တဲ့ (www.ayelwin.wall.fm) က Free မေပးေတာ့လို႔ အဖ်က္ခံလိုက္ပါတယ္.. အခုေနာက္ပိုင္း ယၡဳ ဘေလာ့ေလးတြင္ ဆက္လက္ မွ်ေဝသြားပါမည္..။ လာလည္ေသာ သူငယ္ခ်င္းမ်ား ေပ်ာ္ရႊင္ၾကပါေစ...ေမာင္ေအးလြင္ (ဘူးေရမ်က္ရြာ)

မိမိ blog မွ post ကို သူမ်ားေတြ Copy ယူလို႔မရေအာင္

     မိမိ ဘေလာ့မွာ တင္ထားတဲ့ Post ေတြကို တျခားသူေတြ Copy ယူလို႔ မရေအာင္ လုပ္တဲ့ နည္းေလးကို ေျပာျပမွာ ျဖစ္ပါတယ္ခင္ဗ်ာ...။ သိျပီးသာ အကိုေတြ အမေတြကေတာ့ ေက်ာ္ျပီး ဖတ္သြားေပးပါလို႔ ေျပာပါရေစ...။ သိတဲ့သူလည္းမ်ားၾကလိမ့္မယ္လို႔ ေမွ်ာ္လင့္ပါတယ္..။ ဒါမယ့္ တက္သစ္စ ဘေလာ့ေရးဖို႔ စျပဳတဲ့ ညီငယ္ညီမငယ္မ်ား ေရးေနၾကေသာ Blogger တက္သစ္စေလးမ်ား မသိေသးေသာ သူငယ္ခ်င္းမ်ားအတြက္ ျပန္လည္ မွ်ေဝလိုက္ပါတယ္ခင္ဗ်ာ..။
     က်ေနာ္တို႔ တစ္ခ်ိဳ႕ေသာ Blogger ေတြ မိမိကိုယ္တိုင္ ေတာ္ေတာ္ေလးအခ်ိန္းေပးေရးထားရတဲ့ Post တစ္ပုဒ္ကို စကၠန္႔ပိုင္းအတြင္း Copy/Paste လုပ္သြားရင္ စိတ္ထဲမွာ တစ္မ်ိဳးၾကီး ခံစာရမယ္ဆိုတာ အားလံုးပဲ ခံစားမိမယ့္ အေၾကာင္းအရာေလး တစ္ခုပါပဲ။ အဲေၾကာင့္ မိမိ blog post ကို Copy ယူျခင္းမွ ကာကြယ္နည္းေလးကို တင္ျပလိုက္ပါတယ္။စကားစပ္မိလို႔ ဆက္ေျပာလိုက္ပါရေစခင္ဗ်ာ.. က်ေနာ္ကေတာ့ Blogger တစ္ေယာက္ေတာ့ မဟုတ္ပါဘူး။ က်ေနာ္ ကြန္ပူတာနည္းပညာေလးေတြ ေလ့လာရင္း အလုပ္အားတဲ့ အခ်ိန္ေလးမွာ သာ Blog ကို ေရးျဖစ္တာပါ...။ ဒါေပမယ့္ က်ေနာ့္ ဘေလာ့ကို ေတာ့ တန္းဖိုးအရမ္းထားပါတယ္...။ ပီးေတာ့ က်ေနာ့္ဘေလာ့မွာ ကိုယ္တိုင္ေရးတဲ့ Post မဟုတ္ပဲ ဘေလာ့ဂါဆရာမ်ား၏ Post မ်ားကုိလဲ ကူးယူေဖာ္ျပထားတာေတြ ရွိပါတယ္။
     က်ေနာ္ ကူးယူေဖာ္ျပမိေသာ Post မ်ားကိုလဲ မူရင္ဆိုဒ္ ျပီးေတာ့ မူရင္းဆိုဒ္က Post ၏ Link ကိုပါ တပါတည္း ေဖာ္ျပျပီး Credit ေတာ့ အျမဲေပးပါတယ္...။ သူတို႔၏ အားထုတ္ၾကိဳးပန္းမႈကို အသံုးခ်ျပီး လူသိမ်ားတဲ့ ေက်ာ္ၾကားတဲ့ နာမည္ရတဲ့ Blogger တစ္ေယာက္ေတာ့ ဘယ္ေတာ့မွ မျဖစ္ခ်င္ပါဘူး။က်ေနာ့္ဘေလာ့မွ Post မွာကိုလဲ မည္သူမဆို ခြင့္ေတာင္းစရာမလို႔ ကူးယူေဖာ္ျပႏိုင္ပါတယ္။ သူငယ္ခ်င္းမ်ားအေနနဲ႔ Credit ေပးရင္ရပါတယ္... မေပးဘူးဆိုရင္လဲ က်ေနာ္ ေက်နပ္ပါတယ္ခင္ဗ်ာ...။
      စကားေျပာတာလဲ မ်ားသြားျပီး :p ။ က်ေနာ္တို႔ အခု မိမိ Blog မွ Post ကို သူမ်ားေတြ Copy ယူလို႔ မရေအာင္ ဘယ္လိုလုပ္မလဲဆိုတာကို စလိုက္ၾကရေအာင္ဗ်ာ....။

ေအာက္မွာ "အသံုးျပန္ရန္ကုဒ္" ေရးထားတဲ့ ေအာက္ Code ေလးေတြကို Copy ယူလိုက္ဗ်ာ။

<script type='text/javascript'>
 if (typeof document.onselectstart!=&quot;undefined&quot;) {
 document.onselectstart=new Function (&quot;return false&quot;);
}
 else{
 document.onmousedown=new Function (&quot;return false&quot;);
 document.onmouseup=new Function (&quot;return true&quot;);
}
</script> 

• ျပီးရင္ေတာ့ Blogger.com မွာ မိမိ Blogger အေကာင့္ႏွင့္ ဝင္လိုက္ပါ.။


• ျပီးရင္ေတာ့ Blogger dashboard ကိုေရာက္သြားျပီေပါ့။ ေနာက္တစ္ဆင့္ Template > Edit HTML > အထိေရာက္ေအာင္သြားလိုက္ပါ။ 
• Ctrl+F အကူႏွင့္ </head> ဆို Tag ေလးကို ရွာလိုက္ပါ..။ ေတြ႔ျပီဆိုရင္ေတာ့ </head> အေပၚမွာ Copy ယူလာတဲ့ ကုဒ္ေတြကုိ Paste လုပ္လိုက္ပါ...။ 
• ပီးရင္ေတာ့ Template ကို Save လိုက္လို႔ ရပါျပီး။
• ကဲ ဒီတစ္ခါေတာ့ မိမိ၏ Post ေတြကို Copy ယူလို႔ ရေသးလားလို႔ စမ္းၾကည့္ႏိုင္ပါျပီ။အားလံုးပဲ မွ်ေဝျခင္းႏွင့္ ျမန္မာ နည္းပညာေလာက တိုးတက္ၾကပါေစ

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

Slide Out Info Text when Mouse Hover On an Image

မိမိ Post မွာ ပံုေလးေတြတင္တဲ့အခါ ပံုမွာ Slide Out Text ေလးေတြ ထည့္တဲ့နည္းေလးကို ျပန္လည္မွ်ေဝခ်င္ပါတယ္...။ပံုေလးေပၚကို Mouse ကိုေရႊ႕လိုက္ရင္ Slide Out Text Info ေလး ထြက္လာတာေလးပါ။ ဘယ္လိုမ်ိဳးေလးဆိုတာကို ေတာ့ Demo အေနနဲ႔ ဒီမွာ အရင္ၾကည့္လိုက္ပါ..။ သေဘာက်တယ္ ဆိုရင္ေတာ့ ေအာက္မွာ ေျပာျပထားတဲ့ အတိုင္း လုပ္ၾကည့္လိုက္ပါ ..။
စလုပ္ၾကည့္ၾကမယ္ေနာ္

• ပထမဆံုး Blogger Dashboard ကို Blogger အေကာင့္နဲ႔ ဝင္လိုက္ပါ။
• ျပီးရင္ေတာ့ Template>>>> Customize ကို သြားလိုက္ပါ
• ျပီးရင္ေတာ့ Advanced>>> ကိုဆက္သြားပါ...။ျပီးရင္ေတာ့ Add CSS ဆိုတာကို ရွာလိုက္ပါ..။ ေတြျပီးဆို ကလစ္ေလး ေပးလိုက္ပါ..။ ဒီေတာ့ Css Code ေတြ ထည့္မယ္ Box တစ္ခု က်လာမွာ ျဖစ္ပါတယ္ ...။ ပံုေတာ့ မတင္ေတာ့ဘူး အားလံုး သိျပီးသားျဖစ္မယ္လို႔ ထင္လို႔ပါ...။ Css ေတြ ထည့္မယ့္ Box မွာ ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ေတြကို Copy ယူျပီး ကူးထည့္လိုက္ပါ။ ျပီးရင္ေတာ့ Apply To Blog ဆိုတဲ့ ညာဘက္အေပၚဆံုးနားက စာတန္းကို ကလစ္ျပီး Save လိုက္ပါ...။ 

.imagepluscontainer{ /* main image container */
position: relative;
z-index: 1;
}

.imagepluscontainer img{ /* CSS for image within container */
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc{ /* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */
color: white;
-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a{
color: white;
}

.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1; /* Reveal desc DIV fully */
}

/*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/

.imagepluscontainer div.rightslide{
width: 150px; /* reset from default */
top:15px;
right:0;
left:auto;  /* reset from default */
bottom:auto;  /* reset from default */
padding-left:15px;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
}

.imagepluscontainer:hover div.rightslide{
-moz-transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}

/*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/

.imagepluscontainer div.leftslide{
width: 150px;  /* reset from default */
top:15px;
left:0;
bottom:auto;  /* reset from default */
padding-left:15px;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
}

.imagepluscontainer:hover div.leftslide{
-moz-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform:translate(-100%, 0);
}

/*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/

.imagepluscontainer div.upslide{
top:0;
bottom:auto;  /* reset from default */
padding-bottom:10px;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}

.imagepluscontainer:hover div.upslide{
-moz-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
transform:translate(0, -100%);
}

ဒီအဆင့္ ျပီးရင္ေတာ့ က်ေနာ္ Template မွာ ျပင္ဆင္ျခင္း ျပီးသြားပါျပီ..။ မိမိတင္တဲ့ ပံုမွာ Info Slide out Text ေလး ေပၚဖို႔ အတြက္ကိုေတာ့... က်ေနာ္တို႔ Post တင္တဲ့ ေနရာမွာ ကုဒ္ေလးေတြကို သံုးရမွာ ျဖစ္ပါတယ္...။ ဒါေၾကာင့္ Create a new post ကို ဝင္လိုက္ပါ...။ ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ေလးေတြကို အသံုးျပဳပါ...။ ကုဒ္ေတြကို ထည့္ရန္ HTML ကို ေရြးျပီး ထည့္ရမွာ ျဖစ္ပါတယ္ခင္ဗ်ာ...။

<div class="imagepluscontainer" style="height: 199px; width: 263px; z-index: 2;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg59PLGxkVYs_yqFTKCu13g5BLBK2btzQ__PVZgwWTXATPh3MoKXQ9GD1f60vQ8SCKFtsW7z8px_3cOtc651tjeaWdXfMci_PpKX8Q0RMsHdBdA4ml4LOWamjT-e9pz8vc3TeP1w2J9huWC/s320/56d5126e4248a9a5e5ebab6261bfd650.gif" />
<br />
<div class="desc">
နည္းပညာေလးေတြကို ေလ့လာရင္း <a href="https://4wadi.blogspot.com/">ဘူးေရမ်က္ရြာေလးမွာ</a> မွတ္တမ္းေလး အျဖစ္ တင္ထားျခင္းသာျဖစ္ပါသည္ .
</div>
</div>
<br />
<div class="imagepluscontainer" style="height: 199px; left: 180px; width: 263px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg59PLGxkVYs_yqFTKCu13g5BLBK2btzQ__PVZgwWTXATPh3MoKXQ9GD1f60vQ8SCKFtsW7z8px_3cOtc651tjeaWdXfMci_PpKX8Q0RMsHdBdA4ml4LOWamjT-e9pz8vc3TeP1w2J9huWC/s320/56d5126e4248a9a5e5ebab6261bfd650.gif" />
<br />
<div class="desc rightslide">
နည္းပညာေလးေတြကို ေလ့လာရင္း <a href="https://4wadi.blogspot.com/">ဘူးေရမ်က္ရြာေလးမွာ</a> မွတ္တမ္းေလး အျဖစ္ တင္ထားျခင္းသာျဖစ္ပါသည္ .
</div>
</div>
<br />
<div class="imagepluscontainer" style="height: 199px; width: 263px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg59PLGxkVYs_yqFTKCu13g5BLBK2btzQ__PVZgwWTXATPh3MoKXQ9GD1f60vQ8SCKFtsW7z8px_3cOtc651tjeaWdXfMci_PpKX8Q0RMsHdBdA4ml4LOWamjT-e9pz8vc3TeP1w2J9huWC/s320/56d5126e4248a9a5e5ebab6261bfd650.gif" />
<br />
<div class="desc upslide">
နည္းပညာေလးေတြကို ေလ့လာရင္း <a href="https://4wadi.blogspot.com/">ဘူးေရမ်က္ရြာေလးမွာ</a> မွတ္တမ္းေလး အျဖစ္ တင္ထားျခင္းသာျဖစ္ပါသည္ .
</div>
</div>
<br />
<div class="imagepluscontainer" style="height: 199px; left: 180px; width: 263px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg59PLGxkVYs_yqFTKCu13g5BLBK2btzQ__PVZgwWTXATPh3MoKXQ9GD1f60vQ8SCKFtsW7z8px_3cOtc651tjeaWdXfMci_PpKX8Q0RMsHdBdA4ml4LOWamjT-e9pz8vc3TeP1w2J9huWC/s320/56d5126e4248a9a5e5ebab6261bfd650.gif" />
<br />
<div class="desc leftslide">
နည္းပညာေလးေတြကို ေလ့လာရင္း <a href="https://4wadi.blogspot.com/">ဘူးေရမ်က္ရြာေလးမွာ</a> မွတ္တမ္းေလး အျဖစ္ တင္ထားျခင္းသာျဖစ္ပါသည္ .
</div>
</div>

ပံုေလး ပံု တင္ထားေအးပါတယ္... ဒီ အေပၚက ကုဒ္ေတြထဲ့ ပံု၏ url ေတြ ဆိုဒ္ Link ေတြကို ကုိယ္ အသံုးျပဳမယ့္ ပံု URL ကိုယ္ သံုးမယ္ Link ေတြနဲ႔ ျပန္ေျပာင္းျပီး သံုးေပါ့ေနာ္..။ <div class="imagepluscontainer" style="height: 199px; left: 180px; width: 263px;"> ဒီကုဒ္ေတြထဲက height: 199px; left: 180px; width: 263px ေလးေတြကိုေတာ့ မိမိ၏ Temlpate Layout ႏွင့္ ကိုက္ညီေအာင္ ညိႇယူလိုက္ပါ...။ အားလံုးပဲ အဆင္ေျပမယ္လို႔ ေမွ်ာ္လင့္ပါတယ္ခင္ဗ်ာ


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

Image Test Html code

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

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

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

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

blogger မွာ တင္ထားတဲ့ Post တစ္ခုခ်င္းကို လူဘယ္ႏွစ္ေယာက္ဝင္ၾကည့္လဲ???

အရင္ဆံုး က်ေနာ္တစ္ခုေလာက္ ၾကိဳေျပာပါရေစ.. က်ေနာ္ blogger တစ္ေယာက္မဟုတ္ပါဘူး ... စိတ္ဝင္စာလို႔ Blogspot ေလး လုပ္ၾကည့္ရင္း နည္းပညာမ်ားကို သင္ယူေလ့လာေနသူတစ္ဦးသာ ျဖစ္ပါတယ္။ က်ေနာ္ အခု တင္ျပမယ့္ အေၾကာင္းအရာေလးကေတာ့ က်ေနာ္တို႔ Blogger မွာ မိမိ တင္ထားတဲ့ Post ေတြထဲမွ အေၾကာင္းအရာ Post တစ္ခုခ်င္းစီကို လူ ဘယ္ႏွစ္ေယာက္ ဝင္ၾကည့္ခဲ့ တယ္ဆိုတာကို ၾကည့္လို႔ ရေအာင္ လုပ္နည္းေလးျဖစ္ပါတယ္..။ က်ေနာ္လဲ ဆိုဒ္တစ္ခုကို ဝင္ၾကည့္ရင္း ေတြ႔မိလို႔ က်ေနာ့္ ဘေလာ့မွာ ထည့္ခ်င္တာနဲ႔ Google မွာ ရွာခဲ့ပါတယ္..။ ေတာ္ေတာ္လဲ ကို ေခါင္းစားခဲ့ပါတယ္... က်ေနာ့္အတြက္ေပါ့...။ သိတဲ့ တတ္တဲ့ သူေတြအတြက္ မခက္ေပမယ့္ က်ေနာ္က ေလ့လာသူတစ္ေယာက္ဆိုေတာ့ ... ေတာ္ေတာ္ ခက္ခဲ ခဲ့ပါတယ္....။ ေနာက္ဆံုးေတာ့ က်ေနာ္ ရခဲ့ပါတယ္..။ ဒါေၾကာင့္ က်ေနာ့္လို စတင္ေလ့လာသူ Blogger ေပါက္စမ်ားအတြက္ ျပန္လည္မွ်ေဝလိုက္ပါတယ္ ခင္ဗ်ာ...။

စျပီးလုပ္ၾကည့္ၾကမယ္ေနာ္...။

• ပထမဆံုး Blogger Dashboard ကို Blogger အေကာင့္နဲ႔ ဝင္လိုက္ပါ။
• ေနာက္တစ္ဆင့္ Template >> Edit HTML ကို သြားလိုက္ပါ ... ။ ေအာက္မွာ ပံုေလးျပထားပါတယ္ခင္ဗ်ာ။

ျပီးရင္ေတာ့ က်ေနာ္တုိ႔ Template ကို Edit လုပ္တဲ့ ေနရာကို ေရာက္သြားပါျပီ ။ပံုေတာ့ ထပ္မတင္ေတာ့ပါဘူး။ အားလံုးေသာ Blogger ညီငယ္ေလးမ်ား သိၾကမယ္လို႔ ထင္ပါတယ္။ အဲေနရာေရာက္တဲ့ အခါမွာေတာ့ က်ေနာ္တို႔ Edit လုပ္ရမယ့္ box မွာ ကလစ္တစ္ခ်က္ေထာက္လိုက္ပါ။ ျပီးရင္ေတာ့

Ctrl+F

ကို ႏိႈက္လိုက္ရင္ Search box ေလးကို ေအာက္က ပံုပါအတိုင္းေတြ႔ ရမွာ ျဖစ္ပါတယ္

• ဒီေလာက္ထိကို အားလံုး အဆင္ေျပရင္ မယ္လို႔ ေမွ်ာ္လင့္ပါတယ္..။ blogger ႏွင့္ ရင္းႏွီးျပီးသား သူငယ္ခ်င္းမ်ားကေတာ့ လြယ္္ကူမွာ ျဖစ္ေပမယ့္ အခုမွ စတင္ေလ့လာသူ(က်ေနာ္လိုေပါ့) ေတြကေတာ့ နည္းနည္းေလး ၾကိဳးစားျပီး လုပ္ၾကည့္ပါ ...။ :D


• D ေလာက္ကို အဆင္ေျပျပီဆိုရင္ေတာ့ အခုဆက္ျပီး အေပၚက ပံုမွာ ျပထားတဲ့ Search Box မွာ </head> ဆိုတာကို ရိုက္ျပီး ရွာလိုက္ပါ။
• </head> ကိုေတြျပီဆိုရင္ ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ေလးေတြကို Copy ယူျပီး </head> အေပၚမွာ Paste လုပ္လိုက္ပါ။

<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css" />

• အခုေနာက္တစ္ဆင့္အေနနဲ႔ က်ေနာ္တုိ႔ ဆိုတဲ့ ကုဒ္ေလးကို ထပ္ျပီးရွာရပါမယ္..<data:post.body/> ဆိုတဲ့ Code ဟာ သူငယ္ခ်င္းတို႔ Template မွာ တစ္ခုထက္မက ေတြ႔ခ်င္ ေတြပါလိမ့္မယ္။ အဲဒီ<data:post.body/> ဆို  Code ေတြေအာက္မွာ (သို႔) အေပၚမွာ ျဖစ္ျဖစ္ ေအာက္မွာ ေပးထားတဲ့ Code ေတြကို Copy ယူျပီး ထည့္ေပးလိုက္ပါ..။

• မိမိ blogger post ၏  ေအာက္ေျခနားမွာ ေတြ႔ရမွာ ျဖစ္ပါတယ္..။ နမူနာ အေနနဲ႔ (Demo) ကိုေတာ့ ဒီ အခု Post ၏ ေအာက္ဆံုးမွာ ၾကည့္ရႈႏိုပါတယ္ခင္ဗ်ာ...။

• <data:post.body/> ၏ ေအာက္(သို႔) အေပၚမွ ထည့္သြင္းအသံုးျပဳရန္ကုဒ္ကို ေအာက္မွာ ေပးထားပါတယ္ခင္ဗ်ာ။

<b:if cond='data:blog.pageType != &quot;static_page&quot;'><div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[[&#39;&lt;img src=&quot;http://static.graddit.com/img/star.png&quot;/&gt;&#39;]]}</div><div expr:id='&quot;ffbs_stats_&quot; + data:post.id' class='ffbs_stats'></div><script type='text/javascript' expr:src='&quot;http://www.graddit.com/rate/eng/5/&quot; + data:post.id + &quot;?id=&quot; + data:post.id + &quot;&amp;stats=ffbs_stats_&quot; + data:post.id + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;url=&quot; + data:post.url + &quot;&amp;class_star=ffbs_star_img&amp;class_star_set=ffbs_star_img_set&amp;class_star_vote=ffbs_star_img_vote&amp;views=yes&amp;votes=yes&amp;average=yes&quot;'></script></b:if>

ျပီးရင္ေတာ့ မိမိ၏ Template ေလးကို Save လိုက္လို႔ ရပါျပီး။။။ အားလံုးအဆင္ေျပမယ္လို႔ ေမွ်ာ္လင့္ပါတယ္...။ အဆင္မေျပတာေလးေတြ ရွိရင္လဲ ျပန္လည္ေဆြးေႏြးေပးၾကပါဦးခင္ဗ်ာ..။

Template မ်ားမွာ ကြဲလႊဲမႈမ်ားေတာ့ ရွိႏိုင္ပါတယ္ ခင္ဗ်ာ..။

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

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 မရေတာ့လွ်င္ ယၡဳဘေလာ့တြင္ ဆက္လက္မွ်ေဝသြားႏိုင္ရန္ စီစဥ္ထားျခင္းျဖစ္ပါသည္

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 မရေတာ့လွ်င္ ယၡဳဘေလာ့တြင္ ဆက္လက္မွ်ေဝသြားႏိုင္ရန္ စီစဥ္ထားျခင္းျဖစ္ပါသည္

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 တင္တဲ့ အခ်ိန္မွာ အသံုးျပဳရမွာ ျဖစ္ပါတယ္ ခင္ဗ်ာ.။

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/AVvXsEjfceqOnllzWd4hlwmFBymN-KUTu1CDNMyIP9wTN6xmLskfz2HMdYHkyhNVRAHJMXhitozlgdeaqQUaO4bz3wNUxaxtylHrCpMa7jDLm_aHsAcqafLo1QAAvwPb7b3_V58PJClihUHMYSd0/s200/ardae4.png" /></div>
</center>

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

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


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

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

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 မွာ ျမင္ေတြ႕ႏိုင္မွာ ျဖစ္ပါတယ္ ခင္ဗ်ာ။
အားလံုးပဲ အဆင္ေျပမယ့္ေမွ်ာ္လင့္ပါတယ္ အဆင္ မေျပတာေလးေတြ ရွိပါက ေကာ့မက္ေရးထားခဲ့ေပးပါ။ က်ေနာ္ သိသေလာက္ေလးကို အစြမ္းကုန္ေျပာျပပါမယ္ခင္ဗ်ာ။ ေပ်ာ္ရႊင္ခ်မ္းေျမ့ၾကပါေစ။

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 မရေတာ့လွ်င္ ယၡဳဘေလာ့တြင္ ဆက္လက္မွ်ေဝသြားႏိုင္ရန္ စီစဥ္ထားျခင္းျဖစ္ပါသည္

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 မရေတာ့လွ်င္ ယၡဳဘေလာ့တြင္ ဆက္လက္မွ်ေဝသြားႏိုင္ရန္ စီစဥ္ထားျခင္းျဖစ္ပါသည္

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

• က်ေနာ္ေျပာခ်င္တာေလးက မိမိ၏ ဘေလာ့ေလးကို ဝင္ၾကည့္တဲ့သူမ်ား အဆင္ေျပေအာင္ လုပ္ေဆာင္ထားသင့္တဲ့ နည္းလမ္းအခ်ိဳ႕ ျဖစ္ပါတယ္။ က်ေနာ္တတ္ကၽြမ္းလို႔ ေျပာျခင္း မဟုတ္ပါ. သိတာေလးေတြကို မွ်ေဝ ျခင္းမွ်သာျဖစ္ပါတယ္ ခင္ဗ်ာ...။ ဝင္ၾကည့္တဲ့ သူတိုင္း အဆင္ေျပေစရန္ ေအာက္ပါ အခ်က္မ်ားအား ျပင္ဆင္ထားသင့္ပါတယ္။ တခ်ိဳ႕ေသာ 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 မရေတာ့လွ်င္ ယၡဳဘေလာ့တြင္ ဆက္လက္မွ်ေဝသြားႏိုင္ရန္ စီစဥ္ထားျခင္းျဖစ္ပါသည္

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 မရေတာ့လွ်င္ ယၡဳဘေလာ့တြင္ ဆက္လက္မွ်ေဝသြားႏိုင္ရန္ စီစဥ္ထားျခင္းျဖစ္ပါသည္

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>

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/AVvXsEimmmNNjxSucMn6LwIPknaMz6YwbqjTz-dzIZnVLajYVfodoVyJu8AVzJ8O4UcqBr_I-0CrAPxmxwHWzi2oZ1bvN8pBQE2WjMGN6q_w-2TIuE-kKQ5rZP44w8x3jtkH8K96QS1IZEPmRh0/s1600/home.png); } ul#navigation .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3333XO3_Zl_ySdNsA_wTANotSFl5pp1O5m2W6leTnAVI9cANgNNeK_06TwF-WBLM4maKfj4CKMk0_cnC5ZG6dNWOY2tcb5rB-XVu_7_OFlcfpd2nnz3rf9bju0PTIhuh1SDo6Y-j1cuU/s1600/idcard.png); } ul#navigation .search a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6TamCtjFy0Aw6A1-TRVN-huTzLmSfTAgNwYNs-NnjK40-TZZNy5B-cNCVPg9SB7TbPeWA3q4rishoU3mO5DKijUiGRqmYDWttgHUTdkh_HTHuHTW2XlZLGEJTZJM09cjoSnfQUbZ9c6A/s1600/search.png); } ul#navigation .podcasts a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUopvMh4PwLX_CZtvRDEJ2DhFGpZ3wQICpKsirgLL823g-wHje9HSvxcUPapoXJB-5Xm4ngg3Y63HaPI-J1-Fp7gZTnSoALRX__iO28Wi9Lb4SHtLMDWL56_jEmNhFv1ghOZNYGxwb7dw/s1600/ipod.png); } ul#navigation .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitzdoS2IwbcwQVAEv9vdxcEZUDaaWi6kdsrCzGplPcOQyANOgbxANS6LwgxQcL9wuYTJ6b7rXOby9Su0sZ9CGpurXj_EyPDR9yHFN7YW7Ot58yX8T-E9sIw_f4I9HG5oKj_77Of7cS1Vs/s1600/rss.png); } ul#navigation .photos a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWyjl66bpJAugiVvbS2YfwydwW7pw1G3hQ0pL9WO4kGJbFvqBNnd87k3oPHOLQL6YFBpKfeHIgD4y35yxn51Wuow2pqXhCQOH3_bwJnrQwctEJij1650pMrTiiax1dY6pO0HUARWBLS28/s1600/camera.png); } ul#navigation .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEj_TH3rIhQ_464nWxGXZ1JCoLswpv0zOqZ7zat3TbA71AT8V_myfotqy44PqjzoGn7aDqNU9Bjy5WKx7fzyUuXtlDq2EZ5C5bwVxqQsbeliZwI1NXHP4kj9lLucpgPr4IoBTHS9pZAj0/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 မရေတာ့လွ်င္ ယၡဳဘေလာ့တြင္ ဆက္လက္မွ်ေဝသြားႏိုင္ရန္ စီစဥ္ထားျခင္းျဖစ္ပါသည္

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 တင္ရာတြင္ အသံုးျပဳေရးသာရမွာ ျဖစ္ပါတယ္။ အားလံုးပဲ အဆင္ေျပပါေစ။