31.7.11

Grid css blogspot: buat posting

#1 Css grid generator yang diperlukan, ada yang sekaligus untuk layout, ada yang hanya untuk membuat kolom-kolom, saya coba hanya untuk yang membuat kolom itu juga cuma satu karena ada banyak. Di bawah ini adalah beberapa, diantaranya:
 
- yui
- pagecolumn  
- spry-soft
- yaml  
- netprotozo
- csscreator
- designbygrid
#2 Keuntungannya kita nggak perlu membuat kode baru untuk posting yang memerlukan kolom-kolom, cukup panggil class atau Id untuk aturan yang sudah ditentukan.

Sebenarnya dengan cara yang sederhana di halaman page blog ini saya juga sudah buat. Tapi alat-alat itu lumayan, nggak usah mikir, tinggal salin tempel.

Disini saya buat inline langsung dipostingan, keuntungannya bisa langsung monitor bentuk-bentuknya, dari HTML ke mode compose, sebaliknya kalau langsung ditulis di edit HTML atau diimport nggak akan bisa dimonitor, jalan satu-satunya gunakan editor HTML sebelum posting.

Kalau misalnya baru di blogspot, dan baru membuat blog, cara penulisan inline ini untuk sementara waktu barangkali ideal.

Kerugiannya di tulis langsung, repot, kebanyakan kode dari postingan, orang bilang ini nggak bagus dll. Jangan tanya kenapa nggak bagus tanyalah kepada yang mengerti.

Saya 100% user, bisanya cuma tinggal pakai, sebisa mungkin menerobos segala macam hambatan, yang penting jalan.
#3 Di Blogspot, kode baru sering saya pasang langsung di template, kode dipanggil dari postingan, dengan tambahan seperlunya waktu posting.
#4 Persoalannya kalau begitu terus lama-lama template akan semakin membesar.
#5 Posting ini sebenarnya adalah posting yang ngawur, banyak kolom nggak perlu, cuma karena kita lagi bicara grid, mau nggak mau saya juga harus buat kolom-kolom yang seolah-olah grid.

Grid yang langsung dipasang ditemplate bagus dalam arti hemat kalau sering dipanggil class-nya, agak sia-sia kalu kode yang banyak itu nggak pernah dipanggil.
#6 Tabel, termasuk tabel bersarang dengan kode-kode yang banyak, barangkali akan bermasalah kalau sudah ratusan posting, harus membuat tabel baru untuk tiap postingan.
Tapi kalau cuma satu dua, menggunakan tabel malah lebih hemat saya kira.

Saya mencoba yang dari Pagecolumn, untuk bagian wrapper saya membuang float:left, wrapper adalah bungkusnya atau bingkai-nya,
diganti dengan margin auto, supaya posisi berada ditengah.

Intinya tweak sesuai kebutuhan.

Ini bentuk dua kolom ditulis langsung di posting, untuk yang dipanggil class-nya ikuti tautan diatas, cara nulisnya ada perbedaan.

<div style="margin: auto; width:400px;"> <div style="float: left; width: 32%; height: 300px; padding:5px; border:1px solid #808080;font-size:14px;font-family:arial;line-height:1.2em;" > konten </div> <div style="float: left; width: 60%; height:300px;padding:5px; margin-left: 1px; font-size:14px;font-family:arial;border:1px solid #808080;line-height:1.2em; "> konten </div></div>
6 komentar:
longfield said...

kenapa ga di bikin total keseluruhan menjadi 100% terlebih dahulu? brrt tinggal ngebagi karena jika lebar keseluruhan itu kecil maka paragrah yg di buat tentu kecil :D

hachi said...

ini maksudnya buat yg mau sekedar nyoba tapi lebar halamannya post kecil, misalnya cuma 500px, dan instan. tinggal pasang.

saya sendiri belum pakai grid dalam arti yg benar2 grid yg cuma panggil class, barangkali nanti kalau ada post yg cocok.

longfield said...

klo untuk blogspot banyak yg ringan kyk 1kbgrid atau fluidgrids.com tapi klo berat keseluruhan kecil untuk yg akses via mobile lebar dari kiri dan kanan bagian yg kosong itu keliatan menganggu dan paragraph yg jadi ketengah lebih kecil hahaha :D tapi thx tutornya saya ga pernah sadar klo ukuran tidak 100 persen ternyata cocok juga kira2 untuk membuat poster CSS3 hahahaha :D

underground-media said...

udh dirobah sob ..
border sama padddingnya masak ga diitung

Zamidy_Shuriken said...

Saya Belum Bisa Niechhh.. Buat Posting Di Blog saya ini...!!!

mungkin blog saya ini rusak mungkin.. hee hee..

Opick Amikom said...

Makasih atas pencerahannya...

Artikel yang bagus.. eh. mbak ruly ada disini..