Cara Membuat Tampilan Komentar Penulis Blog Berbeda (No Plugin)

Tampilan/desain komentar penulis blog (blog author) yang berbeda dengan komentar pengunjung (memberikan highlight) akan membuat pengunjung l...

Tampilan/desain komentar penulis blog (blog author) yang berbeda dengan komentar pengunjung (memberikan highlight) akan membuat pengunjung lebih mudah membedakan dan dengan cepat menentukan komentar penulis yang ingin segera dibacanya. Jika anda pengguna WordPress dan Blogger, anda mungkin sudah lazim menemui tampilan desain semacam ini, sama seperti yang saya tampilkan. Jika di Blogger kita harus menggunakan setidaknya berbagai hack CSS dan bahkan javascript, maka di WordPress kita dimanjakan dengan plugin-plugin yang bisa melakukan pekerjaan sejenis dan membuat tangan kita bersih dari utak-atik kode.

Cara Membuat Tampilan Komentar Penulis Blog Berbeda (No Plugin)
Namun demikian, penggunaan plugin berlebihan sebenarnya tidak baik, terutama terhadap server. Setiap anda menambahkan plugin, maka beban server semakin bertambah. Oleh karena itu, penggunaan plugin wajib diminimalisir. Apalagi sekedar untuk mengatur desain komentar penulis blog yang sebenarnya hanya membutuhkan beberapa baris kode saja, kita tidak perlu menambahkan plugin yang prosesnya jauh lebih berat dari sebaris kode PHP dan CSS.

Jika anda masih tidak yakin, coba cek pengaruh plugin-plugin anda terhadap performa blog/web WordPress anda dengan mengecek beban plugin secara mudah, lihat bagaimana plugin-plugin yang anda gunakan dapat memberikan pengaruh signifikan apabila tidak dipilih dengan hati-hati.

Jadi, cara untuk menampilkan komentar penulis blog berbeda dengan komentator lain (pengunjung) tidak memerlukan plugin yang menyedot banyak resource server. Cukup ikuti cara mudah berikut:

Pertama, lakukan hack pada comment dan mengubah perintah untuk menarik id penulis secara otomatis menjadi manual, dengan cara menggunakan if (conditional). Buka comments.php (Appearance > Editor > comments.php), cari baris ini:

Note: Arahkan mouse ke atas kode. Klik “view source” untuk mengcopy code di halaman blank baru atau langsung klik “copy to clipboard” disebelah kanannya.
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>"></li>
Kemudian hapus dan ganti dengan kode berikut:
<li class="<?php if ($comment->user_id == 1) $oddcomment = "commentpenulis"; echo $oddcomment; ?>"></li>
Perhatikan pada user_id == 1. Angka satu adalah id pengguna, biasanya pemilik dan penulis blog tunggal memiliki id 1. Jika blog/web anda memiliki multi authors, cara cek id cukup mudah. Buka dasboard > users. Kemudian arahkan mouse di atas link “edit” di bawah profil user. Lihat informasi url di bagian bawah browser. Contoh: http://syaircinta.com/wp-admin/user-edit.php?user_id=42… Jika anda ingin memberi hightlight pada semua penulis, tuliskan masing-masing id dipisahkan dengan tanda koma. Contoh:
user_id == 1,2,3,4,…
Save template comments.php, kemudian buka file style.css (Appearance > Editor > style.css).
Saatnya memberikan tampilan pada komentar penulis blog. Di sini saya tidak akan memberikan contoh desainnya, sebab setiap theme tentu akan berbeda-beda jika menggunakan hasil tampilan yang sama.

Jadi desainnya saya serahkan pada anda. Saya hanya akan memberikan contoh tampilan background. Copy CSS berikut, kemudian ubah warna background dan jika perlu tambahkan berbagai macam properti CSS untuk membuat desain sesuai keinginan anda.
.commentpenulis {background-color: #CBE6F6 !important;}
TroubleShooting
Perhatikan 3 poin berikut untuk memastikan apabila hack di atas tidak bekerja:

  • Jika tampilan tidak berubah karena CSS diabaikan, tambahkan !important di setiap akhir properti seperti contoh di atas.
  • Jika anda menggunakan plugin caching, bersihkan (clear cache) terlebih dahulu, kemudian reload/refresh halaman.
  • Cek dan pastikan ID yang anda masukkan sudah benar.

Well, that’s it.

COMMENTS

Name

Aceh,23,Adsense,8,BBM,3,Biography,1,Bitcoin,4,Blog,21,Blogger,12,Blogging,55,Business,14,Cerita,3,CPNS,1,Delicious,1,Design,1,DeviantART,1,Digg,1,Dollar,3,Dunia,13,Facebook,5,Flickr,1,Friendster,1,Gambar,2,Game,34,Gmail,1,Google+,4,Hosting,1,Inspirasi,2,Instagram,1,Internet,13,Interview,11,Kesehatan,2,LinkedIn,1,Makalah,7,Marketing,12,Meme,8,Money,3,Motivasi,2,MySpace,1,Outlook,1,Path,1,Pendidikan,10,Pengetahuan,4,Pinterest,1,Plugin,5,PNS,1,Reddit,1,Review,4,Seo,53,Smartphone,5,Social Media,38,Sukses,3,Sumatera Barat,16,Sumatera Utara,3,Templates,1,Tips,6,Toko Online,3,Top10,18,Tumblr,1,Tutorial,29,Tutorial Blog,146,Twitter,3,Umum,9,Vimeo,1,VK,1,Weebly,1,WhatsApp,1,Widget,55,Wisata,4,WordPress,14,Yahoo,1,Youtube,3,
ltr
item
Mas Da Bang: Cara Membuat Tampilan Komentar Penulis Blog Berbeda (No Plugin)
Cara Membuat Tampilan Komentar Penulis Blog Berbeda (No Plugin)
https://3.bp.blogspot.com/-GaXEBPc2DWc/W_FXkgXWB8I/AAAAAAAAP3o/Ps29BxBnSnEu6d_z1-QhfI9w-NzIjZ0XACLcBGAs/s1600/WordPress-2.png
https://3.bp.blogspot.com/-GaXEBPc2DWc/W_FXkgXWB8I/AAAAAAAAP3o/Ps29BxBnSnEu6d_z1-QhfI9w-NzIjZ0XACLcBGAs/s72-c/WordPress-2.png
Mas Da Bang
https://blog.itapuih.com/2018/11/cara-membuat-tampilan-komentar-penulis.html
https://blog.itapuih.com/
https://blog.itapuih.com/
https://blog.itapuih.com/2018/11/cara-membuat-tampilan-komentar-penulis.html
true
2732475762120586724
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy