Cara Modifikasi Tampilan Komentar Template Evo Magz

Iseng – Iseng Moodifikasi Template Evo Magz lagi, namun kali kali ini bagian yang ingin Saya rubah/modifikasi adalah bagian tampilan komentar, baik untuk tampilan komentar biasa maupun tampilan komentar dengan blok bersarang. Tampilan komentar yang di maksud disini adalah tampilan/background warna untuk kolom komentar seperti pada artikel Cara Mudah Membuat Blok Warna Dalam Postingan Blog, tapi bedanya disini kita tidak perlu melakukan penambahan tapi hanya melakukan modifikasi atau merubah yang sudah ada saja

Seperti biasa yang perlu kita lakukan hanyalah merubah atau menambah properti CSS yang sudah ada sesuai keinginan kita. Ada beberapa hal yang akan Saya rubah diantaranya :

 A. Tampilan Komentar
 Untuk tampilan komentar sendiri Saya hanya merubah warnanya menjadi warna kuning dengan border 1 px dotted dengan warna putih. Dotted maksudnya adalah garis putus – putus

 B. Tampilandengan blok bersarang 
Untuk tampilan komentar dengan blok bersarang Saya hanya mengganti warna backgroundnya menjadi warna biru

 C. Tampilan untuk Foto/Avatar komentar 
Saya hanya menambahkan border 2 px dengan warna hitam pada bagian foto pengunjung yang berkomentar

Tips
Cara yang paling gampang untuk memodifikasi sebuah template khususnya yang berhubungan dengan tampilan/CSSnya, kita bisa menggunakan inspek element yang ada di firefox, kemudian kita klik kanan pada bagian yang akan di modifikasi lalu perhatikan susunan CSSnya, rubah properti warna yang ada dari mode inspek elemen. Terakhir klik kanan pada properti CSS > Klik Copy Rule/Salin Rule, pastekan ke notepad dan copy class yang ada selanjutnya pastekan di pencarian edit HTML, lalu hapus properti/isi class sebelumnya dan gantikan dengan properti CSS yang sudah di modifikasi dari mode inspek elemen sebelumnya.

 1. Seperti biasa, kita masuk terlebih dahulu ke mode Edit HTML
 2. Untuk melakukan perubahan seperti pada point A .
     Perhatikan/cari susunan css berikut

/*Untuk tampilan komen biasa */
.comments .comment-block {
 position: relative;
 background: #dbf625;
 padding: 15px;
 margin-left: 60px;
 border: 1px dotted #0e0101;
}
Untuk merubah warna background, silahkan rubah kode warna pada bagian #dbf625; sedangkan untuk warna border, Anda bisa merubah kode warna #0e0101; lalu Anda juga bisa merubah properti dotted menajdi “solid” agar garisnya tidak terputus – putus.

 3. Untuk melakukan perubahan seperti pada point B, carilah susunan kode 
     berikut


/*Untuk Tampilan Komen blok bersarang */

.comments .comments-content .inline-thread {
 background: #50a6e6;
 border: 1px solid #f0f0f0;
 padding: 15px;
 margin: 0;
}

Silahkan lakukan perubahan seperti yang sudah saya jelaskan pada langkah 2

4. Terakhir untuk Point C, Anda bisa mencari susunan CSS seperti dibawah ini

/*Untuk Tampilan Foto Avatar Comment */

.comment .avatar-image-container {
 background: #fff;
 border: 2px solid #0e0101;
 overflow: hidden;
 padding: 6px;
}

Untuk melakukan perubahan pada border, Anda bisa merubah properti border: 2px solid #0e0101; 

Properti diatas merupakan properti CSS yang saya gunakan, silahkan Anda rubah sendiri sesuai keinginan, Bila Anda menggunakan properti CSS seperti milik saya tanpa melakukan perubahan, nanti tampilannya kurang lebih akan terlihat seperti gambar di bawah ini.

hasil modifikasi

Dalam tutorial diatas, sebenarnya Saya tidak melakukan penambahan tapi melakukan perubahan, kita bisa saja menambahkan properti lain seperti misal  border-radius: 10px; pada class .comments .comment-block {  supaya tampilannya memiliki efek melingkanr atau lengkungan pada box komentar seperti terlihat pada gambar di bawah ini. 

menambahkan border radius pada kolom komentar

Atau juga kita bisa melakukan penambahan properti/efek shadow pada kolom komentar. Contohnya dengan melakukan penambahan properti berikut box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); pada class .comments .comment-block {

Nanti hasilnya terlihat seperti gambar dibawah ini, akan ada sedikit efek shadow hitam pada kolom komentar


menambahkan box shadow pada kolom komentar

Untuk border radius sendiri bisa diberi 1 s.d 4 nilai sehingga membuat lengkungan pada tampilan kolom komentar memiliki lengkungan yang berbeda sesuai dengan nilai yang telah kita desfinisikan. Contohnya dalam template evo magz terdapat class seperti berikut :

.comments .comments-content .inline-thread {
    background: #54e650;
    border: 1px solid #f0f0f0;
    padding: 15px;
    margin: 0;
   
}


Maka nanti Anda bisa tambahkan nilai atau properti  border-radius: 15px 70px;  pada isi class, nanti jadi scriptnya akan terlihat seperti dibawah ini

 .comments .comments-content .inline-thread {
    background: #54e650;
    border: 1px solid #f0f0f0;
    padding: 15px;
    margin: 0;
    border-radius: 15px 70px;
}


Bila Anda menggunakan CSS seperti contoh diatas, maka nanti hasil/tampilannya akan terlihat seperti gambar dibawah ini.

penambahan border radius
 
Untuk lebih jelasnya mengenai nilai border radius bisa Anda lihat contohnya di W3School

Silahkan berkreasi sendiri sesuai keinginan Anda. Selamat mencoba dan semoga berhasil.

32 Responses to "Cara Modifikasi Tampilan Komentar Template Evo Magz"

  1. Menarik untuk di coba nih kang agar tidak jenuh kaena itu itu saja :) tapi masih di bingungkan dengan kode nya nih kang :)

    ReplyDelete
    Replies
    1. Benar kang biar enggak bosen,, sama halnya kalau bosen sama tampilan istri,, maka bisa melakukan modifikasi sang istri biar tampilannya enggak ngebosenin :D

      Delete
    2. emng udh punya istri mas?? =)) hahaha

      Delete
    3. jangan bilang gitu mas sama yang belum punya istri, entar minder si mas efensi atuh

      Delete
    4. Wah boleh juga tuh di pake buat ngedit tampilan pacar biar gak membosankan :D tahu kode nya kang ?

      Mba Rahayu ketawa nya puas baget tuh..

      Mas Ifrod tahu aja kalau saya minder karena belum punya istri :D

      Delete
  2. Tampilan widget komentar Evo Magz memang keren banget. Sayangnya saya tidak memakai template ini, mungkin lain waktu bisa saya coba:)Terima kasih tutornya..

    ReplyDelete
    Replies
    1. Memang keren... karena sudah di modifikasi, template evo magz memang bisa disesuaikan dengan keinginan pengguna... hanya tinggal merubah atau memodifikasi yang sudah ada...

      Delete
  3. Kalau warnanya sendiri bisa berapa macam kang ?

    ReplyDelete
    Replies
    1. bisa berbagai macam warna,,,,, sesuai warna - warna yang ada di alam dunia.. :v

      Delete
    2. luas banget ya warna warna duniaa.. :))
      subhanallah..

      Delete
  4. Kalau untuk komentar disqus bisa gak kang? Apahanya untuk temolate Evo Mag aza?

    ReplyDelete
  5. biar cakep kang..., dan juga biar betah komentarnya..., hehehe

    ReplyDelete
  6. warnanya ngjreng banget mas.. silaauu meenn :D
    request warna boleh gak mas? ganti merah biar makin ngjreng..hehe

    ReplyDelete
    Replies
    1. bales komen yang cewek aja ah....kalau untuk warna bisa di edit di bagian backgruond nya kali ya...Mas admin

      Delete
    2. inimah cuman contoh aja mba,,, entar juga dirubah lagi :D

      Delete
  7. Kalau kotak komentarnya warna warni gini sih jadi betah kalau mau koment

    ReplyDelete
  8. wis jadi tambah keren kang, ijin simpan dulu lah buat coba coba :D

    ReplyDelete
  9. wah mantap ...boleh ...boleh ..boleh ...ini akan menambah kolom komen lebih bervariasi ....Mas....apa lagi kalau pemodifan background nya sesuai warna templatenya....

    ReplyDelete
  10. alhamdulillah saya pake disqus mas, jadi gak perlu modif lagi mas.
    oh ya maaf mas jarang kesini, mohon maaf lahir batin.

    ReplyDelete
  11. Tampilan komentar berwarna
    Dilihat seindah bunga
    Bermanfaat kata-katanya
    Enak dibaca-baca...

    ReplyDelete
  12. jadi ini ya bagian - bagian yang di rubahnya supaya berubah

    ReplyDelete
  13. Wah keren nih, kapan2 coba2 , untuk mempercantik blog juga, dan semoga yang membaca artikelnya jga semakin menarik untuk memberikan komentar, karena kolom komentarnya bikin laper, hehehe

    ReplyDelete
  14. jadi keren tampilan komentarnya, kalo warna nya di rubah bisa kan ya

    ReplyDelete
  15. Jujur kang, saya masih belum minat untuk ganti tampilan komentar, agak jera kang, pernah utak atik HTML di komentar malah banyak yang error, maklum belum banyak tahu ilmunya..

    ReplyDelete
  16. lumayan keren, tapi sayangnya aku nggak pake Template Evo Magz

    ReplyDelete
  17. sudah lama gak otak atik template lagi hehe

    ReplyDelete
  18. Hallo mas, cara ilangin garis warna warni di bagian navbar evomagz gimana ya mas?

    ReplyDelete
  19. Bermanfaat sobat infonya , oh iya bila di ganti dengan kolom komentar Disqus ,blogger dan Facebook juga menambah kesan rapi...salam blogging

    ReplyDelete

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...