Membuat element widget terlihat Multi kolom

Selasa, 20 April 2010
Sebenarnya sudah lama entri ini saya simpan di draft namun terjangkit rasa ragu untuk menerbitkannya, salah satu penyebabnya adalah karena bingung untuk memberi judul yang tepat untuk entri ini, Tapi setelah hampir satu bulan ahirnya saya Publish juga dengan harapan 'Mudah-mudahan bermanfaat' buat sobat kolom ponsel. Entri ini sendiri adalah salah satu alternatif saja terutama buat Blogger yang menggunakan ponsel seperti saya contohnya yang merasa kesulitan untuk menambahkan/menyisipkan kode HTML ke dalam template, hal ini di sebabkan belum adanya aplikasi ponsel yang berfungsi dengan baik untuk melakukannya.

Sebelum sobat melanjutkan membaca postingan ini, coba alihkan sejenak perhatian sobat pada Daftar Panduan membuat blog menggunakan ponsel dan ke dua Banner yang berada di bawah header.
Bagaimana, Apakah menurut sobat tampak terdiri dari tiga kolom element widget ?, Bila itu sobat anggap ya dan menarik untuk dicoba, silakan sobat terus membaca entri ini sampai selesai.

Untuk menerapkan cara seperti contoh diatas, ada tiga macam kode yang kita butuhkan diantaranya :
<style> .list { 
  border-bottom:1px solid #bbb;
  line-height:1.5em;
  padding:3px;
}
</style>
<div style="overflow:auto;
  padding:7px 5px;
  margin:0; width:300px; 
  height:248px;
  background:transparent;
border:1px solid #666;">
<div class="list">
<font color="000000">Panduan membuat Blog dengan Ponsel :</font>
</div>
<ul type="square">
<div class="list">
<li><a href="http://
rudimarfai.blogspot.com/2009/08/sekilas-tentang-blog.html" <font color="006400">Sekilas info tentang Webblog</font></a></li>
</div>
<div class="list">
<li><a href="http://
rudimarfai.blogspot.com/2009/08/cara-membuat-email-di-gmail.html" <font color="006400">Buat account email di Gmail</font></a>
</li>
</div>
<div class="list">
<li><a href="http://rudimarfai.blogspot.com/2009/06/membuat-blog-menggunakan-ponsel.html" <font color="006400">Cara singkat membuat Blog</font></a></li></div>
  </ul>
</div>
Kode diatas adalah kode yang saya gunakan untuk membuat Daftar judul entri yang bertema Panduan membuat blog menggunakan ponsel. Gantilah judul dan alamat link yang akan di tampilkan.
<div style="overflow:hidden;
  padding-bottom:5px;  
  margin:0;
  width:960px;
  height:282px;
  background:#000 url(http://i42.tinypic.com/1yko.jpg) repeat-x; border:0px;">
</div>
Kode yang ke dua untuk menempatkan banner sekaligus untuk memberi background utama serta membuka dan menutup keseluruhan kode di dalamnya. Ganti alamat IMG untuk background atau ganti dengan kode warna, sehingga dapat sesuai dengan template sobat.
<table width="950"><tr><td align="left">kode link sebelah kiri (daftar link)
</td>
<td align="center">
kode baner tengah (AwSurveys)
 </td>
<td align="right">
kode banner kanan (Ziddu)
  </td>
 </tr>
</table>
Yang terahir adalah table, yang saya fungsikan untuk mengatur penempatan posisi dari Daftar link dan banner.

Untuk membuat satu element terlihat menjadi tiga kolom seperti contoh diatas, maka kita harus menggabungkan ketiga kode tersebut, kurang lebih akan menjadi seperti ini :

