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.
Dilarang Copy-Paste artikel di blog ini dan apabila kami menemukan artikel dicuri tanpa mencantumkan sumber link blog Amplopcokelat.com maka tak segan akan kami laporkan !

Berlangganan artikel Gratis langsung via email...

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar