Assalamuallaikum Wr Wb..

cs1.png

Selamat malam kawanku semua, bagaimana kabar kalian semua hari ini? Semoga kalian baik-baik saja iya, amin...

Pada kesempatan kali ini saya akan melanjutkan tahap mengedit css yaitu Cara Mengedit Css Bagian Comments tahap ini adalah tahap terakhir untuk mengedit css, di mana sudah sekian lama saya share tentang tutorial css tapi alhamdulillah selesai juga tutorialnya. Di tahap terakhir ini saya akan membahas tentang selector #comments beserta pengikutnya supaya tidak berkepanjangan tutorialnya, silahkan di simak tutorialnya di bawah ini !!

#comments adalah selector yang mengatur alas dasar list komentar yang ada di blog, mulai dari judul "Comments" sampai dengan form input komentar, #comments menampung beberapa selector lainnya diantaranya #comments h3, #comments h4, #comments h5, #comments .comment, #comments .comment .comment-header, #comments .comment .comment-header .title, #comments .comment .comment-content, #new-entry, #new-entry h3, #comment_form, #comment_form .input-text, #comments_form .input-textarea, dan #comment_form .input-btn/.input-button. Nah kali ini saya akan memberikan contoh untuk pembelajarannya, kali ini saya akan mencoba membuat background selector #comments berwarna merah dan beberapa desain yang sederhana agar mudah untuk di pelajari oleh pemula, untuk kodenya silahkan di lihat di bawah ini !!

#comments { margin:0px;padding:0px;background:#ff0000; } #comments h3 { margin:0px;padding:9px 6px;text-align:center;background:#212121;color:#aaa;font-size:14px; } #comments h4 { margin:0px;padding:6px 5px;text-align:left;background:#96281B;color:#fff; } #comments h5 { margin:0px;padding:6px 5px;text-align:center;background:#d91e18;color:#fff; } #comments .comment { margin:5px;padding:0px;background:#212121;border:1px solid gold; } #comments .comment .comment-header { margin:0px;padding:5px;text-align:left;background:transparent;color:#aaa;border-bottom:1px solid gold; } #comments .comment .comment-header .title { margin:0 !important;padding:0 !important;background:transparent !important;text-align:left !important; } #comments .comment .comment-header .title a { color:#00f; } #comments .comment .comment-content { margin:0px;padding:5px;overflow:hidden;color:#aaa; } #new-entry { margin:3px 0px;padding:0px; } #new-entry h3 { color:#aaa;background:#212121;text-align:center;font-size:14px;margin:0px;padding:8px 5px; } #new-entry h3 a { color:#aaa; } #comment_form { margin:0px;padding:5px;background:#96281B;text-align:center;color:#fff; } #comment_form .input-text { width:70%;margin:3px 0px;padding:5px;background:#fff;border:1px solid #ccc;color:#000; } #comment_form .input-textarea { margin:0px;padding:5px;background:#fff;color:#000;border:1px solid #ccc;width:70%;height:50px; } #comment_form .input-button { width:50%;margin:3px;padding:5px;background:#222;color:#aaa;border:1px solid gold; }


Baca Juga = Cara Mengedit Css Bagian Pagination Links


Note :


1. #comments adalah selector yang mengatur alas dasar forum komentar mulai dari judul "Comments" sampai dengan form input komentar.
2. #comments h3 adalah selector yang mengatur judul "Comments" dan latar belakangnya.
3. #comments h4 adalah selector yang mengatur "Responsted To bla bla bla..." dan latar belakangnya.
4. #comments h5 adalah selector yang mengatur "Berlangganan Feed RSS/ATOM"..
5. #comments .comment adalah selector yang mengatur alas dasar list komentar.
6. #comments .comment .comment-header adalah selector yang mengatur alas dasar nama komentator dan tanggal komentar.
7. #comments .comment .comment-header .title adalah selector yang mengatur nama komentator.
8. #comments .comment .comment-header .title a adalah selector yang mengatur warna link nama komentator.
9. #comments .comment .comment-content adalah selector yang mengatur komentar pengunjung.
10. #new-entry adalah selector yang mengatur alas dasar #comment_form.
11. #new-entry h3 adalah selector yang mengatur judul "New Comment".
12. #new-entry h3 a adalah selector yang mengatur warna "New Comment".
13. #comment_form adalah selector yang mengatur alas dasar form komentar.
14. #comment_form .input-text adalah selector yang mengatur kolom nama komentator.
15. #comment_form .input-textarea adalah selector yang mengatur kolom pengisian komentar pengunjung.
16. #comment_form .input-button adalah selector yang mengatur tombol submit komentar pada blog.


Keterangan :

Pada selector #comments .comment .comment-header .title atau seperti yang saya kasih warna merah pada contoh di atas, kenapa pada nilai value saya tambahkan !important di belakangnya. Karena supaya desain nama komentator tidak sama dengan desain yang ada pada selector #comments h5, ini bisa terjadi karena di dalam template suatu situs tag html nama komentator sama-sama menggunakan tag h5 sehingga jika tidak ditambahkan !important di belakang nilai value maka desainnya akan memiliki tampilan yang sama. Terkecuali jika memang sengaja di buat dengan desain yang sama maka tidak perlu ditambahkan !important di belakangnya.

Untuk melihat hasil kode di atas bisa di lihat pada tautan berikut ini Comments Preview.

Bisa kalian lihat pada page contoh tersebut, semua kode yang saya tulis di atas akan menghasilkan desain yang sesuai dengan yang telah saya atur pada kode cssnya, khususnya pada bagian nama komenator dan berlangganan rss/atom memiliki desain yang berbeda. Hal itu disebabkan saya sudah mengaturnya dengan cara seperti yang saya jelaskan tadi yaitu menambahkan !important di setiap nilai valeu pada selector #comments .comment .comment-header .title !!

Nah... Saya rasa kalian sudah mengerti tentang bagaimana Cara Mengedit Css Bagian Comments sudah waktunya saya mengakhiri tutorial kali ini, karena sudah terlalu panjang saya menjelaskan kali ini dan semoga kalian dapat memahami apa yang saya jelaskan di atas. Jika kalian mempunyai pertanyaan bisa di sampaikan pada kolom komentar.

Demikian yang dapat saya jelaskan tentang Cara Mengedit Css Bagian Comments dan saya mohon maaf apabila ada kata-kata yang kurang mengenakkan di hati kalian dan penyampaian nya membingungkan untuk kalian pahami.

Wassalamuallaikum Wr Wb..