Assallamuallaikum Wr Wb..
cs.png


Artikel Sebelumnya = Cara Mengedit Css Bagian Top Content

Selamat siang semuanya, selamat menjalankan ibadah puasa ramadhan yang ke 1438 H !! Semoga puasa tahun ini diberikan kelancaran & keberkahan yang melimpah ? Aminn..!!

Pada kesempatan kali ini saya akan membahas tentang Cara Mengedit Css Bagian Content, kali ini saya akan berusaha membahasnya sedetail mungkin biar kalian mudah memahami & mempraktekkannya.

Setelah sebelumnya saya telah membahas bagian top-content, sekarang saya akan melanjutkan ke tahap pembahasan ke bagian content.

Silahkan di simak penjelasan Cara Mengedit Css Bagian Content di bawah ini !!

Content adalah selector yang mengatur alas/dasar post (Postingan) di halaman homepage, single post & about me.

Content merupakan salah satu pondasi beberapa selector yang di tampungnya, selector #content menampung beberapa selector lainnya seperti .post, .post .post-meta, .post .post-meta .title, .post .post-meta .title a .post .post-content, dan .post-meta2 (ini khusus di mode home page).

Jika di mode single post (Postingan Penuh) selector #content menampung beberapa selector lainnya, seperti .post-single, .post-single .post-meta, .post-single .post-meta .title, .categories, .post-single .post-content, dan #recent-posts-list.

Sebelum kalian mengatur selector #content lebih dulu kita harus mengetahui cara penulisannya di dalam file css itu bagaimana ?

Di bawah ini saya akan memberikan contoh penulisan selector #content beserta selector pendukungnya di dalam file css, cara penulisannya saya akan menggunakan cara pada umumnya khususnya di mode home page saja.

#content { margin:0 auto;padding:4px;background:#ffffff;overflow:hidden; } .post { margin:2px;padding:0;background:#e0e0e0;border:1px solid #c0c0c0; } .post .post-meta { margin:0;padding:5px;text-align:left;background:transparent;color:#1e90ff;border-bottom:1px solid #c0c0c0;font-size:12px; } .post .post-meta .title { margin:0;padding:0;background:transparent !important; } .post .post-meta .title a { color:#ffff00;text-decoration:none; } .post -.post-content { margin:0;padding:4px;text-align:justify;overflow:hidden:word-wrap:break-word;background:#f1f1f1; } .post-meta2 { margin:0 2px 2px 2px;padding:5px;text-align:right;background:#f1f1f1; } .post-meta 2 a { padding:5px 4px;margin:2px;background:#cecece;color:#008000; } .post-meta2 a span { margin:0 0 0 2px;padding:5px 4px; } .thumbnail { margin:2px !important;padding:3px !important;background:transparent !important;border:1px solid #000000 !important;width:60px;height:70px; }


Baca Juga = Cara Belajar Membuat Css Tahap Ketiga | Part 4


Keterangan :
- #content adalah selector mengatur alas atau dasar seluruh postingan.
- .post adalah selector mengatur postingan di mode home page.
- .post .post-meta adalah selector mengatur alas atau dasar judul artikel di mode home page.
- .post .post-meta .title adalah selector mengatur judul artikel di mode home page.
- .post .post-meta .title a adalah selector mengatur warna judul artikel di mode home page.
- .post .post-content adalah selector mengatur isi artikel di mode home page.
- .post-meta2 adalah selector mengatur alas atau dasar jumlah komentar di mode home page.
- .post-meta2 a adalah selector mengatur warna link jumlah komentar.
- .post-meta2 a span adalah selector mengatur kalimat "Komentar" di mode home page.
- .thumbnaill adalah selector mengatur gambar artikel di mode home page.

Contoh di atas merupakan cara penulisan pada umumnya, seperti halnya di blogponsel yang menggunakan cara di atas sebagai dasar penulisan kode di dalam file css.

Selector #content dapat kita atur sesuai dengan apa yang kita inginkan, misalnya kita ingin memberikan background gambar di dalamnya maka cara penulisannya seperti ini !

#content { margin:0 auto;padding:5px;background:url(http://url_gambar)center no-repeat,#111111;background-size:90px 85px;border:1px solid #212121; }


Keterangan :
- Kalimat yang berwarna merah adalah alamat url gambar yang akan kita gunakan sebagai background, jika ingin menggunakannya silahkan di ganti dengan url gambar yang akan anda gunakan.
- Center adalah menentukan posisi gambar berada di bagian tengah, center bisa kalian ganti posisi lainnya berikut ini.
1. Top posisi gambar berada di atas.
2. Right posisi gambar berada di kanan.
3. Bottom posisi gambar berada di bawah.
4. Left posisi gambar berada di kiri.


- No-repeat adalah mengatur pengulangan gambar, no-repeat berarti gambar tidak di ulang atau tetap di tempat yang telah ditentukan. Ini bisa di ganti dengan pengulangan lainnya !
1. Repeat-x gambar mengulang secara horizontal.
2. Repeat-y gambar mengulang secara vertikal.


- #111111 adalah warna backgroundnya, ini bisa kalian ganti sesuai warna keinginan anda.
- Background-size adalah property mengatur ukuran gambar yang di gunakan sebagai background.


Baca Juga = Cara Belajar Membuat Css Tahap Ketiga | Part 5

