June 26, 2009

ဓါတ္ပံုေတြကို Tableေဆာက္၍ တင္မယ္

ဒါကေတာ့ ရိုးရွင္းလြန္းၿပီး ခက္ခဲပါတယ္။ ေအာက္ပါပံုအတိုင္း ဓါတ္ပံုေတြကိုထည့္ေစခ်င္ရင္ျဖင့္ ေအာက္ပါ Codeကို ကူးယူၿပီး HTML tagျဖစ္သည့္ img src="ေနရာ"တြင္ ဓါတ္ပံု Linkကို ထည့္ေပးျခင္းျဖင့္ ျပဳလုပ္ႏိုင္ပါသည္။ သိပ္လွတဲ့ Tableနဲ႔ ဖြဲ႔စည္းတည္ေဆာက္ထားတဲ့ ပံုေတြပါ။ ျမည္းၾကည့္ပါ။


image1


image1


image1



-----------------------------------------------------------------------------------


၁။ Bloggerထဲသို႔ Sign In၀င္ပါ။ New Postတြင္ ေအာက္ပါ Codeကို ကူးယူ၍ Img src="ေနရာ"တြင္ မိမိထည့္လိုသည့္ ဓါတ္ပံု linkအား ထည့္လိုက္ရံုျဖင့္ အဆင္ေျပႏိုင္ပါသည္။

----------------------------------------------------------------------------------------

<div style="border:1px solid #cccccc; padding:5px;">

<div style="width:32%; float:left; border:1px solid #cccccc; text-align:center;">

<img src="...../Jeon_Ji_Hyun.jpg" alt="image1" />

</div>

<div style="width:32%; float:left; border:1px solid #cccccc; text-align:center;">

<img src="...../Jeon_Ji_Hyun.jpg" alt="image1" />

</div>

<div style="width:32%; float:left; border:1px solid #cccccc; text-align:center;">

<img src="...../Jeon_Ji_Hyun.jpg" alt="image1" />

</div>

<div class="clear"></div>

</div>

--------------------------------------------------------

၂။ ေအာက္ပါ styleကို ၾကိဳက္ရင္လည္း သံုးႏိုင္ပါတယ္။






image1image1image1

-----------------------------------------------------------------------------------

ေအာက္ပါ Codeကို ကူးယူႏိုင္ပါသည္။

<table width="100%" border="0" cellspacing="0" cellpadding="5">

<tr>

<td align="center"><img src="...../Jeon_Ji_Hyun.jpg" alt="image1" /></td>

<td align="center"><img src="...../Jeon_Ji_Hyun.jpg" alt="image1" /></td>

<td align="center"><img src="...../Jeon_Ji_Hyun.jpg" alt="image1" /></td>

</tr>

</table>

--------------------------------------------------------------------------------

ဒါဆို သိပ္လွပတဲ့ ကၽြန္ေတာ့္ ရတနာမိုင္းေလးလို ျဖစ္ပါၿပီ။ ေက်းဇူးတင္ပါသည္။
ဆက္ဖတ္ရန္

June 16, 2009

"Read More" in Blogger (Expandable Posts)

Blogger/ Blogspot၏ Main Pageသည္ သာမန္အားျဖင့္ အသစ္တင္လိုက္ေသာ Postအား စာမ်က္ႏွာ အျပည့္ေဖာ္ျပေလ့ရွိရာ Main Pageတြင္ Postမ်ား မ်ားျပားစြာ ထားပါက ထို Main Pageသည္ အလြန္ရွည္လ်ားႏိုင္ၿပီး အခ်ိန္ၾကာရွည္စြာ ေစာင့္ရပါသျဖင့္ မိမိ Blogထဲသို႔ ၀င္ေရာက္လာေသာ စာဖတ္ပရိတ္သတ္မ်ား မိမိစာေစာင္အား ဖတ္ရွဳရန္ နည္းပါးႏုိင္သည္သာမက မိမိေပးလိုေသာ အခ်က္မ်ားအား ထိေရာက္စြာ မရႏိုင္ၾကပါ။ ထို႔ေၾကာင့္ Page Loading အခ်ိန္နည္းႏိုင္သမွ် နည္းေအာင္၊ Main Page ရွည္လွ်ားမွဳ မရွိေအာင္ သင္၏ Post အသစ္မ်ားအား အက်ဥ္းခ်ဳံးျဖင့္ အစပ်ိဳးထား၍ “Read More” (ျမန္မာလို) ဆက္ဖတ္ရန္.. ဆိုသည့္ Linkျဖင့္ တင္ပါက ပိုမိုအဆင္ေျပႏိုင္ပါသည္။ ၄င္းကို Expandable Posts (ျမန္မာလို) ခ်ဲ့ထြင္ႏိုင္ေသာ Postမ်ားဟုလည္း တနည္းအားျဖင့္ ေခၚဆိုႏိုင္ပါသည္။
ဒါကိုဘယ္လို ျပဳလုပ္မွာလဲ? ပညာရွင္မ်ားစြာ ဤအေၾကာင္းအရာႏွင့္ ပတ္သတ္၍ မ်ားျပားစြာ ေရးသားေဖာ္ျပထားၾကပါသည္။ သို႔ေသာ္ ေလ့လာသူမ်ားသည္ တခ်ိဳ႔ေသာ ရွင္းလင္းခ်က္မ်ားကို ရွင္းလင္းစြာ နားလည္ရန္ ခက္ခဲၾကပါသည္။ ဤအခက္အခဲမ်ား တစ္မ်ိဳးတစ္ဖံု နားလည္ႏိုင္မည္ ဆိုသည့္ ရည္ရြယ္ခ်က္ျဖင့္ တင္ျပလိုက္ရပါသည္။

