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.blogazine
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

Hadeuehhh aya-aya wae kang Is yeuh heueheueheu... keeeyyyeeenn :-bd
Kreatif pooll...

Balas

wuiiih... mangstab kang I LIKE IT

Balas

iseng2 kang... mencoba sesuatu hal yang baru tiditu na mah :D :D

Balas

Kang... teu aya link kanggo ka homepagena hehehe

Balas

menu berandanya mana kang....hadoh gak bisa keluar he...

Balas

wah keren pisan iye teh kang..mantap surantaplah....

Balas

keren...keren... :-d

Sempet pengen buat kayak gini, tapi masih belum sempet. hahaha
Blogazine emang keren, perlu kreatifitas tinggi untuk menekuni blogazine.. :D

Balas

[ mumpung masih dikit orang :D ngak jauh scroll ke bawah ^_^ ]
wew sekali lagi kang ismet memang super joss gandoss, mantab tutornnya kang, sekali lagi postingan langkah!!
#salam damai kang ismet!

Balas

Heheheehe...ngadesign na bari diudag-udag ku nu komen kang hehehe...
btw komen editornya sae nu tipayun tadi ngangge background sareng sudut tumpul kang

Balas

malah jadi amburadul alias pikasebeleun hahaha :D

Balas

tos ditambihan diluhur kang :)

Balas

hahhaha... apal wae, aya errot tadi kang :D

Balas

wkwkwkkw.. ada diatas baru ditambah

Balas

wkwkkw.. lama prosesnya sob, ini juga sambil belajar

Balas

heuheu... biar langsung ketemu sama komentator lain ya :-d

Balas

dagor welah kang... hahhaha :D :D

Balas

wuiiii keren banget Kang Ismet,, saya ambil ya kodenya buat template yang baru..

Balas

Nuhun kang, akhirnya ada yang mau menjelaskan dengan bahasa yg lebih lengkap, detail disertai contoh.
Akhirnya tetap kembali pada kretifitas masing-masing

Balas
Komentar ini telah dihapus oleh pengarang.

perlu tag kondisional pengecualian ga kang? maaf yang atas salah tulis :)

Balas

huwaa.. keren banget kang, jadi makin betah di blog ini :) .

Balas

ANEH bin SEREEEM... wah ini benar mantap deh kang.. mau coba modifikasi ah.. :-bd

Balas

iiiiiiiiiih aneh bisa kieu! licong :D

Balas

mantap perpaduan warnanya adem banget nih...

Balas

keren bangetlah kang warnanya sejuk nie :-d

Balas

oalah tambah asyik kang koding" lagi nih :d

Balas

xixiix.. baru nongol udah mau dicopy :D

Balas

wih mantap nih, keren banget kang >.<

Balas

ijin nyimak kang, buat nambah ilmu ... =D

Balas

waw keren kang..ini tiap mau posting harus masukin CSS nya?

Balas

hehhe... sok aja acak2 blog ini :)

Balas

sayah ge aneh nyaeta, bet jadi kieu :D

Balas

enya nyaeta.. sayah ge bingung :)

Balas

tengkyu sob... jadi pengen ngerubah warna blog :D

Balas

iya sob.. gimana lagi soalnya :)

Balas

terserah sih... tapi ribet kayaknya :D

Balas

warna yg mendung bikin sejuk kang hehe
sip di coba ah ...

Balas

fontnya kurang suka kang .. tapi secara umum top montop

Balas

kebanyakan tampilan blogazine itu flat ya?
ternyata keren juga
tapi kalau saya yang bikin susah itu nyari warnanya yang cocok

Balas

Rame wae website ie mah lah licik :(
maap kang herey :D

Balas

Benar-benar suppeeerrrr kereeeennnn kang :D :D hebat hebat hebat, saya pasti coba :D

Balas

heuheu.. nya duka atuh, hoyongeun we kadarieu :)

Balas

nyari ide aja sambil blogaking sob :)

Balas

mangga cobian.... surabi haneut teua :D :D

Balas

Kang ismet... saya tdi menghubungi lewat from kontak kang...
Mohon bantuannya... hehee

Balas

owh gitu ya.. paham aku kang sekarang... nyoba-nyoba dulu walau ilmu terbatas hehe

Balas

PAKE NASI KANG!!! .. #MANGSTAB :D wkwkwkwk..

Balas

abi oge naha kasep nya kang? :D

Balas

Kang di share atuh manipulasi komentar terhapus pake tag kondisional. :D

