Thursday, February 24, 2011

Memasang Divider antar Post

 Banyak yang penasaran gimana caranya biar ada "sesuatu yang unik" yang membatasi tampilan antar post. Jawabannya ada. Lazimnya "sesuatu yang unik" itu disebut divider.

Ada banyak web yang menawarkan bagaimana cara memasang divider pada blog. Seperti yang ada disini, disini atau bisa juga dilihat disini.

Sayangnya pengaturan itu gak sesuai dengan blog saya. Jadi saya harus bereksperimen biar bisa masang divider di blog saya. Caranya ternyata gak sesulit yang saya pikirkan. Dasarnya tetap sama. Bedanya cuma harus sedikit dimodifikasi aja.
  • Pertama, kamu harus punya kode URL untuk gambar yang akan kamu pake sebagai divider. Caranya bisa dilihat disini atau ambil dari glitter-graphics seperti yang saya lakukan.
  • Selanjutnya klik " Design" pada Navigation Bar di blog kamu.
  • Pada halaman "Edit Layout", pilih kolom "Design", lalu pilih "Edit HTML"
  • Untuk mempermudah pencarian, ketik "Ctrl-F" dan tulis ".post-footer"
  • Dibawah tulisan itu, kamu akan menemukan "margin . . ."
  • Ketik di atas margin kode berikut ini :
             background: url(kode URL);
             background-repeat: no-repeat;
             background-position: bottom center;
  • Karna saya menggunakan kode URL "http://dl.glitter-graphics.net/pub/989/989321gyey13hzit.gif", maka hasilnya akan menjadi :
  • Well, ini belum selesai. Karna yang selanjutnya kamu lakuin adalah mengganti ukuran "padding" dan juga "margin" yang ada dibawahnya..
  • Awalnya, ukuran padding untuk blog saya seperti ini
  • Hasilnya, divider saya malah nyatu dengan "post footer" saya. *sori gambarnya gak ada, jadi bayangin aja yah :)
  • Jadi saya ganti angka di margin yang semula 15px jadi 9px
  • Dan ganti angka padding yang semula 10px 0 25px menjadi 9px 0 36px.
  • Angka ini bisa kamu ganti sesuai kebutuhan. Jangan lupa klik "Preview" untuk melihat apakah hasilnya sesuai yang kamu inginkan ato gak.
  • Hasilnya bisa diliat di bawah posting-an saya ini, hehe.
  • Terakhir, klik "save template" dan view blog untuk melihat hasil jadinya.
    Selamat mencoba ^^v

    No comments: