Membuat 2 Kolom Tambahan Untuk Widget

Membuat 2 Kolom Tambahan Untuk Widget - Sepertinya kita pernah melihat sebuah blog yang berisi script iklan dan artikel terkait ataupun widget subscribe pada bagian bawah posting dengan tampilan berdampingan (sejajar) antara kedua widget tersebut, seperti contoh pada gambar dibawah.

Dalam hal ini kita membuatnya secara manual dan menyisipkan script 2 kolom tersebut dalam template, berbeda dengan kita menambahkan 2 kolom dengan menambahkan section untuk menambahkan widget blogger.

Untuk membuat 2 kolom secara sejarar dan berdampingan ini kita hanya menggunakan CSS, dengan CSS kita bisa dengan mudah modifikasi tampilannya menjadi lebih menarik dan sesuai dengan gaya yang kita inginkan dan menyesuaikan dengan desain template yang kita pergunakan, baik bentuk ataupun warna.

Penambahan 2 kolom dibawah posting secara manual ini dimaksudkan untuk menghindari error validasi HTML, dikarenakan jika kita menambahkan 2 kolom tersebut sebagai section dalam blogger dan kita mengisinya dengan widget akan menghasilkan error validasi HTML, karena adanya atribut <b:include name='quickedit'/>, walaupun pada dasarnya kita bisa menghapus atribut tersebut untuk bisa valid HTML.

CSS dan HTML Yang Dipergunakan

CSS

.kolombawahposting {
  background:#33A3CC;
  padding:10px;
  overflow:hidden;
  box-shadow:0px 1px 0px rgba(255, 255, 255, 0.5),inset 0px 1px 3px rgba(0, 0, 0, 0.35);
}
.kolom-kiri, .kolom-kanan {
  color:#ccc;
  background:#CF5830;
  font:normal 36px Arial, Helvetica, sans-serif;
  float:left;
  width:300px;
  height:250px;
  line-height:250px;
  text-align:center;
  border-radius:3px;
}
.kolom-kanan {
  float:right;
  background:#7CA25D;
}

@media screen and (max-width:500px) {
.kolom-kiri {display:none;}
.kolom-kanan {width:100%;}
}

HTML

<div class="kolombawahposting">
<div class="kolom-kiri">Isi Dengan Widget</div>
<div class="kolom-kanan">Isi Dengan Widget</div>
</div>

Modifikasi segi tampilannya dengan CSS atau merubah, mengurangi atau menambah properti CSS diatas

HTML ini tidak hanya bisa diletak diatas atau dibawah posting, melainkan bisa diletakan dimanapun yang kita suka, kita hanya menyesuaikannya saja untuk ditempatkan dimana 2 kolom kanan kiri tersebut.

Semoga bemanfaat.