အဆင့္ (၁)
Blogger ထဲသို႔ Sign လုပ္၍ Dashboard မွ Layout tabကိုႏွိပ္၍ Edit HTMLကို ႏွိပ္လိုက္ပါ။ ထို႔ေနာက္ Expand Widget Templates အား အမွန္ျခစ္ျပပါ။ ယင္းေနာက္ အာက္ပါ Codeကိုရွာပါ။ ရွာရန္ Ctrl + F ႏွိပ္၍ ထို Codeကို Find box တြင္ Pasteကာ Find Next buttonကို ႏွိပ္လိုက္လွ်င္ HTML ထဲတြင္ Highlight လုပ္ထားသည္ကို ျမင္ေတြ႔ႏိုင္ပါသည္။

]]></b:skin>

</head>



အဆင့္ (၂)
အထက္ပါ code စာေၾကာင္းႏွစ္ေၾကာင္းၾကားတြင္ ေအာက္ပါ Codeကို ကူးယူ၍ paste လုပ္လိုက္ပါ။ မွတ္ခ်က္။ ။ တခ်ိဳ႔ေသာ Templateသည္ အထက္ပါ codeႏွစ္ေၾကာင္းအတိုင္း မရွိၾကပါ။ ဒုတိယ အေၾကာင္း</head> သာ ျမင္ေတြ႔ရမည္ျဖစ္သည္။ ထိုကဲ့သို႔ ျဖစ္ေနပါက ထို </head> ၏ အေပၚတြင္ ေအာက္ပါ codeအား ကူးယူ၍ Paste လုပ္လိုက္ပါ။


<script src="http://yanaung.prospect.googlepages.com/myhacko.js"

type="text/javascript" />


အဆင့္ (၃)

ထို႔ေနာက္ ေအာပါ codeကိုရွာပါ။

<b:includable id='post' var='post'>


ေတြ႔ပါက အေပၚ Codeမွ ေအာက္ေဖာ္ျပပါ Codeအထိ Selectလုပ္၍ ဖ်က္လိုက္ပါ။ မဖ်က္ခင္ ယင္း codeကို Notepadတြင္ Backupလုပ္ရန္ မေမ့ပါႏွင့္။


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

</div>


အဆင့္ (၄)

၄င္းေနာက္ ေအာက္ပါ codeကို ကူးယူ၍ အဆင့္ (၃)တြင္ ဖ်က္လိုက္သည့္ Codeေနရာအစား 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>


အဆင့္ (၅)

ေနာက္ဆံုးအေနနဲ႔ Save Templateကို ႏွိပ္လိုက္ပါ။

အဆင့္ (၆)
ထို႔ျပင္ Setting > Formatting > ကိုႏွိပ္၍ ေအာက္ဆံုး၌ရွိေသာ Post Template boxတြင္ ေအာက္ပါ codeအား ကူးထည့္ပါ။ ထို႔ေနာက္ Save Setting button ကိုႏွိပ္ပါ။




Type your summary here.

<span id="fullpost">

Read More..

</span>



အဆင့္ (၇)

New Postကို ေခၚပါ။ Post box၏ ညာဘက္ေထာင့္တြင္ Edit HTML ႏွိပ္ျခင္းျဖင့္ အထက္ပါ codeမ်ားကို ေတြ႔ရမည္ျဖစ္သည္။
Type your summary here ေနရာတြင္ မိမိအက်ဥ္းခ်ံဳးေဖာ္ျပခ်က္ကို ရိုက္ထည့္၍ က်န္ရွိေနေသးေသာ အခ်က္အလက္မ်ားကို Read More ေနရာတြင္္ ရိုက္ထည့္ပါ။

