ပို႕စ္တစ္ခုတင္မယ္ဆိုရင္

ဘေလာ႔လုပ္နည္း တတိယပိုင္း အေနနဲ႔ ပို႔စ္တစ္ခု တင္တာကိုေရးပါ႔မယ္။ အတတ္ႏိုင္ဆံုးလြယ္ေအာင္ ပို႔စ္ နည္းေအာင္ ခ်ဳံ႕ထားတာပါ။ ဆက္ၾကည္႔ရေအာင္ဗ်ာ … ပို႔စ္ တစ္ခု စတင္ဖို႔အတြက္ Dashboard က NEW POST ဆိုတဲ႔ ခလုပ္ကိုႏွိပ္ပါတယ္။ ေအာက္ပါအတိုင္း ေပၚလာပါတယ္။ 

ပို႔စ္ေရးတဲ႔ ေနရာမွာ tab ႏွစ္ခု ရိွတာကို သတိထားေစလိုပါတယ္။ တစ္ခုက Compose ျဖစ္ၿပီး၊ စာလံုးေတြ align ညိွဖို႔၊ ကာလာထည္႔ဖို႔ စသည္ျဖင္႔ လုပ္ေပးပါတယ္။

ေနာက္တစ္ခုက Edit Html ပါ။ ဓါတ္ပံုေတြ၊ လင္႔ေတြ၊ အျခားေသာ HTML code မ်ားထည္႔ဖို႔ အတြက္ ဒီtab ေနရာမွာ ထည္႔ရပါတယ္။

ပို႔စ္ေရးတဲ႔ ေနရာရဲ႕ ေအာက္မွာ Post Options ဆိုတာ ျမင္မွာပါ။ အဲဒါကို ႏွိပ္ၿပီး ေရးသားတဲ႔ အခ်ိန္၊ ကြန္မန္႔ ခြင္႔ျပဳ မျပဳ စသည္ျဖင္႔ ျပင္ဆင္ႏိုင္ပါတယ္။

တစ္ခုခ်င္းရဲ႕ menu bar က icon ေလးေတြကိုေတာ႔ ၾကည္႔တာနဲ႔ သိမွာပါ။ က်ေနာ္ လင္႔လုပ္ဖို႔ နဲ႔ ဓါတ္ပံုတင္ဖို႔ ေျပာျပေပးပါ႔မယ္။ အရင္ဆံုး စာလံုးကာလာ ထည္႔တာေျပာမယ္ေနာ္ .. Compose ဆိုတဲ႔ Tab ကိုႏွိပ္ ၊ ၿပီးရင္ မိမိ အေရာင္ထည္႔မယ္႔ စာလံုးကို Select လုပ္ၿပီး T ဆိုတဲ႔ icon ကိုႏွိပ္ၿပီး ထည္႔ခ်င္တဲ႔ အေရာင္ကို ေရြးလိုက္ရံုပါပဲ။

စာလံုးကို လင္႔ ခ်ိပ္ဖို႔က … Edit Html ဆိုတဲ႔ tab ကိုႏွိပ္၊ မိမိ လင္႔ခ်ိပ္ခ်င္တဲ႔ စာလံုးကို select လုပ္ၿပီး Insert Link ဆိုတဲ႔ Icon ေလးကို ႏွိပ္ေပးလိုက္ပါ။ (ဒီမွာ ဆိုတဲ႔ စာလံုးကို ႏွိပ္တာနဲ႔ မိမိ ညႊန္းတဲ႔ ေနရာကိုေရာက္ေစခ်င္ရင္ “ဒီမွာ” ကို select လုပ္ရမွာ ျဖစ္ပါတယ္)

အဲလို Insert Link ကို ႏွိပ္လုိက္ရင္ ေအာက္ပါအတိုင္း ဘယ္ကို ညႊန္းခ်င္တာလဲ ဆိုၿပီး လင္႔ေတာင္းပါတယ္။ မိမိ ညႊန္းခ်င္တဲ႔ လင္႔ ကို ျဖည္႔ေပးလိုက္ပါ။

