Cara Membuat Pesan Komentar Dengan Parse Tools di Template Median UI 1.6

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

Pada artikel sebelumnya saya sudah membahas tentang Cara Membuat Pesan Komentar Dengan Tools Parse di Blogger, tapi sekarang saya membuat artikel serupa tapi hanya untuk template median ui 1.6. Kenapa harus median ui? Karena median ui adalah salah satu template terbaik yang hampir semua blogger menggunakan template median ui.

Setelah saya mencoba memahami kode dari template median ui ini ternyata memiliki class yang berbeda, jadi jika kalian menggunakan pesan komentar dengan tools parse di artikel sebelumnya maka alhasil tidak akan work.

Pada artikel sebelumnya sudah saya jelaskan bahwa pesan komentar dengan tools parse ini sangat cocok sekali untuk niche tutorial karena pengunjung yang ingin memahami artikel dari kalian bisa bertanya dengan mudah karena bisa memasukan kode dan gambar ke dalam pesan komentar.

Untuk demonya kalian bisa lihat di kolom komentar blog ini atau bisa lihat gambar di bawah ini:

Untuk pemasangannya pun sama saja seperti pada artikel sebelumnya, hanya saja karena setiap template memiliki kode yang berbeda jadi saya rubah bagian classnya.

Nah, buat kalian yang ingin menyesuaikan dengan kode template kalian harus bisa sedikitnya menguasai kode pada template yang kalian miliki.

Baik buat user median ui 1.6 yang memasang pesan komentar dengan tools parse ini silahkan ikuti langkahnya di bawah ini

---

Cara Membuat Pesan Komentar Dengan Parse Tools di Template Median UI 1.6 

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

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

• Cari kode seperti di bawah 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>

• Jika sudah ketemu hapus kode tersebut lalu ganti dengan kode di bawah 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>-->
<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 salin kode di bawah ini lalu 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='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>

• Simpan tema kalian dan selesai. 

Sekian dulututorial singkat tentang Cara Membuat Pesan Komentar Dengan Parse Tools di Template Median UI 1.6 semoga bermanfaat dan terimakasih sudah berkunjung.

Baca juga :

Go to Link