Cumulus swf - flash

Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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 «

10 komentar:

  1. bapak yg terhormat saya telah menunjungi blog anda dan saya melihat ada box tag ccloud yg bisa bergak dan berputar disaat terkena cursor, bilah bapak berkenan bolehka bagi ilmunya untuk membuatnya mohon kirimkan ke email saya di "pandraduspa@gmail.com" saya ucapkan terimakasih banyah sebelumnya

    BalasHapus
  2. Silahkan buka :

    http://gubhugreyot.blogspot.com/2010/06/panduan-praktis-cara-membuat-label.html

    Salam ...

    gubhug reyot

    BalasHapus
  3. HAI Gan td dah liat blog agan dan lihat ada box bisa bergak dan berputar disaat terkena cursor, klo g keberatan gmana bikinya.. terimakasih

    email : eridcouzy@yahoo.com
    Blog : placecouzy.blogspot.com

    BalasHapus
  4. om bole nanya g.. saya punya blog tapi saya gak bisa ng link halamanya mohon saran nya" empasies@yahoo.com"

    BalasHapus
  5. Pak, untuk buat categori bagaimana ya,,maklum saya newblog nih..thanks untuk infonya

    BalasHapus
  6. GUBHUG REYOT, two thumbs up!
    http://www.iei4every1.co.cc

    BalasHapus
  7. HAHAHA...MANTAP Sepakat BAnget! Blogger yg Dongok yang selalu berslogan "Penampilan gak utama Yg penting isinya ",hahaha..betul betul betul

    BalasHapus
  8. pak boz, kalau mau nambah kolom secara vertikal gimana pak boz, (kolom kesamping), kalau contoh diatas kan kebahwah, nah kesampinnya gimana, trmaksih sblumnya

    BalasHapus
  9. Terimaksh kodenya , smoga bisa tak manfaatkan ..

    BalasHapus
  10. SAYA KURANG PAHAM,,, ITU GANTINYA GIMANA?? LINK IMAGE YG DIBUANG DMN??

    BalasHapus

 
GR | Edited by | gubhug reyot