Blog Template မ်ား၏ width အား ခ်ဲ႕ျခင္း/ခ်ံဳ႕ျခင္း

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

ဘေလာ့ရဲ႕ width ကုိခ်ဲ႕ျခင္း/ခ်ံဳ႕ျခင္းျပဳလုပ္ဖုိ႔အတြက္ သူ႔ရဲ႕ အေျခခံသေဘာတရားေလးကုိေတာ့ သိဖုိ႔လုိအပ္ပါတယ္။ ဒါမွသာ မိမိတကယ္ ျပင္ဆင္တဲ့အခါ နားလည္လြယ္မွာျဖစ္ပါတယ္။ ဒါေၾကာင့္ Template ကုိ အၾကမ္းဖ်ဥ္းအားျဖင့္ header-wrapper ၊ outer-wrapper နဲ႔ footer ဆုိၿပီး (၃)ပုိင္း ပုိင္းျခားထားေၾကာင္းကုိ သိထားရပါ့မယ္။ အဲဒီ (၃)ပုိင္းစလုံးရဲ႕ width ေတြကလည္း တူညီေနရပါ့မယ္။ ဥပမာ.. header-wrapper ရဲ႕ width က 980px ဆုိရင္ outer-wrapper နဲ႔ footer တုိ႔ရဲ႕ width ေတြကလည္း 980px စီပဲ ရွိၾကရပါမယ့္။ ဒါမွသာ အခ်ိဳးညီလွပတဲ့ Template တစ္ခု ျဖစ္ပါလိမ့္မယ္။

header-wrapper = outer-warpper = footer

အဲဒီ အပုိင္းႀကီး(၃)ပုိင္းအနက္ outer-wrapper အေၾကာင္းကုိ ထပ္ေျပာပါ့မယ္။ outer-warpper ဆုိတာကေတာ့  main-wrapper နဲ႔ sidebar-wrapper ႏွစ္ခုကုိ ေပါင္းထားတာပဲျဖစ္ပါတယ္။ သေဘာကေတာ့ outer-wrapper ရဲ႕ width ဟာ main-wrapper နဲ႔ sidebar-wrapper ႏွစ္ခုေပါင္းတာနဲ႔ ညီပါတယ္။

ဥပမာ...

outer-wrapper = 980px ဆုိပါက..

main-wrapper + sidebar-wrapper = 980px ျဖစ္ရပါမယ္။

outer-wrapper = main-wrapper + sidebar-wrapper (sidebar တစ္ခုသာပါသည့္ template မ်ားအတြက္)

outer-wrapper = main-wrapper + right-sidebar-wrapper + left-sidebar-wrapper (sidebar ႏွစ္ခုပါသည့္ template မ်ားအတြက္)

ဒါေပမယ့္ main-wrapper နဲ႔ sidebar-wrapper ႏွစ္ခုအၾကားမွာေတာ့ margin ေတာ့ထားေပးရပါတယ္။ တစ္ခုနဲ႔တစ္ခု ထိစပ္ေနရင္ ၾကည့္ရတာလည္း အဆင္ေျပမွာမဟုတ္ပါဘူး.။ ဒါေၾကာင့္ margin အတြက္ 30px, 40px.. စသည္ျဖင့္ ထားေပးရပါတယ္။ ေအာက္မွာ ေပးထားတဲ့ နမူနာပုံေလးေတြကုိၾကည့္ၾကပါခင္ဗ်ာ..။

အေပၚကပုံေတြကုိၾကည့္မယ္ဆုိရင္...

Sidebar တစ္ခုသာပါတဲ့ Template အတြက္..

Main + margin + sidebar = outer

640px + 30px + 310px = 980px

Sidebar ႏွစ္ခုပါတဲ့ Template အတြက္

left-sidebar + margin + main + margin + right-sidebar = outer

200px         + 30px   +520px + 30px + 200px             = 980px

ဒါဆုိရင္ေတာ့ Template ရဲ႕အေျခခံသေဘာတရားကုိ နားလည္ေလာက္ၿပီလုိ႔ထင္ပါတယ္။ အခု မိမိတုိ႔ရဲ႕ Template width ေတြကုိ လုိအပ္သလုိျပင္ၾကည့္ၾကရေအာင္..။ မူလက 980px ရွိတဲ့ Sidebar (၂)ခုပါ Template ကုိ 1200px အျဖစ္ ျပင္ၾကည့္ပါမယ္..။