ေနာက္တစ္ခုက ေတာ႔ ဓါတ္ပံုထည္႔ဖို႔ပါ။ HTML ကို နားလည္တဲ႔ သူအတြက္ ဘာမွ မဟုတ္ေပမယ္႔ ၊ ဘာမွ မသိတဲ႔ လူေတြ အတြက္ ေတာ္ေတာ္ကို ရႈပ္ပါတယ္။ က်ေနာ္ အလြယ္လုပ္လို႔ ရတဲ႔ နည္းကိုေရာ သေဘာတရားေရာ ေျပာျပပါ႔မယ္။ ေအာက္ပါ code ေတြကို ၾကည္႔လုိက္ပါဦး။
<img src=”http://img28.picoodle.com/img/img28/3/9/27/f_51G31XWX1VLm_f74ec22.jpg” border=”0” alt=”Image Hosting by Picoodle.com” />
အဲဒါ ထည္႔လုိက္ရင္ ဓါတ္ပံု တစ္ပံု web page မွာေပၚပါတယ္။ အစိမ္းနဲ႔ ျပထားတာက ဓါတ္ပံုရဲ႕ hosting တစ္ခုမွာ တင္ထားတဲ႔ Direct link ျဖစ္ပါတယ္။
အ၀ါနဲ႔ ေရးထားတာက ေတာ႔ ပံုရဲ႕ ေဘာ္ဒါမ်ဥ္းေပါ႔။ ၀ ဆိုေတာ႔ ေဖ်ာက္ထားတာ ျဖစ္ပါတယ္။ ထည္႔ခ်င္ရင္ေတာ႔ 1 ၊ 2 စသည္ျဖင္႔ေပါ႔။ မ်ဥ္းအထူ အပါး ကြာသြားပါတယ္။
အနီနဲ႔ ျပထားတာကေတာ႔ အဲဒီပံုကို bandwidth မ်ားၿပီး မျပ ႏိုင္ေတာ႔ တဲ႔ အခါမ်ိဳးမွာ (bad connection ေၾကာင္႔လည္း ျဖစ္ႏိုင္ပါတယ္) ပံုအစား ျပေပးမယ္႔ စာသားျဖစ္ပါတယ္။ ႀကိဳက္ရာျပင္ေရးလို႔ ရပါတယ္။
အခုနက စလံုးကို လင္႔ လုပ္တုန္းက ေပၚလာတာကို ၾကည္႔မိမယ္ထင္တယ္။
<a href=”http://www.thanlonengal.co.cc“>ဒီမွာ</a>
<a href=” ေနာက္က ထည္႔ေပးထားတဲ႔ လင္႔ကို ခ်ိပ္ေပးတာပါ။ > < ႏွစ္ခုၾကားက ႏွိပ္ရမယ္႔ စာလံုးကိုထည္႔ေပးရတာပါ။ တစ္ကယ္လို႔ ပံုကို ႏွိပ္ေစခ်င္တာဆိုရင္ ပံုေပၚတဲ႔ code ကို ထည္႔ေပးလိုက္ရမွာ ျဖစ္ပါတယ္။
<a href=”http://www.thanlonengal.co.cc”><img src=”http://img28.picoodle.com/img/img28/3/9/27/f_51G31XWX1VLm_f74ec22.jpg” border=”0″ alt=”Image Hosting by Picoodle.com” /></a>
သေဘာေပါက္မယ္ထင္ပါတယ္ ။ နားလည္သြားေအာင္ ေျပာျပတာပါ။ code ေတြ အလြတ္က်က္ထားစရာမလိုပါဘူး။ photo hosting လုပ္တဲ႔ ဆိုဒ္ေတြ အမ်ားႀကီး ရိွပါတယ္။ က်ေနာ္ အႀကိဳက္ဆံုးကေတာ႔ www.picoodle.com ျဖစ္ပါတယ္။ အဲဒီ ဆိုဒ္ေလးကို ႏွိပ္လိုက္ပါ။ ေအာက္ပါပံုအတိုင္းေပၚပါတယ္။

Browse ကိုႏွိပ္ၿပီး မိမိတင္မယ္႔ ပံုကို ေရြးပါ။ ပံုအရြယ္အစား ျပင္ခ်င္ရင္ Resize ကို ႏွိပ္ၿပီး ဆိုဒ္ေရြး ျပင္လို႔ ရပါတယ္။ ပံုေရြးၿပီးရင္ UPLOAD IT! ကိုႏွိပ္ေပးလုိက္ပါ။ အပိုင္း သံုးမ်ိဳး ခြဲ ၿပီး code ေတြ ေပၚလာပါတယ္။ (မိမိတင္လိုက္တဲ႔ ပံုက Thumbnails ဆိုဒ္ ျဖစ္ေနရင္ေတာ႔ ႏွစ္ပိုင္းပဲ ေပၚမွာပါ)

