Blogger Comment Box ေလးမွာ Smileys ပံုေလးေတြ ထည့္မယ္

မဂၤလာပါ Blogger Comment Box ေလးမွာ Smileys ပံုေလးေတြ ထည့္ေပးၾကရေအာင္ခင္ဗ်ာ
ပထမအဆင့္အေနနဲ႔...Blogger interface အေဟာင္းသံုးသူေတြအတြက္

    Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup) အရင္လုပ္ပါ။

Blogger interface အသစ္ကိုသံုးသူေတြအတြက္ကေတာ့
    Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup) အရင္လုပ္ေပးပါ တစ္ခုခု
ျဖစ္ရင္ ျပန္ျပင္လို႔ရေအာင္ေပါ့။

ၿပီးရင္ ေအာက္ကအဆင့္ေတြအတိုင္း လိုက္လုပ္လိုက္ပါ။ အဆင္ေျပပါေစဗ်ာ

Step 2. Search (CTRL + F) for this piece of code:

</body>

Immediately above it, copy and paste the following code:

<!--kolobok-smileys-->
<script src='http://helplogger.googlecode.com/svn/trunk/[helplogger.blogspot.com]smileys.js' type='text/javascript'/><noscript><a href='http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html' target='_blank'><span style='font-size: x-small;'>Add emoticons</span></a></noscript>
<!--kolobok-smileys-->

Step 3. Now find this code:

<b:loop values='data:post.comments' var='comment'>

And just above it, paste the following:

<div id='smileys'>

Step 4. Try to find the below code (please look below the code from step 3 in order to find it)

</b:loop>

Paste this piece of code immediately after it:

</div>

Step 5. Now find this code (you'll find it 4 times but stop to the 2nd one):

<data:blogTeamBlogMessage/>

And add this code just after it:

<script type='text/javascript'>
//<![CDATA[
function moreSmilies() {
    document.getElementById('smiley-more').style.display = 'inline';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()"><div style="font-size:small; font-weight:bold;color:#000000;">Hide Emoticons /<a href="http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html">Add Emoticons</div></a></span>';
}
function lessSmilies() {
    document.getElementById('smiley-more').style.display = 'none';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()"><div style="font-size:small; font-weight:bold;">Show Emoticons</div></a>';
}
//]]>
</script>
<div class='emoticons'>
<span id='smiley-more' style='display: none;'>
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/smile3.gif'/>:)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/sad3.gif'/>:(
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/laugh.gif'/>:))
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/cray-1.gif'/>:((
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/rofl-1.gif'/>=))
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/suicide-1.gif'/>=D&gt;
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/biggrin2.gif'/>:D
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/blum.gif'/>:P
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/shok.gif'/>:-O
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/eusa_think.gif'/>:-?
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/unsure.gif'/>:-SS
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/flowers1-1.gif'/>:-f
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/doh-1.gif'/>d(
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/air_kiss3.gif'/>:-*
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/threaten-1.gif'/>b-(
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/help2.gif'/>h-(
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/good-1.gif'/>g-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/beee-1.gif'/>5-p
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/yahoo2-1.gif'/>y-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/crazy3-1.gif'/>c-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/spiteful.gif'/>s-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/drinks-1.gif'/>d-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/cheer-1.gif'/>w-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/hi-1.gif'/>:-h
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/give_heart-1.gif'/>:X
</span>
<span id='smiley-toggle'><a href='javascript:moreSmilies()'><div style='font-size:small;font-weight:bold;'>Show Emoticons <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/smile3.gif'/></div></a></span>
</div>

Step 6. ေနာက္ဆံုးအဆင့္အေနနဲ႕ ေအာက္ကကုဒ္ကိုရွာပါ။

]]></b:skin>

ၿပီးတာနဲ႔  ]]></b:skin> ဒီကုဒ္ေတြေအာက္ကေန

.emoticons {-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;text-align: left;width:400px;}
.emoticons a, .emoticons a:hover {margin-left: 20px;text-decoration:none;} ဒီကုဒ္ေတြထည့္ေပးလိုက္ပါ

Size ေတြျပင္လိုပါက အနီေရာင္ျပထားေသာေနရာတြင္ မိမိႀကိဳက္သေလာက္ ျပဳျပင္ႏိုင္ပါတယ္။


ကဲဒါဆိုရင္ ၿပီးပါၿပီ အားလံုးပဲ အဆင္ေျပေျပနဲ႔ လုပ္ေဆာင္ႏိုင္ၾကပါေစဗ်ာ။။