Cara Modifikasi Tampilan Komentar Template Evo Magz

Iseng – Iseng Moodifikasi Template Evo Magz lagi, namun kali kali ini bab yang ingin Saya rubah/modifikasi yakni bab tampilan komentar, baik untuk tampilan komentar biasa maupun tampilan komentar dengan blok bermasukang. Tampilan komentar yang di maksud disini yakni tampilan/background warna untuk kolom komentar menyerupai pada artikel Teknik cepatdangampang Membuat Blok Warna Dalam Postingan Blog, tapi bedanya disini kita tidak perlu melaksanakan penambahan tapi spesialuntuk melaksanakan modifikasi atau merubah yang sudah ada saja

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

 A. Tampilan Komentar

 Untuk tampilan komentar sendiri Saya spesialuntuk merubah warnanya menjadi warna kuning dengan border 1 px dotted dengan warna putih. Dotted maksudnya yakni garis putus – putus

 B. Tampilandengan blok bermasukang 

Untuk tampilan komentar dengan blok bermasukang Saya spesialuntuk mengganti warna backgroundnya menjadi warna biru

 C. Tampilan untuk Foto/Avatar komentar 

Saya spesialuntuk menambahkan border 2 px dengan warna hitam pada bab foto pengunjung yang berkomentar

Tips
Teknik yang paling praktis untuk memodifikasi sebuah template khususnya yang bekerjasama dengan tampilan/CSSnya, kita sanggup memakai inspek element yang ada di firefox, kemudian kita klik kanan pada bab yang akan di modifikasi kemudian 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, kemudian hapus properti/isi class sebelumnya dan gantikan dengan properti CSS yang sudah di modifikasi dari mode inspek elemen sebelumnya.

Berikut ini yakni Teknik Modifikasi Tampilan Komentar Template Evo Magz

 1. Seperti biasa, kita masuk terlebih lampau ke mode Edit HTML

 2. Untuk melaksanakan perubahan menyerupai pada point A .

     Perhatikan/cari susunan css diberikut

 /*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 instruksi warna pada bab #dbf625; sedangkan untuk warna border, Anda sanggup merubah instruksi warna #0e0101; kemudian Anda juga sanggup merubah properti dotted menajdi “solid” biar garisnya tidak terputus – putus.

 3. Untuk melaksanakan perubahan menyerupai pada point B, carilah susunan kode 
     diberikut

  /*Untuk Tampilan Komen blok bermasukang */  .comments .comments-content .inline-thread {  background: #50a6e6;  border: 1px solid #f0f0f0;  padding: 15px;  margin: 0; } 

Silahkan lakukan perubahan menyerupai yang sudah saya jelaskan pada langkah 2

4. Terakhir untuk Point C, Anda sanggup mencari susunan CSS menyerupai dibawah ini

 /*Untuk Tampilan Foto Avatar Comment */  .comment .avatar-image-container {  background: #fff;  border: 2px solid #0e0101;  overflow: hidden;  padding: 6px; } 

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

Properti diatas ialah properti CSS yang saya gunakan, silahkan Anda rubah sendiri sesuai keinginan, Bila Anda memakai properti CSS menyerupai milik saya tanpa melaksanakan perubahan, nanti tampilannya kurang lebih akan terlihat menyerupai gambar di bawah ini.

Dalam tutorial diatas, bahwasanya Saya tidak melaksanakan penambahan tapi melaksanakan perubahan, kita sanggup saja menambahkan properti lain menyerupai misal  border-radius: 10px; pada class .comments .comment-block {  supaya tampilannya mempunyai imbas melingkanr atau lengkungan pada box komentar menyerupai terlihat pada gambar di bawah ini. 

Atau juga kita sanggup melaksanakan penambahan properti/efek shadow pada kolom komentar. contohnya dengan melaksanakan penambahan properti diberikut 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 alhasil terlihat menyerupai gambar dibawah ini, akan ada sedikit imbas shadow hitam pada kolom komentar

Untuk border radius sendiri sanggup didiberi 1 s.d 4 nilai sehingga membuat lengkungan pada tampilan kolom komentar memiliki lengkungan yang tidak sama sesuai dengan nilai yang sudah kita desfinisikan. contohnya dalam template evo magz terdapat class menyerupai diberikut :

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

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

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

Bila Anda memakai CSS seperti referensi diatas, maka nanti hasil/tampilannya akan terlihat menyerupai gambar dibawah ini.

 
Untuk lebih jelasnya terkena nilai border radius sanggup Anda lihat contohnya di W3School

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

Share :