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.

tutorial ini di reguest oleh Mujib M. melalui komentar di salah satu postingan blog ini, buat kalian yang ingin reguest tutorial bisa berkomentar di forum atau mengirim pesan via email melalui halaman kontak, bisa juga berkomentar di youtube kami. jika memungkinkan akan kami buatkan di masa mendatang.

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, atau bisa melihatnya di youtube saya, 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 > tema > edit html salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau di atas kode </style>

/* Variable Warna */
:root{
--font-name: 'Noto Sans', sans-serif ;
--background-color: #fffdfc;
--content-text: #48525c;
--border-color: #e6e6e6;
--textarea-background: #f6f6f6;
--main-color: #f89000;
--dark-background: #2d2d30;
--dark-text :#fffdfc;
}

/* Komentar Fitur */
#cm-menu{position:relative;font-family:var(--font-name);font-size:14px;background:var(--background-color);border-radius:4px;padding:20px 20px 50px 20px;margin:0 0 20px -2px;color:var(--content-text);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:var(--background-color) transparent transparent transparent;position:absolute;bottom:-22px;left:25px}
#parser{position:relative;margin-top:20px}
#codes{border:1px solid var(--border-color);width:100%;height:150px;display:block;background-color:var(--textarea-background);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}
.cm-btn{font-family:var(--font-name);font-size:12px;line-height:1.5;border-radius:2px;padding:1px 5px;border:none;color:var(--background-color);outline:0;cursor:pointer;background-color:var(--main-color);margin-bottom:10px}
.cm-btn-clr{background-color:#7687b7}
.cm-btn-cpy{background-color:#c16c6c}
.cm-btn:active,.cm-btn:hover,.parser:active,.parser:hover,.cm-btn:focus,.button-group button:disabled,.parser:focus{opacity:.9}
.cm-btn-clr:active,.cm-btn-clr:hover{opacity:.9}
.cm-btn-cpy:active,.cm-btn-cpy: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)}
.checkbox{display:none}
.cmbutton{display:grid;grid-template-columns:1fr 1fr;width:calc(100% - 40px);position:absolute;bottom:0}
.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-color)}
.cm-menus1:checked ~ .bbcode{display:none}
.cm-menus1:checked ~ #parser{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)}

/* css darkmode sesuaikan class (.drK) dengan templatemu agar dapat berfungsi */
.drK #cm-menu:before{border-color:var(--dark-background) transparent transparent transparent}
.drK #cm-menu,.drK #codes,drK #codes:active,.drK #codes:focus{border-color:rgba(255,255,255,.15);background-color:var(--dark-background);color:var(--dark-text)}

