Comment Bubble ေလးကို Post ရဲ႔ အေပၚမွာထားခ်င္ရင္

ကိုယ့္ရဲ႕ ဘေလာ့မွာ ပို႔စ္တိုင္းရဲ႕ အေပၚကို Comment Bubble ေလးထည့္တဲ့ widget တစ္ခုတင္ေပးသြားပါမယ္။ ဒါကလည္း Template တစ္ခုနဲ႔ တစ္ခု မတူပါဘူး၊ တခ်ိဳ႕ Template ေတြကေတာ့ အရန္သင့္ပါၿပီး တခ်ိဳ႕က မပါပါဘူး။ မပါတဲ့ သူမ်ား ထည့္လိုလ်င္ ထည့္လို႔ ရေအာင္ ရွာေဖြ မွ်ေ၀လိုက္ပါတယ္။ ေအာက္ကပံုထဲကလို ထည့္ထားတဲ့ Comment Bubble ေလးပါ။

က်ေနာ္တို႔ ထံုးစံအတိုင္းပဲ Blogger ကို Sign in ၀င္ပါမယ္။ Layout ထဲက Edit HTML ကိုသြားပါမယ္။ Template ကို Backup လုပ္ပါ။ ၿပီးရင္ Ctrl+F နဲ႔ ]]></b:skin> ကိုရွာပါ။ ၿပီးရင္ ေအာက္က code ေတြကို သူ႔ရဲ႕ အေပၚမွာ ထည့္ေပးလိုက္ပါ။

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(http://i43.tinypic.com/dljpzo.jpg) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
position:absolute;
}

အထက္ code ေတြထဲက အနီေရာင္ျပထားတဲ့ Image ေနရာမွာ မိမိႀကိဳက္တဲ့ Image အသံုးျပဳႏိုင္ပါတယ္။ ၿပီးရင္ေတာ့ Save ေပးလိုက္ပါ။
ေနာက္တစ္ဆင့္အေနနဲ႔ ေအာက္က Code ေတြထဲက အနီေရာင္နဲ႔ ျပထားတဲ့ Code ေတြကို ထပ္ျဖည့္ေပးရမွာ ျဖစ္ပါတယ္။ ဒီ <h3 class='post-title entry-title'> နဲ႔ <b:if cond='data:post.link'> ႀကားမွာ ထည့္ေပးရမွာ ျဖစ္ပါတယ္။ ေအာက္က code ေတြအတိုင္းၾကည့္လိုက္ပါ။

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

<b:if cond='data:post.allowComments'>

<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>

</b:if>

<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>

အထက္ကအတိုင္း အနီေရာင္နဲ႔ ျပထားတဲ့ code ေတြကို အစားထိုးေပးၿပီးရင္ save ေပးလိုက္ပါ။ ဒါဆိုရင္ Comment Bubble ထည့္နည္းေလး ၿပီးသြားပါၿပီ။ အဆင္မေျပမႈရွိလ်င္ေသာ္လည္းေကာင္း မွားေနလ်င္ေသာ္လည္းေကာင္း comment မွာ ေရးသြားေပးၾကပါ။ အားလံုးကို ေက်းဇူးတင္ပါတယ္။

Ref: www.anshuldudeja.com

Posted in: Blog ဆုိင္ရာနည္းပညာ,ကုဒ္မ်ား