How to add Emoticon on the Blog Comment Menu

How to add Emoticon on the Blog Comment Menu

Emoticon Feature on Blog Comments on Blogger

     One important feature on Blogger is the Menu Comment that is used as a place of interaction between Visitors and Blog owners. With comments Blog owners can find out about Information, Criticism, and Suggestions from visitors. In the post comments everyone can send messages in the form of letters, numbers, symbols, up to Link. Even some blogs design good comments to attract visitors to comment (leave a trail). You can also add the Emoticons feature to the Comments.

     The emoticons are like a more lively and interesting Expression writing, with image characters. There are various types of Emoticons with various expressions ranging from smile, laugh, sad, angry, upset, and so on. Make comments more interesting with the Emoticon feature, so blog owners or visitors can send comments with emoticons. Default Blogger does not provide an Emoticons so you need to add Scripts or HTML Codes to add Emoticons. Here is how to add Emoticon to the Comment Menu on Blogger:

Wait until 100%

Click the “Button Above”

1. Sign In to Blogger until you enter the Dashboard Menu

    Then select the Theme Menu> Edit HTML

2. Then you can find the code ]]></b: skin>, use Ctrl + F to make it easier

3. Then enter the following code just above the code ]]> </b: skin>

.emoWrap { position:relative; padding:10px; margin-bottom:7px; background:#fff; background-image:-ms-linear-gradient(right,#FFFFFF 0%,#FFF9F2 100%); background-image:-moz-linear-gradient(right,#FFFFFF 0%,#FFF9F2 100%); background-image:-o-linear-gradient(right,#FFFFFF 0%,#FFF9F2 100%); background-image:-webkit-gradient(linear,right top,left top,color-stop(0,#FFFFFF),color-stop(1,#FFF9F2)); background-image:-webkit-linear-gradient(right,#FFFFFF 0%,#FFF9F2 100%); background-image:linear-gradient(to left,#FFFFFF 0%,#FFF9F2 100%); border:3px solid #860000; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); -moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); -webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); font-weight:normal; color:#333; } .emoWrap:after { content:""; position:absolute; bottom:-10px; left:10px; border-top:10px solid #860000; border-right:20px solid transparent; width:0; height:0; line-height:0; }

 

4. After searching for the code </body>, use Ctrl + F to make it easier

5. Then enter the following code just above the code </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'><script type='text/javascript'>//<![CDATA[jQuery(document).ready(function () {emoticonx({emoRange:"#comments p, div.emoWrap",putEmoAbove:"iframe#comment-editor",topText:"Click to see the code!",emoMessage:"To insert emoticon you must added at least one space before the code."})});//]]></script><script src='https://cdn.rawgit.com/Brando07/share/newbe/seocips-emo.js' type='text/javascript'/></b:if>

 

6. When done, click Save Template. Then you check the Comments column on your Blog.

     Now the Emoticon feature has appeared and can be used

Hopefully with the addition of the Emoticon feature, visitors will be able to send a Comment Message. Very suitable for you Blog owners who have niche news, the more comments, the more exciting the blog.

Click the “Button Below”

Will Lead to the Destination Link