Sidebar Text Scroll Box

Sidebar ေပၚတြင္ Text အေနနဲ႔ စာေတြေရးမယ္၊ တင္ျပျခင္းတာေလးေတြ တင္ျပၾကမယ္ ဆုိရင္ေပါ့၊ Scroll box ေလး အျဖစ္ ဖန္တီးၾကမယ္ ဆုိရင္ေပါ့၊ ကဲမနီေရ စလုပ္ၾကရေအာင္

(၁) အရင္ဆံုး မိမိရဲ႕ Dashbord ကုိသြားပါ၊ Layout==> Edit HTML ကုိသြားပါ။
/* Sidebar Content */ ကုိရွာပါ၊ ေတြ႕ရင္ ၄င္းေအာက္မွာ ေအာက္ပါ code ကုိထည့္သြင္းေပးလုိက္ပါ-

.scrollingtext{
height:400px;
width:190px;
border:၀;
overflow:auto;
}

အနီေရာင္ျဖင့္ျပထားေသာ height:400px; value ကုိ မိမိအဆင္ေျပသလုိ အတုိး-အေလွ်ာ့ ျပဳလုပ္အသံုးျပဳ ႏုိင္ပါ တယ္။ အျပာေရာင္ ျဖင့္ ျပထားေသာ width:190px; value ကုိ မိမိ Sidebar Width ႏွင့္ အဆင္ေျပ ေအာင္ခ်ိန္ညွိေပးရပါမယ္။ အခုေဖာ္ျပထားတဲ့ တန္ဖုိးမ်ားသည္ က်ေနာ္၏ Site တြင္အသံုးျပဳထားေသာ တန္ဖုိး မ်ားျဖစ္ပါသည္။

(၂)Layout==>Page Elements ကုိသြားပါ။ Add a Gadget ကုိ၀င္လုိက္ပါ။ Text ကုိရွာပါ။ ေတြ႕ရင္ ၄င္း Text ကုိႏွိပ္ၿပီး၀င္လုိက္ပါ၊ ေအာက္ပါပံုကိုၾကည့္ႏုိင္ပါတယ္-
ပံု(၁)

ပံု(၂)


(၃) ေဖာ္ျပခ်င္တဲ့အေၾကာင္းအရာ post text တုိ႔ ေရးၿပီးၿပီဆုိရင္ Edit Html ကုိႏွိပ္လုိက္ပါ။ ေရးထားတဲ့ text ေတြရဲ႕အေရွ႕ဆံုးမွာ ဒီ code ကုိထည့္ေပးလုိက္ပါ။ <div class="scrollingtext"> ၿပီးရင္ text ေတြရဲ႕ ေအာက္ဆံုးေနရာမွာ </div> ကုိထည့္သြင္းေပးလုိက္ပါ။
(၄) Main Wrapper မွာ Posts မ်ား ေရးသလုိ Edit Html တုိ႔ကုိ အသံုးျပဳႏုိင္မည္ ျဖစ္ပါတယ္။
~~~ဒီေနရာမွာ တစ္ခုေျပာခ်င္တာကေတာ့ မိမိေရးသားလုိက္တဲ့ Text စာသားမ်ားဟာ မိမိ သတ္မွတ္ ေပးခဲ့တဲ့ height:400px; value ကုိ ေက်ာ္လြန္တဲ့အခါမွသာ Scrollbar ေလးေပၚလာမွာျဖစ္ပါတယ္။

ျဖည့္စြက္ခ်က္
Template ေတြဟာ အသံုးျပဳသူအေပၚမူတည္တဲ့အတြက္ Template Style မတူညီႏုိင္ပါဘူး။
တကယ္လုိ႔ /* Sidebar Content */ ဆုိတဲ့ CSS comment ကုိမေတြ႕ဘူးဆုိရင္ေတာ့ ေအာက္ပါအတုိင္း ေဆာင္ရြက္ၾကည့္ပါ-
(၁) အရင္ဆံုး အထက္ေဖာ္ျပၿပီး အပုိဒ္(၂)ပါအတုိင္း Text တြင္ စာရုိက္ပါ။
(၂) Dashbord ==> Layout==> Edit HTML ကုိသြားပါ။
ctrl+f ကုိႏွိပ္ၿပီး Find: box တြင္ <div id='sidebar-wrap'> သုိ႔မဟုတ္ <div id='sidebar-wrapper'> tag တစ္ခုခုကုိ ထည့္သြင္းၿပီး ရွာလုိက္ပါ။ Template Designer အေပၚမူတည္ၿပီးကြဲျပား ေနတတ္တာေၾကာင္း အဆင္ေျပတာနဲ႔ ထည့္သြင္းရွာၾကည့္ပါ။ ေအာက္ပါ code တုိ႔ကုိေတြ႕ရမွာျဖစ္ပါတယ္-

