Membuat Tampilan Postingan Berbeda ala Blogazine
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.
112 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
Terimakasih ya,, salam kenal ditunggu kunjugan baliknya
Keren banget, nih Kang, izin belajar saya, Kang Ismet. terima kasih
saya juga mulai bereksperimen dengan blog dan majalah :)
tumaros kang, pami bentenna kode pager (#) sareng titik (.) dina kode css nu diluhur naon nya kang? sapertos (#sidebar-wrapper) sareng
(.breadcrumbs)
hatur nuhun elmuna. :D
ane di ajar ah.............
suka blogazine nih :D
Itu iklan idwebhost keluarin modal dulu ya 200rbu klo udh punya domain sendiri.
o iya, gimana caranya bikin pilihan HAPUS di komentar blogspot kang ?
gw k sanggup Nih Dengan Article Nya Situ mas ....
gk bisa ditiru Lah
AziBbbbbbbbbbbbbbbbb :)
Dari dulu terkesan liat punya DTE:] haha
Mohon bantuannya... hehee
maap kang herey :D
ternyata keren juga
tapi kalau saya yang bikin susah itu nyari warnanya yang cocok
sip di coba ah ...
Akhirnya tetap kembali pada kretifitas masing-masing
btw komen editornya sae nu tipayun tadi ngangge background sareng sudut tumpul kang
wew sekali lagi kang ismet memang super joss gandoss, mantab tutornnya kang, sekali lagi postingan langkah!!
#salam damai kang ismet!
Sempet pengen buat kayak gini, tapi masih belum sempet. hahaha
Blogazine emang keren, perlu kreatifitas tinggi untuk menekuni blogazine.. :D
Kreatif pooll...