Membuat Tampilan Postingan Berbeda ala Blogazine

Selanjutnya akan saya coba jelaskan step by step bagaimana cara membuat postingan yang unik / berbeda dari postingan yang lain. Untuh lebih memahami konsep desain ini, silahkan sobat pelajari dan fahami baik-baik apa yang saya tulis dibawah.

Pertama, fahami dulu elemen yang ada pada template. Tentukan elemen mana saja yang akan sobat sembunyikan. Sebagai contoh, postingan ini disembunyikan header, menu, sidebar, footer, breadcrumbs, related-post, post-info. maka sobat tulis dulu CSSnya kurang lebih seperti ini :

<style type='text/css' scoped=''>
#header-wrapper,
#menu,
#sidebar-wrapper,
#footer-wrapper,
#sidebar-wrapper,
.breadcrumbs;
.related-posts,
.post-info {
display:none;
}
</style>

Kedua, rubah warna backround, jenis huruf, ukuran huruf, warna huruf, lebar area posting, dll. Tambahkan ke CSS sebelumnya.

#main-wrapper{
width:100%;
background:#333;
font-size:18px;
line-height:1.7em;
}

Ketiga, buat CSS baru untuk isi postingan. Sebagai contoh saya buat kode CSS seperti ini :

.kotak-atas{
background:#222;
color:#fff;
font-size:45px;
padding:15px;
}
.kotak-atas h1{
background:#222;
color:#ccc;
font-size:90px;
}

Keempat, buat HTMLnya. Contohnya :

<div class="kotak-atas">
 <h1>Belajar Blogazine</h1>
 Saya sedang belajar blogazine bro... !!!
</div>

Tugas selanjutnya adalah membuat CSS dan HTML nya masing-masing. Perhatikan juga id atau class yang digunakan.