ပထမဆံုး မ်ဥ္း၀ါ ႏွစ္ခုၾကားက code ေတြကေတာ႔ Thumbnails နဲ႔ ပံုကို ေဖာ္ေပးမယ္။ အဲဒါကို ႏွိပ္လိုက္ရင္ ပံုဆိုဒ္ အျပည္႔ကို ေပၚေပးမွာ ျဖစ္ပါတယ္။ သံုးခု ျဖစ္ေနပါလိမ္႔မယ္။ အေပၚဆံုးက ဘေလာ႔ အတြက္ပါ။ < နဲ႔ စပါတယ္။ ေအာက္ ႏွစ္ခုက ဖိုရမ္အတြက္ပါ။ [ နဲ႔ စပါတယ္။
ဒုတိယ ကေတာ႔ ပံုဆိုဒ္ အႀကီးအတိုင္း ေပၚေပးၿပီး သူ႔ကို ႏွိပ္ရင္လည္း hosting site က ပံုကို ျပန္ေပၚေပးပါတယ္။(ဒီေနရာက code ကိုပဲ ကူးလိုက္ပါ။ အဆင္ေျပဆံုးပါပဲ။ မိမိက ပံုကို လင္႔မပါေစ ခ်င္ေတာ႔ဘူး ဆိုရင္၊ ခုနက ေျပာခဲ႔တဲ႔ ဓါတ္ပံု code ေတြပဲ ခ်န္ထားၿပီး လင္႔လုပ္တဲ႔ code ေတြကို ဖ်တ္ေပးလိုက္ေပါ႔။ သေဘာေပါက္မယ္ ထင္ပါတယ္ေနာ္။
ေအာက္က တစ္ေၾကာင္းထဲပါတယ္႔ ႏွစ္ခုက Direct link မ်ားျဖစ္ပါတယ္။
Show image to friends URL of image page ဆိုတာကေတာ႔ သူ႔ picoodle ဆိုဒ္ကေနပဲ ပံုကို ျပေပးမွာ ျဖစ္ပါတယ္။
ေအာက္ဆံုးတစ္ခုကေတာ႔ ပံုရဲ႕ တကယ္႔ Direct Link ပါ။ web page တစ္ခုခုရဲ႕ ေနာက္ခံ အျဖစ္ ထည္႔ခ်င္ရင္ ဒီ code ကုိ ပဲ ကူးရမွာ ျဖစ္ပါတယ္။

အစမွ စလုပ္မယ္႔ သူေတြ အတြက္ အဆင္ေျပမယ္ထင္ပါတယ္။ ပို႔စ္မွာ flash ေပၚဖို႔ ကိုေတာ႔ ဒီမွာ ေရးထားၿပီးပါၿပီ။ ပို႔စ္တင္ၿပီးတာနဲ႔ ေတြ႔ရမယ္႔ အခက္အခဲနဲ႔ စာေခါက္တာကို အပိုင္း ၄ မွာ ထပ္ေရးေပးပါ႔မယ္။
အဲေမ႔လို႔ … တစ္ခ်ိဳ႕က ေလးခ်င္ရာ ေရးၿပီးရင္ PUBLISH POST ကို မႏွိပ္ပဲ SAVE AS DRAFT ကို ႏွိပ္ၿပီး ပို႔စ္မေပၚဘူး လုပ္ၾကလြန္းလို႔ ။ ေရးခ်င္ရာေရးၿပီး PUBLISH POST ကို ႏွိပ္ေပးပါ။
ေက်းဇူးတင္ပါတယ္ …

Blog အတြက္ Popular Posts Slider ေလးပါ

Blogger မိတ္ေဆြမ်ားအတြက္  Popular Post slider ေလးျဖစ္ပါတယ္။ Blog မွာ ထည့္ပုံကေတာ့ Blog ကို အရင္ Sign In ၀င္ၿပီး၊ Add a gadget ၊ HTML/Javascript widget အထိ အဆင့္ဆင့္သြားလိုက္ပါ။ ၿပီးေတာ့ ေအာက္မွာ ေပးထားတဲ့ code ကုိ ထည့္ေပးလိုက္ပါ။

<style type="text/css" media="screen">
#PopularPosts1 {
overflow:hidden;
margin-top:5px;
width:100%;
padding:0px 0px;
height:310px;

}
#PopularPosts1 ul {
width:310px; overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:10px 0px 0px 10px;
}
#PopularPosts1 li {
 width:290px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCRZMCOrwTRWqXTQZV9Y3LR_j_0EASuY18PFJgcIjNbUWGzO9xTL3zRKBaz8LQT-4Cw19JnxGsdw7npZ6wEmyV2PRr4qUjESebZ1EoA_8wJHkQyTctK_yZ-lTAcNnSthNolHgB3sRqI-A/s400/popular+posts.jpg) repeat-x;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {
   
    font-size:1em;
    margin-bottom:0.5em;
}
#PopularPosts1 li .item-title a {
text-decoration:none;
color:#7CA2C4;
font:bold 12px verdana;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:2px solid #7CA2C4;
}
#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#289728;
padding:0px 0px;
margin:0px 0px;
}
#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}
#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}
#PopularPosts1 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.tags span,
.tags a {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}
a img {
    border: 0;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>