Dari dulu terkesan liat punya DTE:] haha

Balas

pan tos aya solusina di DTE :)

Balas
Komentar ini telah dihapus oleh pengarang.

anu siga diluhur kitu nya.... :D

Balas

wah uniq banget, oh ya rumah baru ya kang.

Balas

hehe mantep sob :) saya sudah menerapkan ini sejak lama :v

Balas

Muhun kang, bingung nyimpenna kode ieu kumaha ?
<b:if cond='data:comment.isDeleted'>
<div class='deleted-comment'> - <a class='comment-hapus' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'>Hapus</a></div>
</b:if>

Balas

bukan mas, ini Halaman Post ala Blogazine. haha

Balas

cekdur ayena mah kang, lumayan lieur nempatkeunna dugi ka acak-acakan komentarna.
Ciga ieu nya kang http://saeful13.blogspot.com/2013/09/membuat-relateds-posts-dan-random-posts.html?showComment=1380200026415#c1219562538302810308 :D

Balas

tah kitu atuh.. di ulik :)

Balas

kalau master sih percaya... :-d

Balas

Muhun kudu seuer ngulik meh cekdur. :D

Balas

Aduh kangIsmet ......
gw k sanggup Nih Dengan Article Nya Situ mas ....
gk bisa ditiru Lah
AziBbbbbbbbbbbbbbbbb :)

Balas

Kang... emang top markotop dech...

Balas
Komentar ini telah dihapus oleh pengarang.

Salam kenal dulu kang dari saya.
Itu iklan idwebhost keluarin modal dulu ya 200rbu klo udh punya domain sendiri.

o iya, gimana caranya bikin pilihan HAPUS di komentar blogspot kang ?

Balas

hehe masa sih.. kan langkah2nya udah dijelasin di atas :)

Balas

temennya good marsogood dong :)

Balas

iya.. itukan waralaba idwebhost. maksudnya pilihan hapus gimana ya?

Balas

hehe master bilang master hadeh -_- yang master tuh mas taufik :)

Balas

taufik nurohman bukan master.. yang master itu limbad wkwkwkwkwkwkwk... :D :D

Balas

kalau menurut saya di dunia ini yang benar2 master hanya satu, ialah jaringan internet, bayangkan kalau ga ada jaringan internet. semua ilmunya jadi Kuntilanak wkwkwkwkwk

Balas

keren bener ini kang :-bd

Balas

hahahahaha kok jadi limbad iya deh :D

Balas

tetepp , listrik no.1 gan .. gak ada listrik mau nyolokin kemane ? :D wkekekek

Balas

kereen ki... janten hoyoong nyobi.. :)

Balas

Ijin pelajari kodenya kang..
suka blogazine nih :D

Balas

Selain balas, ada juga pilihan buat hapus kan mas. Seperti blognya mas ini, tepat di sisi sebelah kanan pada tanggal komentar.
(tanda silang "x") atau biasanya tuh saya temui tanda hapus juga.
^_^

Balas

mantap juragan euyyyy..........
ane di ajar ah.............

Balas

beuuuuh.... mangstabbbbbbbbbbbbbbbbbbbbbbb

Balas

saya masih coba2 sob.. masih puyeng, apalagi maen typography

Balas

banyak terima kasih atas tutorialnya kang :)

Balas

manteup pisaaan kang bogazine na. .
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

Balas

Ada banyak juga mode CSSnya Kang lihat-lihat saja dulu ini Kang tutorialnya.

Balas

sesuatu yang baru ini kang unik, Blogazine = Blog Magazine.. saaatnya bereksperimen, makasih kang :)

Balas

Pas bangetzz...
saya juga mulai bereksperimen dengan blog dan majalah :)

Balas

# disebatna id titik disebatna class

Balas

Wah koq bisa yah tampilanya bisa begini yah Kang
Keren banget, nih Kang, izin belajar saya, Kang Ismet. terima kasih

Balas

Duh meuni Karunya Kang Ismet, nuju aktivitas bari di udag-udag kanu komentar
Perlu Catrik/pelayan teu Kang, abi siap nih..? hhhhh

Balas

Berbagi inspirasi blogazine nya juga sekalian kang d postingan selanjutnya :)

Balas

waduuh mantep tutornya.... jadi pengen mencoba nih mas...
Terimakasih ya,, salam kenal ditunggu kunjugan baliknya

Balas

Poskan Komentar


×
Chat