English French German Spain Italian Dutch
Translate Widget by Google

21.12.09

Bikin Blog Post Separator



Kali ini ane mo berbagi tips buat nambahi aksesori pada blog kita. Aksesori ini berupa separator ato pemisah antar postingan seperti yang ane pake pada blog ini. Mari kita mulai sama - sama:

Pertama kita masuk ke Layout trus Edit HTML

kemudian kita cari kode body postingan seperti contoh dibawah ini :

.post {
margin: 0 0 40px 0;
width: 90%
}

biasanya kode ini akan sedikit berbeda isinya tergantung modifikasi yang telah dilakukan. Kita perhatikan saja tag pembuka dan penutupnya.

Setelah ketemu, kemudian kita masukkan kode di bawah ini ke dalam susunan kode css di atas.

background: url(alamat gambar separator);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;

Jadi hasil akhirnya akan terlihat seperti ini :

.post{
margin: 0 0 40px 0;
width: 90%;
background: url(alamat gambar separator);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}

Nah, kayaknya dah selesai nih, kita coba lihat dengan klik preview-nya aja dulu.
klo dah oke baru kita save.

Kita dapat merubah posisi ketinggian dengan merubah angka padding bottomnya
Untuk gambar separatornya kita bisa bikin sendiri suka - suka kita.
Bookmark and Share


Berita Terkait :

8 komentar:

Rizky2009 on 22 Desember 2009 11.27 mengatakan...

pertamax.... langsung praktek

Fais cWaKep on 22 Desember 2009 11.50 mengatakan...

mantab bro tutor'y...,

ina on 22 Desember 2009 13.21 mengatakan...

iiih... bagus ik... :)

moenas on 22 Desember 2009 16.48 mengatakan...

mantabbbbbb brow,,ente emang masternya jjs neh

Rizky2009 on 22 Desember 2009 16.59 mengatakan...

sob ada kue d rumah q kalau mau d ambil yach

Endra on 22 Desember 2009 18.10 mengatakan...

@ fais : ane sharing aja sob

@ ina : biar blog tambah manis mbakyu... kyk mbakyu ina :)

@ moenas : bukan jjs bro, tapi 3M (melihat,mengamati dan modifikasi) aliwas niru wkwkwkkk..

@ Rizky : siap.. meluncur ke TKP, eits.. tapi ntar maghriban dulu

JOLA76 on 22 Desember 2009 20.09 mengatakan...

info yang mantabbbb

Rival Aditya on 22 Desember 2009 22.36 mengatakan...

Wah mantab gan tutornya... kpan2 cba ach...

Posting Komentar

Ini adalah blog doFollow, mohon PENGERTIANNYA ya..
Klo ada salah, mohon diingatkan.. makasih dah berbagi

 
TOP Commentator
Comment Terbaru
TUKERAN LiNK

Lebih Cepat pake | Mozilla Firefox