What tutorial do you want for the next article! Request Here!

pesan komentar dengan tools parse menggunakan html & css dan javascript

pesan komentar dengan tools parse menggunakan html & css dan javascript
pesan komentar dengan  tools parse di blogger

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat pesan komentar dengan tools parse di blogger.

Sebenarnya Saya Mau Buat Tutorial Ini Sudah Dari Lama Cuma Belum Ada Waktu Buat Bikin Artikel nya Nah Sekarang baru ada waktu

pesan komentar yang di lengkapi tools ini tentu akan sangat berguna untuk blog yang berniche tutorial seperti blog ini, selain dapat mempercantik tampilan blog juga akan mempermudah admin atau pengunjung blog saat ingin menyisipkan kode atau gambar ke dalam komentar.

dengan adanya tools ini pengunjung tidak perlu lagi untuk membuka halaman lain untuk memparse kode, dan menulis manual tag nya seperti <i rel='pre'></i> , karena kode akan di parse dan di tambahkan tag html nya secara otomatis, mau itu tag pre ,quote atau gambar.

untuk demonya kalian bisa lihat pada blog ini, ok buat kalian yang ingin membuatnya mari simak caranya di bawah ini.

Cara Membuat Pesan Komentar Dengan Tool Parse Di Blogger

silakan masuk ke blogger pilih tema dan edit html salin css di bawah ini dan letakkan di atas kode ]]></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}

lanjut silakan salin kode di bawah ini dan letakkan di bawah kode <div id='threaded-comment-form'> jika masih ada widget pesan komentar yang lama silakan di hapus dulu. setiap template mungkin saja memiliki kode yang berbeda.

<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>

lanjut silakan salin javascript di bawah ini dan letakkan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<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>

jika sudah silakan klik simpan.

Untuk Pengguna Template Median-Ui V.1.5

di karena update median-ui v.1.5 ini ada perbedaan class dan id sehingga saya update lagi untuk css dan javascriptnya agar dapat berfungsi.

silakan masuk ke blogger pilih tema dan edit html salin css di bawah ini dan letakkan di atas kode ]]></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 <i rel='code'></i> 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)}

lanjut silakan salin kode di bawah ini dan letakkan di bawah kode <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>

lanjut silakan salin javascript di bawah ini dan letakkan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<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>

jika sudah silakan klik simpan, ok jadi sekian cara membuat pesan komentar dengan tools parse di blogger semoga bermanfaat, dan terima kasih sudah berkunjung.

Source code:
blog.choipanwendy.com

Post Tags

Info menarik Widget

About the Author

Content Creator, Graphic Designer, UI / UX Designer

Posting Komentar

AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.