Hello Folks , Today nosotros are going to explicate How to add conversion/converter/parser box alongside Emoticon/Smileys inward blogger template.We convey already talked nigh installing unique beautiful blogger threaded comment organisation for custom/default blogger template.so yous guys convey noticed inward therefore many websites or weblog that when yous are going to write on comment box,just inward a higher house the comment box yous convey seen Conversion Box (Konversi) together with Emoticon (Emotions/Smiley) box embed inward the blogger comment box.If your weblog or website is for spider web evolution together with therefore yous must install blogger code parser or conversion code within blogspot template.Reason is when yous are sharing codes alongside your readers together with they mightiness convey facing difficulties therefore they volition seek to utter nigh the code inward comments that fourth dimension yous request to portion re-create of codes..so inward that representative yous must embed/implement conversion code widget inward blogger template.
Apart from all this nosotros convey installed blogger smileys funtion alongside conversion box,so if somebody want's to portion expression/emotions they tin purpose the emoticons too.We convey used CSS for styling together with Javascript for blogger conversion (konversi) box.It has component division when yous click on Show conversion box it volition slide downwardly together with the converter box volition display ,reader convey to yesteryear the code together with hitting convert push clit to parse their code.You tin portion Images , youtube embed code,javascript,html,facebook page link,url almost yous tin portion anything inward the comment box later installing the blogger conversion box.In guild to catch this play a joke on only follow the steps mentioned below.
Apart from all this nosotros convey installed blogger smileys funtion alongside conversion box,so if somebody want's to portion expression/emotions they tin purpose the emoticons too.We convey used CSS for styling together with Javascript for blogger conversion (konversi) box.It has component division when yous click on Show conversion box it volition slide downwardly together with the converter box volition display ,reader convey to yesteryear the code together with hitting convert push clit to parse their code.You tin portion Images , youtube embed code,javascript,html,facebook page link,url almost yous tin portion anything inward the comment box later installing the blogger conversion box.In guild to catch this play a joke on only follow the steps mentioned below.
How to install Conversion box together with smileys inward blogger comment section
Installation Steps:[First Install Blogger Threaded Comment System Then Only It Works.]
Step 1. Log inward to your Blogger describe of piece of job organisation human relationship together with Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for the below code yesteryear using CTRL + F , CMD+F (Mac) Keys.
Step 7. Copy the below CSS code together with glue it only earlier the ]]></b:skin> or </style> tag.
<div id='threaded-comment-form'>Step 4. Now re-create the below code together with glue only later <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 / glue the code hither together with 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 re-create the below coffee script together with glue it only above/before the </body> tag.
Step 7. Copy the below CSS code together with glue it only earlier the ]]></b:skin> or </style> tag.
/* Conversion Box yesteryear 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 corporation #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 corporation #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 corporation #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 corporation #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 corporation #333;border-radius:2px;display:inline-block;background-color:#777} 
No comments:
Post a Comment