<div style="overflow:hidden;
  padding-bottom:5px;
  margin:0; width:960px;  
  height:282px;
  background: url(http://i42.tinypic.com/1yko.jpg) repeat-x; border:0px;">
<table width="950"><tr><td align="left"> 
<style> .list { 
  border-bottom:1px solid #bbb;
  line-height:1.5em;
  padding:3px;
}
</style>
<div style="overflow:auto;
  padding:7px 5px;
  margin:0;
  width:300px;
  height:248px;
  background:transparent;
border:1px solid #666;">
<div class="list">
<font color="000000">Panduan membuat Blog dengan Ponsel :</font>
</div>
<ul type="square">
<div class="list">
<li><a href="http://
rudimarfai.blogspot.com/2009/08/sekilas-tentang-blog.html"><font color="006400">Sekilas info tentang Webblog</font></a></li>
</div>
<div class="list">
<li><a href="http://
rudimarfai.blogspot.com/2009/08/cara-membuat-email-di-gmail.html"><font color="006400">Buat account email di Gmail</font></a>
</li>
</div>
<div class="list">
<li><a href="http://rudimarfai.blogspot.com/2009/06/membuat-blog-menggunakan-ponsel.html"><font color="006400">Cara singkat membuat Blog</font></a></div></ul></div>

</td><td align="center">
<div style="overflow:hidden;
  padding-top:30px;
  padding-left:30px;
  margin:0 0 0 30px;
  width:285px;
  height:250px;
  background:transparent;">
<div align="left">
<a href="http://www.AWSurveys.com/HomeMain.cfm?RefID=tihang"><img src="http://i49.tinypic.com/5dqfpe.jpg" width="250" height="200" alt="banner_Awsurveys" /></a></div></div>
</td><td align="right">
<div style="overflow:hidden;
  padding-top:30px; 
  margin:0;
  width:285px;
  height:250px;
  background:transparent;">
<div align="left"><a href='http://www.ziddu.com/register.php?referralid=(y]nf~39pnb' target="_blank"><img src="http://i49.tinypic.com/dvr4hf.jpg" width="250" height="200" alt="Banner ziddu" /></a></div></div></td></tr></table></div>
contoh kode dari template kakhai (template saya) yang mempunyai lebar 960pixel.

Code lengkapnya
Silahkan Copy kode di bawah ini :

Tugas sobat adalah mengganti kode yang berwarna merah, seperti kode image untuk background, link dan kode banner yang sobat miliki, dan jangan lupa mengatur dan menyesuaikan width, height, padding, serta marginnya agar benar-benar sesuai dengan template sobat.

Untuk pemasangannya silahkan sobat copy kode diatas lalu ganti kode yang saya beri tanda, selanjutnya :

  1. Login ke blogger.com
  2. Tata letak
  3. Tambah Gadget
  4. Pilih HTML/javascript: html/javascript
  5. Pastekan kode yang sobat copy sebelumnya kedalam kolom yang tersedia
  6. Simpan perubahan.

Cara ini bisa juga diterapkan pada sidebar,tapi lebih tepat di pasang pada element di bawah header atau fotter.

33 komentar (Membuat element widget terlihat Multi kolom)

Posting Komentar
  1. Sou Stalker » April 20, 2010 4:18 PM | permalink

    wew,panjang juga ya tutor nya,thanks sob udah berbagi ! met sore ae ya!

  2. narti » April 20, 2010 6:41 PM | permalink

    memakai hp beda ya? baru tahu malah...
    makasih tutorialnya.

  3. sda » April 20, 2010 6:42 PM | permalink

    makasih tutorialnya, sangat bermanfaat.

  4. Rizky2009 » April 20, 2010 8:54 PM | permalink

    ok deh sob mantab tutormmya, aq test dulu yah

  5. angger » April 20, 2010 9:59 PM | permalink

    wah manteb dah sob tipsmu,langsung dipraktekin

  6. Beben » April 20, 2010 10:20 PM | permalink

    Berat yah kang...hihihi maaf atuh yak, emang gitu da blog gaya mah kang...heuheuhehehue

  7. Rock » April 21, 2010 2:39 AM | permalink

    Wahhh... kodenya banyak banget ya...
    btw makasih untuk tutorialnya sob...

  8. Tihang » April 21, 2010 5:53 AM | permalink

    To: Rock
    kan bisa di kurangi he he.. tergantung kebutuhan gituh.

  9. Bujen » April 21, 2010 4:11 PM | permalink

    Info bagus sob.. Tp aku kurang paham maksudx... Maaf aku loadingnya agak lama hehe... Tar q baca berkali- kali deh biar paham :-D

  10. Tihang » April 21, 2010 5:46 PM | permalink

    To: Bujen
    kurang jelas ya he he, maklum sob gak bisa nulis, ngasih judulnya aja sudah bingung...

  11. Lulus Sutopo » April 21, 2010 7:56 PM | permalink

    Tutor yang sangat bermanfaat terimakasih sharingnya..

  12. KucingTengil » April 22, 2010 3:13 AM | permalink

    wew... dah pakar banget nih kayaknya.saluuuut

  13. Tihang » April 22, 2010 7:03 AM | permalink

    Terlalu jauh dari kalimat itu ".."
    hanya menulis apa yang saya tau aja !.

  14. tomo » April 22, 2010 7:58 AM | permalink

    Makasih kawan tipsnya.aku save dulu aja ya.tar jika butuh tinggal copas

  15. uswah » April 22, 2010 7:59 AM | permalink

    trims tipsnya.lagi butuh nih

  16. Alvhie aja ga pake N » April 22, 2010 10:03 AM | permalink

    pagi2 udah dapat ilmu nih,,,makasih sob atas infonya

  17. Najibblog2010 » April 22, 2010 12:03 PM | permalink

    Wah bagus nih sob..

    Salam kenal n sukses selau...

    Oh ya anda sudah saya follow..follow balik ya??hehe...

  18. Salon Oyah » April 22, 2010 8:13 PM | permalink

    Makasyiiihhh infonya, sob... tar aq coba di salah satu blog aq yaaa... sukses bwt mas Rudi

  19. http://phonecompi.blogspot.com » April 22, 2010 9:37 PM | permalink

    Thx sob. Sayang template ane gak co2k make ginian. Lg pula bakal memperberat loading blog.

    BTW. thx ya uda mampir k blog ane.

  20. tomo » April 23, 2010 7:20 AM | permalink

    Banyak kolom akan banyak juga ruang untuk diisi dan memperindah blog kawan

  21. GADO GADO » April 23, 2010 8:07 AM | permalink

    lengkap nih tutorialnya.. Langsung di coba.. Tapi.. Gak ada pengaruh sama loading blog ga?

  22. kolom ponsel » April 23, 2010 8:21 AM | permalink

    To: Gado2
    Pasti, cuma kan bisa di minimalin, Terutama di background.

  23. Ferdinand » April 23, 2010 12:52 PM | permalink

    Wah keren nie tutor'y hhe......Segere dicoba Sob....makasih info N Ilmu'y...........D'tgu yg berikutnya........

  24. akhatam » April 23, 2010 5:25 PM | permalink

    Trik yang sangat bermanfaat sobat... Tx
    Keep Blogging!

  25. tomo » April 24, 2010 7:37 AM | permalink

    makasih tipsnya.add widget ini perlu sob

  26. HAPIA Mesir » April 24, 2010 2:09 PM | permalink

    mantab kawan....semangat terus berbaginya

  27. Islam Dan Sains » April 24, 2010 2:10 PM | permalink

    terima kasih atas sharingnya kawan. cuma blog saya mau ditambah apa lagi ya?? diusahkan sedikit gambar biar lebih ringan loading blog saya.

  28. KucingTengil » April 24, 2010 4:40 PM | permalink

    etto... masih blom ngerti nih pak guru *lemot mode on*

  29. secangkir teh dan sekerat roti » April 24, 2010 9:27 PM | permalink

    ada contoh yang sudah menerapkan ini..?

  30. Tihang » April 24, 2010 11:18 PM | permalink

    UNTUK DEMONYA SILAHKAN LIHAT DISINI

  31. udah » April 27, 2010 4:56 PM | permalink

    mas, boleh minta xml template nya ini gak,,,??? soalnnya tampilannya bagus baget, tolong dibuat link downloadnya ya, terima kasih

  32. infophone-kdr » Mei 09, 2010 3:57 AM | permalink

    Makasih tutornya mas rapi dan keren hasilnya,kpn2 langsung dicoba menuju TKP...:D

  33. Tihang » Mei 20, 2010 7:31 AM | permalink

    Mudah2an benar-benar bermanfaat dech...

Back to form

Mohon berkomentar sesuai topik posting di atas !