• မိမိတုိ႔ရဲ႕ဘေလာ့မွာ sign in လုပ္ၿပီး Design ေအာက္က Edit HTML ကုိသြားပါ။ ထုံးစံအတုိင္း Download Full Template လုပ္ၿပီး မိမိတုိ႔ရဲ႕ ဘေလာ့ကုိ backup လုပ္ထားလုိက္ပါ။

 

• Expand Widget Templates ကုိ အမွန္ျခစ္မေပးပါနဲ႔။ 

 

• Ctrl + F နဲ႔ “#header-wrapper”, “#outer-wrapper”, “#main-wrapper”, and “#footer” ဆုိတဲ့ code ေတြကုိရွာပါ..

 

#header-wrapper {
width:980px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width: 980px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 520px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#right-sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#left-sidebar-wrapper {
width: 200px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#footer {
width:980px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

• 980px ရွိတဲ့ Template ကုိ 1200px အထိခ်ဲ႕မွာ ျဖစ္တဲ့အတြက္ အေပၚက code ေတြထဲက header-wrapper, outer-wrapper, footer တုိ႔ရဲ႕ width ေတြကုိ 1200px လုိ႔ျပင္လုိက္ပါ့မယ္။ 

 

• outer-wrapper ရဲ႕ width ဟာ 1200px ျဖစ္သြားၿပီးျဖစ္တဲ့အတြက္ main-wrapper နဲ႔ sidebar (2)တုိ႔ရဲ႕ width စုစုေပါင္းကုိလည္း 1200px ျဖစ္ေအာင္ ျပင္ေပးရပါ့မယ္။ sidebar ေတြရဲ႕ width ဟာ မိမိဘေလာ့ရဲ႕ လုိအပ္ခ်က္နဲ႔ ကုိက္ညီၿပီးသားဆုိရင္ေတာ့ ျပင္စရာမလုိပါဘူး။ အကယ္၍ မကုိက္ဘူးဆုိရင္ေတာ့ ေျပာင္းေပးႏုိင္ပါတယ္။ မူလ sidebar ရဲ႕ 200px ကုိ 220px အထိ္ခ်ဲ႕ခ်င္တယ္ ဆုိပါစုိ႔ ။ ဒါဆုိရင္ 1200 ထဲက ေန margin (၂)ခုအတြက္ 60 (30px + 30px) ကုိဖယ္ၿပီး ေအာက္ပါအတုိင္းေျပာင္းေပးရပါမယ္။ ဒါမွသာ စုစုေပါင္း 1200 px ျဖစ္ပါလိမ့္မယ္။

• main-wrapper = 700px
• left-sidebar  = 220px
• right-sidebar  = 220px

 

• အားလုံး ေျပာင္းၿပီးသြားရင္ေတာ့ save မလုပ္ေသးဘဲ preview အရင္ၾကည့္ပါ။ အဆင္ေျပတယ္ဆုိမွသာ Save လုပ္ပါ။ 

 

Template ခ်ဲ႕ျခင္း/ခ်ံဳ႕ျခင္းအတြက္ကေတာ့ ဒီေလာက္ဆုိရင္ အနည္းငယ္ အေထာက္အကူျဖစ္ၿပီလုိ႔ ယူဆပါတယ္။ မရွင္းလင္းတဲ့အခ်က္အလက္မ်ားရွိရင္လည္း ေဆြးေႏြးေမးျမန္းႏုိင္ၾကပါတယ္။ တစ္လက္စတည္း ဒီပုိ႔စ္ေလးနဲ႔ ဆက္စပ္ေနတဲ့ မိမိတုိ႔ဘေလာ့ header banner ပုံေလးကုိ မိမိတုိ႔စိတ္ႀကိဳက္ ပုံေလးေတြနဲ႔ အစားထုိးတဲ့အေၾကာင္းကုိ ေျပာခ်င္ပါတယ္။ အခ်ိဳ႕ေသာ ဘေလာ့ေတြမွာ Header Banner ပုံေတြ အခ်ိဳးမက်တာကုိ ေတြ႕ေနရပါတယ္။ ဘာေၾကာင့္လဲဆုိေတာ့ မိမိဘေလာ့ Header ရဲ႕ width နဲ႔ မိမိအစားသြင္းမယ့္ banner ပုံရဲ႕ width တုိ႔ မကုိက္ညီတာေၾကာင့္ပဲျဖစ္ပါတယ္။ ဒါေၾကာင့္ မိမိဘေလာ့ရဲ႕ Header width က 1200px ဆုိရင္ မိမိအစားသြင္းမယ့္/အသုံးျပဳလုိတဲ့ Header image ရဲ႕ width ကုိလည္း 1200px ျဖစ္ေအာင္ photoshop လုိ image editor တစ္ခုခုကုိအသုံးျပဳႏုိင္ၾကပါတယ္။ အားလုံးအဆင္ေျပ ေပ်ာ္ရႊင္ခ်မ္းေျမ့ၾကပါေစခင္ဗ်ာ.......။