<div id='sidebar-wrap'>

<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop'>
<b:widget id='Text1' locked='false' title='test' type='Text'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div></div>

-အနီေရာင္ျဖင့္ျပထားေသာ Text1 သည္ မိမိ Sidebar တြင္ေရးခဲ့ထားျခင္းေၾကာင့္ ေဖာ္ျပေပးေနျခင္း ကုိေတြ႕ရမည္ ျဖစ္ပါသည္။ ( Text1 မွမဟုတ္ပါဘူး Profile1 , Label1 , BlogArchive1 တုိ႔ကုိလည္း Scroll box ဖန္တီးေပး ႏုိင္ပါတယ္)
(၃) မိမိရဲ႕ CSS code အတြင္း ေအာက္ပါ code ကုိ ရွာၾကည့္ပါ-

.sidebar .widget {
margin:.5em 13px 1.25em;
padding:0 0px;
}

သုိ႔မဟုတ္

#sidebar .widget {
margin-bottom: 20px;
}

-ေတြ႕ၿပီးဆုိရင္ ၄င္းရဲ႕အေပၚကပ္လ်က္မွာ ေအာက္ပါ အနီေရာင္ျဖင့္ ျပထားေသာ code ကုိ ထည့္သြင္း ေပးလုိက္ပါ၊

#Text1{
height:400px;
width:265px;
overflow:auto;
}
.sidebar .widget {
margin:.5em 13px 1.25em;
padding:0 0px;
}

(၄) width က မိမိ Sidebar width ထက္ပုိႀကီးလုိ႔မရပါဘူး။ height ကေတာ့ မိမိေရးတဲ့ Text အေပၚ မူတည္ၿပီး အလုိရွိသလုိ ထည့္သြင္းဖန္တီးႏိုင္ပါတယ္။

အဆင္ေျပပါေစ

အျပည့္အစံုသုိ႔>>>

ျပန္ေခါက္ခဲ့လုိလွ်င္>>>

Posts ေတြေခါက္သိမ္းျခင္း

မိမိရဲ႕ Posts ကုိ ေခါက္သိမ္းဖုံုးကြယ္ထားခ်င္ရင္ေအာက္ပါအတုိင္းလုပ္ၾကည့္ပါ။ Peek-A-Boo Post လုိ႔ေခၚပါတယ္။ ကဲမနီေရ စလုိက္ၾကရေအာင္-
(၁) ေအာက္ေဖာ္ျပပါ code ကုိ Javascript Document(*.js)File type နဲ႔ Save ပါ။ Dreamweaver Software တုိ႔လုိမ်ိဳးမွာ ထည့္သြင္း Save ႏုိင္ပါတယ္။

function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'none';
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
found = 1;
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
function commentDisplay(json) {
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;break;
}
}
alturl = alturl.replace("#", "#comment-");if (entry.content) {
comment = entry.content.$t;
} else if (entry.summary) {
comment = entry.summary.$t;
}
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented:<br/>');
if (comment.length < numchars)
document.write(comment + '<br/><br/>');else
document.write(comment.substring(0, numchars) + '...<br/><br/>');
}
document.write('Widget sponsored by:<br/><a href="http://bvibes.com">< img src="http://fbvibes.com/templates/yget/images/vibes_logo.png"/></a><br/>');
}

>>အသင့္လုပ္ၿပီးသား File ကုိပဲလုိခ်င္ရင္ေတာ့ Download လုပ္ယူပါ။
(၂) ၄င္း(.js)File ကုိ File Hosting Site တစ္ခုတြင္ Upload လုပ္ၿပီး URL Link ကုိရယူပါ။
>>ေအာက္ပါ က်ေနာ္ Share ေပးထားတဲ့ URL link ကုိပဲသံုးမယ္ဆုိရင္လည္း သံုးႏုိင္ပါတယ္။
http://pethein2008.googlepages.com/hackosphere.js
(၃) ေအာက္ေဖာ္ျပပါ Attribute Tag တြင္ ၄င္း(.js)file ၏ URL link ကုိထည့္သြင္းေပးရပါမယ္။

<script type='text/javascript' src='URL link' />

ဥပမာ---

<script type='text/javascript' src='http://sgt.pethein.googlepages.com/hackosphere2.js' />

