Masih dengan topik CSS, kali ini saya mau berbagi sedikit teknik yang jarang dipakai oleh lain pada templatenya. Bagaimana cara membuat elemen HTML di bagian artikel post agar lebarnya bisa penuh ke samping kanan kiri. Sebenarnya saya agak bingung mau ngasih judul yang pas untuk tutorial ini apa. Jadi intinya dengan teknik yang akan saya share nanti, kalian bisa membuat bagian-bagian yang ada di daerah tulisan post menjadi full lebar penuh.

Rahasia teknik sederhana ini adalah melawan property padding.

Iyaah! Saya rasa di setiap template untuk bagian artikel post pasti menggunakan property padding. Gunanya adalah untuk membuat jarak tepi antara batas area post dengan tulisan artikel. Coba kalian perhatikan bagian kanan kiri dari artikel ini. Ada terlihat jarak kan? Okay, kalau kalian masih bingung coba perhatikan satu paragraf berikut :

Ini adalah contoh tulisan yang misalkan area post tidak diberikan property padding. Jadinya tulisan artikel ini akan melebar penuh ke samping kanan kiri. Tanpa ada jarak kosong yang terlihat menjorok ke dalam area postingan. Terlihat sangat jelek bukan? 😀

Jadi sebenarnya teknik ini sangat mudah sekali. Kita bisa membuat beberapa elemen di dalam area postingan blog menjadi lebar penuh. Tanpa terkena efek dari nilai padding yang ada. Seperti yang saya lakukan pada paragraf di atas. Lalu gimana caranya? Simak beberapa penjelasan saya di bawah ini.

Teknik CSS Membuat Heading Lebar Penuh

teknik-css-membuat-heading-post-lebar-penuh

Saya pribadi menggunakan teknik ini untuk beberapa elemen seperti Breadcrumbs, Heading H2, Gambar Cover, dan Blockquote. Jadi nanti kalian bisa berkreasi sendiri. Mau dibuat untuk elemen apa iyaa terserah kalian saja. Gak cuman heading yang bisa dibuat jadi lebar penuh.

Caranya adalah dengan menambahkan kode CSS berikut ini di elemen yang kita inginkan tadi :

.post-body h2 {
    margin: 10px -20px;
    padding: 10px 20px;
}

Karna saya ingin merubah bagian Heading H2 maka saya menggunakan selektor .post-body h2 kalau mau elemen yang lain tinggal disesuaikan aja, misal bisa juga .post-body img dan lainnya. Kemudian untuk nilai margin dan padding sebenarnya itu juga bisa diatur sendiri mau dibuat berapa.

Nah, seperti yang saya katakan diawal bahwa untuk membuat elemen jadi lebar penuh, kita hanya perlu melawan padding dari elemen parent. Maksud elemen parent adalah induk dari elemen yang mau di ubah, yang dalam kasus ini .post-body sebagai parent sedang h2 sebagai child-nya. Jadi, cara kita untuk melawan padding adalah dengan membuat margin bernilai minus pada elemen child tersebut.

Agar teknik ini bisa bekerja pada template yang sobat gunakan, maka baiknya kalian juga perlu memperhatikan beberapa point berikut :

  1. Sesuaikan nama class elemen parent.
    Untuk mengetahuinya kalian bisa cari kode <data:post.body/>, lalu lihat kode div di atasnya. Misal tepat di atas kode tersebut ada kode <div class=”post-body”>, maka element parent dari area post artikel kalian adalah .post-body.
  2. Lihat nilai padding elemen parent.
    Untuk mengetahuinya cari kode .post-body di bagian CSS template. Dari situ kalian bisa tahu berapa nilai padding yang digunakan.
  3. Sesuaikan nilai margin elemen child.
    Misal, nilainya adalah 20px maka pada elemen child tinggal kita buat margin kanan kirinya dengan nilai -20px. Lihat contoh kode CSS yang saya berikan sebelumnya.

Teknik CSS Membuat Heading Keren

Oke, sekarang kalian sudah berhasil membuat elemen heading lebar penuh tanpa ada jarak tepi padding. Berikutnya saya akan memberi tahu satu teknik keren lagi yang bisa kalian coba. Cara ini seperti yang saya gunakan pada template blog chaidir.web.id sendiri. Kalau kalian perhatikan pada heading H2 kan ada bagian yang agak lebih menjorok ke luar di sebelah kirinya. Nampak?

Rahasia teknik sederhana ini adalah menambahkan property border-left.

Kode CSS yang saya gunakan adalah sebagai berikut :

.post-body h2 {
     border-left: 25px solid #777;
     margin: 10px -20px 10px -45px;
     padding: 10px 20px;
     color: #fff;
     background: #888;
}

Yang perlu kalian perhatikan, karna saya sudah menambahkan property border-left dengan lebar 25px maka untuk margin kiri juga harus saya tambahkan lagi sebesar -25px dari yang sebelumnya. Seperti yang kalian lihat pada kode CSS di atas, property margin nilainya sudah berubah kan? Jadi kalau misal kalian mau buat lebar bordernya lebih kecil, tinggal sesuaikan aja nilai margin-nya.

Sebelum kalian coba, ada dua syarat lagi yang perlu diperhatikan agar teknik ini bisa berhasil. Yaitu :

  1. Elemen parent terluar harus ada margin.
    Nilai margin disesuaikan dengan lebar border-left.
  2. Dan overflow tidak boleh hidden.
    Hapus penggunaan overflow: hidden agar border bisa terlihat.

Misalkan contoh struktur HTML sederhananya seperti berikut ini :

<article class='post hentry'>            <!-- Ini adalah elemen parent terluar -->
   <div class='post-body'>               <!-- Ini adalah elemen parent -->
      <h2>                               <!-- Ini adalah elemen yang ingin diubah -->
        Contoh Heading dengan Border Left
      </h2>
   </div>
</article>

Dalam kasus ini, elemen yang mau kita kasih efek border-left adalah heading H2. Agar kita bisa bordernya bisa terlihat maka pada elemen article harus ditambahkan dua syarat yang saya sebutkan di atas. Sebenarnya pun kita hanya perlu menambahkan margin saja. Kalau gak ada overflow: hidden berarti syarat kedua udah terpenuhi. Kalau ada iyaa tinggal dihapus.

Jadi, kode CSS yang diperlukan :

.post.hentry {
      margin-left: 25px;
}

Teknik ini juga bisa diaplikasikan untuk bagian-bagian lainnya. Yang penting kalian pahami saja dulu caranya sesuai dengan penjelasan saya diatas. Pada template ini sendiri efek border-left bahkan juga saya pakai diluar dari elemen post-body. Seperti comment-footer yang ada di bagian paling bawah kolom komentar.

Gimana bingung? ^_^ hehehe..
Semoga aja kalian ngerti dengan penjelasan saya di atas yaa.

Saya rasa cukup sekian dulu pembahasan kita tentang Cara Membuat Heading Keren ala Chaidir.Web.ID. Mudah-mudahan kalian bisa berhasil mencoba teknik yang sudah saya share ini. Sekiranya kalian mengalami kendala atau masalah, saya siap membantu dengan senang hati. 😀

Selamat Mencoba dan…

Salam Semangat!!