Tuesday 25 September 2012

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
ေအာင္ေအာင္(မကစ)
 www.ledimyethar.com
 www.depelyin.co.cc
 www.aungkyaw.com

0 comments:

Post a Comment