Persona Intikalia

8 Feb 2012

Cara Mudah Membuat Template Blog - Image Positioning

Bertemu lagi dengan saya di rubrik #template. Kali ini kita akan bermain-main dengan Image Positioning. Apa itu Image Positioning? Image Positioning itu meletakkan image pada template blog kita menggunakan CSS. Mengapa sih Image Positioning ini perlu? Pasti semua sudah tahu, bayangkan saja kalo image yang sudah kita rencanakan itu letaknya tidak pada tempat yang diinginkan, pasti bikin stres. Setiap template mempunyai pembagian DIV ID yang berbeda-beda. Maka kali ini, saya akan memberikan contoh melakukan Image Positioning pada template yang saya buat di shop.intikali.org. Unduh dulu template dari sana dan mari bermain-main dengan Image Positioning.

Disarankan untuk membuat blog baru untuk diuprek-uprek, jangan gunakan blog utama kamu, karena takutnya akan terjadi kegagalan mengedit dan hancur lebur tampilannya LOL. Pastikan kamu sudah menyiapkan image yang sudah kamu slicing untuk bahan percobaan. Resolusi image yang disarankan adalah mempunyai lebar 1000 pixel seperti halnya yang saya tulis di Image Slicing. Berikut adalah langkah-langkah image positioning pada template yang terdapat di shop.intikali.org.
  1. Buka Dashboard kamu (kalo aku pake Dashboard yang lama)
  2. Pilih Design > Edit HTML
  3. Choose file (pilih template yang tadi kamu download dari shop.intikali.org) pada Upload a template from a file on your hard drive: lalu Upload
  4. Lalu Save Template
  5. Lihatlah tampilan blogmu sekarang
  6. Kembali lagi ke Dashboard > Design > Edit HTML
  7. Siapkan file image hasil slicing yang akan kamu pasang, dan ambil URL dari semua image tersebut
  8. Carilah (dengan Ctrl F) #header lalu perhatikan isi #header tersebut, pasti ada background: url('xxx') no-repeat top center, ganti xxx dengan URL image kamu.
  9. Perhatikan juga height: pada #header, isi dengan dengan tinggi image yang kamu buat.

    #header

  10. Lakukan hal yang sama pada #content-wrapper, #center, dan #footer
  11. Lakukan uji coba berkala jika masih ada error, periksa dengan teliti, mungkin kamu meng-copy URL image tidak benar (ini biasa terjadi, hanya karena spasi atau enter, image bisa tidak muncul)
Selamat mencoba, semoga sukses. Tunggu tutorial lanjutannya, yaitu Partial Positioning.

Bagian Sebelumnya: Cara Mudah Membuat Template Blog - Photoshop Image Slicing
Bagian Selanjutnya: Cara Mudah Membuat Template Blog - Partial Positioning

23 komentar:

  1. ckckk, selang waktu update rubik ini lama juga ya :D
    kasian banget yg nungguin, udh bulukan kali :P

    BalasHapus
  2. haha ... maklum lah, hampir saja aku lupa kalo aku harus buat lanjutannya :D

    BalasHapus
  3. Ajarin dong... cara buat Blogazine (T^T ...
    Code dasarnya gimana...?

    BalasHapus
  4. wah itu mah terlalu jauh :D
    kalo pengen ya buat sendiri aja :)
    tapi aku males buatinnya

    BalasHapus
  5. kalau berbayar mau buatin Blogazine?

    BalasHapus
  6. kirain tutorial ini bakal bahas detail cara pasang gambar kayak di sekitara text-area di comment box ini atau pasang gambar dengan link ke mobile view, follow dan dynamic view kayak di atas..
    ternyata masih gambaran umum..

    pasti ntar muncul di tutorial selanjutnya ya om?

    salam kenal buat semua :D

    BalasHapus
  7. ya mau sih
    tapi kalo lagi nganggur saja :D

    BalasHapus
  8. untuk tutorial yang semacam itu tunggu saja bagian selanjutnya :D

    BalasHapus
  9. akhirnya, guru mau mengajarkan ilmunya ke kami :D

    BalasHapus
  10. aku masih mentok di gimp di buku tutorial bikin template dari buku yg aku beli

    BalasHapus
  11. wah harus pake url ya imagenya?
    kirain bisa langsung upload

    BalasHapus
  12. *angguk-angguk*
    bisa ajarin SEO ga bang jon?

    BalasHapus
  13. @Obat: bisa langsung upload di bloggernya, trus copas URL nya :D

    @Rizhani: ga bisa yen :D

    BalasHapus
  14. owh gitu ya??
    hehe maklum saya katro masih di dunia bloger,punya blog baru kemaren :D

    BalasHapus
  15. Weh..itu bukan positioning..klo di CSS positioning itu absolute dan relative.

    Coba jawab pertanyaan ini:
    Positioning absolute dengan ?
    Positioning relative dengan ?

    Lalu apa fungsi z-index?
    lalu kenapa transform tidak inherit?

    Nah..itu baru positioning CSS..klo di atas backround, bukan positioning..

    Ga CMIIW

    Sori komennya agak keras biar pembaca ga salah paham arti positioning sebenarnya dalam CSS.

    BalasHapus
  16. bersabarlah ... itu ada waktunya sendiri :D
    tentu positioning yang dimaksud di entri kali ini masih terkait dengan entri sebelumnya

    untuk masalah positioning relative, absolute, z-index, dll saya kira mereka bisa belajar sendiri di blog lain :D

    BalasHapus
  17. Lanjutannya kapan yaa????
    udah ditunggu nih,....

    BalasHapus
  18. haha .. iya yah
    hampir saja terlupa
    aku usahakan lah besok aku coba buat lagi

    BalasHapus
  19. Ditunggu lanjutan pelajarannya, hehehe ;p

    BalasHapus