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. 

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

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.

PLEASE SHARE

Share it Share it Tweet Share it Pin it

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple