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.