Wednesday, February 04, 2009

blogger tips: menentukan posisi layout

Gak tau kenapa tiba² muncul ide dibenak YOYO tuk nulis tentang tips penataan LAYOUT di blog ini. Mungkin di beberapa blog lain sudah pernah memuat hal serupa, tapi kali ini YOYO tulis kembali dengan gaya penulisan YOYO sendiri.

Wokeh, langsung aja yah. Disini YOYO mencoba mengambil contoh kasus dari default templet dari blogspot yaitu "No. 565 by:Douglas Bowman". Kalau belum tau gimana siy model templet No. 565 tersebut! sekarang coba masuk kehalaman dashboard pada akun kalian, trus buatlah sebuah blog baru. Nah pada blog baru tersebut, kalian pilih template No. 565 yang telah disediakan oleh blogspot. Pada templet tersebut kita akan melihat seperti ada sebuah bayangan dari templet tersebut. Perhatikan gambar dibawah ini.



Sebenarnya warna gelap yang tampak dalam lingkaran pada gambar diatas bukan merupakan bayangan, tetapi itu hanyalah permainan LAYOUT yang dibuat sedemikian rupa sehingga menyerupai sebuah bayangan dari templet tersebut. Nah untuk mengetahui caranya, perhatikan tipsnya berikut ini.

Tips 1:
Dasar dari pengaturan layout terlatak pada file CSS, karena seluruh pengaturan dari sebuah template mulai dari FONT, COLOR, dan terutama sekali yang akan kita bahas kali ini yaitu LAYOUT terletak pada pengaturan CSSnya.

Tips 2:
Perhatikan pada kode #wrapper (baik itu #outer-wrapper, #main-wrapper, #sidebar-wrapper, atau apa aja dah yang bertuliskan wrap wrap per), karena kode tersebut yang pada umumnya mengatur tata letak LAYOUT dari template, khususnya blogger template.

Tips 3:
Untuk dapat memberikan efek shadow pada tampilan sebuah templet, kita membutuhkan paling sedikit 2 LAYOUT dasar (kalau sudah mahir bisa menambahkan sendiri lah). Seperti yang ada pada template No. 565 yaitu #outer-wrapper sebagai LAYOUT 1, dan #wrap2 sebagai LAYOUT 2. Sekarang perhatikan kode berikut ini:
#outer-wrapper {
position:relative;
top:4px;
$startSide:4px;
background: #889977;
width:744px;
margin:10px auto;
text-align:$startSide;
font: $bodyFont;
}
dan
#wrap2 {
position:relative;
top:-4px;
$startSide:-4px;
background:#fff;
padding:10px;
border: 1px solid #fff;
}
Perhatikan pada bagian kode yang berwarna merah, fungsi dari penggunaan declaration "position:relative;" digunakan sebagai pengganti penggunaan prperty "float" yang terbatas ruang geraknya karena hanya berpatokan pada value left dan right. Kelebihan dari penggunaan property position ini dapat dilihat dari property tambahan seperti top yang disertai dengan nilai yang bisa kita tentukan seperti declaration "top:4px; & $startSide:4px;" pada layout 1 dan declaration "top:-4px; & $startSide:-4px;" pada layout 2. Meskipun layout 2 berada didalam layout 1, tetapi layout 2 bisa kita tentukan letaknya dengan cara merubah nilai dari valuenya. Sekarang coba aja dah dirubah nilai value dari property top & $startSidenya dan lihat hasilnya.

Jadi pada intinya, yang memegang peranan pada LAYOUT template No. 565 ini adalah penggunaan declaration "position:relative;". Jika masih bingung dan ingin bertanya, silahkan tulis pertanyaannya pada kolom komentar dibawah ini. Wokeh.

16 comments:

  1. pertamaaax... seep jadi tutor nih om,, hmm biasanya ane make minima tapi kapan-kapan mau acak tuh template 565

    ReplyDelete
  2. wah..
    ga mudheng yang ginian nih..
    masih gaptek.
    hahahaha..

    ReplyDelete
  3. waduh jeli amat bang sip sip
    sampai ke bayangan juga diperhatikan

    ReplyDelete
  4. penasaran, template no. 565 tuh yg mana yah???? abis yg ane inget cuma minima sama son moto aja.wakkaka. tar coba ngedit yg 565 ah. thanks inponya yoy.

    ReplyDelete
  5. wah seandainya kamu mau mengajarkanku caranya alangkah bahagianya diri ini....
    maukah engkau membimbingku...........
    aq mhon..........

    ReplyDelete
  6. info yang keren dan pengulasan yang lugas buat yang ngarti hehehe...kok pinter sih ya?, kalo tari taunya make layout, gak mo tau gimana susahnya cara membuat layout hehehe (org yg gak pedulian ma detail) btw..infonya berharga palagi klo kemauan buat belajar lagi menggebu2, udah tau mo nuju kemana.

    ReplyDelete
  7. duh keren hebad...
    kok pada pinter pinter gitu ya? walo mbaca ajah diriku ngak mudeng

    biarkan aku dengan kegaptekanku

    ReplyDelete
  8. wow udah master nih....lain kali ada masalah template aku tanya dikau saja :mrgreen:

    ReplyDelete
  9. wow.........
    kamu tau tdak katanya blog kita harus memasang feedburner....
    maksudnya apa.....

    ReplyDelete
  10. @subagya: silahkan di acak² bro, asal jangan saiya punya aja yg diacak² :D
    @aprie: sama aja mas, saiya juga masih dalam tahap belajar nih :)
    @Cebong Ipiet: templetna yg dulu dimana bong?
    @else: huwekekeke... idem juga dah :D
    @eros: saiya lagi gak ada kerjaan bro
    @herro: sama bro, itu juga cuman kebetulan lihat saiya :D
    @www.katobengke.com: boleh, tapi sebatas yang saiya tau aja yah :)
    @Mentari: ini nulisnya juga menggebu-gebu karena bingung mo posting apaan :D
    @suwung: sabar kang sabar... lama² pasti gak gaptek lagi kok :)
    @rio2000: masih newbie saiya bro :D
    @www.katobengke.com: gak harus kok, tergantung klo mo masang yah silahkan, klo gak juga gpp kok.

    ReplyDelete
  11. wah sariRapet kalo nemu masalah templete kek nya bisa ini minta bantuan bung yoyo ini, boleh ya? btw happy weekend ya bung!

    ReplyDelete
  12. @SariRAPET: boleh aja mas, happy weekend too :)

    ReplyDelete
  13. kalau aku suka tipe 69
    kekeke
    nggak nyambug ya :p

    ReplyDelete
  14. @rozy: ajari saiya mas, wekekekek :D

    ReplyDelete

Jangan lupa... habis dibaca tinggalkan komentarnya dibawah ini yah.

Makasih :)