Blockquote ကို ပံုျဖင့္ ထည့္သြင္းျခင္း

Blockquote ကို ပံုနဲ႔ ဖန္တီးထားပါတယ္။ အဖြင့္ကို quote.gif ဆိုတဲ့ ပံုနဲ႔ လုပ္ထားၿပီး အပိတ္ကို unquote.gif ဆိုတဲ့ ပံုနဲ႔ ပိတ္ထားတယ္။

စာေၾကာင္းတစ္ေၾကာင္းကို စာဖတ္သူ သိသာထင္ရွား ျမင္ႏိုင္ေအာင္ လုပ္ဖို႔အတြက္ က်ေနာ္တုိ႔ ႏွစ္နည္း ေဆြးေႏြးခဲ့ၿပီးပါၿပီ။ Pullquote နဲ႔ Opacity Text ပါ။ စာအုပ္ေတြမွာ ဆို႐ုိးစကားေတြ၊ ပညာရွိ မိန္႔မွာစကားေတြကို အဖြင့္အပိတ္ မ်က္ေတာင္ေမႊးေလးေတြနဲ႔ ျပထားတာ ျမင္ဖူးပါလိမ့္မယ္။ အခု ဒီပို႔စ္မွာ အဲဒီလို ဘယ္လို လုပ္သလဲ ေဆြးေႏြးခ်င္ပါတယ္။ Blogger မွာ နဂိုကတည္းက Blockquote ထည့္ဖို႔ လုပ္ေပးထားၿပီးသားပါ။ အခု က်ေနာ္ တင္ျပမွာက ပံုနဲ႔ ပိုလွေအာင္ Blockquote တစ္ခု ဘယ္လို ဖန္တီးမလဲ ဆိုတာပါ။ အခု နမူနာျပထားတဲ့ ပံုကို မႀကိဳက္ဘူး ဆိုရင္ အဲဒီပံုေနရာမွာ ကိုယ္ ႀကိဳက္တဲ့ ပံုကို အစားထိုးၿပီး လုပ္ႏိုင္ပါတယ္။ ေအာက္မွာ ျပထားတဲ့ Code ကို တစ္ခ်က္ ေလ့လာၾကည့္ပါ။

အဆင့္ (၁) စတိုင္ (CSS) သက္မွတ္ျခင္း

CSS ေတြကို Style Sheet မွာ သြားထည့္ေပးပါ။

blockquote.withquote {background:url(http://www.mandarindesign.com/images/quote.gif)
no-repeat;background-position:top left;padding-left:20px;text-align:justify;}

p.withunquote {background: url(http://www.mandarindesign.com/images/unquote.gif) no-repeat;background-position:bottom right;padding-right:5px;}

အဆင့္ (၂) Blockquote ပါေသာစာ ေရးသားျခင္း

ေအာက္မွာ ျပထားတဲ့ Code ဟာ အေပၚမွာ ေပၚေနတဲ့ စာရဲ႕ မူရင္း Code ျဖစ္ပါတယ္။

<blockquote class="withquote">
<p class="withunquote">
Blockquote ကို ပံုနဲ႔ ဖန္တီးထားပါတယ္။ အဖြင့္ကို quote.gif ဆိုတဲ့ ပံုနဲ႔ လုပ္ထားၿပီး အပိတ္ကို unquote.gif ဆိုတဲ့ ပံုနဲ႔ ပိတ္ထားတယ္။
</p>
</blockquote>

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