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.

Berita Terkait :