Apabila kita ingin menambahkan background gambar pada selector lainnya kita hanya perlu menambahkan nilai value dari property background seperti ini "url(http://url_gambar)" tanpa tada petik, lalu tambahkan juga nilai value posisi background setelah symbol ")", lalu tambahkan pengulangan gambar yang di inginkan, dan warna background yang di inginkan. Agar lebih mudah lihat pada contoh di atas yang telah saya contohkan !

Kita juga bisa memberikan background gambar hanya di pojok tertentu, bisa di pojok kanan atas, pojok kanan bawah, pojok bawah kiri, dan pojok kanan atas atau di ke empat pojok sekaligus juga bisa, caranya begini !

Di sini kita hanya perlu merubah posisi gambarnya saja, kode yang lainnya sama seperti yang saya contohkan di atas. Agar kalian mudah memahaminya akan saya contohkan di bawah ini.

#content { margin:0 auto;padding:5px;background:url(http://alamat_gambar)top right no-repeat,#111111; }


Keterangan :
- Top right adalah menentukan posisi gambar berada di pojok kanan atas, posisinya bisa kita ganti dengan !
1. Right bottom menentukan posisi gambar berada di pojok kanan bawah.
2. Bottom left menentukan posisi gambar berada di pojok kiri bawah.
3. Top left menentukan posisi gambar berada di pojok kiri atas.

Jika ingin menambahkan background di ke empat sudut begini caranya !

#content { margin:2px;padding:5px;background:url(http://url_gambar)top left no-repeat,url(http://url_gambar)top right no-repeat,url(http://url_gambar)bottom right no-repeat,url(http://url_gambar)bottom left no-repeat,#111111; }


Keterangan :

Pada contoh di atas terdapat tanda koma "," di sela-sela url gambar, tanda koma ini berfungsi untuk memisahkan gambar yang akan dijadikan background agar sesuai dengan letak yang telah di tentukan (tidak menumpuk di satu tempat).

Tanda koma ini harus di selipkan sebelum url jika ingin menambahkan dua gambar di selector yang sama, jadi penggunaannya seperti ini !

url(http://url_gambar)center no-repeat,url(http://url_gambar)

Seperti yang kalian lihat pada contoh di atas, tanda koma yang saya beri warna merah jadi pemisah antara url gambar kesatu & url gambar yang kedua. Jika ingin menambahkan 3 gambar atau lebih harus menambahkan tanda koma sebelum url gambar yang selanjutnya.

Pada contoh di atas saya tidak menggunakan property "background-size" tanpa tanda petik, kalian bisa menambahkannya jika membutuhkan property "background-size".

Dalam menambahkan background gambar bisa kita gunakan cara yang agak panjang kodenya, pada contoh pertama tadi seperti yang kalian lihat bahwa nilai value url gambar, posisi gambar, pengulangan gambar, dan warna background kita jadikan satu tempat. Namun kali ini kita akan mengaturnya dengan satu per satu, caranya seperti ini !

#content { margin:0 auto;padding:5px;background-image:url(http://url_gambar);background-position:center;background-repeat:no-repeat;background-color:#111111;background-size:90px 85px; }

Seperti yang kalian lihat pada contoh di atas, bahwa saya mengaturnya dengan cara satu per satu. Cara seperti yang saya contohkan di atas memang agak panjang tapi lebih mudah untuk di pahami. Untuk penjelasannya sebagaimana berikut ini !


Keterangan :
- Background-image mengatur gambar yang akan dijadikan sebagai background.
- Background-position mengatur posisi gambar yang akan dijadikan sebagai background.
- Background-repeat mengatur pengulangan gambar.
- Background-color mengatur warna background.
- Background-size mengatur ukuran gambar yang akan dijadikan sebagai background.

Bagaimana mudah bukan mengedit selector #content, jika kalian rajin belajar & mempraktekkannya akan lebih mudah untuk memahaminya.


Baca Juga = Cara Mengedit Css Bagian Body

Oh.. Iya ada satu lagi cara mengedit css bagian content, yaitu !

Selector #content juga bisa kita buat menjadi semi transparent, kita akan menambahkan properti "Opacity" tanpa tanda petik ke dalam selector #content.

Opacity adalah selector untuk mengatur efek transparancy suatu selector, nilai value yang bisa kita gunakan adalah "0-100" atau bahkan lebih. Semakin besar nilai value yang diberikan maka efek transparancynya semakin jelas. Nilai valuenya juga bisa menggunakan tanda titik, contohnya 0.1, 0.2, 0.3, 0.4 dan seterusnya.

Langsung saja di simak caranya berikut ini !

#content { margin:0 auto;padding:5px;background:#111111;opacity:0.4; }


Keterangan :
Nilai value 0.4 akan memberikan efek transparancy yang lumayan jelas.

Baiklah, saya rasa penjelasan tentang Cara Mengedit Css Bagian Content cukup sampai di sini. Semoga apa yang saya jelaskan di atas dapat kalian pahami dengan mudah ?

Jika kurang paham silahkan bertanya lewat komentar atau PM saya !

Demikian yang dapat saya sampaikan tentang Cara Mengedit Css Bagian Content semoga tutorial ini bisa bermanfaat buat kalian semua, saya mengucapkan terima kasih banyak telah berkunjung ke blog saya yang sederhana ini.

Wassallamuallaikum Wr Wb..
p