Assallamuallaikum Wr Wb..

cs1.png

Selamat malam kawanku semua, bagaimana kabar kalian? Aku harap kalian baik-baik saja.. Di malam yang super dingin ini saya akan melanjutkan lagi tentang tutorial css yaitu Cara Mengedit Css Bagian Post Single di mana tahap ini sudah masuk ke tahap hampir akhir atau 75% tutorial yang akan saya bagikan, nah daripada tutorial yang saya bagikan tidak kunjung selesai maka akan saya lanjutkan lagi malam ini..

Di tahap ini saya akan membahas tentang apa saja yang ada di dalam selector .post-single, post single adalah selector yang mengatur alas dasar dari selector .post-content, .post-meta, .categories, .tags, #share-buttons, dan #recent-posts-list kalau di blogponsel di ganti menjadi .related-post !! .post-single berada di page mode postingan penuh atau setelah judul artikel di klik waktu di mode homepage, dan berikut ini kode css untuk selector .post-single dan beberapa selector lainnya...

.post-single { margin:0;padding:0;background:#cccccc; } .post-single .post-meta { margin:3px 0px;padding:6px;text-align:left; font-size:17px;color:#000000;background:#1e90ff; } .post-single .post-meta .title { margin:0;padding:0; } .categories { margin:3px;padding:4px; } .categories a { color:#080; } .post-single .post-content { margin:0px 5px 8px 5px;background:#ffffff;padding:6px 8px;text-align:justify;border:1px solid #bbbbb1; } .tags { margin:4px;padding:2px 5px 7px; } #share-buttons { margin:0;padding:5px;text-align:right;background:#eeeeee; } #share-buttons a { margin:0px 4px 0px 0px;padding:5px;background:#ffgfff;border:1px solid #ccc;content:"Facebook";color:cornflowerblue; } #share-buttons a+a { margin:0px;padding:5px;background:#ffffff;border:1px solid #ccc;content:"Twitter";color:cornflowerblue; } .related-posts { margin:0px;padding:0px;background:#ccc; } .related-posts h3 { margin:0;padding:7px 5px;text-align:center;bavkground:#1e90ff;color:#000; } .related-posts-list { margin:5px;padding:5px;background:#fff;border:1px solid #bbb;text-align:justify; } .related-posts-list div { margin:3px 0px;padding:6px;text-align:justify; }

Pengertian :


1. .post-single selector yang mengatur alas dasar dari post content yang ada di mode postingan penuh.
2. .post-single .post-meta mengatur alas dasar dari judul artikel di mode postingan penuh.
3. .post-single .post-meta .title selector yang mengatur judul artikel yang ada di mode postingan penuh.
4. .categories selector untuk mengatur alas dasar kategori artikel.
5. categories a adalah selector yang mengatur link kategori artikel.
6. .post-single .post-content adalah selector untuk mengatur alas dasar artikel di mode postingan penuh.
7. .tags adalah selector yang mengatur tags artikel.
8. #share-buttons adalah selector yang mengatur alas dasar share artikel.
9. #share-buttons a adalah selector yang mengatur link share artikel ke media sosial facebook.
10. #share-buttons a+a adalah selector yang mengatur link share artikel ke media sosial twitter.
11. .related-posts adalah selector yang mengatur list artikel terkait di mode postingan penuh.
12. .related-posts h3 adalah selector yang mengatur alas dasar judul related post.
13. related-posts-list adalah selector yang mengatur list artikel terkait.
14. .related-posts-list div adalah selector yang mengatur artikel postingan terkait.


Baca Juga = Cara Mengedit Css Bagian Content

Sebelum mengedit kita harus tahu terlebih dahulu apa saja yang ada di dalam selector .post-single dan fungsinya untuk apa saja, akan tetapi tidak semua situs menggunakan selector .post-single untuk mengatur alas dasar konten artikel di mode postingan penuh. cara mengetahui selector apa yang di pakai bisa di lihat pada template bagian post atau sejenisnya, itu juga jika situs buildernya mendukung untuk mengedit template. Jika tidak bisa mengedit template bisa di coba di cari di dalam kode css yang sedang di pakai. Cari nama selector mana yang kira-kiranya untuk mengatur alas dasar dari artikel mode postingan penuh dan coba edit selector tersebut..

Tutorial ini bisa kalian jadikan sebagai referensi untuk mengatur css bagian post single, sehingga kalian dapat dengan mudah mengatur desain css karena sudah mengerti mengenai fungsi selector-selector yang ada di css terutama .post-single dan lainnya.

Demikian yang dapat saya sampaikan tentang Cara Mengedit Css Bagian Post Single apabila kalian ada pertanyaan silahkan bertanya pada kolom komentar di bawah, saya mohon maaf apabila tutorial di atas sedikit mebingungkan dan terdapat kata-kata yang kurang berkenan di hati anda semua.

Wassalamuallaikum Wr Wb..