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

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

ဗမာ့ေစာင္း

သြားရင္းလာရင္း အပန္းေျဖၾကည့္ရႈ႕ႏုိင္ဖုိ႔
(တစ္ေခတ္တစ္ခါက ျမင္ကြင္းေတြပါတဲ့ရုပ္ရွင္ဇာတ္ကားေကာင္းႀကီး)

[ Open / Close ]

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

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

ဟန္ထြန္း ရဲ႕ ရွိေနမယ္

သြားရင္းလာရင္း အပန္းေျဖနားဆင္ႏုိင္ဖုိ႔

[ Open / Close ]

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

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

ႏွစ္သက္မိေသာေတးသီခ်င္း

အဆုိေတာ္ Rဇာနည္ ရဲ႕ ေၾကြပါေစ[ + / - ]

အဆုိေတာ္ ဟန္ထြန္း ရဲ႕ အရင္ကဇာတ္လမ္း[ + / - ]

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

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

ေခတၱရပ္နားျခင္း

မိတ္ေဆြအေပါင္းအသင္းအားလံုးႏွင့္ အလည္လာအေပါင္း ေတာင္းပန္ပါရေစ အရွဳပ္ေတြလုပ္ေနလုိ႔ ေရးခ်င္တာေတြအမ်ားႀကီး က်န္ေနေသးေပမယ့္ ခဏနားမယ္ အားလံုးအဆင္ေျပ သြားတဲ့တစ္ေန႔

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

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

Peekaboo Post and Sidebar Hight/Show( +/- )

Post Hight/Show[+/-]

အခုေဖာ္ျပမည့္နည္းေလးကေတာ့ အလြယ္ကူဆံုးနဲ႔ လံုး၀ error မရွိတဲ့ Hight/Show [+/-] လုပ္လုိ႔ရတဲ့ နည္းေကာင္းေလး တစ္ခုပါ။ အသံုးလည္းနည္း လူသိလည္းနည္းတဲ့ နည္းပညာေလး တစ္ခုလုိ႔ ထင္ပါတယ္။ ေခါက္သိမ္းထားတဲ့ posts ေတြကို Show အေနနဲ႔ ၾကည့္ခ်င္ရင္ေသာ္လည္းေကာင္း၊ Hight ျပန္လုပ္ခ်င္ခဲ့ရင္ ေသာ္လည္းေကာင္း တစ္ေနရာထဲမွာပဲ mouse click ျပဳလုပ္ေပးျခင္းအားျဖင့္ Hight/Show ျပဳလုပ္ေပးႏုိင္ ပါတယ္။ျပဳလုပ္ခ်င္တယ္ဆုိရင္ေတာ့ အဆင့္ (၃)ဆင့္ေလာက္လုပ္ရံုနဲ႔ အဆင္ေျပေစပါတယ္-

[ ဆက္ဖတ္ရန္ +/- ]

(၁) Style Sheet အတြင္း အဆင္ေျပဆံုးေနရာတစ္ခုမွာ ေအာက္ေဖာ္ျပပါ code စာေၾကာင္းေလး၂ခုကုိ ထည့္သြင္းေပးပါ။ Style Sheet ဆုိတာကေတာ့ ]]></b:skin> ဆုိတဲ႔ စာေၾကာင္းေလး အထက္ပုိင္းကုိ ေခၚပါတယ္။ က်ေနာ္ကေတာ့ သူ႔ရဲ႕အေပၚကပ္လ်က္ မွာ ထည့္သြင္း ေပးထားပါတယ္။ Blogger မ်ား မိမိအဆင္ေျပတဲ့ေနရာမွာ ထည့္သြင္းပါ-

.commenthidden {display:none}
.commentshown {display:inline}

(၂) ေအာက္ေဖာ္ျပပါ Script code ေလးကုိ </head> ရဲ႕အေပၚမွာ ထည့္သြင္းေပးပါ-

<script type="text/Javascript">
function togglecomments (postid){
var whichpost =document.getElementById(postid);if(whichpost.className=="commentshown"){
whichpost.className="commenthidden";}else {
whichpost.className="commentshown";}
}</script>

ဒီေလာက္နဲ႔တင္ကုိ ျပင္ဆင္ျခင္းအပုိင္းၿပီးပါၿပီ။

