Cara Membuat Pesan Komentar Dengan Tools Parse di Blogger

Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial cara membuat pesan komentar dengan tools parse di blogger dengan mudah.

Tutorial ini sangat di nantikan oleh seseorang yang sudah req melalui halaman contact, buta kalian ingin req tutorial seputar blogger silahkan hubungi admin melalui halaman contact di blog ini atau halaman facebook kami, jika req kalian menarik maka akan di buatkan tutorialnya.

Buat kalian yang memiliki blog dengan niche tutorial sangat cocok memiliki pesan komentar dengan tools parse ini, karena sangat membantu pengunjung jika pengunjung mengalami kesulitan pada tutorial yang kalian bagikan.

Pesan komentar dengan tools parse ini sangat membantu sekali karena selain bisa menyisipkan kode pada pesan komentar, Pesan komentar dengan tools parse ini juga bisa mengupload gambar ke dalam komentar sehingga pengunjung bisa bertanya dengan bebas dan kalian juga bisa mengerti maksud pertanyaan dari pengunjung.

Dengan memasang Pesan komentar dengan tools parse ini kalian tidak bersusah payah membuka halaman lain untuk memparse kodenya dan menulis manual tag seperti <i rel='pre'></i> karena kode akan di parse secara otomatis, maupun itu kode quote, pre, maupun gambar.

---

Cara Membuat Pesan Komentar Dengan Tools Parse di Blogger

• Silahkan kalian masuk ke blogger kalian lalu pilih tema dan edit html
• Salin kode di bawah ini lalu letakan di atas kode ]]></b:skin>

/* 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}

Sekarang kalian salin kode di bawah ini dan letakan di komen form

Catatan:
Karena setiap template memiliki kode berbeda silahkan kalian cari kode yang serupa atau mirip dengna kode ini <data:this.messages.blogComment/> atau kalian juga mencari tag Comment kalian

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

• Terakhir silahkan kalian salin kode di bawah ini dan letakan 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>

• Simpan template kalian dan selesai.

Sekian dulu tutorial singkat tentang Cara Membuat Pesan Komentar Dengan Tools Parse di Blogger semoga bermanfaat dan terimakasih sudah berkunjung.

Baca juga :

Go to Link