Innovative System Optimizer v 4.0 (with crack)

9.3 MB

အားလုံးမဂၤလာပါခင္ဗ်ာ..။ ကၽြန္ေတာ္အရင္ တင္ေပးထားတဲ့ Advanced System Optimizer က activate မျဖစ္ေတာ့ဘူးဆုိလုိ႔ ေနာက္တစ္မ်ိဳးရွာေတြ႕တာေလးကုိ ေဖာ္ျပေပးလုိက္ပါတယ္။ အသုံးျပဳလုိသူမ်ား ေအာက္မွာ ေဒါင္းလုပ္ယူလုိက္ၾကပါခင္ဗ်ာ..။ ကုိမ်ိဳးလည္း ေက်နပ္လိမ့္မယ္လုိ႔ေမွ်ာ္လင့္ပါတယ္။ အသုံးျပဳဖုိ႔အတြက္ crack လုပ္နည္းေလးကုိ ေအာက္မွာေဖာ္ျပ ေပးလုိက္ပါတယ္..။ 

၁။     အရင္ဆုံးေပးထားတဲ့လင့္မွာ ေဒါင္းလုပ္ယူၿပီး WinRar ကုိ Extract လုပ္ပါ။

၂။     Setup ကုိ install လုပ္ပါ။ ၿပီးရင္ Innovative System Optimizer ကုိ exit လုပ္ပါ။

၃။     crack folder ထဲမွာပါတဲ့ Optimizer ဆုိတဲ့ crack ဖုိင္ေလးကုိ copy လုပ္ၿပီး install လုပ္ထားတဲ့ folder ထဲမွာသြားၿပီး Paste (overwrite) လုပ္လုိက္ပါ။ Install လုပ္ထားတဲ့ folder ကေတာ့ default အေနနဲ႔ C:\Program Files\Innovative Solutions\Innovative System Optimizer - version 4 ဆုိၿပီးရွိပါလိမ့္မယ္။

ဒါဆုိရင္ Innovative System Optimizer ကုိ full version အေနနဲ႔အသုံးျပဳလုိ႔ရသြားပါၿပီ။ တစ္ခုသတိထားရမွာကေတာ့ update မလုပ္မိဖုိ႔ပါပဲ။ အားလုံးအဆင္ေျပၾကပါေစခင္ဗ်ာ..။

Download Here

Blog Post မ်ားအား Auto Read More ျပဳလုပ္ျခင္း (with thumbnails)

အားလုံးမဂၤလာပါခင္ဗ်ာ..။ ကၽြန္ေတာ္ အခုေဖာ္ျပေပးမွာကေတာ့ Blog Post ေတြကုိ Auto Read More ျပဳလုပ္ျခင္းျဖစ္ၿပီး New Blogger မ်ားအတြက္အဓိက ရည္ရြယ္ပါတယ္။ မိမိတုိ႕ရဲ႕ Post မွာပါတဲ့ Image ပုံမ်ားကုိပါ Thumbnails နဲ႕ေဖာ္ျပေပးမွာျဖစ္ပါတယ္။ နမူနာကုိ ဒီေနရာမွာ သြားေရာက္ၾကည့္႐ႈႏုိင္ပါတယ္။ သေဘာက်တယ္ဆုိရင္ေတာ့ ေအာက္က အဆင့္မ်ားအတုိင္း လုပ္ၾကည့္ၾကပါခင္ဗ်ာ..

၁။     မိမိတုိ႕ရဲ႕ဘေလာ့မွာ Sign In လုပ္ပါ။ Design -->>Edit Html ကုိသြားၿပီး ဘေလာ့ကုိ Backup လုပ္ထားလုိက္ပါ (Download Full Template)။ ဒါမွသာ အမွားအယြင္းတစ္စုံတစ္ရာရွိခ့ဲရင္ ျပန္ၿပီး restore လုပ္လုိ႕ရမွာျဖစ္ပါတယ္။