(၃) Posts ေတြကုိ ေခါက္ခ်ိဳးသိမ္းဖုိ႔အတြက္ ေအာက္ေဖာ္ျပပါ code ကုိအသံုးျပဳရပါမယ္။ လုိက္နာရမဲ့ အထူး သတိျပဳရမဲ့ အခ်က္တစ္ခ်က္ေတာ့ရွိပါတယ္။ အနီေရာင္ ျဖင့္ျပထားတဲ့ ေနရာတုိ႔တြင္ post တစ္ခုနဲ႔ တစ္ခုအေပၚ အသံုးျပဳတာခ်င္မတူရပါဘူး။ ဥပမာ-post အခု ၁၀၀ မွာ သံုးမယ္ဆုိရင္ ၄င္း အနီေရာင္ ျဖင့္ ျပထားေသာေနရာသည္ အခု ၁၀၀ လံုး တစ္ခုႏွင့္ တစ္ခုမတူညီတဲ့ အမွတ္အသားေတြ ေျပာင္းလဲ ထည့္သြင္း ေပးရမွာပါ။ က်ေနာ္ကေတာ့ post အမွတ္အသားအေနနဲ႔ ကုိယ့္နာမည္ ေနာက္မွာ 1,2,3, စသည္ျဖင့္ တစ္ခုစီ သတ္မွတ္ေပး လုိက္ပါတယ္။ အလြယ္ဆံုးေပါ့။ အျပာေရာင္ျဖင့္ျပထားေသာ rgb color value ႏွင့္ Hight/Show ျပဳလုပ္မဲ့ [ ဆက္ဖတ္ရန္ +/- ] တုိ႔ကုိ မိမိစိတ္ႀကိဳက္ ျပင္ဆင္ အသံုးျပဳႏုိင္ပါတယ္။ (color link )

ေဖာ္ျပထားလုိေသာစာသားမ်ားထားရန္<a style="color: rgb(255, 0, 0);" aiotitle="click to expand" href="javascript:togglecomments('pethein')"><span style="color: rgb(255, 0, 0);">[ ဆက္ဖတ္ရန္ +/- ]</span></a><div class="commenthidden" id="pethein"><p> ေခါက္သိမ္းထားလုိေသာစာသားမ်ားထားရန္</p></div>

အထက္ေဖာ္ျပပါ code ကုိ Dashboard မွ Settings==>Formatting ကုိသြားၿပီး Post Template ၏ box ထဲတြင္ ထည့္သြင္းေပးလုိက္ပါ။ ၿပီးရင္ Save လုိက္ပါ။ ဒါဆုိရင္ Posts ေတြေရးတုိင္ လုိက္ေပၚေပးေနမွာပါ။

အလြန္လြယ္လုိ႔ ဒီေလာက္ဆုိသေဘာေပါက္တယ္လုိ႔ ယူဆလုိက္ပါတယ္။

ွSidebar အတြက္ေတာ့ ေနာက္မွ ဆက္ေရးပါ့မယ္။

အဆင္ေျပပါေစ

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

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

Author Comments Different Styles

Emhedding Comment Box Style သံုးသူမ်ားအတြက္ ျဖစ္ပါတယ္။ မိမိပုိ႔စ္ေတြကုိ လာေရာက္ ဖတ္ရႈၾကတဲ့ စာဖတ္သူမိတ္ေဆြမ်ားက ေရးခဲ့ၾကတဲ့ comments ေတြကုိ မိမိမွျပန္လည္တံု႔ျပန္ ေရးသားသည့္အခါမွာ ေသသပ္လွပၿပီး အျမင္တစ္မ်ိဳး ဆန္းေစ ခ်င္ရင္ေတာ့ ေအာက္ပါအတုိင္း ျပဳျပင္ၾကည့္ပါ-
(၁)အရင္ဆံုး Dashbosrd ကုိသြားပါ။ Setting==>Comments ခလုတ္တုိ႔ကုိ ႏွိပ္ၿပီး ၀င္လုိက္ပါ။ comment မွာ Show ေရြးထားပါ။ (နမူနာၾကည့္ရန္)
(၂)ၿပီးရင္ေတာ့ထံုစံအတုိင္း Template==>Edit HTML ကုိသြားပါ။ backup လုပ္ထားရန္အတြက္ Download Full Template ကုိႏွိပ္ၿပီး backup လုပ္ထားလုိက္ပါ။ ၿပီးရင္ Expand Widget Templates ရဲ႕ Check-box ေလးကုိ ႏွိပ္လုိက္ပါ။ Expand Widger Templates ကုိေရြးခ်ယ္းထားခ့ဲမွ မိမိရဲ႕ Templates ကုိ ျပည့္ျပည့္စံုစုံျမင္ေတြ႕ႏုိင္၊ ရွာေဖြႏုိင္မွာျဖစ္ပါတယ္။
(၃) Ctrl+F ကုိ ႏွိပ္ၿပီး Find box ကုိရယူလုိက္ပါ။ ၄င္း Find box ထဲတြင္ <dl id='comments-block'> သုိ႔မဟုတ္ comments-block ဆုိတဲ့ စာသားရုိက္ထည့္ ၿပီးEnter ႏွိပ္၍ ရွာလုိက္ပါ။ Edit HTML box တြင္ ၄င္း comments-block ကုိ hight light ျဖင့္ ျပေပးေနပါလိမ့္မယ္။ ၄င္းႏွင့္ တစ္စပ္တည္း ေအာက္ေဖာ္ျပပါ code တုိ႔ကုိ ေတြ႕ရမွာျဖစ္ပါတယ္။ ေတြ႔ေအာင္ေတာ့ရွာဖုိ႔ လုိပါလိမ့္မယ္။ အနီေရာင္ျဖင့္ က်ေနာ္ျပထားတဲ့ code တုိ႔ေတာ့ ေတြ႕ရမွာမဟုတ္ပါဘူး။ ဒါေၾကာင့္ အနီေရာင္ျဖင့္ျပထားတဲ့ code တုိ႔ကုိ copy လုပ္ၿပီး မိမိဆီမွာ အစားထုိးထည့္ ေပးလုိက္ပါ-

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

(၄)အခုခါေတာ့ စာေရးသူရဲ႕ တံု႕ျပန္ ေရးသားမဲ့ Comment Styles ကုိျပဳျပင္ ေပးရမွာ ျဖစ္ပါတယ္။ Find box ထဲတြင္ comment-body ဆုိတဲ့ စာသား ရုိက္ထည့္ၿပီး Enter ႏွိပ္၍ ရွာလုိက္ပါ။ hight light ျဖင့္ ေဖာ္ျပေပး ေနပါလိမ့္မယ္။ မိမိအသံုးျပဳထားတဲ့ Template အမ်ိဳးအစားအေပၚ မူတည္ၿပီး ကြဲျပားမႈ ရွိေနတတ္ပါတယ္။ Minima Template နဲ႕ Rounders Template (၂)မ်ိဳး ေဖာ္ျပေပးလုိက္ပါတယ္။

Minima Template တြင္ေတြ႕ရမဲ့ code ပါ-

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}

Rounders Template တြင္ေတြ႕ရမဲ့ code ပါ-

.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}

ေအာက္ေဖာ္ျပပါအတုိင္း အနီေရာင္ျဖင့္ ထည့္သြင္းေဖာ္ျပထားေသာ code ကုိ Copy ကူးယူၿပီး မိမိ Template တြင္ ထည့္သြင္းေပးရပါမယ္။

Minima Template အတြက္

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #254117;
font-size:100%; color:#F6358A;
font-family: 'Zawgyi-One', courier;
background:#C3FDB8;
}

(နမူနာပံု)

Rounders Template အတြက္

.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}
.blog-author-comment {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.blog-author-comment p {
margin:0 0 .5em;
padding:0 0 0 20px;
color:#F6358A;
font-style: italic;
}

(နမူနာပံု)

margin, padding, color, font-style တုိ႔ ၏ value မ်ားကုိ မိမိစိတ္ႀကိဳက္ျပင္ဆင္ အသံုးျပဳႏုိင္ပါတယ္။
ဥပမာ-

.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
font-size:100%;
color: #F6358A;
font-family: Zawgyi-One, courier;
background: url("URL OF IMAGE");
}

အဆင္ေျပစြာျဖင့္ အသံုးတည့္ႏုိင္ၾကပါေစ

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

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

Embedding Comment Box Form

Embedding Comment Box Form ကုိ အသံုးျပဳျခင္းျဖင့္ မိမိေရးသားထားေသာ Posts မ်ားကုိ လာေရာက္ ဖတ္ရႈၾကေသာ ခ်စ္မိတ္ေဆြတုိ႔ရဲ႕ေရးသားေပးခဲ့ၾကေသာ comments ေတြ တြဲလ်က္ page တစ္ခုတည္းအတြင္း ေဖာ္ျပေပးႏုိင္ပါတယ္။ comments မ်ားကုိလည္း အလြယ္တကူ ေရးသားႏုိင္ၾကမွာျဖစ္ပါတယ္။ တစ္ခ်ိဳ႕ေတြ ျပဳျပင္ၿပီးသလုိ တစ္ခ်ိဳ႕ေတြလဲ ဒီ Feature ေလးကုိ အသံုးမျပဳၾကရေသးပါဘူး။ အသံုးျပဳခ်င္ရင္ေတာ့-

