how to create an
UNIQUEPOSTDESIGN
LAYOUT
Unique Post merupakan tampilan yang berbeda dari halaman lainnya. Untuk membuat posting unik ini, sobat harus memahami CSS dan HTML dan merupakan syarat mutlak, alias tidak boleh tidak. Tampilan berbeda seperti ini biasanya digunakan oleh para Blogaziner, yaitu blogger kreatif yang membuat postingan berbeda di tiap halaman, layaknya sebuah majalah.
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 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 sobat bisa mencari referensi lain sebagai konsep desain.