How To Add Conversion And Emoticon In Blogger Threaded Comment

0 /

Also Read...

How To Add Conversion And Emotions+smileys+ for blogger Threaded Comment
Hello Folks , Today we are going to explain How to add conversion/converter/parser box with Emoticon/Smileys in blogger template.We have already talked about installing unique beautiful blogger threaded comment system for custom/default blogger you guys have noticed in so many websites or blog that when you are going to write on comment box,just above the comment box you have seen Conversion Box (Konversi) and Emoticon (Emotions/Smiley) box embed in the blogger comment box.If your blog or website is for web development then you must install blogger code parser or conversion code inside blogspot template.Reason is when you are sharing codes with your readers and they might have facing difficulties so they will try to talk about the code in comments that time you need to share copy of in that case you must embed/implement conversion code widget in blogger template.
Apart from all this we have installed blogger smileys funtion with conversion box,so if someone want's to share expression/emotions they can use the emoticons too.We have used CSS for styling and Javascript for blogger conversion (konversi) box.It has function when you click on Show conversion box it will slide down and the converter box will display ,reader have to past the code and hit convert button to parse their code.You can share Images , youtube embed code,javascript,html,facebook page link,url almost you can share anything in the comment box after installing the blogger conversion box.In order to grab this trick just follow the steps mentioned below.

How to install Conversion box and smileys in blogger comment section

Installation Steps:[First Install Blogger Threaded Comment System Then Only It Works.]
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for the below code by using CTRL + F , CMD+F (Mac) Keys.
<div id='threaded-comment-form'>
Step 4. Now copy the below code and paste just after <p><data:blogCommentMessage/></p>
<span class='small-button1'>
        <a href='#' target='_blank' title='Out Of Topic'>Out Of Topic</a>
<span class='small-button'>
<span id='show-conversion'><a class='conversion-button' href='javascript:voidundefined0)' onclick='document.getElementByIdundefined&apos;conversion-box&apos;).style.display=&apos;inline-block&apos;;document.getElementByIdundefined&apos;hide-conversion&apos;).style.display=&apos;inline-block&apos;;document.getElementByIdundefined&apos;show-conversion&apos;).style.display=&apos;none&apos;' title='Show conversion Code'>Show Conversion Code</a></span><span id='hide-conversion'><a class='conversion-button' href='javascript:voidundefined0)' onclick='document.getElementByIdundefined&apos;conversion-box&apos;).style.display=&apos;none&apos;;document.getElementByIdundefined&apos;hide-conversion&apos;).style.display=&apos;none&apos;;document.getElementByIdundefined&apos;show-conversion&apos;).style.display=&apos;inline-block&apos;' title='Hide Conversion Code'>Hide Conversion Code</a></span>
<span class='small-button'>
<span id='show-emo'><a class='emo-button' href='javascript:voidundefined0)' onclick='document.getElementByIdundefined&apos;emo-box&apos;).style.display=&apos;inline-block&apos;;document.getElementByIdundefined&apos;hide-emo&apos;).style.display=&apos;inline-block&apos;;document.getElementByIdundefined&apos;show-emo&apos;).style.display=&apos;none&apos;' title='Show Emoticon'>Show Emoticon</a></span><span id='hide-emo'><a class='emo-button' href='javascript:voidundefined0)' onclick='document.getElementByIdundefined&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementByIdundefined&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementByIdundefined&apos;show-emo&apos;).style.display=&apos;inline-block&apos;' title='Hide Emoticon'>Hide Emoticon</a></span>
<div id='conversion-box'>
    <textarea id='codes' placeholder='Write / paste the code here and click &apos;conversion&apos;' spellcheck='false'/>
<span class='button-group'>
<button id='cvrt' onclick='cdConvertundefined);this.disabled = true;'>Conversion</button>
<button onclick='cdClearundefined);'>Remove</button>
<span class='checkbox'>
<input checked='' id='opt1' type='checkbox'/> <input id='opt2' type='checkbox'/> <input id='opt3' type='checkbox'/> <input checked='' id='opt4' type='checkbox'/> <input checked='' id='opt5' type='checkbox'/></span>
<div id='emo-box'>
  <div class='comment_emo_list'/>
      <a expr:href='&quot;; + data:blog.blogId + &quot;&amp;amp;postID=&quot; +' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
    <script type='text/javascript'>
      BLOG_CMT_createIframeundefined&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
Step 5. Now Search For the closing </body> tag  and copy the below java script and paste it just above/before the </body> tag.
Step 6. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.

Step 7. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.
/* Conversion Box by */
.comment_emo_list .item{float:left;text-align:center;height:40px;width:41px;margin:0 0 10px;}
.comment_emo_list span{display:block;font-weight:400;font-size:11px;letter-spacing:1px;color:#444}
#conversion-box, #hide-conversion,#emo-box,#hide-emo {display:none}
#conversion-box {width:100%;color:#eee;background:none;line-height:1.6em;margin-bottom:20px;padding:0;text-align:left;}
.checkbox{font:11px Tahoma,Verdana,Arial,Sans-Serif;line-height:1.6em;color:#eee;}
#codes{border:1px solid #ccc;width:98%;height:200px;display:block;background-color:#ddd;border-radius:3px;font:normal 12px 'Courier New',Monospace;margin:7px 0 10px;padding:5px}
#codes:focus{background-color:#fff;color:#666;border:1px solid #ddd;outline:none}
.button-group{float:right;text-align:left;margin:0 auto}
button,button[disabled]:active{font-size:12px;font-family:Arial;font-weight:normal;border-radius:3px;border:1px solid #49a5bf;padding:3px 10px;text-decoration:none;background:linear-gradient(to bottom, #93cede 0%, #75bdd1 41%, #49a5bf 100%);color:#ffffff;display:inline-block;text-shadow:1px 1px 0px #528ecc;box-shadow:inset 1px 1px 0px 0px #bbdaf7;cursor:pointer}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;vertical-align:middle;border:none;outline:none;margin:0 10px 0 0}
.small-button a,.small-button1 a {border:1px solid #333;color:#fff;font:13px Tahoma;cursor:pointer;font-weight:400;margin:15px 5px 5px 0;text-decoration:none;text-transform:none;text-shadow:none;border-radius:2px;display:inline-block;background-color:#444;padding:2px 8px;cursor:pointer}
.small-button:hover a,.small-button1:hover a{color:#111;text-shadow:none;border:1px solid #333;border-radius:2px;display:inline-block;background-color:#777} 
Step 8.Now Save your template..Done !
trick to install add konversi conversion box in threaded comment with smileys emotions in blogger comment form,create converter code to share image,youtube,code in blogspot custom template comments section.
Hello Folks , Today we are going to explain How to add conversion / converter/parser box with Emoticon/Smileys in blogger template.We h...

trick to install add konversi conversion box in threaded comment with smileys emotions in blogger comment form,create converter code to share image,youtube,code in blogspot custom template comments section.


We hope this article helped you to learn How To Add Conversion And Emoticon In Blogger Threaded Comment. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+


Post a Comment Blogger Disqus

0 Comments on "How To Add Conversion And Emoticon In Blogger Threaded Comment" So Far - Post Yours!
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Team Bloggersstand