(၁)Dashboard ကုိသြားပါ။
Setting==>Comments ကုိ ေရြးႏွိပ္ၿပီး၀င္လုိက္ပါ။
Comment Form Placement မွ ေရြးခ်ယ္အသံုးျပဳရန္ ၃မ်ိဳးရွိေနပါတယ္။
Embedded below post ကုိ ေရြးခ်ယ္ၿပီး SAVE SETTINGS ႏွိပ္ၿပီး save လုိက္ပါ။


ဒီအဆင့္(၁)ေလာက္နဲ႔တင္ အဆင္ေျပႏုိင္ပါတယ္။ အဆင္မေျပေသးရင္ေတာ့ ေအာက္ပါ အဆင့္(၂)အတုိင္း ေဆာင္ရြက္ၾကည့္ပါ-

(၂) Layout==>Edit HTML ကုိသြားပါ။
Download Full Template ကုိႏွိပ္ၿပီး Template Backup လုပ္ထားေပးပါ။
Expand Widget Templates ရဲ႕ check box ကုိ mouse နဲ႔ တစ္ခ်က္ ႏွိပ္လုိက္ပါ။ ဒါမွ အျပည့္အစံုရွာႏုိင္ ေဖြႏုိင္မွာျဖစ္ပါတယ္။ ၿပီးရင္ Find box (ctrl+f ႏိွပ္၍)တြင္ <p class='comment-footer'> ထည့္ၿပီး ရွာလုိက္ပါ။ ေတြ႕ေအာင္ေတာ့ရွာရမွာပါ။ ၄င္းႏွင့္အတူ ေအာက္ေဖာ္ျပပါ code တုိ႔ကုိေတြ႕ရမွာပါ-

<p class='comment-footer'>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</b:if>
</p>

ရွာလုိ႔ေတြ႕ၿပီဆုိရင္ေတာ့ ေအာက္ေဖာ္ျပပါ code တုိ႔ကုိ copy ကူးၿပီး အစားထုိးေပးလုိက္ပါ။

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/> <b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</b:if> </b:if>
</p>

ဒီေလာက္ပါပဲ ၿပီးရင္ေတာ့ SAVE TEMPLATE ကုိ ႏွိပ္ၿပီး save လုိက္ပါ။

အဆင္ေျပပါေစ။

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

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

Text Border Style

မိမိ Post အတြင္း စာသားတစ္ခ်ိဳ႕၊ စာတစ္ေၾကာင္း၊ စာတစ္ပုိဒ္ စသျဖင့္ စာသားမ်ား ေဘာင္ခတ္ေပးျခင္း အားျဖင့္ စာဖတ္သူကုိ သိသာ ထင္ရွားေစခ်င္ရင္ သံုးတတ္ၾကတဲ့ style တစ္ခုပါ-

Style(1)

<div style="border-style:solid">---Text----</div>

၄င္းနမူနာပံုစံ

This will have a solid border.

Style(2)

<div style="width:230px; border-style:solid">---Text----</div>

၄င္းနမူနာပံုစံ

This will have a solid border.

Style(3)

<div style="width:240px; border-style:double">---Text---</div>

၄င္းနမူနာပံုစံ

This will have a double border.

Style(4)

<div style="border-width:thin; border-style:solid">---Text---</div>

၄င္းနမူနာပံုစံ

This will have a thin, solid border.

Style(5)

<div style="border-width:12px; border-style:solid">---Text---</div>

၄င္းနမူနာပံုစံ

This will have a 12 pixel solid border.

Style(6)

<div style="border-color:red; border-style:solid">---Text---</div>

၄င္းနမူနာပံုစံ

This will have a red, solid border.

Style(7)

<div style="margin-left:50px; border-style:double">---Text---</div>

၄င္းနမူနာပံုစံ

This has a left margin of 50 pixels.

Style(8)

<div style="margin-right:100px; border-style:double">---Text---</div>

၄င္းနမူနာပံုစံ

This has a right margin of 100 pixels. Yes, it is pretty neat to have a right margin, isn't it?

Style(9)

<div style="padding-left:50px; border-style:double">---Text---</div>

၄င္းနမူနာပံုစံ

This has a left padding of 50 pixels.

Style(10)

<div style="border-style:double;background-color: rgb(0, 255, 255);"><p><blockquote>---Text-----</blockquote></p></div>

၄င္းနမူနာပံုစံ

This has a left blockquote text style.This has a left blockquote text style. This has a left blockquote text style. This has a left blockquote text style. This has a left blockquote text style. This has a left blockquote text style.

Possible Values မ်ားကုိေတာ့ မိမိစိတ္ႀကိဳက္အဆင္ေျပသလုိ ေျပာင္လဲသံုးစြဲႏုိင္ပါတယ္။
Color Value အတြက္LinK

အဆင္ေျပပါေစ။

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

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

Horizontal Menu and Navigation Bar

