Tampilan Postingan Blog Berbeda Seperti Blogzine - Anak Timor

Unique Post adalah tampilan yang berbeda dari halaman lainnya. Untuk membuat posting unik ini, Anda harus memahami CSS dan HTML yang merupakan syarat mutlak. Tampilan berbeda seperti ini biasanya digunakan oleh para Blogaziner, yaitu blogger kreatif yang membuat postingan berbeda di tiap halaman, layaknya sebuah majalah(cth; blog urang-kurai).

Cara membuat postingan unik ini, yaitu dengan mengatur ulang CSS tertentu, mana yang akan dirubah , mana yang akan disembunyikan, mana yang diperbesar, dan mana yang diperkecil. CSS baru tersebut, bisa ditempatkan dibawah postingan, atau dengan menggunakan tag kondisional. Untuk lebih memahami tag kondisional (silahkan cari di google : tag kondisional dan cara penggunaannya.)

Saya lebih menyarankan Anda untuk menggunakan tag kondisional, daripada menambahkan CSS dibawah postingan.

detail tutorial

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.

Silahkan bereksperimen dengan kreasi sobat, atau Anda bisa mencari referensi lain sebagai konsep desain.