Wednesday, August 06, 2008

Printer Friendly ဘေလာ႔ဂ္ပုိ႔စ္ေလးမ်ား ဖန္တီးျခင္း

အားလုံးပဲ မဂၤလာပါခင္ဗ်ာ.

ဒီတစ္ခါေတာ႔ ကၽြန္ေတာ္ေလးစားခ်စ္ခင္ရပါေသာ ဘေလာ႔ဂ္မိတ္ေဆြ အေပါင္းအသင္းမ်ားနဲ႔ စာဖတ္သူမိတ္ေဆြမ်ားအတြက္ အင္မတန္မွ အသုံး၀င္မယ္႔ နည္းပညာေလးတစ္ခု မွ်ေ၀ခ်င္ပါတယ္.

ကၽြန္ေတာ္တုိ႔ ဘေလာ႔ဂ္ပုိ႔စ္ေလးေတြ ေရးၾကတယ္၊ ဖတ္ၾကတယ္၊ တစ္ခ်ိဳ႔ပုိ႔စ္ေလးေတြကုိ ၾကိဳက္ႏွစ္သက္လုိ႔ bookmark လုပ္ျပီး သိမ္းထားၾကတယ္. ဟုတ္တယ္ဟုတ္.

တစ္ခ်ိဳ႔ပုိ႔စ္ေလးေတြကုိက်ေတာ႔ သြားရင္းလာရင္း ဖတ္ဖုိ႔ပဲ ျဖစ္ျဖစ္၊ တမင္သက္သက္ အမွတ္တရ သိမ္းထားခ်င္လုိ႔ပဲ ျဖစ္ျဖစ္ Print out ေလး လုပ္ျပီး သိမ္းထားခ်င္မွာေပါ႔.

ဟာ. ဒါမ်ားကြာ. File Menu>Print ႏွိပ္ (or) Ctrl+P ႏွိပ္ျပီး Print ထည္႔လုိက္. ျပီးေတာ႔ သိမ္းထားလုိက္ေပါ႔လုိ႔ ေျပာလိမ္႔မယ္.

ရေကာင္းရပါလိမ္႔မယ္. မတူပါဘူး.

ဟုတ္မဟုတ္. အခုပဲ ကၽြန္ေတာ္ေရးေနတဲ႔ ဒီပုိ႔စ္ေလးကုိ စမ္းျပီး ခင္ဗ်ားအခု သုံးေနတဲ႔ Web Browser (IE or Firefox or Safari or Whatever) ကေန Print Preview ၾကည္႔ၾကည္႔လုိက္ပါ. ခင္ဗ်ားအေနနဲ႔ ဘာေတြ ေတြ႔လာရမယ္ထင္သလဲ.

ခင္ဗ်ား Print လုပ္ခ်င္တဲ႔ ပုိ႔စ္ေလးတင္မကဘူး. တစ္ျခားေသာ မသက္ဆုိင္တဲ႔ အရာေတြ (ဥပမာ- ဘေလာ႔ဂ္ Header ေတြ၊ Sidebar ေတြ၊ တစ္ျခားတစ္ျခားေသာ ပုိ႔စ္နဲ႔မသက္ဆုိင္တဲ႔ element ေတြကုိပါ) Print လုပ္မိျပီးသား ျဖစ္ေနပါလိမ္႔မယ္.

ဒီေတာ႔ ဘာျဖစ္လဲ.

ပုိ႔စ္သက္သက္ေလး ဖတ္ခ်င္တာကုိ မလုိတာေတြအတြက္ပါ Print လုပ္ေနရတာေၾကာင္႔ စာရြက္ေတြ၊ မင္ေတြကုိ ျဖဳန္းတီးရာလည္းေရာက္ပါတယ္. ပုိဆုိးတာက ကုိယ္ဖတ္ခ်င္သလုိ ပုိ႔စ္ေလးကလည္း သပ္သပ္ရပ္ရပ္ေလး ထြက္မလာေတာ႔ဘူးေပါ႔ဗ်ာ.

ကဲ. ကၽြန္ေတာ္လည္း ရွင္းျပေနတာနဲ႔ ေလေၾကာေတာ္ေတာ္ရွည္သြားျပီ. အရင္ဆုံး ဘာေၾကာင္႔ ဒီလုိျဖစ္ရတယ္ဆုိတာကို Overview Idea ရေစခ်င္လုိ႔ပါ.

ဒါဆုိ ကၽြန္ေတာ္တုိ႔ ဘာလုပ္သင္႔သလဲ.