Text Link Menu Navigation Bars ျပဳလုပ္ဖုိ႔အတြက္ Minima Template ကုိအေျခခံၿပီး ေဖာ္ျပေပးသြားမွာ ျဖစ္ပါတယ္။ အဆင့္(၄)ဆင့္ေလာက္ေတာ့ လုပ္ရပါလိမ့္မယ္-

1. အရင္ဆံုး ရုိးရွင္းတဲ့ Simple Navigation Bar ျပဳလုပ္ဖုိ႔အတြက္ ေအာက္ေဖာ္ျပပါ CSS code ကုိထည့္ေပး ရပါမယ္-

#newnavbar ul li{
font-size:100%;
font-aling:top;
list-style-type: none;
display:inline;
padding:10px;
margin:0px;
border:0px solid;
}

(က) Dashboard ကုိသြားပါ။ Layout==>Edit HTML ကုိ၀င္ပါ။ ထံုစံအတုိင္း Download Full Template ကုိႏွိပ္ၿပီး Template Backup လုပ္ပါ။ ၿပီးရင္ #header-wrapper (သုိ႔မဟုတ္) #header-wrapp စသျဖင့္ တစ္ခုခုကုိ Find box(Ctrl+F) မွာ ထည့္သြင္း ရွာၾကည့္ပါ။ မိမိ Template အေပၚမူတည္ၿပီး မတူညီႏုိင္တဲ့အတြက္ အနီးစပ္ဆံုးကုိ ရွာၿပီး ေတြ႕ရင္ ၄င္းရဲ႕အေပၚမွာ အထက္ေဖာ္ျပပါ code ကုိထည့္သြင္းေပးလုိက္ပါ။ (က်ေနာ္ အသံုးျပဳထားတာကေတာ့ Minima Template Style ျဖစ္ပါတယ္ သူ႔ကုိဆိုရင္ေတာ့ /*Header*/ ကုိရွာၿပီး သူ႔ရဲ႕ေအာက္မွာထည့္သြင္းေပးလုိက္ရံုပါ။) ၄င္း code အတြင္း အနီေရာင္ျဖင့္ျပထားေသာ တန္ဖုိးမ်ားကုိ မိမိလုိအပ္သလုိခ်ိန္ညွိေပးရပါမယ္။
(ခ) <div id='header-wrapper'> ေအာက္မွာရွိတဲ့ ေအာက္ေဖာ္ျပပါ code ကုိရွာပါ
(<div id='header-wrapp'> လဲျဖစ္ခ်င္ျဖစ္ႏုိင္ပါတယ္ မိမိရဲ႕ Template အေပၚပဲ မူတည္ပါတယ္)

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

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

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

maxwidgets value ကုိ မိမိအသံုးျပဳခ်င္သေလာက္ထည့္ေပးႏုိင္ပါတယ္။ေအာက္ပါ ပံုကုိၾကည့္ပါ-

2. Text color ႏွင့္ mouse over Link တုိ႔အတြက္ကုိေတာ့ ေအာက္ေဖာ္ျပ အျပာေရာင္ျဖင့္ ျပထားေသာ code တုိ႔ကုိအပုိဒ္(၁)ပါအတုိင္းျပဳလုပ္ခဲ့ၿပီးေသာ CSS code ေအာက္တြင္ ထပ္မံ ထည့္သြင္းေပးလုိက္ရံုပါ-

#newnavbar ul li{
font-size:85%;
list-style-type: none;
display:inline;
padding:5px;
margin:0px;
border:1px solid;
}
#newnavbar li a{
color:#4CC417;
}
#newnavbar li a:visited {
color: #57E964;
}
#newnavbar li a:hover {
color: #F88017;
background: #ffff66;
}

-အနီေရာင္ျဖင့္ျပထားသည္တုိ႔ကုိ မိမိႀကိဳက္သလုိ color ထည့္သြင္း အသံုးျပဳႏုိင္ပါတယ္။ color ကုိေတာ့ တစ္ေရာင္စီ ထည့္ရမွာပါ။
-ၿပီးရင္ေတာ့ Template ကုိ Save လုိက္ပါ။

3. ဒီအဆင့္ထိၿပီးၿပီဆုိရင္ေတာ့ Dashboard ကုိသြားပါ။ Layout==>Page Elements ကုိသြားပါ။ Add a Gadget ထဲ၀င္ၿပီး HTML/JavaScript ထဲ၀င္ပါ။ ေအာက္ေဖာ္ျပပါ code ကုိ ထည့္သြင္းၿပီး Save ေပးလုိက္ပါ။ အနီေရာင္ျဖင့္ ျပထားေသာ ေနရာတုိ႔တြင္ မိမိ Link ေပးျခင္းေသာ URL ကုိ ထည့္သြင္းေပးရပါမယ္။