(၄) Dashboard မွ Layout==>Edit HTML သုိ႔သြားၿပီး အရင္ဆံုး
-Download Full Template ကုိႏွိပ္ၿပီး Backup လုပ္ထားပါ။
-Expand Widget Templates ရဲ႕ box ေလးမွာ Tick လုပ္ေပးလုိက္ပါ။
-ၿပီးရင္ Edit HTML ထဲမွ </Head> ဆုိတဲ႔ Tag ကုိရွာပါ။ ေတြ႕ရင္ ၄င္းရဲ႕အေပၚကပ္လွ်က္မွာ (.js)file ၏ URL link ထည့္သြင္းထားခဲ့ေသာ Attribute Tag ကုိထည့္သြင္းေပးလုိက္ပါ။
(၅) ၄င္း Attribute Tag ကုိထည့္သြင္းၿပီးၿပီဆုိရင္ ေအာက္ေဖာ္ျပပါ code ကုိရွာပါ။ အျမန္ရွာခ်င္ရင္ေတာ့ ctrl+F ကုိႏွိပ္ၿပီး fine: box ထဲတြင္ <b:includable id='post' var='post'> ကုိ ရုိက္ထည့္ၿပီး next ကုိႏွိပ္၍ ရွာပါက ခ်က္ခ်င္းေတြ႕ႏိုင္ပါသည္။

<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href= 'data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href= 'data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

-၄င္း code ကုိေတြ႕ရင္ Select လုပ္ၿပီး ေအာက္ေဖာ္ျပပါ code အားလံုးကုိ copy / paste လုပ္ကာ ထည့္သြင္း ေပးလုိက္ပါ။

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Read More>></a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Collapse>></a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

-အထက္ပါ code အတြင္း အနီေရာင္ ျဖင့္ျပထားေသာ ေနရာတုိ႔တြင္ မိမိႀကိဳက္ရာ ေျပာင္းထည့္ေပးႏုိင္ပါတယ္။
ဥပမာ- အျပည့္အစံုသုိ႔>>> ႏွင့္ ျပန္ေခါက္ထားခ်င္ရင္>>> စသည္ျဖစ္ပါ။
-ၿပီးရင္ Save Template ကုိႏွိပ္ၿပီး Save ပါ။ Expand Widget Template ရဲ႕ box မွ Tick ကုိျဖဳတ္ၿပီး Save လုပ္ပါ။
(၆) Dashboard မွ Settings==>Formatting ကုိသြားပါ။ Post Template ၏ box ထဲတြင္ ေအာက္ပါ code ကုိ ထည့္သြင္းေပးလုိက္ပါ။

Type your summary here.
<span id="fullpost">
Type the rest of your post here.
</span>

-ဒီလုိထည့္သြင္းေပးျခင္းအားျဖင့္ မိမိ post ေရးတဲ့အခါတုိင္း Edit HTML ဘက္တြင္ အၿမဲေတြ႕ေနရမွာပါ။
-Comopse ဘက္မွာေတာ့ ေအာက္ေဖာ္ျပပါအတုိင္း လုိ္က္ေဖာ္ျပေပးေနမွာပါ။

-အေပၚဆံုးစာတန္းကုိ Select လုပ္ၿပီး မိမိအၿမဲတမ္း ေဖာ္ျပေပးခ်င္တဲ့ Post စာသားတစ္ခ်ိဳ႕ကုိ ေရးႏုိင္ၿပီး ေအာက္ကစာတန္း ကုိေတာ့ Select လုပ္ၿပီး မိမိေခါက္ထားခ်င္တဲ့ Post ေတြကုိေရးသားႏုိင္ပါတယ္။
-အဓိက မိမိသိထားရမွာကေတာ့ မိမိေခါက္ထားခ်င္တဲ့ text စာသားေတြဟာ ေအာက္ေဖာ္ျပပါ Attribute tag အတြင္းတြင္ ရွိေနေစရမွာပါ-

<span id="fullpost">ေခါက္ထားရန္စာသားမ်ား</span>

ေရးၿပီးသား Post ေတြကုိ ျပင္မယ္ဆုိရင္လည္း အခုလုိပဲ ျပင္ဆင္ေပးရမွာပါ။

မွတ္ခ်က္။ ဒီ Post ကုိ ကုိရန္ေအာင္လည္း ေရးခဲ့ဘူးၿပီးျဖစ္ကာ အခုနားလည္ေစရန္အလုိ႔ငွာ ရွင္းလင္းျပရျခင္း သာျဖစ္ပါသည္။ မူရင္း Post ကေတာ့ ဒီ blogspot ေလးမွာပါ။

အဆင္ေျပပါေစ

အျပည့္အစံုသုိ႔>>>

ျပန္ေခါက္ခဲ့လုိလွ်င္>>>

Hyperlinks

ံလံုး၀မသိေသးသူမ်ားအတြက္ကုိသာရည္ရြယ္ပါသည္။

Hyperlink ဆုိတာ က်ယ္ျပန္႔ပါတယ္။ သိသေလာက္ အေၾကာင္းအခ်က္ေလာက္သာ တင္ျပလုိက္ ပါတယ္။
Text Links ( HTML code )

<a href="URL" target="_blank"title="TITLE">text</a>