၂။     ၿပီးရင္ Expand Widget Templates ဆုိတာေလးကုိ အမွန္ျခစ္ေလးေပးလုိက္ပါ။ 

၃။     </head> ဆုိတာကုိ ရွာပါ။ ေတြ႕ရင္ ေအာက္မွာေပးထားတဲ့ ကုတ္ေတြကို သူ႕အေပၚကေနကပ္ၿပီး ထည့္ေပးလုိက္ပါ။

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://www.opendrive.com/files/14261688_ym42r/Read_more.js' type='text/javascript'/>

၄။     ၿပီးရင္ အေပၚက ကုတ္ေတြထဲမွာ မိမိတုိ႕စိတ္တုိင္းၾကျပင္ဆင္မႈလုပ္ပါမယ္။

• summary_noimg = 230 ဆုိတာက Image မပါတဲ့ စာသားသက္သက္ ပုိ႕စ္မ်ားအတြက္ျဖစ္ၿပီး အက်ဥ္းေဖာ္ျပမယ့္ စာလုံးအေရအတြက္ျဖစ္ပါတယ္။ ပုိၿပီးေဖာ္ျပခ်င္တယ္ဆုိရင္ေတာ့ 230 ေနရာမွာ 240, 250 စသည္ျဖင့္ ေျပာင္းေပးလုိက္ပါ။

• summary_img = 140 က Image ပါတဲ့ ပုိ႕စ္မ်ားအတြက္ျဖစ္ပါတယ္။ စာလုံးအေရအတြက္ကုိ စိတ္တုိင္းက် ေျပာင္းလုိ႕ရပါတယ္။

• img_thumb_height = 100 ကေတာ့ Image ပါတဲ့ Post မ်ားအတြက္ ေဖာ္ျပလုိတဲ့ Image ရဲ႕အျမင့္ျဖစ္ပါတယ္။

• img_thumb_width = 100 ကေတာ့ Image ရဲ႕ အက်ယ္ျဖစ္ပါတယ္။

• 'http://santhitaye72.googlecode.com/files/read-more_auto.js ကေတာ့ ReadMore အတြက္ js ဖုိင္ရဲ႕ Direct Link ျဖစ္ပါတယ္။ သူ႕အတုိင္းထားၿပီးသုံးရင္လည္းရပါတယ္။ ဒါေပမယ့္ သုံးတဲ့သူမ်ားတဲ့အခါ Bandwidth မႏုိင္ဘဲ Direct Link ေဒါင္းၿပီး Read More အလုပ္မလုပ္တာမ်ိဳး ႀကံဳေတြ႕ရႏုိင္ပါတယ္။ ဒါ့ေၾကာင့္ ေအာက္မွာေပးထားတဲ့ လင့္မွာ ေဒါင္းလုပ္ယူၿပီး WinRar ကုိျဖည္ပါ။ read_more_auto.js ဆုိတဲ့ဖုိင္ေလးကုိ Direct Link ရတဲ့ Hosting တစ္ခုခုမွာ Upload တင္ၿပီး ရလာတဲ့ လင့္ကုိ အစားထုိးသုံးစြဲပါ။ 

• Download Read More Hack.rar 

၅။     ဒီတစ္ခါ <data:post.body/> ဆုိတဲ့ ကုတ္ကုိထပ္ၿပီးရွာပါ့မယ္။ ေတြ႕ရင္ အဲဒီကုတ္ကုိ ဖ်က္ပစ္ၿပီး သူ႕ေနရာမွာ ေအာက္က ကုတ္ေတြနဲ႕ အစားထုိးလုိက္ပါ့မယ္။

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Reade more >></b></a></span>
</b:if>

၆။     အေပၚက Read more ေနရာမွာ မိမိစိတ္ႀကိဳက္စာသားေလးေတြ အစားထုိးလုိ႕ရပါတယ္။ ၿပီးရင္ Preview အရင္ၾကည့္ပါ။ စိတ္ႀကိဳက္ျဖစ္ၿပီဆုိရင္ေတာ့ save လုပ္လုိက္ပါ။ အားလုံး အဆင္ေျပၾကပါေစခင္ဗ်ာ...။