<div id='newnavbar'>
<ul>
<li><a href="URL of Home page">Home</a></li>
<li><a href="URL of Music page">Music</a></li>
<li><a href="URL of Books page">Books</a></li>
<li><a href="URL of Links page">Hot Links</a></li>
<li><a href="URL of Profile page">About Me</a></li>
<li><a href="mailto:EMAIL ADDRESS">Contact</a></li>
</ul></div>

4.ေနာက္ဆံုးအဆင့္အေနနဲ႔ ယခုလုိ header wrapper ကုိ align just ျပဳလုပ္ေပးရန္အတြက္ ေအာက္ေဖာ္ျပပါ code ကုိရွာပါ။ showaddelement value ကုိ no ေနရာတြင္ yes ဟု ေျပာင္း ရုိက္ေပး လုိက္ပါ၊ align center ျဖစ္သြားပါမယ္-

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

Template ကုိ Save လုိက္ပါၿပီးပါၿပီ။



အဆင္ေျပပါေစ။

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

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

အခ်စ္ဆုိတာ

အခ်စ္အေၾကာင္းတစ္ေစ့တစ္ေစာင္ ေရးရဦးမယ္ဆုိေတာ့ နည္းနည္းအိပ္မေပွ်ာ္ စားမ၀င္ ျဖစ္သြားတယ္၊ ဘာျဖစ္လို႔လဲဆုိေတာ့ က်ေနာ္က စာေရးတဲ့ေနရာမွာ အရမ္းထံုတယ္ေလ။ ခဏခဏ ဂိမ္းေဆာ့တဲ့ မက္မက္ ဆုိတဲ့ ေကာင္မေလးရဲ႕ တက္ဂ္ ဂိမ္းေၾကာင့္ပါ။ ဒါနဲ႔မသိခ်င္ေယာင္ေဆာင္ၿပီး နည္းနည္း အခ်ိန္ဆြဲထား လုိက္တယ္၊ ေကာင္မေလးက မွတ္ဥာဏ္ေကာင္းတယ္ဗ်။ လာလာၿပီးၾကည့္ၿပီးေတာ့ အိမ္ထဲမွာလာလာ ေအာ္သြားတယ္၊ အေၾကြးေပးပါတဲ့ေလ။ အဲ့ဒါေၾကာင့္ မျဖစ္မေနလက္စြမ္းျပလုိက္ရပါတယ္ -

အခ်စ္ဆုိသည္မွာ

အခ်စ္.. အခ်စ္... အခ်စ္.....

အခ်စ္ဆုိတာ
သမုဒယအႏြယ္ေတြနဲ႕ ရွင္းရခက္တဲ့ေႏွာင္ထံုးလား ..
အခ်စ္နဲ႔ေတြ႕တဲ့သူတုိင္း
ပန္းေပါင္းစံုဖူးဖြင့္ေ၀ဆာေနတဲ့ပန္းဥယ်ာဥ္ႀကီးထဲေရာက္ႏုိင္သလား..
တစ္ျခမ္းစီဆက္လုိက္တဲ့ဘ၀တစ္ခု
သံုးဥတုမွာ ၾကည္ႏွဴးမႈျမစ္တစ္စင္း ျဖစ္ႏုိင္ရဲ႕လား..
အခ်စ္ဆုိတာ
ေရခဲေသတၱာထဲကပန္းသီးတစ္လံုး ျဖစ္ႏုိင္သလုိ
လမ္းမေပၚတစ္ေယာက္တည္း တေပါင္းေနနဲ႔႔အတူ ေလွ်ာက္လွမ္းေနရသလုိလည္း ျဖစ္ႏုိင္ပါတယ္။
ေကာင္းကင္နဲ႔ေျမႀကီးလုိ ၾကည္ႏွဴးမွဳနဲ႔ လြမ္းေဆြးမွဳတုိ႔ရဲ႕ ျဖစ္စဥ္ေတြကလည္း
မာယာေတြမ်ားတဲ့ အတၱရဲ႕ေၾကာ့ကြင္းတစ္ခုေၾကာင့္ပါ။
(pethein)

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

တာ၀န္မေက်မွာစုိးလုိ႔ တစ္ေယာက္ေလာက္ေတာ့ တက္ဂ္ပါရေစ၊ လူအမ်ားႀကီးတက္ဂ္ရင္ စိတ္ဆုိးမွာ စုိးလုိ႔ပါ။
သူကေတာ့္ သူငယ္ခ်င္း မနီနီ၀င္း ပါ။ စာေရးအရမ္းေကာင္းပါတယ္။
ေနာက္တစ္ေယာက္တုိးညီေလး ေဆာင္းအိမ္မက္ ပါ။