ၿပီးပါၿပီ။ ဒီ Post ေလးထက္ ပိုရွင္းလင္းေအာင္ နည္းဟန္အသစ္ျဖင့္ တင္ျပလိုက္ပါသည္။

ဆက္ဖတ္ရန္

June 12, 2009

HTML Codeအား Blogger Post တြင္ ေပၚေစရန္

အခုတေလာ Bloggerေတြ မွိဳလိုေပါက္ေနတယ္။ ဒီလိုမွလည္း ျမန္မာ Blogနည္းေတြ တိုးတက္လာမွာေလ။ ဒီတစ္ေခါက္ HTML code တို႔ Scriptတို႔ကို Postထဲမွာ ေပၚေအာင္ဘယ္လို တင္ရမလဲဆိုတာ ေျပာျပခ်င္ပါ။
သင္သိထားရမွာက Codeေတြကို ဘာမွ မဆင္ပဲ Plainတင္မွာလား (သို႔မဟုတ္) Tableေဆာက္ၿပီး တင္မွာလားဆိုတာ ဆံုးျဖတ္ရပါမယ္။ Tableန႔ဲဆိုရင္ေတာ့ ရွင္းတာေပါ့။ ဦးစြာ Plain တင္တာကို ေျပာျပပါမယ္။

၁။ ဦးစြာသင့္၌ တင္မည့္ codeရွိထားရမည္။ ဒီ Codeကို Postထဲမွာ ေပၚေစရန္အတြက္ ဤ Websiteကိုဖြင့္လိုက္ပါ။
၂။ မိမိ၏ Codeအား EnterMarkup boxထဲတြင္ Pasteလုပ္ပါ။ ထို႔ေနာက္ Process buttonကိုႏွိပ္ပါ။
၃။ ထို႔ေနာက္ Cut n' Paste boxတြင္ရွိေသာ Codeကို ကူးယူပါ။ မွတ္ခ်က္။ ေအာက္ဆံုးတြင္ရွိေသာ Previewတြင္ Code ေပၚျခင္း မွန္မမွန္ စစ္ၾကည့္ႏိုင္ပါ။
၄။ မိမိကူးထားေသာ Codeအား Post ထဲတြင္ Pasteလုပ္လိုက္ပါ။ ေအာက္ပါအတိုင္း ေပၚမည္ျဖစ္သည္။
......................................................................

<!-- calendar widget -->

<script src='http://bloggerbuster.com/scripts/fastinit.js'/>

<script src='http://bloggerbuster.com/scripts/prototype-1.5.0.js'/>

<script src='http://bloggerbuster.com/calendar.js'/>

<link href='http://bloggerbuster.com/calendar.css' rel='stylesheet' type='text/css'/>

<!-- end calendar widget -->

......................................................................
၅။ အကယ္၍ Tableေဆာက္၍ တင္လိုက HTML table အေၾကာင္း နားလည္ရမည္ျဖစ္သည္။ နားမလည္ပါက ေအာက္ပါ Table codeကို ကူးထားပါ။
.................................................................................

<table border="1" bgcolor="blue">

<tr>

<td> Your code here... </td>

</tr>

<table>
............................................

မွတ္ခ်က္။ ။ Table codeထဲတြင္ရွိေသာ bgcolor="blue"တြင္ ၾကိဳက္တဲ့အေရာင္ ေျပာင္းႏိုင္သည္။ blueအစား အျခားအေရာင္ လုပ္ႏိုင္သည္။
၆။ Your code here.. ေနရာတြင္ မိမိ၏ codeအား ကူးထည့္၍ နံပါတ္ (၁) မွ (၄)အဆင့္ကို ျပန္သြားပါ။
ေနာက္ဆံုး ေအာက္ပါ ကဲ့သို႔ ေပၚမည္ျဖစ္သည္။





<!-- calendar widget -->

<script src='http://bloggerbuster.com/scripts/fastinit.js'/>

<script src='http://bloggerbuster.com/scripts/prototype-1.5.0.js'/>

<script src='http://bloggerbuster.com/calendar.js'/>

<link href='http://bloggerbuster.com/calendar.css' rel='stylesheet' type='text/css'/>

<!-- end calendar widget -->


၇။ ၿပီးက မိမိ၏ Templateကို Save လုပ္လိုက္ပါ။
ဆက္ဖတ္ရန္

သင္၏ Blog Titleအား Scroll လုပ္နည္း

