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 template.so 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 codes..so 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.
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.
Step 7. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.
<div id='threaded-comment-form'>Step 4. Now copy the below code and paste just after <p><data:blogCommentMessage/></p>
<p><data:blogCommentMessage/></p>
<span class='small-button1'>
<a href='#' target='_blank' title='Out Of Topic'>Out Of Topic</a>
</span>
<span class='small-button'>
<span id='show-conversion'><a class='conversion-button' href='javascript:voidundefined0)' onclick='document.getElementByIdundefined'conversion-box').style.display='inline-block';document.getElementByIdundefined'hide-conversion').style.display='inline-block';document.getElementByIdundefined'show-conversion').style.display='none'' title='Show conversion Code'>Show Conversion Code</a></span><span id='hide-conversion'><a class='conversion-button' href='javascript:voidundefined0)' onclick='document.getElementByIdundefined'conversion-box').style.display='none';document.getElementByIdundefined'hide-conversion').style.display='none';document.getElementByIdundefined'show-conversion').style.display='inline-block'' title='Hide Conversion Code'>Hide Conversion Code</a></span>
</span>
<span class='small-button'>
<span id='show-emo'><a class='emo-button' href='javascript:voidundefined0)' onclick='document.getElementByIdundefined'emo-box').style.display='inline-block';document.getElementByIdundefined'hide-emo').style.display='inline-block';document.getElementByIdundefined'show-emo').style.display='none'' title='Show Emoticon'>Show Emoticon</a></span><span id='hide-emo'><a class='emo-button' href='javascript:voidundefined0)' onclick='document.getElementByIdundefined'emo-box').style.display='none';document.getElementByIdundefined'hide-emo').style.display='none';document.getElementByIdundefined'show-emo').style.display='inline-block'' title='Hide Emoticon'>Hide Emoticon</a></span>
</span>
</p>
<div id='conversion-box'>
<textarea id='codes' placeholder='Write / paste the code here and click 'conversion'' spellcheck='false'/>
<span class='button-group'>
<button id='cvrt' onclick='cdConvertundefined);this.disabled = true;'>Conversion</button>
<button onclick='cdClearundefined);'>Remove</button>
</span>
<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>
<div id='emo-box'>
<div class='comment_emo_list'/>
</div>
<data:blogTeamBlogMessage/>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
</div>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframeundefined'<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>
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 7. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.
/* Conversion Box by www.bloggersstand.com */
.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}
.comment_youtube{max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img{max-width:100%!important}
#respond{overflow:hidden;padding-left:10px;clear:both}
#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}
button:hover{color:#000}
button:active{color:#000}
button[disabled],button[disabled]:active{color:#000;cursor:default}
#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}