Thursday, September 15, 2011

Cara Pasang Post Divider

Hallo ceman ceman! Hari ini saya mau bagi bagi cara bagaimana menambahkan post divider di setiap akhiran pada postingan kita. Contohnya silahkan liat pada setiap akhiran dari postingan postingan saya.
Nah, mau tau gimana cara pasangnya? Yuk, baca sampe akhir.

Biasanya gambar dividernya itu punya background warna putih, jadi kalau blog kamu background post-nya berwarna, nanti dividernya akan terlihat aneh. "Background post tuh yang mananya sih, git?" Background post itu adalah background dari kolom postingan kalian, berbeda dengan kolom sidebar, header dan lainnya.
Nah, background post kamu sebaiknya berwarna putih juga supaya warna background dari dividernya menyatu.


garis biru menunjukan daerah Background Post. Bulatan merah menunjukan warna divider dan background post menyatu.

Dua hal yang kamu perlukan adalah post divider dan akun Photobucket, atau Flickr, atau apa ajalah terserah yah. Biasanya saya mendapatkan divider dari sini,
Setelah kamu mendownload dividernya, upload lah ke akun akun yang saya sebutkan tadi.
Di tutorial kali ini saya menggunakan Photobucket.
Setiap blog memiliki ukuran masing masing, maka setelah kamu upload dividernya, editlah dan sesuaikan panjang divider dengan panjang kolom postingan kamu (Please, jangan tanya kolom postingan itu yang mana). Panjangnya dikira kira aja, kalau menurut kamu panjang dari kolom postingan ke kolom sidebar gak terlalu jauh, yaudah berarti kamu pendekin deh ukurannya.



klik resize



lalu ubah ukuran sesuka kamu, mau pake yang ....x.... atau tinggal geser kanan kiri terserahhhh


Setelah itu, kembali ke Dasbor, Rancangan, lalu edit HTM. Sebelum kamu otak atik kode template, pastikan kamu mendownload seluruh template terlebih dahulu, hal ini dilakukan untuk mencegah sesuatu yang buruk terjadi pada tempalte kamu. Nah, sekarang mari kita main main sama kode!!



Cari kode
/* Posts
----------------------------------------------- itu pada kolom kode kode.


Di daerah itu, kamu akan menemukan ada kode

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

Lalu tulisan berwarna oren itu kamu ganti dengan URL divider punya kamu, caranya klik kanan pada divider yang selesai kamu edit tadi, klik 'copy image location' atau 'salin alamat gambar'. Terusss, kembali ke kolom kode kode tempalte tadi, tulisan oren diblok, lalu klik kanan, dan terakhir klik paste, muncul deh URL gambar divider yang telah kamu edit tadi. SIMPAN! Taraaaaaaaa... pembatas postingan kamu udah jadi deh!!!

22 comments:

  1. Makin pinter niih si eneng,...:)
    jadi iri gue ame kepinteran lo... hihiii

    ReplyDelete
  2. aw aw eyke juga mau dong wkwkwkwkwkkw manteb nih bikin tutorial kreatif twothumbs buat korek2 idung kamu wkwkwkk :D

    ReplyDelete
  3. asal jgn terlalu banyak make widget di blognya oke entar bisa-bisa berat.

    ReplyDelete
  4. kayanya pas kalo dipasang di blog ane :D tengkyu dan teng baja..

    ReplyDelete
  5. waw kereeen.. tapi aku gak jago dalam html. suka pusing sendiri XD

    ReplyDelete
  6. Aiiih bagusnya! makasih ya Non...nanti deh klo Bang Pendi bisa, mo dipraktekin. Eh tapi klo gambarnya itu kali/sungai terus Bang Pendi lgi nongkrong disitu...kira2 ada gak gambarnya? hahaha....

    ReplyDelete
  7. makasih atas sharinganya. :D

    Btw, ini template blognya udah oke, headernya juga tuh, saya suka banget. :)

    ReplyDelete
  8. ohhhh gitu caranya.
    huhmmm ok jg.
    kapan aku coba ya?
    yg ptg BW dl baca postingan2 tbaru n bales komen... hehehehehehe!

    ReplyDelete
  9. ooo.. itu loh yang bikin batasan blognya jadi cantik. makasi banget yah tips nya :)
    inggit pinter deh .

    ReplyDelete
  10. wahhaha, Tq ya Ngit..aku jadi nemu bahan instan buat bikin template,ahhy *muaahh

    ReplyDelete
  11. Waah,,, Sekarang udah jadi Pakar TUTORIAL BLOG neh,, pake Kode2 gitu... MANTAAFFF BGT dah..SALUT!!!
    ^_^
    Blognya jd makin JEMPOLAN tuh!!!

    ReplyDelete
  12. oh, bagian pembatas artikel ya...
    tak coba ah..
    makasih ilmunya

    ReplyDelete
  13. ide bagus nggit..makasih bgt infonya.kpn2 aku coain deh :)

    ReplyDelete
  14. absen,,, inggit nin gue @tirtadarmantio postingan lo mantab n informatif bgt hehe O_O mampir2 juga ya ke http://belibajudiblog.blogspot.com/
    hasil dari ngelamun n iseng2 git O_O ud gue follow di folback ya O_O

    ReplyDelete
  15. @mpok belo: iye dong mpok, gue gituhh heheheheh.

    @ananda: arrrrghhh two thumbs gak bs masuk ke idung akuuu.

    @adit: iye bang, semoga aja blog gue gak berat yah.

    @andy: heheheh pasti bagusss dong.

    @chilfia: makannya dari itu belajar dong hehehehe.

    @bang: uuh pasti ada dong bang! wkwk

    @akmal: hihihih makasihh banyak.

    @john terro: iyo mas, monggo dipraktekin hehehehe.

    @rinz: betul tuh mbak! pasang divider ajah gak bisa bikin blog kita rame hahahaa.

    @euis: ahhhh gomball dehh ahh.

    @faril: iyah semoga berhasil yahh :)

    @ibu ketty: iyah ibu biar makin cantik blognyah.

    @beli baju: iya gue jg udah follow blog elo yg tirta darmantio :)

    ReplyDelete
  16. HEI... slm knal ya,,thx udh berknjung..:) thx juga artikelnya bermamfaat bgt..:)
    salam persahabatan..:)

    ReplyDelete
  17. Bikin pembatas gak yah -_-
    tapi template blog saya kayaknya gak cocok dipakein ginian deh.
    soalnya pake read more>>

    coba lagi deh

    ReplyDelete
  18. tar deh kapan2 dijajal... udah pewe sih sama template yang sekarang. hehehe... :D

    ReplyDelete
  19. pengen njajal aah....
    ribet gak ya....

    ReplyDelete