Forum, Blogger, diskusi, ilmu, berbagi, blogging, sharing, ide, inspirasi Kamu Forum

Rabu, 31 Maret 2010

Cara Membuat Dua Kolom dibawah Kolom Posting (Plus Tambah Gadget)

Anda merasakan ada yang berubah di blog saya? Tentu saja dua kolom dibawah kolom posting seperti gambar diatas.

Ada yang bilang kepada saya "... lebih baik template default ini diganti dengan yang lain? biar keliatan profesional ...". Sebenarnya saya ingin mengganti template ini, tetapi males, ribet gantinya. Meskipun sekarang telah ada fitur pertahankan widget, tetap aja males. Lagipula siapa bilang template default Blogger nggak profesional? asal kreatif template Minima dan template default Blogger lainnya bisa jadi profesional. Itu sebabnya saya keukeuh tetap mempertahankan template default ini. Asal tahu saja, blognya Dewi Lestari (http://dee-idea.blogspot.com) yang terkenal itu, masih menggunakan template default Blogger. Lagipula, asal kita kreatif, hal yang biasa bisa jadi luar biasa.

Ok, back to topic. Kita bahas lagi cara membuat dua kolom dibawah postingan. Ini bisa jadi alternatif multi kolom yang tempo hari pernah saya bahas. Ok. Tertarik membuatnya? Ikuti langkah-langkah berikut ini.

1. Login ke Blogger, lalu klik menu Tata Letak > Edit HTML.

2. Silakan backup template anda.

3. Taruh kode ini diatas kode ]]></b:skin>
#doublecolumnleft, #doublecolumnright{
height:auto;
width:205px;
padding:10px;
background:#81F781;
color:#000000;
}
#doublecolumnleft h2, #doublecolumnright h2{
font-size:large;
font-weight:bold;
}
#doublecolumnright h2{
text-align:right;
}
#doublecolumnleft a, #doublecolumnright a{
color:#0A2A0A; text-decoration:underline;
}
#doublecolumnleft a:hover, #doublecolumnright a:hover{
text-decoration:none;
}
#doublecolumnleft{
float:left;
}
#doublecolumnright{
float:right;
text-align:right
}
Ket: bagian 205px adalah lebar dari masing-masing kolom. Sesuaikan dengan lebar main wrapper anda.

4. Cari bagian main wrapper (kolom posting) anda. Misalkan punya saya:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='HTML4' locked='false' title='Kotak Pencarian' type='HTML'/>
<b:widget id='HTML16' locked='false' title='' type='HTML'/>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
5. Lalu sebelum kode </div>, ketikkan kode berikut.
<b:section class='dblcolumn' id='dblcolumnleft' preferred='yes'/>
<b:section class='dblcolumn' id='dblcolumnright' preferred='yes'/>
Sehingga menjadi:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='HTML4' locked='false' title='Kotak Pencarian' type='HTML'/>
<b:widget id='HTML16' locked='false' title='' type='HTML'/>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
<b:section class='dblcolumn' id='dblcolumnleft' preferred='yes'/>
<b:section class='dblcolumn' id='dblcolumnright' preferred='yes'/>

</div>
7. Simpan.

8. Beralih ke tab Elemen Halaman, anda akan menemukan link Tambah Gadget dibawah kolom posting. Klik link tersebut untuk menambah widget, semisal recent posts atau recent comments.
Berhasil? Selamat! Gagal? Coba lagi! Semoga bermanfaat!


Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Buzz It

Artikel Menarik Lainnya



11 komentar:

belajar internet mengatakan...

PERTAMAX,,,,,

mantap bro....

ekoya mengatakan...

mampir ke blogku jg ya...ditunggu komen+follow nya ya

tempat belajar bisnis online mengatakan...

lumayan buat tambah pengetahuan makasih infonya

Hanna Pertiwi mengatakan...

salam sobat,boleh saya kopi kode nya untuk saya terapkan sobat? bagus banget informasinya dan sangat berguna buat saya, trims sobat udh mau berbagi ilmu, salam kenal ya

Awan Al-Jabatiy mengatakan...

makasih ya tipsnya...
sekalian tukeran link ya mas...
silahkan cek di blog saya

Just4U mengatakan...

makasi banyak bantuannya mas

Game Online Anak mengatakan...

Mana tips buat pengguna wordpress jg...

Bloggerbusinessinformation.blogspot.com mengatakan...

thank's banget buat sharing ilmu nya
persis dengan sript punya saya
liat aja di blog saya ?
http://www.nahji.co.cc/

Yoez MrNox mengatakan...

nice gan....

poker mengatakan...

poker online | Agen Domino | Agen Poker|Kumpulan Poker | bandar poker | Judi Poker | bandar qiu | Judi online terpercaya

Posting Komentar

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.



Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]



:-))
:-)
:-D
(lol)
:-p
(woot)
;-)
:-o
X-(
:-(
:'-(
:-&
(K)
(angry)
(annoyed)
(wave) | (bye)
B-)
(cozy)
(sick)
(:
(goodluck)
(griltongue)
(mmm)
(hungry)
(music)
(tears)
(tongue)
(unsure)
(highfive)
(dance)
(blush)
(bigeyes)
(funkydance)
(idiot)
(lonely)
(scenic)
(hassle)
(panic)
(okok)
(yahoo)
(cry)
(doh)
(brokenheart)
(drinking)
(girlkiss)
(rofl)
(money)
(rock)
(nottalking)
(party)
(sleeping)
(thinking)
(bringit)
(worship)
(applause)
8-)
(gym)
(heart)
(devil)
(lmao)
(banana_cool)
(banana_rock)
(evilgrin)
(headspin)
(heart_beat)
(ninja)
(haha)
(evilsmirk)
(eyeroll)
(muhaha)
(taser) | (rammi)
(banana_ninja)
(beer)
(coffee)
(fish_hit)
(muscle)
(smileydance)
(fireworks)
(goal)
(bzzz)
(dance_bzz)
(Русский)
(code)
(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)


Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.