Cara Modifikasi Tampilan Pesan Komentar Pada Blog
| Setelah sebelumnya saya sudah menciptakan tutorial cara menciptakan show and hide pada komentar blog, pada kesempatan kali ini saya akan mengembangkan tutorial cara untuk merubah tampilan pesan komentar yang berada dibawah atau diatas komentar blog.
Pesan komentar pada blog ini sanggup sahabat gunakan menulis peraturan komentar pada blog sobat.
sanggup dipakai untuk menyapa pengunjung sebelum memperlihatkan komentar.
selain itu juga sanggup meningkatkan interaksi pengunjung blog sahabat terhadap setiap postingan yang sahabat tulis di blog sobat,
Nah bisanya tampilan pesan komentar bawaan blogger biasa saja, kurang berkesan dan kurang menarik.
Oleh alasannya yakni itu..
sahabat sanggup memodifikasi tampilan pesan komentar biar terlihat lebih menarik dan elegan juga untuk menarik perhatian pengunjung biar mereka memperlihatkan opini terkait postingan sobat.
Lalu bagaimana cara untuk memodifikasi tampilan pesan komentar pada blog?
Tanpa bertele-tele mari kita simak tutorial cara merubah tampilan pesan komentar blog:
Cara Modifikasi Tampilan Pesan Komentar Pada Blog
Perhatian:
Silahkan ikuti step by step cara merubah tampilan pesan komentar pada blog biar tidak terjadi kesalahan.
Back up terlebih dahulu Template sahabat kalau ada kesalahan sanggup dikembalikan ke awal
Pertama:
Masuk Ke Blog-Template-Edit HTML
Kedua:
Cari aba-aba ]]></b:skin>
Kemudian letakan aba-aba dibawah ini diatasnya
/* Pesan Komentar */ .pesan-komentar{ background:#fff; padding:0; width:auto; margin:10px auto 0 auto; line-height:normal; position:relative; font-weight:400; color:#888; box-shadow:inset 0 0 1px 0 #aaa; } .pesan-komentar h5{ font-size:14px; margin:0; background:#f8695f; color:#fff; padding:15px 20px; font-weight:700; position:relative; text-transform:uppercase; overflow:hidden; } .pesan-komentar h5:after{ display:inline-block; content:"\f121"; font-family:fontAwesome; font-style:normal; font-weight:normal; font-size:18px; background-color:#e85e54; color:#fff; top:0; right:0; padding:15px 20px; position:absolute } .pesan-komentar .strike{ text-decoration:line-through; display:inline; padding:0; } .pesan-komentar ul{ padding:20px } .pesan-komentar ul li{ list-style:none; padding:5px 0; } .pesan-komentar ul li:first-child{ padding:0 0 5px 0; } .pesan-komentar ul li:last-child{ padding:5px 0 0 0; } .pesan-komentar ul li code{ font-family:Consolas,Monaco,'Andale Mono',monospace; white-space:initial; word-spacing:normal; word-break:normal; hyphens:none; color:#888; } Ketiga:
Cari aba-aba berikut:
<p><data:blogCommentMessage/></p>
Biasanya pada setiap template mempunyai 4 aba-aba serupa, namun kita hanya akan merubah aba-aba yang ke2 dan ke4 saja.
Setelah menemukan aba-aba barusan <p><data:blogCommentMessage/></p>
kurang kebih tampilannya ibarat pada gambar dibawah ini:
Keempat:
Tambahkan aba-aba berikut diatas aba-aba yang tadi:
<div id='threaded-comment-form'> ...kode di atas... </div> Sehingga balasannya akan menjadi sebagai berikut:
Note:
Lakukan langkah keempat untuk aba-aba no 4
Kelima:
Kemudian letakan aba-aba dibawah ini sempurna diatas kode
<p><data:blogCommentMessage/></p> ke-2 dan ke-4
<div class="pesan-komentar"> <h5>Catatan Sebelum Berkomentar</h5> <ul> <li>Harap berkomentar sesuai dengan judul artikel.</li> <li>Tidak diperbolehkan untuk mempromosikan barang atau berjualan.</li> <li>Tidak perlu nulis link di komentar, yang sudah komentar akan saya kunjungi balik lewat profil anda.</li> <li><i>*Berkomentarlah dengan baik, Kepribadian Anda tercemin ketika berkomentar.</i></li> </ul> </div> Sehingga balasannya akan menjadi ibarat ini:
Note:
Lakukan hal yang sama untuk aba-aba ke4
Terakhir:
Temukan aba-aba berikut:
document.getElementById(domId).insertBefore(replybox, null);
Setelah ketemu silahkan ganti aba-aba tersebut dengan aba-aba dibawah ini:
document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null); 
Paling akhir:
Jangan lupa save dan lihat hasilnya.
Nah, hingga disini sahabat sudah berhasil merubah tampilan pesan komentar pada blog sobat.
Demikian tutorial Cara Modifikasi Tampilan Pesan Komentar Pada Blog yang sanggup saya share.
kalau masih ada yang ingin ditanyakan silahkan tuliskan dikolom komentar. Sumber https://www.katamastah.com/
