Cara Membagi Kolom Widget: Panduan dan Tutorial BloGGeR Widget

Membagi kolom widget menjadi sangat penting untuk menciptakan penampilan blog yang simple, harmonis dan memberikan kesan rapi. Banyaknya hal yang perlu ditampilkan dihalaman blog membuat blogger harus pintar menata sehingga halaman blog terlihat rapi, cantik dan menarik dan jauh dari kesan awut-awutan. Blog tak ubahnya sebuah tempat tinggal yang akan membuat kerasan ketika rumah tinggal tersebut ditata, dipelihara, dihias dan bahkan jika perlu ketika dibangun "mengundang pakar fengshui" dengan harapan menjadi tempat yang menjadi sumber kebahagiaan, memperlancar "rejeki" dan membuat tamu-tamu datang silih berganti dengan membawa "jalan bagi berkah" keluarga. Meskipun beberapa blogger menganggap "penampilan tidak penting, yang penting isinya", tapi percayalah bahwa "slogan bodoh" itu hanya karena memang sang blogger seorang yang "kemproh" (;orang yang tidak mengerti arti kebersihan , keindahan dan kerapian alias mandi dan gosok gigi saja nggak pernah !) atau sebetulnya bukan blogger yang telaten (malas) dan mampu menata blognya dengan baik.

Membagi kolom widget bukanlah sesuatu yang sulit dan sebenarnya dapat dilakukan oleh siapapun, bahkan blogger pemula sekalipun (seperti aku juga, sih ! he ....). Hanya sedikit KODE yang perlu kita pahami seperti div, float, margin, padding dan border serta untuk menambah "gaya" penampilan dengan menambahkan background image yang dengan mudah bisa kita dapatkan dengan jalan-jalan sebentar di website penyedia backgound image gratis yang "ngudubilah" banyaknya.

KODE HTML sederhana ini bisa digunakan untuk membagi kolom widget menjadi 2 kolom (kana-kiri) dan anda boleh kembangkan sendiri menjadi box yang cantik untuk blog anda. KODE yang tidak sesuai selera bisa anda hilangkan untuk memperoleh penataan yang mendukung keindahan blog anda.

Contoh ini digunakan untuk kolom dengan lebar 220px (bagian sidebar) yang biasanya digunakan template bawaan blogger seperti Minima Template misalnya. Anda bisa modifikasi sendiri pada "width" untuk penyesuaian dengan ruang yang tersedia di blog dan ukuran "sesuatu" yang ingin dipajang.

KODE html : buang Link image dan gunakan sebagai box

Link Image : <img src="https://sites.google.com/site/gubhugreyotprojects/mart-2010/images/gubhugreyot100.jpg" />

<div align="center" style="float:left;width:105px;margin:5px 0;padding-top:5px;border:1px solid #666;background:#000;">
<img src="https://sites.google.com/site/gubhugreyotprojects/mart-2010/images/gubhugreyot100.jpg" />
</div>
<div align="center" style="float:right;width:105px;margin:5px 0;padding-top:5px;border:1px solid #666;background:#000;">
<img src="https://sites.google.com/site/gubhugreyotprojects/mart-2010/images/gubhugreyot100.jpg" />
</div>
<div style="clear:both;margin:0;padding:0;"></div>
<div align="center" style="float:left;width:105px;margin:5px 0;padding-top:5px;border:1px solid #666;background:#000;">
<img src="https://sites.google.com/site/gubhugreyotprojects/mart-2010/images/gubhugreyot100.jpg" />
</div>
<div align="center" style="float:right;width:105px;margin:5px 0;padding-top:5px;border:1px solid #666;background:#000;">
<img src="https://sites.google.com/site/gubhugreyotprojects/mart-2010/images/gubhugreyot100.jpg" />
</div>
<div style="clear:both;margin:0;padding:0;"></div>
<div align="center" style="float:left;width:105px;margin:5px 0;padding-top:5px;border:1px solid #666;background:#000;">
<img src="https://sites.google.com/site/gubhugreyotprojects/mart-2010/images/gubhugreyot100.jpg" />
</div>
<div align="center" style="float:right;width:105px;margin:5px 0;padding-top:5px;border:1px solid #666;background:#000;">
<img src="https://sites.google.com/site/gubhugreyotprojects/mart-2010/images/gubhugreyot100.jpg" />
</div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » January, 09, 2012

» Happy Blogging - gubhugreyot «