🔔 Aktifkan notifikasi disini Google News

Cara Membuat Widget Pesan Komentar, Popular Emoji, dan Parse Tool

Cara Membuat Widget Pesan Komentar, Popular Emoji, dan Parse Tool
Saifullah.id
 - Fitur Pesan Komentar + Popular Emoji + Tool Parse banyak dicari oleh para Blogger. Selain mempercantik tampilan blog, tentu juga akan menambah fasilitas yang dibutuhkan oleh pengunjung blog.

Request

Cara Membuat Widget Pesan Komentar, Popular Emoji, dan Parse Tool

ZVX_GAMING 34: Cara Membuat Widget Pesan Komentar, Popular Emoji, dan Parse Tool
Saifullah.id: Maaf ya bang, tutorialnya baru sempat dibuatkan seminggu kemudian.

Sebelum masuk ke tutorialnya, tidak ada salahnya kita mengetahui fungsi dari widget yang akan kita buat agar kita sadar bahwa apa yang akan kita pasang bermanfaat untuk blog kita.

Fungsi Pesan Komentar

Kotak pesan komentar berfungsi untuk menyarankan pembaca blog untuk mencentang kolom Beritahu Saya (Notify Me) agar saat komen mereka dibalas akan ada notifikasi pemberitahuan via email.

Fungsi Popular Emoji

Bagi pengguna smartphone, Popular Emoji di pesan komentar mungkin tidak berguna. Tapi bagi pengguna Desktop, fitur ini sayang membantu saat ingin menyisipkan emoji di komentar.

Mencari emoji di Laptop dan PC tidak semudah memasukkan emoji saat pakai HP. Oleh sebab itu, dengan adanya fitur Popular Emoji, siapapun bisa menggunakannya kapanpun dia mau.

Btw, Fitur ini nanti saya bikin responsive ya. Jadi Popular Emojinya hanya akan muncul di tampilan Desktop saja.

Fungsi Parse Tool

Parse Tool berguna untuk menambahkan kode HTML, CSS, dan Javascript di kolom komentar. Fitur ini juga dilengkap alat untuk mengubah tulisan menjadi Italic, membuat Quote, dan bisa untuk Upload Gambar.

Kelebihan widget yang saya buat dibanding Blogger lain tentu dari segi tampilan yang lebih menarik, karena dilengkapi aksen bayang, posisi simetris, icon, dan emoji yang memudahkan orang lain mengetahui fungsinya tanpa harus dibaca.


Langkah-Langkah dalam Membuat Pesan Komentar, Popular Emoji, dan Parse Tool

  1. Buka Dashboard Blogger
  2. Tekan Tema
  3. Klik Icon Segitiga 🔻
  4. Pilih Edit HTML
    Cara Membuat Pesan Komentar + Popular Emoji + Parse Tool

  5. Cari kode
    ]]></b:skin>
  6. Lalu letakkan kode CSS berikut tepat di atasnya ]]></b:skin>
    /* Komentar Fitur Saifullah.id */
    :root{--main-btn-color:#f09800;--copy-btn-color:#c16c6c;--clean-btn-color:#7687b7;--font-name:'Noto Sans',sans-serif}
    #saiful-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}
    .saiful-komens1:checked ~ .cmbutton .cmbutton1 .cmbutton-title, .saiful-komens2:checked ~ .cmbutton .cmbutton2 .cmbutton-title{border-top:5px solid var(--main-btn-color)}
    .saiful-komens1:checked ~ .bbcode{display:none}
    .saiful-komens1:checked ~ #parser{display:none}
    .saiful-komens2:checked ~ .pesan-komen{display:none}
    .saiful-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 #saiful-komen:before{border-color:var(--dark-background) transparent transparent transparent}
    .drK #saiful-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}
  7. Kemudian, cari kode ini
    <div id='commentForm'>
  8. Maka kalian akan menemukan kode ini
    <div id='commentForm'>
      <!--[ Comment message ]-->
        <b:if cond='data:this.messages.blogComment != &quot;&quot;'>
          <div class='hidden cmMs note'>
            <data:this.messages.blogComment/>
          </div>
        </b:if>
  9. Copy Paste kode HTML berikut ini tepat di atas </b:if> 
    <div id='saiful-komen'>
    <input checked='' class='saiful-komens1 hidden' id='offsaiful-komen1' name='accordion-menu' type='radio'/>
    <input class='saiful-komens2 hidden' id='offsaiful-komen2' name='accordion-menu' type='radio'/>
    <div class='cmbutton'>
    <div class='cmbutton1'>
    <label class='cmbutton-title' for='offsaiful-komen1'>💬 Pesan Komentar</label>
    </div>
    <div class='cmbutton2'>
    <label class='cmbutton-title' for='offsaiful-komen2'>📁 Tambah Media</label>
    </div>
    </div>
    <div class='pesan-komen'>
    <b:if cond='!data:blog.isMobileRequest'>
    <b>Popular Emoji</b><br/>😊😁😅🤣🤩🥰😘😜😔😥😪😭😱🤭😇🤲🙏👈👉👆👇👌👍&#10084;🤦&#8205;&#9794;&#65039;&#10060;&#9989;&#11088;<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>Kode 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;'>🖼&#65039; Foto</button><br/>
    <button class='cm-btn cm-btn-cpy' id='button-link' onclick='cdCopy();' style='display: none;'>&#9986;&#65039; Salin Kode</button>
    <button class='cm-btn cm-btn-clr' onclick='cdClear();'>🗑&#65039; Bersihkan</button>
    <button class='cm-btn' onclick='window.open(&apos;https://imgbb.com/upload&apos;, &quot;_blank&quot;)' 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>
  10. Berikutnya, cari kode
    </body>
  11. Letakkan kode Javascript ini tepat di atas </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,"&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>
  12. Terakhir, tekan Simpan Tema
Demikian Cara Pasang Widget Pesan Komentar dengan tambahan fitur Popular Emoji dan Parse HTML Tool. Semoga bermanfaat.

Mau donasi lewat mana?

SeaBank - Saifullah (9016-9529-0071)

BRI - Saifullah (05680-10003-81533)

BCA Blu - Saifullah (007847464643)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.
Seorang Guru Bahasa Inggris, Kreator Digital, Editor, Publisher, Advertiser, Blogger, Youtuber, Distributor, Desain Grafis, Web Developer, dan Programmer.

11 komentar

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐
  1. Mantap bang thank👍.sekalian reques lagi cara ubah posisi tanggal dan dibacanya bang 🙏
  2. Disponibilizar Widget popular post code? Plis
    1. Visit this https://m.saifullah.id/product/jasa-pasang-widget-popular-post-blogger/
  3. Mas ubah gaya author, tanggal update, dan estimated read yang dibawah judul kyak imagz bisa ga
    1. Bisa mas
  4. Aku udah ikutin semua stepnya, tapi gak berhasil ya bg? boleh bantu pliss hah.
    Sekalian mau tanya, kenapa Judul postingan jadi double seperti yg aku lingkarin ini ya kak, mohon sarannya.
    1. Kalau sudah mengikuti tutorialnya dengan benar, harusnya berhasil bang. Kalau butuh bantuan editing, tinggal pesan jasa kami aja bang. https://m.saifullah.id/product/tool-komentar/
  5. Admin
    Komentar ini telah dihapus oleh pengarang.
  6. Mas, cara hapus deskripsi penelusuran postingan di bawah judul gimana ya? Punya saya deskripsi malah muncul di bawah postingan jadi kurang rapi menurut saya. Mohon tutor ya ya mas, saya pakai template Plus UI.
    Linknya ini mas.https://ibb.co/fY71kh2
    1. Ini mas, franszi(.)com
  7. Mas, buatkan tutor cara membuat mode gelap & terang pada plus ui mengikuti system device pengguna secara otomatis.
Centang Beri Tahu Saya untuk mendapatkan notifikasi ketika komentar kamu sudah di jawab.
Parse:

Gambar Quote Pre Kode



  • Home


  • Follow


  • MENU


  • Share


  • Comment
Cookie Consent
Kami menyajikan cookie di situs ini untuk menganalisis lalu lintas, mengingat preferensi Anda, dan mengoptimalkan pengalaman Anda.
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Harap sambungkan ke internet dan mulai menjelajah lagi.