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.
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.
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.
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.
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
Menarik untuk di coba nih kang agar tidak jenuh kaena itu itu saja :) tapi masih di bingungkan dengan kode nya nih kang :)
ReplyDeleteBenar kang biar enggak bosen,, sama halnya kalau bosen sama tampilan istri,, maka bisa melakukan modifikasi sang istri biar tampilannya enggak ngebosenin :D
Deleteemng udh punya istri mas?? =)) hahaha
Deletejangan bilang gitu mas sama yang belum punya istri, entar minder si mas efensi atuh
DeleteWah boleh juga tuh di pake buat ngedit tampilan pacar biar gak membosankan :D tahu kode nya kang ?
DeleteMba Rahayu ketawa nya puas baget tuh..
Mas Ifrod tahu aja kalau saya minder karena belum punya istri :D
Tampilan widget komentar Evo Magz memang keren banget. Sayangnya saya tidak memakai template ini, mungkin lain waktu bisa saya coba:)Terima kasih tutornya..
ReplyDeleteMemang keren... karena sudah di modifikasi, template evo magz memang bisa disesuaikan dengan keinginan pengguna... hanya tinggal merubah atau memodifikasi yang sudah ada...
Delete