/* syantax komentar sesuaikan class (.comment-content) dengan template kalian agar dapat berfungsi */
.comment-content i[rel=pre],.comment-content i[rel=code]{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 i[rel=quote]{margin:0;padding:15px;border:1px dashed .ededef;border-radius:4px;font-size:13px;font-style:italic}
.comment-content i[rel=img]{border-radius:4px}

lanjut silakan salin kode di bawah ini dan letakkan di komen form template kalian, karena setiap template tidak akan selalu sama kodenya kalian bisa menemukan kode serupa <data:this.messages.blogComment/>

<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>
<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;'>
<span>Kode Tersalin!</span>
</div>
<span class='button-group'>
<button class='cm-btn' id='cvrt1' onclick='imgCvrt();this.disabled = true;'>image</button>
<button class='cm-btn' id='cvrt2' onclick='preCvrt();this.disabled = true;'>pre</button>
<button class='cm-btn' id='cvrt3' onclick='codeCvrt();this.disabled = true;'>code</button>
<button class='cm-btn' id='cvrt4' onclick='quoteCvrt();this.disabled = true;'>quote</button><br/>
<button class='cm-btn cm-btn-cpy' id='button-link' onclick='cdCopy();' style='display: none;'>Salin Kode!</button>
<button class='cm-btn cm-btn-clr' 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>

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

<script>/*<![CDATA[*/ /* coment fitur */ function cdClear(){var e = document.getElementById("codes");e.value = "",e.focus();for (var t = document.querySelectorAll("#cvrt1,#cvrt2,#cvrt3,#cvrt4"),c = 0;c < t.length;c++) t[c].disabled = !1,document.getElementById("btnInfo").style.display = "none",document.getElementById("button-link").style.display = "none"}function preCvrt(){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 codeCvrt(){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 imgCvrt(){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 quoteCvrt(){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 cdCopy(){document.querySelector('#codes').select(),document.execCommand('copy');document.querySelector('#btnInfo').style.display='block';setTimeout(function(){document.querySelector('#btnInfo').style.display='none'},2000)}/*]]>*/</script>

jika sudah silakan klik simpan.

Untuk Pengguna Template Median-Ui V.1.6

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau di atas kode </style>

/* Komentar Fitur */
#cm-menu{position:relative;font-family:var(--fontB);font-size:14px;background:var(--contentB);border-radius:4px;padding:20px 20px 50px 20px;margin:0 0 20px -2px;color:var(--bodyC);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:var(--contentB) transparent transparent transparent;position:absolute;bottom:-22px;left:25px}
#parser{position:relative;margin-top:20px}
#codes{border:1px solid var(--contentL);width:100%;height:150px;display:block;background-color:var(--synxBg);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}
.cm-btn{font-family:var(--fontB);font-size:12px;line-height:1.5;border-radius:2px;padding:1px 5px;border:none;color:var(--contentB);outline:0;cursor:pointer;background-color:var(--linkC);margin-bottom:10px}
.cm-btn-clr{background-color:#7687b7}
.cm-btn-cpy{background-color:#c16c6c}
.cm-btn:active,.cm-btn:hover,.parser:active,.parser:hover,.cm-btn:focus,.button-group button:disabled,.parser:focus{opacity:.9}
.cm-btn-clr:active,.cm-btn-clr:hover{opacity:.9}
.cm-btn-cpy:active,.cm-btn-cpy: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)}
.checkbox{display:none}
.drK #cm-menu:before{border-color:var(--darkBa) transparent transparent transparent}
.drK #cm-menu,.drK #codes,drK #codes:active,.drK #codes:focus{border-color:rgba(255,255,255,.15);background-color:var(--darkBa);color:var(--darkT)}
.cmbutton{display:grid;grid-template-columns:1fr 1fr;width:calc(100% - 40px);position:absolute;bottom:0}
.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(--linkC)}
.cm-menus1:checked ~ .bbcode{display:none}
.cm-menus1:checked ~ #parser{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.6 tidak ada css ini jadi saya tambahkan agar <i rel='code'></i> bisa berfungsi */
.cmC i[rel=code]{margin-top:1em;margin-bottom:1em;font-style:normal;line-height:inherit;padding:20px}
.cmC i[rel=code]::before{display:block;width:auto}
.cmC i[rel=code]::before{content:'</>';display:flex;justify-content:flex-end;position:absolute;right:0;top:0;width:100%;background:inherit;color:var(--synxGray);font-size:10px;padding:0 10px;z-index:2;line-height:30px}
.cmC i[rel=code]{display:block;position:relative;font-family:var(--fontC);font-size:13px;line-height:1.6em;border-radius:3px;background:var(--synxBg);color:var(--synxC);padding:30px 20px 20px;margin:1.7em auto; -moz-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none; overflow:auto;direction:ltr;white-space:code}

lanjut silakan silakan cari kode serupa dan ganti sesuai petunjuk di bawah ini.

<!-- cari kode seperti ini -->

<div id='commentForm'>
    <!--[ Comment message ]-->
       <b:if cond='data:this.messages.blogComment != &quot;&quot;'>
          <div class='cmMs note'>
            <data:this.messages.blogComment/>
          </div>
        </b:if>
        
<!-- ubah menjadi -->

<div id='commentForm'>
    <!--[ Comment message ]-->
       <!--<b:if cond='data:this.messages.blogComment != &quot;&quot;'>
          <div class='cmMs note'>
            <data:this.messages.blogComment/>
          </div>
        </b:if>-->
<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>
<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;'>
<span>Kode Tersalin!</span>
</div>
<span class='button-group'>
<button class='cm-btn' id='cvrt1' onclick='imgCvrt();this.disabled = true;'>image</button>
<button class='cm-btn' id='cvrt2' onclick='preCvrt();this.disabled = true;'>pre</button>
<button class='cm-btn' id='cvrt3' onclick='codeCvrt();this.disabled = true;'>code</button>
<button class='cm-btn' id='cvrt4' onclick='quoteCvrt();this.disabled = true;'>quote</button><br/>
<button class='cm-btn cm-btn-cpy' id='button-link' onclick='cdCopy();' style='display: none;'>Salin Kode!</button>
<button class='cm-btn cm-btn-clr' 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>

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

<script>/*<![CDATA[*/ /* coment fitur */ function cdClear(){var e = document.getElementById("codes");e.value = "",e.focus();for (var t = document.querySelectorAll("#cvrt1,#cvrt2,#cvrt3,#cvrt4"),c = 0;c < t.length;c++) t[c].disabled = !1,document.getElementById("btnInfo").style.display = "none",document.getElementById("button-link").style.display = "none"}function preCvrt(){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 codeCvrt(){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 imgCvrt(){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='image'>")).replace(/$/,"</i>"),e.value = t,e.focus(),document.getElementById("button-link").style.display = "inline-block")}function quoteCvrt(){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 cdCopy(){document.querySelector('#codes').select(),document.execCommand('copy');document.querySelector('#btnInfo').style.display='block';setTimeout(function(){document.querySelector('#btnInfo').style.display='none'},2000)}/*]]>*/</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:
www.idnxmus.com