Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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.


This post first appeared on COOLMiXS, please read the originial post: here

Share the post

Bikin Blog Post Separator

×

Subscribe to Coolmixs

Get updates delivered right to your inbox!

Thank you for your subscription

×