How to add a post divider

How to add a post divider ?
Pertama yang ada dipikiran kalian mungkin "apa sih itu post divider?" . Post divider adalah garis atau gambar pemisah antara post yang satu dengan post yang lain. Susah nggak ya ? sebenernya ini gampang banget kalau kita sudah mengerti, nah ini cara-cara yang bisa diterapkan buat bikin post divider.


1. Persiapkan Image yang akan dijadikan post divider
Yang paling penting dan paling diperlukan adalah gambar, kalian bisa membuat gambar sendiri mungkin melalui photoshop, lalu diupload ke photobucket untuk mendapatkan link dari gambar tersebut. Atau, yang paling praktis adalah mencari di internet, ini saya berikan beberapa link untuk mencari post divider

• ShabbyBlogs.com
• Leehansen.com
• lenatoewsdesigns.blogspot.com

Ini saya ambil dari ShabbyBlogs, gini cara ngambil link dari web

(click the images for enlarge)

eit, tunggu dulu, kalau kita ngambil dari web ini takutnya size nya tidak sesuai dengan layout blog kita ini loo, jadi di download aja images nya,

2. Pastikan ukuran post divider

Pastiin berapa pixels ukuran post divider buat layout blog kita ini, bisa di liat disini, kalau kalian ga bisa nemuin, cukup pake ctrl + F buat nemuin kata-kata yang kita cari

kita cari kode 

#main-wrapper {

  width: UKURAN px;

3. Resize Image

Kalau sudah tau berapa pixels ukuran post divider yang diperluin, buka site photobucket.com terus kalau sudah gitu, log in ya dengan user kalian, kalau belum memiliki user, bisa di sign up,

setelah itu, upload gambar post divider yang kalian mau, lalu edit photonya di Resize > width > 410 px (ukuran normal blog) > apply > replace original

4. Cari link image tersebut di IMG code

5. Copy - Paste dan edit HTML di blog

mungkin kalian akan bingung mencarinya, sekali lagi ingat, apabila tidak menemukannya, gunakan ctrl + F :)

cari kode .post

Setelah ketemu html itu, replace html itu dengan 

.post {
background: url(http://ALAMATLINKDIVIDER.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:5.5em;
}

6.  Replace tulisan ALAMATLINKDIVIDER

setelah replace html itu di blog, bisa dilihat ada tulisan ALAMATLINKDIVIDER itu diganti dengan alamat link divider image nya

7. Save template and see your blog

this is my blog !

SELAMAT MENCOBA :)