ေပွ်ာ္ရႊင္ခ်မ္းေျမ႕ၾကပါေစ

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

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

Image Usage

မိမိ Blog အတြင္း ႏွစ္သက္ရာ အမ်ိဳးမ်ိဳးေသာ Image မ်ားကုိ စိတ္တုိင္းက်ထည့္သြင္း အသံုးျပဳရန္ေအာက္ေဖာ္ျပပါ Html code မ်ားကုိ အသံုးျပဳႏုိင္ပါတယ္-

Image Tag (Htmlcode)

<img src="Image URL" border="0" width="104" height="76" alt="Description" />

နမူနာပံုႏွင့္ ၄င္း code

<img src="http://pethein2006.googlepages.com/FaceAnimation.gif" border="0" width="104" height="76" alt="Smile" />

-ေဖာ္ျပပါ code ႏွစ္ခုကုိယွဥ္ၾကည့္ပါ သေဘာေပါက္မည္ဟုယူဆပါသည္။

---

Image Alignment (Html code)

<img src="Image URL" border="0" width="104" height="76" alt="Description"align="right" />

နမူနာပံုႏွင့္ ၄င္း code

<img src="http://pethein2006.googlepages.com/FaceAnimation.gif" border="0" width="104" height="76" alt="Description"align="right" />

-အျပာေရာင္ျဖင့္ျပထားေသာ align ကုိ left , hight , center တုိ႔ျဖင့္ လုိအပ္သလုိထည့္သြင္းအသံုးျပဳရပါမည္။

---

Text and Image Alignment (Html code)

<p><img src="Image URL"border="0" width="104" height="76" alt="Smile" align="right"/>--tetxt--</p>

နမူနာပုံစံ

ကိုယ္စိတ္ထဲေက်နပ္တာေတြလုပ္မယ္၊ စိတ္ဖိစီးမႈေတြေလ်ာ့ခ်မယ္၊ အတုိင္း အတာတစ္ခုထိ ေပ်ာ္ရႊင္စရာေတြ ဖန္တီးရယူမယ္၊ အခ်ိန္ ႏွစ္ လ ရက္ နဲ႔အတူ ေရွ႕ဆက္ ရွင္သန္ေနရဦးမွာမုိ႔ စိတ္က်န္းမာ ကုိယ္က်န္းမာဖုိ႔ လုိအပ္ ေနမွာျဖစ္တဲ့အတြက္ စိတ္က်န္းမာဖုိ႔အတြက္ သူေတာ္ေကာင္းတရားေတြ က်င့္ႀကံမယ္ တရားထုိင္မယ္၊ ကုိယ္က်န္းမာဘုိ႔ အတြက္ ကုိယ္လက္ လႈပ္ရွား အားကစား လုပ္မယ္ အစား အေသာက္ကုိ ခ်င့္ခ်ိန္ တြက္ဆ စားေသာက္ ေနထုိင္သြားရမယ္။

-အသံုးျပဳထည့္သြင္းနည္းကေတာ့

(၁) Compose box တြင္ text post ေရးၿပီး Edit Html ဘက္ေျပာင္း၍ Image Align Html code ကုိ ထည့္သြင္း ေပးရပါမည္။
(၂) ထည့္သြင္းပံုအေျခအေနကုိေအာက္ပါတုိင္း ေဖာ္ျပေပးလုိက္ပါတယ္-

<p><img src="http://pethein2006.googlepages.com/FaceAnimation.gif" alt="Smile" align="right" border="0" width="52" height="38" /><div style="text-align: justify;">ကိုယ္စိတ္ထဲ ေက်နပ္တာေတြလုပ္မယ္၊ စိတ္ဖိစီးမႈေတြ ေလ်ာ့ခ်မယ္၊ အတုိင္း အတာတစ္ခုထိ ေပ်ာ္ရႊင္စရာေတြ ဖန္တီးရယူမယ္၊ အခ်ိန္ ႏွစ္ လ ရက္ နဲ႔အတူ ေရွ႕ဆက္ ရွင္သန္ေနရဦးမွာမုိ႔ စိတ္က်န္းမာ ကုိယ္က်န္းမာဖုိ႔ လုိအပ္ ေနမွာျဖစ္တဲ့အတြက္ စိတ္က်န္းမာဖုိ႔အတြက္ သူေတာ္ေကာင္း တရားေတြ က်င့္ႀကံမယ္ တရားထုိင္မယ္၊ ကုိယ္က်န္းမာဘုိ႔ အတြက္ ကုိယ္လက္ လႈပ္ရွား အားကစား လုပ္မယ္ အစား အေသာက္ကုိ ခ်င့္ခ်ိန္ တြက္ဆ စားေသာက္ ေနထုိင္သြားရမယ္။
</div></p>

