Home
blogger
Blogger Widgets

How To Add Message Comments with Parse Tools on Blogger

Hello Blogmate's How are you ? I hope you are doing great. Most of you somehow will have noticed on many of blogs they have Parse Tool available in the comments section as in my blog. So today we are going to learn in this blog How To Add Message Comments with Parse Tools on Blogger.
Basically , I've always tried to do this tutorial, but I didn't have time to write it. Currently , Comments and posts with these tools are very useful only for blogs with learning niches like this. Not only can it beautify your blog, but it is also convenient for admins and blog visitors who want to add code or images to their comments. 
This tool parses your code and automatically adds HTML tags, so your visitors don't have to navigate to another page to parse your code and manually write tags like Prefix, quote, or image tag. You can see a demo of it on this blog. For those who want to build a should follow aforementioned steps and processes.

Steps— How To Do ?

  • Open your Blogger dashboard.
  • Click on theme section and then edit HTML.
  • Now search for </b:skin> tag.
  • Then , Add CSS code given below and place it above the code ]]></b:skin>
/* Variable Warna */

:root{

--main-btn-color: #f09800;

--copy-btn-color: #c16c6c;

--clean-btn-color: #7687b7;

--font-name: 'Noto Sans', sans-serif;

}

/* Komentar Fitur */

#cm-menu{position:relative;font-family:var(--font-name);font-size:14px;background:#fff;border-radius:4px;padding:20px 20px 85px;color:#333;margin: 0 0 20px -2px;line-height:1.5em;box-shadow:0 6px 18px 0 rgba(9,32,76,.075)}

#cm-menu:before{content:'';display:block;border:11px solid;border-color:#fff transparent transparent transparent;position:absolute;bottom:-22px;left:31px}

.bbcode a{color:var(--main-btn-color)}

.bbcode ul{border:1px solid #ededef;padding:10px;border-radius:4px;margin-top:20px;line-height:1.5em}

.bbcode ul li{border-bottom:1px dashed #ededef;padding:10px 0;margin-bottom:0}

.bbcode ul li:last-child{border-bottom:none}

.bbcode ul li a{display:inline-block;color:var(--main-btn-color);cursor:pointer}

.bbcode ul li b.linkz{color:var(--main-btn-color)}

.cmbutton{display:grid;grid-template-columns:1fr 1fr;width:calc(100% - 40px);margin-top:25px;position:absolute;bottom:20px}

.cmbutton1{border-bottom-left-radius:4px}

.cmbutton2{border-bottom-right-radius:4px}

.cmbutton-title{padding:10px;border-top:5px solid #e8e8e8;display:block;text-align:center}

.cmbutton label{display:block;cursor:pointer}

.cm-menus1:checked ~ .cmbutton .cmbutton1 .cmbutton-title, .cm-menus2:checked ~ .cmbutton .cmbutton2 .cmbutton-title{border-top:5px solid var(--main-btn-color)}

.cm-menus1:checked ~ .bbcode{display:none}

.cm-menus2:checked ~ .pesan-komen{display:none}

.cm-menus1:checked ~ .cmbutton .cmbutton1, .cm-menus2:checked ~ .cmbutton .cmbutton2{background:rgba(23,191,99,.07)}

#comment-content pre, #comment-content i[rel="pre"]{padding:15px;font-size:12px;margin:0;overflow-x:auto;white-space:pre;display:block;color:#e0d072;background:#262a2d;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text}

#comment-content code, #comment-content i[rel="code"]{padding:2px 4px;background-color:#f1f1f1;color:#e6472e;border-radius:2px;font-family:'Fira Mono',monospace;font-size:12px;display:inline;line-height:1.8em}

#comment-content blockquote, #comment-content b[rel="quote"]{margin:0;padding:15px;border:1px dashed #ededef;border-radius:4px;font-size:13px;font-style:italic}

#comment-content img{border-radius:4px}

/* Comment Parse Tools */

#parser{position:relative;margin-top:20px}

#codes{border:1px solid #ededef;width:100%;height:150px;display:block;background-color:#fafafa;border-radius:4px;font:400 11px 'Fira Mono',monospace;resize:none;margin:0 0 10px;padding:10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;box-shadow:none}

#codes:active,#codes:focus{background-color:#f5f5f5;color:#444;outline:0}

.btn-xs{font-family:var(--font-name);font-size:12px;line-height:1.5;border-radius:2px;padding:1px 5px;border:none;color:#fff;outline:0;cursor:pointer}

.btn-primary{background-color:var(--main-btn-color);margin-bottom: 10px;}

.btn-primary:active, .btn-primary:hover, .parser:active, .parser:hover, .btn-primary:focus, .button-group button:disabled, .parser:focus{opacity:.9}

.btn-danger{background-color:var(--clean-btn-color)}

.btn-danger:active, .btn-danger:hover{opacity:.9}

.btn-info{background-color:var(--copy-btn-color)}

.btn-info:active, .btn-info:hover{opacity:.9}

.alert{padding:6px;border-radius:4px;position:absolute;top:10px;right:10px;min-width:100px}

.alert span{font-size:12px}

.alert-success{color:#3c763d;background-color:rgba(215,236,206,.58)}

.closer{float:right;margin-top:3px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;line-height:1}

.checkbox{display:none}

/* Dark Mode silakan sesuaikan classnya jika berbeda atau bisa di hapus bagian ini */

.darkMode .cmbutton-title{border-top:5px solid #1f1f1f}

.darkMode .cm-menus1:checked ~ .cmbutton .cmbutton1, .darkMode .cm-menus2:checked ~ .cmbutton .cmbutton2{background:rgba(0,0,0,.07)}

.darkMode .post #codes{border:1px solid #3a3b3c;background-color:#1f1f1f}

.darkMode .post #codes:active,.darkMode #codes:focus{background-color:#18191a;color:inherit;outline:0}

.darkMode .post .alert-success{color:#989b9f;background-color:rgba(51,53,56,.60)}

.darkMode .post .closer{color:#fff;text-shadow:0 1px 0 #fff}

.darkMode #cm-menu{background:#242526;color:#c6c9ce;box-shadow:0 6px 18px 0 rgba(23,23,26,0.02)}

.darkMode .bbcode ul,.darkMode .bbcode ul li{border-color:rgba(255,255,255,.1)}

.darkMode #cm-menu:before{border-color:#292a2b transparent transparent transparent}

.darkMode #codes,darkMode #codes:active,.darkMode #codes:focus{border:1px solid #3a3b3c;background-color:#1f1f1f;color:#fefefe}
  • Now Look For <div id='threaded-comment-form'>
  • Then , Copy Below Provided Code place it under the code <div id='threaded-comment-form'>
<div id='cm-menu'>

<input checked='' class='cm-menus1 hidden' id='offcm-menu1' name='accordion-menu' type='radio'/>

<input class='cm-menus2 hidden' id='offcm-menu2' name='accordion-menu' type='radio'/>

<div class='cmbutton'>

<div class='cmbutton1'>

<label class='cmbutton-title' for='offcm-menu1'>Pesan Komentar</label>

</div>

<div class='cmbutton2'>

<label class='cmbutton-title' for='offcm-menu2'>Media +</label>

</div>

</div>

<div class='pesan-komen'>

Tinggalkan komentar sesuai topik tulisan, centang <b>Notify me</b> untuk mendapatkan notifikasi via email ketika komentar kamu di balas.

</div>

<div class='bbcode'>

Masukkan <b><a href='https://imgbb.com/upload' rel='nofollow noopener noreffer' target='_blank' title='Upload Gambar di Sini'>URL Gambar</a></b> atau <b>Potongan Kode</b>, atau <b>Quote</b>, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.

<div id='parser'>

<textarea id='codes' placeholder='Masukkan kode / url_gambar lalu klik tombol di bawah ini untuk di parse' spellcheck='false'/>

<div class='alert alert-success margin-bottom-20 collapse' id='btnInfo' role='alert' style='display: none;'>

<button class='closer close-copy' onclick='document.getElementById(&quot;btnInfo&quot;).style.display = &quot;none&quot;;cdClear();' type='button'><span aria-hidden='true'>&#215;</span></button>

<span>Kode Tersalin!</span>

</div>

<span class='button-group'>

<button class='btn btn-primary btn-xs' id='cvrt3' onclick='imgConvert();this.disabled = true;'>image</button>

<button class='btn btn-primary btn-xs' id='cvrt4' onclick='preConvert();this.disabled = true;'>pre</button>

<button class='btn btn-primary btn-xs' id='cvrt5' onclick='codeConvert();this.disabled = true;'>code</button>

<button class='btn btn-primary btn-xs' id='cvrt7' onclick='quoteConvert();this.disabled = true;'>quote</button><br/>

<button class='btn button-link btn-xs btn-info' data-clipboard-action='copy' data-clipboard-target='#codes' id='button-link' style='display: none;' type='submit'>Salin Kode!</button>

<button class='btn btn-danger btn-xs' onclick='cdClear();'>Bersihkan</button>

</span>

<span class='checkbox'>

<input checked='' id='opt1' type='checkbox'/>

<input checked='' id='opt2' type='checkbox'/>

<input checked='' id='opt3' type='checkbox'/>

<input checked='' id='opt4' type='checkbox'/>

<input checked='' id='opt5' type='checkbox'/><br/>

<input checked='' id='opt6' type='checkbox'/>

<span>image</span>

<input checked='' id='opt7' type='checkbox'/>

<span>quote</span>

<input checked='' id='opt8' type='checkbox'/>

<span>pre</span>

<input checked='' id='opt9' type='checkbox'/>

<span>code</span>

</span>

<div class='clear'/>

</div>

</div>

</div>
  • Lastly , add javascript code provided below and place it above the code </body> or <!--</body>--></body>
  • Don't Forget Saving Your Theme.
<script src='https://cdn.rawgit.com/zenorocha/clipboard.js/v1.5.16/dist/clipboard.min.js'/>

<script>

//<![CDATA[

function cdClear(){var e=document.getElementById("codes");e.value="",e.focus();for(var t=document.querySelectorAll("#cvrt3, #cvrt4, #cvrt5, #cvrt6, #cvrt7, #cvrt8, #cvrt9, #cvrt10, #cvrt11"),c=0;c<t.length;c++)t[c].disabled=!1,document.getElementById("btnInfo").style.display="none",document.getElementById("button-link").style.display="none"}function preConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),l=document.getElementById("opt2"),n=document.getElementById("opt3"),o=document.getElementById("opt4"),d=document.getElementById("opt5"),u=document.getElementById("opt8");t=t.replace(/\t/g,"    ");u.checked&&(c.checked&&(t=t.replace(/&/g,"&amp;")),l.checked&&(t=t.replace(/'/g,"&#039;")),n.checked&&(t=t.replace(/"/g,"&quot;")),o.checked&&(t=t.replace(/</g,"&lt;")),d.checked&&(t=t.replace(/>/g,"&gt;")),t=(t=t.replace(/^/,"<i rel='pre'>")).replace(/$/,"</i>"),e.value=t,e.focus(),document.getElementById("button-link").style.display="inline-block")}function codeConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),l=document.getElementById("opt2"),n=document.getElementById("opt3"),o=document.getElementById("opt4"),d=document.getElementById("opt5"),u=document.getElementById("opt9");t=t.replace(/\t/g,"    ");u.checked&&(c.checked&&(t=t.replace(/&/g,"&amp;")),l.checked&&(t=t.replace(/'/g,"&#039;")),n.checked&&(t=t.replace(/"/g,"&quot;")),o.checked&&(t=t.replace(/</g,"&lt;")),d.checked&&(t=t.replace(/>/g,"&gt;")),t=(t=t.replace(/^/,"<i rel='code'>")).replace(/$/,"</i>"),e.value=t,e.focus(),document.getElementById("button-link").style.display="inline-block")}function imgConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt6");t=t.replace(/\t/g,"    ");c.checked&&(t=(t=t.replace(/^/,"<i rel='img'>")).replace(/$/,"</i>"),e.value=t,e.focus(),document.getElementById("button-link").style.display="inline-block")}function quoteConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt7");t=t.replace(/\t/g,"    ");c.checked&&(t=(t=t.replace(/^/,"<b rel='quote'>")).replace(/$/,"</b>"),e.value=t,e.focus(),document.getElementById("button-link").style.display="inline-block")}var clipboard=new Clipboard(".button-link");clipboard.on("success",function(e){console.log(e),document.getElementById("btnInfo").style.display="block",document.getElementById("codes").value=""}),clipboard.on("error",function(e){console.log(e)}); function repText(id) {var a = document.getElementById(id); if (!a) return; var b = a.innerHTML; b = b.replace(/<i rel="img">(.*?)<\/i>/ig, "<img class='lazy cm-image' data-src='$1' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' alt='loading...' \/>"); b = b.replace(/<i rel="pre">(.*?)<\/i>/ig, "<pre><code>$1<\/code><\/pre>"); b = b.replace(/<i rel="code">(.*?)<\/i>/ig, "<pre><code>$1<\/code><\/pre>"); b = b.replace(/<b rel="quote">(.*?)<\/b>/ig, "<blockquote>$1<\/blockquote>"); a.innerHTML = b;} repText('comment-holder');

///]]>

</script>

For Median UI 1.5 Users

As the median-ui v.1.5 update has class and id differences from any other templates, so I updated the css and javascript to make it work on Median Ui 1.5 Template

Steps— How To Do ?

  • Open your Blogger dashboard.
  • Click on theme section and then edit HTML.
  • Now search for </b:skin> tag.
  • Then , Add CSS code given below and place it above the code ]]></b:skin>
/* Komentar Fitur */

#cm-menu{position:relative;font-family:var(--font-body);font-size:14px;background:#fff;border-radius:4px;padding:20px 20px 85px;color:#333;margin: 0 0 20px -2px;line-height:1.5em;box-shadow:0 6px 18px 0 rgba(9,32,76,.075)}

#cm-menu:before{content:'';display:block;border:11px solid;border-color:#fff transparent transparent transparent;position:absolute;bottom:-22px;left:31px}

.bbcode a{color:var(--link-color)}

.bbcode ul{border:1px solid #ededef;padding:10px;border-radius:4px;margin-top:20px;line-height:1.5em}

.bbcode ul li{border-bottom:1px dashed #ededef;padding:10px 0;margin-bottom:0}

.bbcode ul li:last-child{border-bottom:none}

.bbcode ul li a{display:inline-block;color:var(--link-color);cursor:pointer}

.bbcode ul li b.linkz{color:var(--link-color)}

.cmbutton{display:grid;grid-template-columns:1fr 1fr;width:calc(100% - 40px);margin-top:25px;position:absolute;bottom:20px}

.cmbutton1{border-bottom-left-radius:4px}

.cmbutton2{border-bottom-right-radius:4px}

.cmbutton-title{padding:10px;border-top:5px solid #e8e8e8;display:block;text-align:center}

.cmbutton label{display:block;cursor:pointer}

.cm-menus1:checked ~ .cmbutton .cmbutton1 .cmbutton-title, .cm-menus2:checked ~ .cmbutton .cmbutton2 .cmbutton-title{border-top:5px solid var(--link-color)}

.cm-menus1:checked ~ .bbcode{display:none}

.cm-menus2:checked ~ .pesan-komen{display:none}

.cm-menus1:checked ~ .cmbutton .cmbutton1, .cm-menus2:checked ~ .cmbutton .cmbutton2{background:rgba(23,191,99,.07)}

/* karena di versi 1.5 tidak ada css ini jadi saya tambahkan agar  bisa berfungsi */

.commentContent i[rel="code"]:before{content:'</>';position:absolute;right:0;top:0;color:var(--highlight-comment);font-size:10px;padding:0 10px;z-index:2;line-height:35px}

.commentContent i[rel="code"]{display:block;white-space:pre; font-size:.8rem; position:relative;width:100%; border-radius:2px;background-color:var(--highlight-bg);color:var(--highlight-color); padding:20px;margin:25px auto; -moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;overflow:auto; font-family:var(--font-code);line-height:1.6em}

.darkMode .commentContent i[rel="code"]{background-color:rgba(0,0,0,.09);color:var(--dark-textAlt)}

.commentContent i[rel="code"]{margin:1.2em auto; font-style:normal}

/* Comment Parse Tools */

#parser{position:relative;margin-top:20px}

#codes{border:1px solid #ededef;width:100%;height:150px;display:block;background-color:#fafafa;border-radius:4px;font:400 11px 'Fira Mono',monospace;resize:none;margin:0 0 10px;padding:10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;box-shadow:none}

#codes:active,#codes:focus{background-color:#f5f5f5;color:#444;outline:0}

.btn-xs{font-family:var(--font-name);font-size:12px;line-height:1.5;border-radius:2px;padding:1px 5px;border:none;color:#fff;outline:0;cursor:pointer}

.btn-primary{background-color:var(--link-color);margin-bottom: 10px;}

.btn-primary:active, .btn-primary:hover, .parser:active, .parser:hover, .btn-primary:focus, .button-group button:disabled, .parser:focus{opacity:.9}

.btn-danger{background-color:#7687b7}

.btn-danger:active, .btn-danger:hover{opacity:.9}

.btn-info{background-color:#c16c6c}

.btn-info:active, .btn-info:hover{opacity:.9}

.alert{padding:6px;border-radius:4px;position:absolute;top:10px;right:10px;min-width:100px}

.alert span{font-size:12px}

.alert-success{color:#3c763d;background-color:rgba(215,236,206,.58)}

.closer{float:right;margin-top:3px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;line-height:1}

.checkbox{display:none}

/* Dark Mode */

.darkMode .cmbutton-title{border-top:5px solid #1f1f1f}

.darkMode .cm-menus1:checked ~ .cmbutton .cmbutton1, .darkMode .cm-menus2:checked ~ .cmbutton .cmbutton2{background:rgba(0,0,0,.07)}

.darkMode .post #codes{border:1px solid #3a3b3c;background-color:#1f1f1f}

.darkMode .post #codes:active,.darkMode #codes:focus{background-color:#18191a;color:inherit;outline:0}

.darkMode .post .alert-success{color:#989b9f;background-color:rgba(51,53,56,.60)}

.darkMode .post .closer{color:#fff;text-shadow:0 1px 0 #fff}

.darkMode #cm-menu{background:#242526;color:#c6c9ce;box-shadow:0 6px 18px 0 rgba(23,23,26,0.02)}

.darkMode .bbcode ul,.darkMode .bbcode ul li{border-color:rgba(255,255,255,.1)}

.darkMode #cm-menu:before{border-color:#292a2b transparent transparent transparent}

.darkMode #codes,darkMode #codes:active,.darkMode #codes:focus{border:1px solid #3a3b3c;background-color:#1f1f1f;color:var(--dark-text)}
  • Now Look For <div id='threaded-comment-form'>
  • Then , Copy Below Provided Code place it under the code <div id='threaded-comment-form'>
<div id='cm-menu'>

<input checked='' class='cm-menus1 hidden' id='offcm-menu1' name='accordion-menu' type='radio'/>

<input class='cm-menus2 hidden' id='offcm-menu2' name='accordion-menu' type='radio'/>

<div class='cmbutton'>

<div class='cmbutton1'>

<label class='cmbutton-title' for='offcm-menu1'>Pesan Komentar</label>

</div>

<div class='cmbutton2'>

<label class='cmbutton-title' for='offcm-menu2'>Media +</label>

</div>

</div>

<div class='pesan-komen'>

Tinggalkan komentar sesuai topik tulisan, centang <b>Notify me</b> untuk mendapatkan notifikasi via email ketika komentar kamu di balas.

</div>

<div class='bbcode'>

Masukkan <b><a href='https://imgbb.com/upload' rel='nofollow noopener noreffer' target='_blank' title='Upload Gambar di Sini'>URL Gambar</a></b> atau <b>Potongan Kode</b>, atau <b>Quote</b>, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.

<div id='parser'>

<textarea id='codes' placeholder='Masukkan kode / url_gambar lalu klik tombol di bawah ini untuk di parse' spellcheck='false'/>

<div class='alert alert-success margin-bottom-20 collapse' id='btnInfo' role='alert' style='display: none;'>

<button class='closer close-copy' onclick='document.getElementById(&quot;btnInfo&quot;).style.display = &quot;none&quot;;cdClear();' type='button'><span aria-hidden='true'>&#215;</span></button>

<span>Kode Tersalin!</span>

</div>

<span class='button-group'>

<button class='btn btn-primary btn-xs' id='cvrt3' onclick='imgConvert();this.disabled = true;'>image</button>

<button class='btn btn-primary btn-xs' id='cvrt4' onclick='preConvert();this.disabled = true;'>pre</button>

<button class='btn btn-primary btn-xs' id='cvrt5' onclick='codeConvert();this.disabled = true;'>code</button>

<button class='btn btn-primary btn-xs' id='cvrt7' onclick='quoteConvert();this.disabled = true;'>quote</button><br/>

<button class='btn button-link btn-xs btn-info' data-clipboard-action='copy' data-clipboard-target='#codes' id='button-link' style='display: none;' type='submit'>Salin Kode!</button>

<button class='btn btn-danger btn-xs' onclick='cdClear();'>Bersihkan</button>

</span>

<span class='checkbox'>

<input checked='' id='opt1' type='checkbox'/>

<input checked='' id='opt2' type='checkbox'/>

<input checked='' id='opt3' type='checkbox'/>

<input checked='' id='opt4' type='checkbox'/>

<input checked='' id='opt5' type='checkbox'/><br/>

<input checked='' id='opt6' type='checkbox'/>

<span>image</span>

<input checked='' id='opt7' type='checkbox'/>

<span>quote</span>

<input checked='' id='opt8' type='checkbox'/>

<span>pre</span>

<input checked='' id='opt9' type='checkbox'/>

<span>code</span>

</span>

<div class='clear'/>

</div>

</div>

</div>
  • Lastly , add javascript code provided below and place it above the code </body> or <!--</body>--></body>
  • Don't Forget Saving Your Theme.
<script src='https://cdn.rawgit.com/zenorocha/clipboard.js/v1.5.16/dist/clipboard.min.js'/>

<script>

//<![CDATA[

function cdClear(){var e=document.getElementById("codes");e.value="",e.focus();for(var t=document.querySelectorAll("#cvrt3, #cvrt4, #cvrt5, #cvrt6, #cvrt7, #cvrt8, #cvrt9, #cvrt10, #cvrt11"),c=0;c<t.length;c++)t[c].disabled=!1,document.getElementById("btnInfo").style.display="none",document.getElementById("button-link").style.display="none"}function preConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),l=document.getElementById("opt2"),n=document.getElementById("opt3"),o=document.getElementById("opt4"),d=document.getElementById("opt5"),u=document.getElementById("opt8");t=t.replace(/\t/g,"    ");u.checked&&(c.checked&&(t=t.replace(/&/g,"&amp;")),l.checked&&(t=t.replace(/'/g,"&#039;")),n.checked&&(t=t.replace(/"/g,"&quot;")),o.checked&&(t=t.replace(/</g,"&lt;")),d.checked&&(t=t.replace(/>/g,"&gt;")),t=(t=t.replace(/^/,"<i rel='pre'>")).replace(/$/,"</i>"),e.value=t,e.focus(),document.getElementById("button-link").style.display="inline-block")}function codeConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),l=document.getElementById("opt2"),n=document.getElementById("opt3"),o=document.getElementById("opt4"),d=document.getElementById("opt5"),u=document.getElementById("opt9");t=t.replace(/\t/g,"    ");u.checked&&(c.checked&&(t=t.replace(/&/g,"&amp;")),l.checked&&(t=t.replace(/'/g,"&#039;")),n.checked&&(t=t.replace(/"/g,"&quot;")),o.checked&&(t=t.replace(/</g,"&lt;")),d.checked&&(t=t.replace(/>/g,"&gt;")),t=(t=t.replace(/^/,"<i rel='code'>")).replace(/$/,"</i>"),e.value=t,e.focus(),document.getElementById("button-link").style.display="inline-block")}function imgConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt6");t=t.replace(/\t/g,"    ");c.checked&&(t=(t=t.replace(/^/,"<i rel='img'>")).replace(/$/,"</i>"),e.value=t,e.focus(),document.getElementById("button-link").style.display="inline-block")}function quoteConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt7");t=t.replace(/\t/g,"    ");c.checked&&(t=(t=t.replace(/^/,"<i rel='quote'>")).replace(/$/,"</i>"),e.value=t,e.focus(),document.getElementById("button-link").style.display="inline-block")}var clipboard=new Clipboard(".button-link");clipboard.on("success",function(e){console.log(e),document.getElementById("btnInfo").style.display="block",document.getElementById("codes").value=""}),clipboard.on("error",function(e){console.log(e)}); function repText(id) {var a = document.getElementById(id); if (!a) return; var b = a.innerHTML; b = b.replace(/<i rel="img">(.*?)<\/i>/ig, "<img class='lazy cm-image' data-src='$1' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' alt='loading...' \/>");a.innerHTML = b;} repText('commentHolder');

///]]>

</script>

Conclusion

So today we have discussed about How To Add Message Comments with Parse Tools on Blogger. I hope you like this post kindly do give a comment below. If you are having problem implementing this kindly contact me. Do visit regularly for getting more updates like this.

1 comment

  1. Vey helpful
Leave your opinion or any doubt about this article. Don't try to spam, our team reviews every comment.
© ‧ THE TALUAT. All rights reserved. Distributed by TheTaluat Distributed by TheTaluat