ဥပမာအေနနဲ႔ေျပာရရင္-
Posts အတြင္းေရးသားရင္းျဖစ္ေစ၊ သီးသန္႔အေနနဲ႔ပဲျဖစ္ေစ စာဖတ္သူကုိ Website Link တစ္ခုအျဖစ္ ေပးခ်င္ရင္ သံုးေလ့ရွိတာကုိျမင္ေတြ႕ရမွာ၊ ေအာက္ပါစာပုိဒ္ေလးကုိၾကည့္ပါ-
( Virus ေတြကုိ ႏွိမ္နင္းဖုိ႔ Free Software ျဖစ္တဲ့ AVG Antivirus Software ကုိ ဒီေနရာေလးကေန Click လုပ္ၿပီး Download သြားယူလုိက္ပါ )
ဒီစာပုိဒ္ေလးအတြင္းမွာ Click ဆုိတဲ့ text ကုိ Link ေပးထားခဲ့ပါတယ္။ ဘယ္လုိ Link မ်ိဳးလဲဆုိရင္ target="_bland" ဆုိတဲ့ NewWindow(သုိ႔)NewTag Link မ်ိဳးပါ။ မိမိ Website ရဲ႕အျပင္ဘက္ Site တစ္ခု အေနနဲ႔ ေဖာ္ေပးေနမွာပါ။ ယခုျပဳလုပ္ထားတဲ့ Text Link HTML code ကုိေအာက္ပါအတုိင္း ေဖာ္ျပေပး လုိက္ပါတယ္-

<a href="http://www.download.com/AVG-Anti-Virus-Free-Edition/3000-2239_4-10320142.html?tag=mncol&cdlPid=10880275 "target="_blank"title="AntiVirusSoftware">Click</a>

ထည့္ပံုထည့္နည္းေလးကေတာ့-
Compose box မွာ Posts ေရးၿပီးသြားၿပီဆုိရင္၊ (၁)မိမိ Link ေပးခ်င္တဲ့ Text ကုိမွတ္သားထားခဲ့ပါ၊ (၂)Edit Html ဘက္ကုိေျပာင္းလုိက္ပါ၊ (၃) မွတ္သားထားခဲ့တဲ့ Text ကုိရွာပါ။ (၄)Text ရဲ႕အေရွ႕နဲ႕ ေနာက္တုိ႔မွာHtml code သြင္းေပးပါ၊(Text ရဲ႕ေရွ႕မွာ</a> တစ္ခုပဲရွိမွာပါ) ဒီေလာက္ဆုိ လြယ္လြယ္ေလးေနာ္။

Insert Text Link

ံInsert Text Link ကေတာ့ လုပ္ကတာလြယ္ပါတယ္ Posts ေတြေရးရင္း Links ေတြ ေပးသြားမယ္ ဆုိရင္ ေအာက္ေဖာ္ျပပါတုိင္း ေလ့လာၾကည့္ပါ။
ဥပမာ-
ွSoftware ေကာင္းေကာင္းေတြကုိ ရွာခ်င္ရင္ေအာက္ပါ Website ေတြမွာရွာၾကည့္ပါ-

• * Topdownloads.net
• * Download.com

(၁) Link ျပဳလုပ္မည့္ Text ျဖစ္ေသာ Topdownloads.net ကုိ Select လုပ္ရပါမယ္၊ ၿပီးရင္ေအာက္ေဖာ္ျပပါပံု မွအနီေရာင္ျဖင့္၀ုိင္းျပထားေသာ Link ကုိႏွိပ္ပါ။

(၂) Link box တစ္ခုေပၚလာရင္ ကုိယ္Link ေပးခ်င္တဲ့ Website ရဲ႕ URL ကုိ ထည့္သြင္းေပးၿပီး OK ကုိႏွိပ္လုိက္ ရံုေလးပါ။

Link to This Page(HTML code)

<a href="URL.html"target="_top">post title text</a>

မိမိရဲ႕ Webpage အတြင္းမွာပဲ ေအာက္ဆံုးကေန အေပၚဆံုးကုိျဖစ္ေစ၊ မိမိေရးေနတဲ႔ Post သည္ ေရးခဲ့ၿပီးေသာ Post တစ္ခုနဲ႔ စပ္ဆက္ေနလုိ႔ Link ေပးခ်င္ရင္ျဖစ္ေစ အသံုးျပဳႏုိင္ပါတယ္။
ဥပမာ-