လာျပန္ၿပီ Blogအတြက္ ေတာင္းဆိုမွဳတစ္ခုတဲ့။ ဒီတစ္ခါတင္ျပမွာကေတာ့ မိမိBlogေခါင္းစဥ္အား လွဳပ္ရွားမွဳျပဳလုပ္နည္းပါ။ ကၽြန္ေတာ့္ရဲ့ Blogေခါင္းစဥ္အား ၾကည့္ျခင္းအားျဖင့္ ေတြ႔ႏိုင္ပါသည္။
ဦးစြာ Bloggerထဲ့သို႔ Sign In ၀င္လိုက္၍ Layout tabေအာက္မွ Edit HTMLကိုႏွိပ္လိုက္ပါ။

၁။ ထို႔ေနာက္ ေအာက္ပါ Codeကို ရွာပါ။ ရွာရန္အတြက္ ေအာက္ပါ codeကို copyလုပ္၍ Ctrl + F ကိုႏွိပ္ၿပီး Find code boxထဲတြင္ ထိုcodeကို Pasteလုပ္လိုက္ပါ။ အစိမ္းေရာက္ Highlighႏွင့္ ေပၚလာမည္ျဖစ္သည္။

<title><data:blog.pagetitle/></title>


အကယ္၍ သင္သည္ Swap Title Hack ကို အသံုးျပဳပါက ေအာက္ပါ Codeအား ရွာရပါမည္။



<b:if cond='data:blog.pageName == ""'>

<title><data:blog.title/></title>

<b:else/>

<title><data:blog.pageName/> <data:blog.title/></title>

</b:if>


၂။ သင္လုပ္ရမွာက အထက္ပါ သင္အသံုးျပဳေသာ ရွာထားေသာ Codeေအာက္တြင္ ေအာက္ပါ codeကို Copyလုပ္၍ ကူးထည့္ပါ။

<script>
//Document title scroller- By Graeme Robinson (me@graemerobinson.co.uk)

//Exlusive permission granted to Dynamic Drive to include this script in their DHTML archive.

//For full source code, terms of use visit http://www.dynamicdrive.com

var repeat=1 //enter 0 to not repeat scrolling after 1 run, othersise, enter 1
var title=document.title
var leng=title.length
var start=1
function titlemove() {
titl=title.substring(start, leng) + title.substring(0, start)
document.title=titl
start++
if (start==leng+1) {start=0
if (repeat==0)
return
}
setTimeout("titlemove()",140)
}
if (document.title)
titlemove()
</script>


၃။ ေနာက္ဆံုးတြင္ မိမိ၏ Templateအား Saveလုပ္လိုက္ပါ။ စမ္းၾကည့္ပါ။
ဆက္ဖတ္ရန္

June 4, 2009

How to Post Embed PDF file in Blogger

Embed PDF file ကို Blogger Post ထဲတြင္ မည္ကဲ့သို႔တင္ရမည္ကို တပည့္တစ္ေယာက္က အင္မတန္ အင္တိုက္အားတိုက္ ေတာင္းဆိုလာပါတယ္။
ဦးစြာ... သင္၏ကြန္ပ်ဴတာထဲတြင္ သင္တင္လိုသည့္ PDF file မလြဲမေသရွိရန္ လိုအပ္ပါသည္။

  • ထို႔ေနာက္ ဤ Scribd Websiteထဲကို ၀င္ပါ။
  • Sign Up လုပ္ပါ။
  • PDF fileကို Embedလုပ္ရန္ Upload buttonကိုႏွိပ္၍ Browseႏွိပ္ပါ။
  • PDF fileရွိရာေနရာကို သြား၍ ထည့္ပါ Publishႏွိပ္လိုက္ပါ။
  • ေနာက္တစ္မ်က္ႏွာတြင္ Describe your documentေအာက္တြင္ Title, Category, Tags and Descriptionမ်ားကို ျဖည့္စြက္ပါ။ ထို႔ေနာက္ Save Changes ႏွိပ္လိုက္ပါ။
  • ေနာက္တစ္မ်က္ႏွာတြင္ Embed codeကို Copyလုပ္ပါ။
  • Bloggerထဲကို Sign in ၀င္ပါ။ Dashboardမွ Postingထဲကို၀င္ပါ။
  • New Post ထဲတြင္ ထို Copyလုပ္ထားသည့္ Codeကို Pasteလုပ္ပါ။ ရိုက္ထည့္စရာရွိတာေတြ ရိုက္ထည့္ၿပီး Publish လုပ္ပါ။
  • မိမိBlogထဲတြင္ ေအာက္ပါ Embed PDF postအတိုင္း ေတြ႔ရပါမည္။

The Key to Excellent Speaking, Flow

Try yourself
ဆက္ဖတ္ရန္
Blog Widget by LinkWithin
 

Popular Posts

Widget by Blogger Buster

Sign In and Check Message

ယေန႔ဖတ္သြားေသာ ေခါင္းစဥ္မ်ား

Recent Posts