-အနီေရာင္ျဖင့္ျပထားသည္ကို အေပၚက html code နဲ႔ယွဥ္ၾကည့္ပါ၊ အျပာေရာင္ျဖင့္ ျပထားတာသည္ Image ၏ ေလ်ာ့ခ်လုိ္က္ေသာ Image size အခ်ိဳးအစားျဖစ္ပါသည္။

---

Image Link (Html code)

<a href="URL" target="_blank" title="TITLE"><img src="Image URL" border="0" width="104" height="78" alt="Description" /></a>

နမူနာပံုႏွင့္ ၄င္း code

<a href="http://pethein.blogspot.com" target="_blank" title="Image Usage"> <img src="http://pethein2006.googlepages.com/FaceAnimation.gif" border="0" width="104" height="78"alt="Image Usage" /></a>

-အခုဆုိရင္ Image အေပၚကုိ mouse နဲ႔ေထာက္ၾကည့္ပါ Link ျဖစ္ေနပါမယ္၊ ႏွိပ္ၾကည့္လုိက္တာနဲ႔ မိမိ Link ေပးခ်င္တဲ့ Website တစ္ခုကုိ Newtab ေရာက္ရွိသြားမွာပါ။

အဆင္ေျပပါေစ

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

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

က်ေနာ္၏တစ္ေန႔တာျဖစ္သလုိ စားျခင္း

က်ေနာ့္ကုိ မက္မက္ ဆုိတဲ့ေကာင္မေလး ညစာထမင္းေခၚေကၽြးလုိ႔ က်ေနာ္လဲ ဒီေကာင္မေလးလက္ရာေတာ့ ေကာင္းမွာပဲ စားရခ်ည္ေသးရဲ႕ဆုိၿပီးသြားစားမိပါတယ္-----

စားမိလုိ႔.........

...Tag ရပါတယ္

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

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

Text Backgroung Image

မိမိေရးသားတဲ့ Post ေတြရဲ႕ ေနာက္ခံ background ကုိ စိတ္ကူးေကာင္းေကာင္းနဲ႔ လွတ ပတ ျဖစ္ေအာင္ ေရးၾကည့္မယ္ဆုိရင္ ေအာက္ပါ HTML code ကုိ အသံုးျပဳႏုိင္ပါတယ္-

<div style="background-image: url(Image URL); background-repeat: repeat; width: 450px; height: 500px;">--text--</div>

(၁)အနီေရာင္ျဖင့္ျပထားေသာ Image URL သည္ Hosting တစ္ခုမွာ Upload လုပ္ထားတဲ့ Image URL link ျဖစ္ရပါမယ္။ Image size ရဲ႕ Width ဟာလဲ မိမိ Template ၏ Main Wrapper width ခန္႔ရွိရပါမယ္။
(၂)အျပာေရာင္ျဖင့္ျပထားေသာ width, height တုိ႔သည္ မိမိ၏ post တြင္ ေပၚလြင္ေစမည့္ size ႏွင့္ Image size တုိ႔ ထပ္တူညီမွ်မႈရွိေနေစရပါမည္။
-ေအာက္တြင္ နမူနာေဖာ္ျပထားပါသည္။

ငါ့ဘ၀

ပံုစံခြက္ထဲက ဘ၀တစ္ခု
ပံုသ႑ာန္တစ္ခု
ေဘာင္တစ္ခုထဲမွာ ရွင္သန္ဆဲပါ၊
အေရြးမွားခဲ့တဲ့လမ္းမွာ
ပင္ပန္းစြာျဖတ္သန္းရင္း ဆင္းရဲ
မ၀ံ့မရဲနဲ႔ပဲ
မြန္းက်ပ္စြာ ရွင္သန္ေနရဆဲပါ။
ကုိယ့္ဘ၀ကုိယ္
တာ၀န္ယူရစၿမဲမုိ႔
အသိ သတိေတြနဲ႕ ေနာက္ျပန္လွည့္ဖုိ႔
ေရြ႕လ်ားလုိက္စဥ္မွာေတာ့
ပုိင္ဆုိင္ခဲ့ဖူးတဲ့ အခ်ိန္ေတာ္ေတာ္မ်ားမ်ားတုိ႔က
မထီမဲ့ျမင္နဲ႔
ေလွာင္ေျပာင္ေနၾကပါၿပီ။
(ေဖသိန္း)

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

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

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

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

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