1. မိမိ Post ရဲ႕Title ကုိ ႏွိပ္လုိက္ပါ၊
2. URL Address box မွ .html နဲ႔ အဆံုးသတ္ထားတဲ့ url ကုိ copy လုပ္ပါ။(post ကုိလံုး၀အဆံုးသတ္ၿပီးမွ သာျဖစ္ရပါမယ္)
3. အေပၚမွာေဖာ္ျပထားခဲ့တဲ့ HTML code ထဲမွ URL.html ေနရာတြင္ Paste လုပ္ၿပီး Post title text ေနရာတြင္ မိမိေဖာ္ျပလုိတဲ့ text ထည့္သြင္းပါ။ (ေအာက္တြင္ နမူနာ ေဖာ္ျပလုိက္ ပါတယ္)

<a href="http://pethein.blogspot.com/2008/09/hyperlink-text-links-html-code-href.html "target="_top">အေပၚကုိျပန္သြားလုိက</a>

-ထည့္သြင္းပံု ထည့္သြင္းနည္းကုိေတာ့ Text Link မွာတုန္းကေဖာ္ထားခဲ့ၿပီးပါၿပီ၊ အဲဒီအတုိင္းပဲေပါ့။
(အဓိကသတိျပဳရမယ့္အခ်က္ကေတာ့ မိမိ post ကုိလံုး၀အဆံုးသတ္ၿပီးခ်ိန္မွ Post Title ကုိႏွိပ္ၿပီး URL.html ကုိ copy ယူရပါမယ္)
အေပၚကုိျပန္သြားလုိက

အျပည့္အစံုသုိ႔>>>

ျပန္ေခါက္ခဲ့လုိလွ်င္>>>

Post Title အား Background Image ထည့္သြင္း ေပးျခင္း

မိမိရဲ႕ Post Title ကုိထင္သာျမင္သာေအာင္၊ ေပၚလြင္ေအာင္ ဆြဲေဆာင္မႈတစ္ခုျပဳလုပ္ရန္ အသြင္ေျပာင္းလဲမႈ တစ္ခုလုိ႔ ထင္မိပါတယ္။

---အဲဒီေတာ့ေအာက္ပါအတုိင္းျပဳလုပ္ၾကည့္ပါ-

(၁)အရင္ဆံုး မိမိအသံုးျပဳမယ့္ Post Title Background Image ကုိအရင္ ဖန္တီးရမွာပါ။ ဒီလုိဖန္တီးတဲ့ ေနရာမွာ Photoshop Software စသည္ျဖင့္ တစ္ခုခုႏွင့္ width 72px, height 29px အေနအထား ရေအာင္ ဖန္တီးလုိက္ပါ။ file type ကေတာ့ .jpg ေပါ့။ (မိမိသံုးျပဳတတ္မႈအေပၚမူတည္ၿပီး file type ကုိေရြးခ်ယ္ အသံုးျပဳႏုိင္ပါတယ္) ျခြင္းခ်က္တစ္ခုအေနနဲ႕ ေျပာခ်င္တာကေတာ့ မိမိအသံုးျပဳထားတဲ့ Post Title Fonts အႀကီး/ အေသး အေနအထား အလုိက္ height pixel (px)ကုိ လုိက္ေျပာင္းေပးရန္ လုိအပ္ပါတယ္။font-size:135%; ရာခုိင္းႏႈန္းအေနထားဆုိရင္ေတာ့ height 29px နဲ႕အေနေတာ္ေလာက္ က်ပါတယ္။ ဒါေပမဲ့ ေနာက္တစ္ခ်က္ စဥ္းစားေပးရဦးမွာကေတာ့ Padding အေနထားပဲျဖစ္ပါတယ္။ Padding အေၾကာင္းကုိေတာ့ ေရွ႕ကေရးခဲ့တဲ့ Post မွာ ေဖာ္ျပထားခဲ့ၿပီး ျဖစ္ပါတယ္။ ဒီအတြက္ကုိေတာ့ေအာက္မွာထပ္ရွင္းျပသြားပါမယ္။

(၂) မိမိအသံုးျပဳလုိခ်င္တဲ့ Image size ရၿပီဆုိရင္ Image Hosting site တစ္ခုခုတြင္ Upload ျပဳလုပ္ေပးရပါမယ္။ Upload ေဆာင္ရြက္ပံုကုိလည္း ေရွ႕ကေရးခဲ့တဲ့ Post မွာေဖာ္ျပထားၿပီးပါၿပီ။ Upload လုပ္ၿပီး ရရွိသည့္ Image URL Link code ကုိ Notepade ထဲခဏသိမ္းလုိက္ပါ။ Image Hosting site အနည္းငယ္ ေဖာ္ျပလုိက္ပါတယ္-

1. http://www.4freeimagehost.com/
2. http://www.imgfreehost.com/
3. http://photobucket.com/
4. http://imajr.com/
5. http://www.imagehostfree.net/

(၃)မိမိ Blog ၏ Dashboard ထဲကုိ၀င္ပါ။
-Layout==>Edit HTML ကုိ၀င္ပါ။

-Browser ၏ Menu bar မွ Edit ေအာက္မွ Find ကုိႏွိပ္ပါ။ သုိ႔မဟုတ္ Keyboard မွ ctrl+F ကုိႏွိပ္လုိက္ပါ။ Find box ေလး ေအာက္ေျခမွာေပၚလာပါလိမ့္မယ္။ ၄င္း find box တြင္ .post h3 ကုိ ရုိက္ထည့္လုိက္ပါ။ အျမန္ ဆံုး ရွာေပးပါလိမ့္မယ္။ (မိမိအသံုးျပဳထားတဲ့ Template အေပၚမူတည္ၿပီး Post Title ဟာ .Post h3 အေနနဲ႕ ရွိမေနဘဲ ေျပာင္းလဲေနတတ္ပါတယ္၊ မ်ားေသာအားျဖင့္ကေတာ့ .Post h3 ေအာက္မွာပဲ ရွိတာမ်ားပါ တယ္)
- ဒီဥပမာ code ဟာ Minima Template မွျဖစ္ပါတယ္-

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-family:trebuchet ms;
font-size:135%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

-ေအာက္ေဖာ္ျပပါ အနီေရာင္ျဖင့္ ျပထားသည္တုိ႔ကုိ ထည့္သြင္း၊ အစားထုိးေဆာင္ရြက္ပါ။ (Image URL) ေနရာ တြင္ မိမိ Upload လုပ္ခဲ့ေသာ Image URL Link code ထည့္သြင္းေပးၿပီး padding ကုိ ေျပာင္းေပး လုိက္ပါ-

