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.

Berikut ini adalah Cara Modifikasi Tampilan Komentar Template Evo Magz

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.

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.

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

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

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

Effendi Nurdiaman18 July 2016 at 13:48

Menarik untuk di coba nih kang agar tidak jenuh kaena itu itu saja :) tapi masih di bingungkan dengan kode nya nih kang :)
1. Ahmad Zaelani18 July 2016 at 14:12
  
  Benar kang biar enggak bosen,, sama halnya kalau bosen sama tampilan istri,, maka bisa melakukan modifikasi sang istri biar tampilannya enggak ngebosenin :D
2. Rahayu Wiandra18 July 2016 at 19:14
  
  emng udh punya istri mas?? =)) hahaha
3. Ifrod Maksum21 July 2016 at 22:32
  
  jangan bilang gitu mas sama yang belum punya istri, entar minder si mas efensi atuh
4. Effendi Nurdiaman28 July 2016 at 11:55
  
  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

Lin Vidia18 July 2016 at 14:30

Tampilan widget komentar Evo Magz memang keren banget. Sayangnya saya tidak memakai template ini, mungkin lain waktu bisa saya coba:)Terima kasih tutornya..
1. Ahmad Zaelani18 July 2016 at 14:35
  
  Memang keren... karena sudah di modifikasi, template evo magz memang bisa disesuaikan dengan keinginan pengguna... hanya tinggal merubah atau memodifikasi yang sudah ada...

Obat Herbal Jelly Gamat Gold G18 July 2016 at 14:55

thanks tutorialnya
Kang Nurul Iman18 July 2016 at 14:57

Kalau warnanya sendiri bisa berapa macam kang ?
1. Ahmad Zaelani18 July 2016 at 15:09
  
  bisa berbagai macam warna,,,,, sesuai warna - warna yang ada di alam dunia.. :v
2. Rahayu Wiandra18 July 2016 at 19:15
  
  luas banget ya warna warna duniaa.. :))
  subhanallah..

Maman Achman18 July 2016 at 17:02

Kalau untuk komentar disqus bisa gak kang? Apahanya untuk temolate Evo Mag aza?
Rival 3818 July 2016 at 18:44

biar cakep kang..., dan juga biar betah komentarnya..., hehehe
Rahayu Wiandra18 July 2016 at 19:15

warnanya ngjreng banget mas.. silaauu meenn :D
request warna boleh gak mas? ganti merah biar makin ngjreng..hehe
1. Trik Pos20 July 2016 at 23:26
  
  bales komen yang cewek aja ah....kalau untuk warna bisa di edit di bagian backgruond nya kali ya...Mas admin
2. Ahmad Zaelani21 July 2016 at 13:53
  
  inimah cuman contoh aja mba,,, entar juga dirubah lagi :D

Dwi Sugiarto19 July 2016 at 08:10

Kalau kotak komentarnya warna warni gini sih jadi betah kalau mau koment
1. Maman Achman21 July 2016 at 08:16
  
  tapi agak silau menurut saya mas...
2. Mangs aduls26 July 2016 at 09:36
  
  pake kaca mata mas. :D
3. Effendi Nurdiaman28 July 2016 at 11:56
  
  kacamata hitamk tepatnya :)