မလုိတာေတြကုိ ေဘးဖယ္ျပီး ပုိ႔စ္သက္သက္ေလးပဲ Print လုပ္ႏုိင္ေအာင္ လုပ္ရေတာ႔မွာေပါ႔. ဟုတ္တယ္ဟုတ္?

ကၽြန္ေတာ္တုိ႔ ခုေရးေနတာက ဘေလာ႔ဂ္ပုိ႔စ္ေတြပါ. ၀က္ဘ္ဆုိက္ေတြလုိ Print Function ကုိ အလြယ္တကူ ထည္႔သုံးလုိ႔ မရပါဘူး. ဘေလာ႔ဂ္မွာက သူ႔ဥပေဒသနဲ႔သူရွိပါတယ္. ဒါကုိပဲ ကၽြန္ေတာ္တုိ႔က manipulate လုပ္ျပီး ကုိယ္႔စိတ္ၾကိဳက္ ျပဳျပင္သုံးစဲြယူရမွာပါ.

ဒီ႔အတြက္ ကၽြန္ေတာ္ သုံးနည္းေလာက္ေတြ႔မိပါတယ္. အဲဒီ႔ထဲကမွ အလြယ္ကူဆုံး၊ အရုိးရွင္းဆုံးနဲ႔ အေကာင္းမြန္ဆုံးနည္းေလးတစ္ခုကုိ ေ၀မွ်ခ်င္ပါတယ္. ကၽြန္ေတာ္ဖတ္မိသမွ် Plugin ေလးေတြထဲမွာ ဒီနည္းလမ္းေလးက သက္ဆုိင္ရာ ပုိ႔စ္ေလးေတြကုိသာ မကဘူး. ေကာ္မန္႔ေလးေတြကိုပါ Print လုပ္ေပးလုိ႔ ဒါေလးကို ေရြးခ်ယ္ျပီး ေဆြးေႏြးျဖစ္တာပါ.

ကုဒ္ဒင္းထည္႔ေပးရမယ္႔ အဆင္႔ႏွစ္ဆင္႔ပဲ လုိပါတယ္.

(၁) တန္းပလိတ္ထဲ ၀င္ျပင္မယ္. </head> Tag မတုိင္ခင္ေလးမွာ ကုဒ္ဒင္းတစ္ခ်ိဳ႔ ထည္႔ေပးရမယ္.

(၂) သက္ဆုိင္ရာ ဘေလာ႔ဂ္ပုိ႔စ္ေလးေတြမွာ Print Button ေလးေပၚေအာင္လုိ႔ ေနာက္ထပ္ ကုဒ္ဒင္းေလးေတြ တန္းပလိတ္ထဲမွာပဲ ထည္႔ေပးရမယ္.

ဒါပါပဲ.

အုိေကေနာ္. သီ၀ရီပုိင္းအရ ရွင္းသြားျပီ. ဒီေလာက္နားလည္ရင္ ကၽြန္ေတာ္တုိ႔ ေရွ႔ဆက္လုိ႔ရပါျပီ. အဓိကက ကုိယ္ဘာလုပ္ေနတယ္ဆုိတာကုိ ကုိယ္တုိင္အရင္နားလည္ေနဖုိ႔ပါပဲ.

ကဲ. ထုံးစံအတုိင္းေပါ႔ဗ်ာ. တန္းပလိတ္ကုိ edit လုပ္ၾကရေအာင္.

အဆင္႔ (၁) CSS Style Code ထည္႔ျခင္း

တန္းပလိတ္ကုိသြားပါ. ျပီးရင္ Edit ႏွိပ္ပါ. </head> ဆုိတဲ႔ tag ေလးကို ေတြ႔ေအာင္ရွာပါ. ေတြ႔ျပီဆုိရင္ အဲဒီ႔အေပၚကပ္လ်က္ေနရာေလးမွာ ဒီကုဒ္ဒင္းေလးေတြကုိ ကူးထည္႔ေပးလုိက္ပါခင္ဗ်ာ.

<style media='print' type='text/css'>
#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}
#main-wrapper {width: 95%; overflow: visible !important;}
</style>

အဆင္႔ (၂) Print Button Link ထည္႔ျခင္း

ဒီလင္႔ခ္ေလးကုိ ထည္႔ဖုိ႔ တန္းပလိတ္ကုိ ျပန္သြားပါ. ျပီးရင္ Expand Widget Tempate ဆုိတဲ႔ Box ေလးကုိ Check လုပ္ျဖစ္ေအာင္ လုပ္လုိက္ပါ.

တန္းပလိတ္ထဲမွာ ဒါေလးကို ေတြ႔ေအာင္ရွာပါ.

<p><data:post.body/></p>

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

ဥပမာ. ပုံႏွိပ္ရန္၊ Print ထုတ္ရန္၊ ဘလာဘလာဘလာ ေပါ႔.

အဲ. ဘလာဘလာဘလာေတာ႔ တကယ္သြားမေရးနဲ႔ေနာ္. ဟတ္ဟတ္ဟတ္.

ကူးထည္႔ေပးရမည္႔ ကုဒ္ဒင္းႏွင္႔ အမွန္တကယ္ ျမင္ရမည္႔ ပုံမ်ား

Style (1)

<b:if cond='data:blog.pageType == "item"'>
<a href='javascript:window.print()'>Print this post</a>
</b:if>

ျမင္ရမည္႔ပုံ


Print this post



Style (2)

<b:if cond='data:blog.pageType == "item"'>
<form> <input type="button" value="Print This Page" onClick="window.print()" /> </form>
</b:if>

ျမင္ရမည္႔ပုံ






Style (3)

<b:if cond='data:blog.pageType == "item"'>
<span style='background: url(http://bloggerbuster.com/images/print.gif) left no-repeat; padding-left: 20px;'><a href='javascript:window.print()'>Print this post</a></span>
</b:if>

ျမင္ရမည္႔ပုံ


Print this post



Style (4)

<b:if cond='data:blog.pageType == "item"'>
<span style='background: url(http://bloggerbuster.com/images/print.gif) left no-repeat; padding-left: 20px;'><a href='javascript:window.print()'>Printer Friendly</a></span>
</b:if>

ျမင္ရမည္႔ပုံ


Printer Friendly



Style (5)

<b:if cond='data:blog.pageType == "item"'>
<span style='background: left no-repeat; padding-left: 20px;'><a href='javascript:window.print()'><img alt='Print' height='25' src='http://bloggerbuster.com/images/print.gif' width='25'/></a></span>
</b:if>

ျမင္ရမည္႔ပုံ


Print




ဒါပါပဲခင္ဗ်ာ.

အားလုံးလုပ္ျပီးသြားလုိ႔ မိမိဖာသာ မိမိ စမ္းသပ္ခ်င္တယ္ဆုိရင္ ကုိယ္ ပရင္႔ထုတ္ခ်င္တဲ႔ ပုိ႔စ္ေလးတစ္ခုခုရဲ႔ ေခါင္းစဥ္ကုိ ႏွိပ္လုိက္ပါ. ပုိ႔စ္တစ္ခုလုံး ပြင္႔က်လာပါလိမ္႔မယ္. ပုိ႔စ္ရဲ႔ ေအာက္ဆုံးနားေလးေလာက္ကုိ scroll down လုပ္သြားလုိက္ပါ. ပရင္႔ထုတ္ဖုိ႔ icon ေလး (သုိ႔) စာတမ္းေလးကုိ ေတြ႔တဲ႔အခါက်မွ အဲဒါေလးကို နွိပ္ျပီး ပရင္႔ထုတ္ၾကည္႔ပါ.

သက္ဆုိင္ရာ ပုိ႔စ္ေလးေတြမွာ ရွိေနတဲ႔ ေကာ္မန္႔ေလးေတြကုိပါ ပရင္႔ထုတ္ေပးသြားတာကုိ ၀မ္းသာဖြယ္ရာ ေတြ႔ရပါလိမ္႔မယ္ခင္ဗ်ာ.

အားနည္းခ်က္ေလးေတြလည္း ရွိပါေသးတယ္.

(၁) ပုိ႔စ္ရဲ႔ အေပၚဆုံးမွာ Printer Friendly Icon ေလး ေပၚေနေအာင္ လုပ္ထားရင္ ပုိေကာင္းႏုိင္ပါတယ္.

(၂) ပုိ႔စ္တစ္ခုကုိ ပရင္႔ထုတ္ခ်င္ရင္ အဲဒီ႔ပုိ႔စ္တစ္ခုလုံးေပၚေအာင္ သူ႔ရဲ႔ ေခါင္းစဥ္ကုိ ႏွိပ္ျပီးေရြးတာထက္ ပရင္တာ သေကၤတေလး ေတြ႔တဲ႔ေနရာမွာပဲ ႏွိပ္ျပီး ပရင္႔ထုတ္လုိ႔ရရင္ ပုိေကာင္းသြားႏုိင္ပါတယ္.

