Cara Membuat Pesan Komentar Dengan Tool Parse HTML Di Blogger

Cara membuat pesan komentar dengan tools parse di blogger - Tutorial terpilih kali ini mengenai cara membuat pesan komentar dengan tools parse di blog. Kami membuat postingan tentang cara membuat pesan komentar dengan tools parse di blog karena mungkin ada yang mencari informasi cara membuat pesan komentar dengan tools parse di blogger dengan mudah di blog.

Tutorial cara membuat pesan komentar dengan tools parse di blogger bisa kalian pasang di blog mengunakan beberapa kode sederhana di bawah ini. Kode yang di butuhkan untuk memasang widget pesan komentar dengan tools parse di blog hanya perlu copy paste dari postingan 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> 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 pilih tema dan edit html salin css di bawah ini dan letakkan 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>

Terimakasih sudah membaca artikel kami tentang Cara Membuat Formulir Order Menuju Email Di Blogger. Kami membuat postingan ini karena mungkin ada yang mencari informasi tentang Membuat Pesan Komentar Dengan Parse Tool Cara Membuat Pesan Komentar Dan Code Parser pesan komentar dengan tools parse menggunakan html & css pesan komentar dengan tools parse di blogger Smoga bermanfaat..