Cara Membuat Area Post Ala Blogazine

Blogazine atau Blog dan Magazine sudah menjadi hal yang sangat di gemari oleh para pecinta dunia desain template blogger atau para Blogaziner. Dimana dengan konsep Blogazine dapat membuat tampilan blog pada sebuah area postingan bisa berbeda. Sehingga tampilan yang dihasilkan-pun bisa berbentuk layaknya seperti sebuah majalah online.

Contoh: Laman profil penulis blog pedas.

Lantas bagaimana caranya?
Pertanyaan ini mungkin menjadi sebuah teka-teki buat kita yang belum memahaminya. Dalam membuat atau menghasilkan tampilan seperti pada contoh diatas. Kunci permainannya adalah perpaduan CSS dan HTML, serta permainan perpaduan warna-warna yang digunakan pada area HTML saat membuat postingan baru. Selain itu kita dituntut untuk mengetahui struktur kode pada template yang kita gunakan. Dengan demikian maka akan mempermudah kita saat menghilangkan bagian tertentu atau tidak perlu kita hilangkan dan bagian mana yang perlu kita perbesar atau yang perlu kita perkecil.

Setelah kita mengetahui dan memahami CSS dan HTML maka kita siap untuk membuat tampilan Blogazine pada blog yang kita kelola. Caranya kurang lebih seperti berikut:

<style type="text/css">
Isi dengan kode CSS yang ingin kita atur...
</style>

<script type="text/javascript">
Isi script *Jika Perlu
</script>

Penerapan :

<style type="text/css">
body {
background:#61757A;
color:#0B0B0B;
}
#header-wrapper,
#menu,
#sidebar-wrapper,
#footer-wrapper {
display:none; margin:0;
}
</style>

Ket. pada bagian tersebut saya menghilangkan area / bagian yang tidak saya butuhkan sehingga yang tersisa adalah area postingan blog (dengan ukuran yang belum di ganggu / normal).

Selanjutnya, karena area postingan tadi tidak mempunyai ukuran yang kurang sesuai menurut saya. Maka saya buat area postingan itu diperlebar sebesar 100%. Dan juga mengkombinasikan paduan warna yang digunakan, agar tampilan postingan nantinya akan terlihat menarik.

#main-wrapper {
width:100%;
background:#DBE9EE;
}

Karena bagian judul saya hilangkan, maka sebagai penggantinya saya melakukan penambahan CSS dan HTML pada postingan tersebut sebagai pengganti header tadi.

.judul-post {
background:#1E3F56;
color:#fff;
font-size:45px;
padding:15px;
line-height: 1.6;
}
.judul-post h1{
color:#ccc;
font-size:80px;
}

<div class="judul-post">
<h1>JUDUL POSTING</h1>
Masukkan Deskripsinya *Jika perlu
</div>

Begitulah langkah-langkah membuat area blogazine pada postingan blog. Semoga artikel ini dapat membantu kita memahami lagi akan fungsi serta kegunaan dari CSS dan HTML.

Sumber referensi: blog.kangismet.net