အဲဒီ႔ feature ေလးႏွစ္ခုလုံး မရေသးပါဘူး. အဲဒါသူ႔ရဲ႔ အားနည္းခ်က္ေလးေတြပဲ ျဖစ္ပါတယ္. နည္းနည္းပါးပါးေလာက္ ကလိၾကည္႔ရင္း အဆင္ေျပတဲ႔တစ္ေန႔က်ရင္ ၀မ္းသာအားရ ေဖာက္သည္လာခ်ပါဦးမယ္ဗ်ာ.

ေရွ႔ေလွ်ာက္ မိမိႏွစ္သက္ရာ ပုိ႔စ္ေလးမ်ားကုိ ကိုယ္တုိင္ကုိယ္က် ပရင္႔ထုတ္ယူျပီး သိမ္းထားႏုိင္ျပီ ျဖစ္သလုိ ဘေလာ႔ဂါမ်ားအေနနဲ႔ကလည္း စာဖတ္သူအတြက္ အဆင္ေျပေအာင္ ေဟာဒီ႔ Printer Friendly Function ေလးကုိ မိမိတုိ႔ရဲ႔ ဘေလာ႔ဂ္ေလးေတြမွာ ထည္႔သြင္းေပးထားမယ္ဆုိရင္ သိပ္ကုိ အဆင္ေျပပါလိမ္႔မယ္.

ကၽြန္ေတာ္ ေဆြးေႏြးေပးသြားခဲ႔တဲ႔ စတုိင္လ္ (၅) ခုအျပင္ မိမိတုိ႔ ၾကိဳက္ႏွစ္သက္ရာ ပုံေလးေတြ၊ စာေလးေတြနဲ႔လည္း အစားထုိးျပီး ျပဳျပင္ယူႏုိင္ပါတယ္. စိတ္ကူးဥာဏ္ၾကိဳက္သလုိ ကြန္႔ျမဴးႏုိင္ေအာင္ စတုိင္လ္္အမ်ိဳးမ်ိဳး လုပ္ေပးထားတာလည္း ျဖစ္ပါတယ္.

ကဲ. ပုိ႔စ္ေလးကေတာ႔ ဒီေလာက္ပါပဲ. ေနာက္ေနာင္ ပုိ္ေကာင္းတဲ႔ ျပင္ဆင္ခ်က္ေလးေတြ ေတြ႔ရွိခဲ႔ရင္ ျပန္လာျပီး update လုပ္ေပးပါဦးမယ္.

စာဖတ္သူမိတ္ေဟာင္းမိတ္သစ္မ်ား၊ ဘေလာ႔ဂါမ်ားအားလုံး စိတ္၏ ခ်မ္းသာျခင္း၊ ကုိယ္၏ က်န္းမာျခင္းနဲ႔ ျပည္႔စုံႏုိင္ၾကပါေစဗ်ား…

Acknowledgement:

ဒီေနရာက ပုိ႔စ္ေလးကုိ သင္႔ေတာ္သလုိ ဘာသာျပန္ဆုိ ေရးသားထားတာ ျဖစ္ပါတယ္.

အားလုံးကုိ ခ်စ္ခင္ေလးစားလ်က္

ရန္ေအာင္.

11 comments:

layma said...

wordpress မွာ သံုးခ်င္တယ္.. ရွာေပး..။ ေလးမ အဲလို လုပ္ခ်င္တယ္..။ ဟီး.. ေလးမ ပို ့စ္နဲ ့ ကြန္မန္ ့ေလးေတြ တြဲျပီး print ထုတ္ျပီး သိမ္းထားခ်င္တာ..။

Myo Kyaw Htun said...

<style media='print type='text/css'> ၾကားမွာေရးထားတဲ့ကုဒ္ေတြက browser က print view လုပ္ေနတုန္း styling လုပ္ဖို႕ ေျပာထားတာပါ။

