Cara Mudah Membuat Widget Pesan Komentar, Popular Emoji, dan Parse Tool
January 08, 2024
Halo Sahabat Kang Rizky, berjumpa lagi ya di Blog yang sama ya, dalam kesempatan kali ini mimin akan berbagi Cara Mudah Membuat Widget Pesan Komentar, Popular Emoji, dan Parse Tool.
Fitur Pesan Komentar, Popular Emoji dan Tool Parse banyak dicari oleh para Publiser. Selain memperindah tampilan blog sahabat, tentu juga akan menambah fasilitas yang dibutuhkan oleh pengunjung blog tesebut.
Oh iya, Sahabat sebelum masuk ke tutorialnya, tidak ada salahnya sahabat mengetahui fungsi dari widget yang akan sahabat buat agar sahabat sadar bahwa apa yang akan sahabat pasang bermanfaat untuk blog sahabat sendiri.
Fungsi Pesan Komentar
Kotak pesan komentar adalah berfungsi untuk menyarankan pembaca blog untuk mencentang kolom Beritahu Kami atau pembaca (Notify) agar saat komen sahabat dibalas akan ada notifikasinya jadi lebih keren atau juga bisa pemberitahuan via email.biar cakep
Fungsi Popular Emoji
Bagi sahabat pengguna smartphone, Popular Emoji di pesan komentar kemungkinan tidak berguna. Tetapi bagi pengguna Desktop pastinya, fitur ini sudah pasti sangat membantu saat ingin menyisipkan emoji di komentar pada blognya.
Mencari emoji di Komputer PC dan Leptop tidak semudah memasukkan emoji saat menggunakan handpone. Oleh karena itulah, dengan adanya fitur terbaru ini yakni Popular Emoji, siapapun bisa menggunakannya kapanpun dia mau pada saat komentar mengunakan emoji ini.
Oh iya sahabat, Fitur ini nanti mimin pastinya bikin responsive ya. Jadi Popular Emojinya hanya akan muncul di tampilan Desktop saja supaya lebih maksimal dan enak saat dipandang.
Fungsi Parse Tool
Parse Tool adalah berguna untuk menambahkan code HTML, CSS, dan Javascript di pada komentar blog. Fitur ini juga sangat lengkap tools untuk mengubah tulisan menjadi Italic, membuat Quote, dan bisa untuk Upload Gambar juga ya sahabat.
Sahabat pada kelebihan widget yang mimin buat dibanding Blogger lain tentu dari segi tampilan yang lebih menarik lagi, karena dilengkapi aksen-aksen bayang, posisi simetris, icon, dan emoji yang memudahkan orang lain mengetahui fungsinya tanpa harus dibaca terlebih dahulu.
Inilah Langkah-Langkahnya dalam Membuat Pesan Komentar, Popular Emoji, dan Parse Tool Pada Blog.
- Buka Dashboard Blogger
- Tekan Tema
- Klik Icon Segitiga 🔻
- Pilih Edit HTML
- Cari kode
]]></b:skin>
- Kemudian letakkan code CSS berikut tepat di atasnya ]]></b:skin>
/* Komentar Fitur Kangrizky.com */
:root{--main-btn-color:#f09800;--copy-btn-color:#c16c6c;--clean-btn-color:#7687b7;--font-name:'Noto Sans',sans-serif}
#rizky-komen{position:relative;font-family:var(--font-name);font-size:14px;background:#fff;border-radius:8px;padding:10px 20px 65px;color:#333;margin:0 0 20px -2px;line-height:1.5em;box-shadow:0 5px 20px rgb(0 0 0 / 30%)}#saiful-komen:before{content:'';display:block;border:11px solid;border-color:#fff transparent transparent transparent;position:absolute;bottom:-22px;left:31px}
#parser{position:relative}
#codes{border:1px solid #ededef;width:100%;height:50px;display:block;background-color:#fafafa;border-radius:4px;font:400 11px 'Fira Mono',monospace;resize:none;margin:10px 0;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{border-radius:5px;border:none;color:white;background: #3291d1;padding:3px 5px;}
.cm-btn.cm-btn-clr {margin-top:5px}
.btn-xs{font-family:var(--font-name);font-size:12px;line-height:1.5;border-radius:5px;padding:3px 5px;border:none;color:#fff;outline:0;cursor:pointer}
.cm-btn-clr{background-color:#c12929}
.cm-btn-cpy{background-color:#22b52e}
.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);margin-top:10px;position:absolute;bottom:10px}
.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}
.rizky-komens1:checked ~ .cmbutton .cmbutton1 .cmbutton-title, .rizky-komens2:checked ~ .cmbutton .cmbutton2 .cmbutton-title{border-top:5px solid var(--main-btn-color)}
.rizky-komens1:checked ~ .bbcode{display:none}
.rizky-komens1:checked ~ #parser{display:none}
.rizky-komens2:checked ~ .pesan-komen{display:none}
.rizky-komens1:checked ~ .cmbutton .cmbutton1, .saiful-komens2:checked ~ .cmbutton .cmbutton2{background:rgba(23,191,99,.07)}
.pesan-komen{text-align:center}.pesan{text-align:left}
/* css darkmode sesuaikan class (.drK) dengan templatemu agar dapat berfungsi */
.drK #rizky-komen:before{border-color:var(--dark-background) transparent transparent transparent}
.drK #rizky-komen,.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}
- Lalu, cari code ini
<div id='commentForm'>
- Maka sahabat akan menemukan code ini
<div id='commentForm'>
<!--[ Comment message ]-->
<b:if cond='data:this.messages.blogComment != ""'>
<div class='hidden cmMs note'>
<data:this.messages.blogComment/>
</div>
</b:if>
- Copy Paste code HTML berikut ini tepat di atas </b:if>
<div id='rizky-komen'>
<input checked='' class='rizky-komens1 hidden' id='offrizky-komen1' name='accordion-menu' type='radio'/>
<input class='rizky-komens2 hidden' id='offrizky-komen2' name='accordion-menu' type='radio'/>
<div class='cmbutton'>
<div class='cmbutton1'>
<label class='cmbutton-title' for='offrizky-komen1'>💬 Pesan Komentar</label>
</div>
<div class='cmbutton2'>
<label class='cmbutton-title' for='offrizky-komen2'>📁 Tambah Media</label>
</div>
</div>
<div class='pesan-komen'>
<b:if cond='!data:blog.isMobileRequest'>
<b>Popular Emoji</b><br/>😊😁😅🤣🤩🥰😘😜😔😥😪😭😱🤭😇🤲🙏👈👉👆👇👌👍❤🤦‍♂️❌✅⭐<br/><br/>
</b:if>
<div class='pesan'>Centang <b>Beri Tahu Saya</b> untuk mendapatkan notifikasi ketika komentar kamu sudah di jawab.</div>
</div>
<div id='parser'>
<textarea id='codes' placeholder='Masukkan URL Foto/Script di sini, tekan tombol di bawah, dan Salin Kode ke kolom komentar.' spellcheck='false'/>
<div class='alert alert-success margin-bottom-20 collapse' id='btnInfo' role='alert' style='display: none;'>
<span>Code Tersalin</span>
</div>
<span class='button-group'>
Parse: <button class='cm-btn' id='cvrt2' onclick='preCvrt();this.disabled = true;'>💻 Script</button>
<button class='cm-btn' id='cvrt3' onclick='codeCvrt();this.disabled = true;'>📋 Italic</button>
<button class='cm-btn' id='cvrt4' onclick='quoteCvrt();this.disabled = true;'>💡 Quote</button>
<button class='cm-btn' id='cvrt1' onclick='imgCvrt();this.disabled = true;'>🖼️ Foto</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>
<button class='cm-btn' onclick='window.open('https://imgbb.com/upload', "_blank")' rel='nofollow noopener noreffer' title='Upload Gambar di Sini'><b>📲 UPLOAD FOTO</b></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>Gambar</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>Kode</span>
</span>
<div class='clear'/>
</div>
</div>
- Berikutnya, cari codenya
</body>
- Letakan code Javascript ini tepat diatas </body>
<script>/*<![CDATA[*/ /* coment fitur */ function cdClear(){var e = document.getElementById("codes");e.value = "",e.focus();for (var t = document.querySelectorAll("#cvrt1,#cvrt2,#cvrt3,#cvrt4,#cvrt5"),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,"&")),l.checked && (t = t.replace(/'/g,"'")),n.checked && (t = t.replace(/"/g,""")),o.checked && (t = t.replace(/</g,"<")),d.checked && (t = t.replace(/>/g,">")),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,"&")),l.checked && (t = t.replace(/'/g,"'")),n.checked && (t = t.replace(/"/g,""")),o.checked && (t = t.replace(/</g,"<")),d.checked && (t = t.replace(/>/g,">")),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>
- Terakhir, kemudian tekan Simpan Temanya ya
Demikian Cara Mudah Membuat Widget Pesan Komentar, Popular Emoji, dan Parse Tool, di postingan berikutnya mimin akan bagikan cara modifikasi Komentar menggunakan disquse agar tampil di dalam semua artikel yang pernah sahabat posting ya.
Jika informasi ini bermanfaat, Jangan lupa Share ya teman-teman, Terima Kasih.