.post h3 {
background:url(http://_ _ _ _ .jpg);
margin:.25em 0 0;
padding:0 0 0px;
font-family:'Zawgyi-One',Arial;
font-size:135%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

-ၿပီးရင္ Template save လုပ္ပါ။ မိမိရဲ႕ Post Title ေတြအားလံုးကုိ လုိက္ၾကည့္ပါ။

-တစ္ခ်ိဳ႕ေသာBlog**** ဥပမာ-Rounder Template Style ေတြလုိဆုိရင္ Post Title ရဲ႕ေဘးမွာ ကပ္လ်က္ မွ်ားပံုစံေလးေတြ ထည့္သြင္းေပးထားတာ ေတြ႔ရတတ္ပါတယ္။ Background:url ကုိ no-repeat ဆုိၿပီး code သြင္းထား ပါတယ္။ အျပာေရာင္ျဖင့္ ျပထားသည္မ်ားကုိ ျဖဳတ္လုိက္ပါ။ ဥပမာအေနနဲ႕ေဖာ္ျပလုိက္ပါတယ္-

.post h3 {
margin:0;
line-height:1.5em;
background:url( "http://www2.blogblog.com/rounders3/icon_arrow.gif") no-repeat
10px .5em;
display:block;
border:1px dotted $borderColor;
border-width:0 1px 1px;
padding-top:2px;
padding-$endSide:14px;
padding-bottom:2px;
padding-$startSide:29px;
color: $postTitleColor;
font-family:'Zawgyi-One',Arial;
font-size:135%;
}

-အနီေရာင္ျဖင့္ေဖာ္ျပထားသည္တုိ႔ကုိ ေအာက္ပါအတုိ္င္းျပဳျပင္ေျပာင္းလဲေပးလုိက္ပါ-

.post h3 {
margin:0;
line-height:1.5em;
background:url( "http://_ _ _ _ _ _ .jpg" );
display:block;
border:1px dotted $borderColor;
border-width:0 1px 1px;
padding:0 0 0px;
color: $postTitleColor;
font-family:'Zawgyi-One',Arial;
font-size:135%;
}

(၄)Background Image နဲ႕ Post Title Fonts တုိ႔ အဆင္မေျပဘူးဆုိရင္၊ ဥပမာ-
(က)တကယ္လုိ႔မ်ား မိမိ Post Title Fonts ကႀကီးၿပီး Background Image ကေသးေနမယ္ fit အန္၀င္ဂြင္က် မျဖစ္ဘူး ဆုိရင္ Three Value Padding တြင္ ေနာက္ဆံုး Value ကုိ တုိးေလွ်ာ့ ခ်န္ညွိေပး ရပါမယ္။
( padding: 0 0 15px;)

(ခ)Background Image ကလည္း မိမိဖန္တီးထားတဲ့ Design ထက္ ေက်ာ္လြန္ေနမယ္ ဆုိရင္ (ေသသပ္မႈ မရွိရင္) Padding ၏ ေနာက္ဆံုး Value ကုိေလွ်ာ့ခ် ေပးရပါမယ္။ Padding Value ၏ညႊန္းဆုိမႈတုိ႔ကို ေရးခဲ့ၿပီးေသာ Post တြင္ ဖတ္ၾကည့္ပါ။
အဆင္ေျပပါေစ။

Go To Top

အျပည့္အစံုသုိ႔>>>

ျပန္ေခါက္ခဲ့လုိလွ်င္>>>

Post Title အတြင္း Image (Logo)ထည့္သြင္းျခင္း

မိမိရဲ႕Post ေတြကုိ အလွဆင္ျခင္း တစ္မ်ိဳးေပါ့။ ဒီလုိ အလွဆင္တဲ့ေနရာမွာ မိမိ ကၽြမ္းက်င္ သလုိ ေဆာင္ရြက္ ႏုိင္ပါတယ္။ အခုက်ေနာ္သိတာေလး တစ္ခ်ိဳ႕ကုိပဲ ေျပာျပမွာ ျဖစ္ပါတယ္။ Post Title အတြင္း Image Type အမ်ိဳးမ်ိဳးနဲ႔ Animation gif file တုိ႔ကုိလည္း ထည့္သြင္း အသံုးျပဳႏုိင္ ပါတယ္။ က်ေနာ္အသံုးျပဳတာကေတာ့ .jpg, .gif file type နဲ႔ animation gif file type တုိ႔ကုိ အသံုးျပဳတာ ပုိႏွစ္သက္ပါတယ္။ သံုးလုိ႔ အေကာင္းဆံုးလုိ႔ ထင္မိပါတယ္။ ေအာက္ပါအတုိင္း ေဆာင္ရြက္ၾကည့္ၾကရေအာင္-

-ထည့္သြင္း အသံုးျပဳပံု ကေတာ့(၂)မ်ိဳးရွိပါတယ္။

**Post Title ရဲ႕စာေၾကာင္း အစေနရာမွာ Image ထည့္သြင္း ေပးျခင္းႏွင့္ **Post Title ရဲ႕ေနာက္ခံ background တစ္ခုလံုးကုိ Image ထည့္သြင္းေပးျခင္း တုိ႔ပဲျဖစ္ပါတယ္။

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

------------------------------------------------------------------------------------------------------------------
Post Title (ေဘး)စာေၾကာင္းအစေနရာမွာ Image ထည့္သြင္းေပးျခင္း။

(၁)ပထမဦးဆံုးျပဳလုပ္ရမွာကေတာ့ မိမိအသံုးျပဳ ထည့္သြင္းလုိသည့္ Image ကုိ Width 20px , Height 20px (သုိ႔မဟုတ္) 25px , 25px ျပဳလုပ္ထားရပါမယ္။ Image type ကေတာ့ .jpg ေပါ့။ ျပဳျပင္လုိ႔ရႏုိင္တဲ့ Software ေတြ အမ်ားႀကီး ရွိပါတယ္။ အေကာင္းဆံုးကေတာ့ Photoshop software ပါ၊ ဒါမွမဟုတ္ အလြယ္ဆံုးကေတာ့ Google's Picasa ပါ။ pixel (px)ေတြကုိ အခုလုိ ေလွ်ာ့ခ်ပစ္ဖုိ႔လုိပါတယ္။ ဒါမွ Post Title စာေၾကာင္းနဲ႔ အေနအထား သင့္ေတာ္မွာျဖစ္ပါတယ္။ တစ္ခ်ိဳ႕ Website ေတြမွာ Post Title fonts ေတြကို ႀကီးႀကီး ေရးတတ္ ၾကပါတယ္။ ဒါဆုိရင္ေတာ့ မိမိ စာလံုးအရြယ္အစား font အေပၚမူတည္ၿပီး px ကို လုိက္ျမွင့္ေပးဖုိ႔ လုိအပ္ပါ လိမ့္မယ္။

(၂)မိမိအသံုးျပဳထည့္သြင္းရန္ျပဳျပင္ထားေသာ Image ကုိ Image Hotsting Site တစ္ခုေပၚမွာ Upload ျပဳလုပ္ရမွာပါ။ Upload လုပ္ၿပီး ၄င္း Hotsting WebSite မွ ထုတ္ေပးေသာ Image Link code ကုိယူၿပီး မိမိ Blogsite မွာသံုးရမွာပါ။ ေအာက္ပါ Free Image Hosting site တစ္ခုအတြင္း Upload ျပဳလုပ္မႈပံုၾကည့္ပါ။ http://www.4freeimagehost.com/ ကုိသြားပါ အလြယ္တကူ အသံုးျပဳခြင့္ ေပးထား ပါတယ္၊ ဒီ့ျပင္ Hosting site မ်ားတြင္လည္း အသံုးျပဳႏုိင္ပါတယ္။

ပံု(၁)

ပံု(၂)

ပံု(၃)

(၃) Image Link code ကုိ Copy လုပ္ၿပီး Notepade ေပၚတြင္ ခဏ Paste လုပ္ထားလုိက္ပါ။
-မိမိ Blog ၏ Dashboard ထဲကုိ၀င္ပါ။
-Layout==>Edit HTML ကုိ၀င္ပါ။
-Browser ၏ Menu bar မွ Edit ေအာက္မွ Find ကုိႏွိပ္ပါ။ သုိ႔မဟုတ္ Keyboard မွ ctrl+F ကုိႏွိပ္လုိက္ပါ။ Find box ေလး ေအာက္ေျခမွာေပၚလာပါလိမ့္မယ္။ ၄င္း find box တြင္ .post h3 ကုိ ရုိက္ထည့္လုိက္ပါ။ အျမန္ဆံုး ရွာေပးပါလိမ့္မယ္။
ေအာက္ေဖာ္ျပပါအတုိင္းေတြ႕ရပါလိမ့္မယ္-

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-family:trebuchet ms;
font-size:120%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

-ေအာက္ေဖာ္ျပပါ အနီေရာင္ျဖင့္ ျပထားသည္တုိ႔ကုိ ထည့္သြင္း၊ အစားထုိးေဆာင္ရြက္ပါ။ (Image URL) ေနရာတြင္ မိမိ Upload လုပ္ခဲ့ေသာ Image URL Link code ထည့္သြင္းေပးၿပီး padding ကုိ ေျပာင္းေပး လုိက္ပါ-

.post h3 {
background:url(http://_ _ _ _ .jpg) no-repeat;
margin:.25em 0 0;
padding:0 0 4px 30px;
font-family:'Zawgyi-One',Arial;
font-size:120%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

-ၿပီးရင္ Template save လုပ္ပါ။ မိမိရဲ႕ Post Title ေတြအားလံုးကုိ လုိက္ၾကည့္ပါ။

-တစ္ခ်ိဳ႕ Blog Template ေတြမွာ ရွိၿပီးသားေတြေတြ႕ရတတ္ပါတယ္။ ဥပမာ-Rounder Template Style ေတြမွာ မွ်ားပံုစံေလးေတြ ထည့္သြင္းေပးထားၿပီးသားျဖစ္ပါတယ္၊ မိမိစိတ္ႀကိဳက္ပံု ထည့္ခ်င္တယ္ဆုိရင္ေတာ့ Image link code ကုိ အစားထုိး ထည့္ေပးလုိက္ၿပီး {margin:.25em 0 0;ႏွင့္ padding ေတြခြဲၿပီး ေဖာ္ျပပါရွိခဲ့ရင္ တစ္ခုတည္းအျဖစ္ padding:0 0 4px 30px; } လုိ႔ ျပင္ေပးလုိက္ရင္ ရပါတယ္။ 30px က left value ျဖစ္ပါတယ္။ ပံုႀကီးရင္ ႀကီးသလုိ လုိက္ျမွင့္ေပးရမွာပါ။

-ဒီေနရာမွ padding အေၾကာင္းကုိ နည္းနည္းေျပာျပခ်င္ပါတယ္၊ အသံုးျပဳလုိ႔ Image အေနအထား အရ ေျပာင္းလဲဖုိ႔ လုိအပ္တဲ့အခါ သံုးရန္သာ ျဖစ္ပါတယ္၊ ဥပမာအေနနဲ႔ ေဖာ္ျပလုိက္ပါတယ္-

.post h3 အတြင္းမွာ
{padding: 10px;} One value အျဖစ္ 10px တစ္ခုတည္းသံုးမယ္ဆုိရင္-
၄င္းဟာ Post Title တစ္ခုလံုးရဲ႕ Padding အတြက္ရည္ညႊန္းပါတယ္။

{padding: 10px 20px;} Two values မွာေတာ့ 10px က top and bottom padding ကုိညႊန္းဆုိၿပီး 20px ကေတာ့ left and right padding အတြက္ ညႊန္းဆုိျခင္းျဖစ္ပါတယ္။

{padding: 10px 20px 30px;} Three values မွာေတာ့ 10px က the top padding အတြက္၊ 20px က the left and right padding အတြက္၊ 30px ကေတာ့ bottom padding အတြက္ ညႊန္းဆုိ ထားျခင္း ျဖစ္ပါတယ္။

{padding: 10px 20px 30px 40px;} Four values မွာေတာ့ 10px က top padding အတြက္၊ 20px က right padding အတြက္၊ 30px က bottom padding အတြက္၊ 40px ကေတာ့ left padding အတြက္ အသီးသီး ညႊန္းဆုိျခင္း ျဖစ္ပါသည္။
အဆင္ေျပပါေစ။

အျပည့္အစံုသုိ႔>>>

ျပန္ေခါက္ခဲ့လုိလွ်င္>>>