Printer friendly HTML site ကို layout structure ခ်ထားတဲ့ ေပၚမွာ မူတည္ပါတယ္။ (Blog ေတြဆိုရင္ေတာ့ theme/template ေတြရဲ႕ မူရင္း layout id ေတြ class ေတြကို ဘယ္လိုသံုးထားလဲ ေပၚမွာပဲ မူတည္ပါတယ္။) သူေျပာထားတာက template တစ္ခု (#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}
#main-wrapper {width: 95%} ) id ေတြသံုးထားတဲ့ template ေပၚမွာပဲ မွန္ႏိုင္ပါတယ္။ အကုန္လံုးအတြက္ မမွန္ပါဘူး။

Yan said...

>ေလးမေရ. ရွာလုိ႔ေတြ႔ရင္ ေျပာမယ္ ဟုတ္ျပီလား.

>ကုိမ်ိဳးေက်ာ္ထြန္းေရ…

အခုလုိမ်ိဳး ၀င္ေရာက္ေဆြးေႏြးေပးသြားတာ ေက်းဇူးအမ်ားၾကီးတင္ပါတယ္ဗ်ာ.

မွန္ပါတယ္. ကုိမ်ိဳးေက်ာ္ထြန္းေျပာသလုိပါပဲ. တန္းပလိတ္တုိင္းအတြက္ မမွန္ႏိုင္ပါဘူး.

Amanda ရဲ႔ ဘေလာ႔ဂ္မွာ ကုိမ်ိဳးေက်ာ္ထြန္းေရးခဲ႔တဲ႔ ေကာ္မန္႔လုိေပါ႔.

Myo Kyaw Htun said...

Your post will be suitable for those templates that used IDs (mentioned in your css).

လက္ရွိ ကၽြန္ေတာ္တုိ႔ ဘေလာ႔ဂါအမ်ားစုသုံးေနၾကတဲ႔ တန္းပလိတ္ေလးေတြအတြက္ေတာ႔ အဆင္ေျပမယ္လုိ႔ ေမွ်ာ္လင္႔ျပီး ဒီပုိ႔စ္ေလးကုိ မွ်ေ၀ေပးလုိက္တာပါ.

တစ္ျခား ကၽြမ္းက်င္တဲ႔သူေတြရွိရင္လည္း ၀ုိင္း၀န္းေဆြးေႏြးအေျဖရွာေပးၾကဖုိ႔ လႈိက္လႈိက္လဲွလွဲ ဖိတ္ေခၚပါတယ္ ခင္ဗ်ာ…

MgThaJan said...

ေက်းဇူးပါ ကိုရန္ ေရ ကလိဖို႕ အိုင္ဒီယာ ရသြားၿပီ :)

mmhan said...

hmm, it looks fairly complicated for a non-tech savvy person.

I wonder if they have some sort of widget for that.

Yan said...

>ကုိသၾကၤန္ၾကီးေရ..
WP အတြက္ ကလိဖုိ႔ ခင္ဗ်ားတာ၀န္ဗ်ာ. ေနာ္. :)

>ကုိျမတ္မင္းဟန္ေရ..
Widget ေလးဖန္တီးေပးႏုိင္ရင္ေတာ႔ အေကာင္းဆုံးေပါ႔ဗ်ာ. ပုိလြယ္မယ္႔နည္းလမ္းေတြ ေတြ႔ရင္ ကၽြန္ေတာ္ ထပ္ျဖည္႔စြက္ေပးပါဦးမယ္.

ဒါေပမယ္႔ ဒီနည္းလည္း သိပ္ျပီးေတာ႔ မခက္လွဘူးလုိ႔ ထင္ပါတယ္. ဘေလာ႔ဂါေတာ္ေတာ္မ်ားမ်ားက နည္းနညး္ပါးပါးေတာ႔ ကလိတတ္ၾကတယ္လုိ႔ ထင္တာပဲေလ.

:)

ေနာက္လည္း လာလည္ျပီး အၾကံျပဳေဆြးေႏြးေပးဖုိ႔ ဖိတ္ေခၚပါတယ္ဗ်ာ...

ရႊန္းမီ said...
This comment has been removed by the author.
ရႊန္းမီ said...

(၁) ကို ရေတာ့ ရသြားတယ္.. ဒီေပၚမွာ code တင္ေပးလို႔မရ ျဖစ္ေနတယ္..
နဲနဲပဲ လြဲလိုက္လို႔ အေပၚေအာက္ ေျပာင္းသြားတာ..

Yan said...

>ဟုတ္တယ္ မရႊန္းမီ.
ေကာ္မန္႔မွာ HTML Tag ထည္႔လုိ႔မရဘူး. ဒါေပမယ္႔ ကၽြန္ေတာ္ဖတ္လုိ႔ရပါတယ္. update ျပန္ထည္႔ေပးျပီး credit ေပးလုိက္ပါမယ္..

ေနာက္ထပ္ challenge ေလးကုိ အေျဖရရင္လည္း ျပန္လာေျပာပါဦး. ကၽြန္ေတာ္လည္း လုိ္က္ရွာေနတုန္းပါပဲ.

OWAY AUNG said...

ပရင့္ထုတ္တဲ ့ အိုင္ကြန္ ထည့္တဲ့နည္းပညာ စမ္းၾကည့္လိုက္ဦးမယ္။သိုင္းက်ဳးပါ။

OWAY AUNG said...

အားပါး..မရဘူးဗ်ိဳ ့...၂အဆင့္မွာ တစ္ေနတယ္..cry,...