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

Rabu, 27 Januari 2010

Membuat Multi Kolom


Coba anda kunjungi Forum Blogger. Lalu scroll kebawah. Disana ada multikolom yang berfungsi untuk menyimpan widget. Biasanya widget yang ditaruh di multikolom adalah recent posts dan recent comments.

Pertama-tama, hitung dulu lebar masing-masing multikolom. Cari lebar outer wrapper. Caranya: Cari kode seperti ini.
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Dari kode diatas didapatkan bahwa lebar outer wrapper adalah 660 piksel. Lalu kurangilah dengan 45 (total jarak jeda antara satu bagian dengan bagian yang lainnya (40 piksel) ditambah 5 piksel agar ada sedikit jarak sela. Jika lebar outer wrapper adalah 660 piksel, maka 660 - 45 = 615. Lalu dibagi tiga. Jadi 615 : 3 = 205. Jika tidak bisa dibagi (dengan kata lain hasilnya tidak habis jika dibagi), maka bulatkanlah ke angka yang dibawahnya (Misal lebar outer wrapper 800 dikurangi 45 = 755 dibagi 3 hasilnya adalah 251,67 (dibulatkan sampai dua koma di belakang nol) maka dibulatkan ke angka yang ada di bawahnya yaitu 251.

Kalau sudah dihitung, lakukan langkah-langkah berikut.

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

2. Silakan backup dulu templatenya.

3. Cari kode berikut:
/* Variable definitions
====================
4. Masukkan kode berikut dibawahnya.
<Variable name="multicolbgcolor" description="Multi Column Background Color"
type="color" default="#81F781" value="#81F781">
<Variable name="multicoltextcolor" description="Multi Column Text Color"
type="color" default="#FFF" value="#FFFFFF">
<Variable name="multicollinkcolor" description="Multi Column Link Color"
type="color" default="#0701FD" value="#0701FD">
<Variable name="multicolvlinkcolor" description="Multi Column Visited Link Color"
type="color" default="#A9A9F5" value="#A9A9F5">
<Variable name="multicolhlinkcolor" description="Multi Column Hover Link Color"
type="color" default="#FFF" value="#FFFFFF">
<Variable name="multicolheadercolor" description="Multi Column Header Color"
type="color" default="#088A08" value="#088A08">
<Variable name="multicolfont" description="Multi Column Font"
type="font"
default="12px Arial, Tahoma, Verdana" value="12px Arial, Tahoma, Verdana">
<Variable name="multicolheaderfont" description="Multi Column Header Font"
type="font"
default="12px bold 'Trebuchet MS', Verdana" value="12px bold 'Trebuchet MS', Verdana">
4. Cari kode:
]]></b:skin>
5. Masukkan kode berikut diatasnya.
/*Multikolom*/
#multikolom {
width: 660px;
position: relative;
clear:both;
margin: 0 auto;
color:$multicoltextcolor;
float: left;
font: $multicolfont;
background:$multicolbgcolor;
padding: 10px 0 10px 0;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
}

#multikolom h2 {
padding: 0px 0 2px 0;
margin: 0 0 10px 0;
color:$multicolheadercolor;
border-bottom: 1px solid #fff;
font:$multicolheaderfont;
}

#multikolom ul, multikolom ul li {
padding: 0;
margin: 0;
list-style-type:none;
}

multikolom a{
color:$multicollinkcolor;
text-decoration: none;
}

#multikolom ul li a{
display: block;
}

#multikolom ul li a:visited, #multikolom a:visited{
color:$multicolvlinkcolor;
}
#multikolom ul li a:hover, #multikolom a:hover {
color:$multicolhlinkcolor;
text-decoration:underline;
}

#multikolomkiri{
width: 205px;
float: left;
margin-left:10px;
}

#multikolomtengah {
width: 205px;
float: left;
margin-left:10px;
}

#multikolomkanan {
width: 205px;
float: left;
margin: 0 10px 0 10px;
}
Ket: Ubah ketiga tulisan width: 205px; masing-masing dengan lebar yang sudah dihitung tadi. Misalnya: width: 251px;

6. Cari kode berikut.
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
7. Diatasnya, ketikkan kode berikut.
<div id='multikolom'>
<b:section class='multikolom' id='multikolomkiri'/>
<b:section class='multikolom' id='multikolomtengah'/>
<b:section class='multikolom' id='multikolomkanan'/>
</div>
8. Simpan.

9. Beralih ke menu Elemen Halaman, kini sudah terlihat tulisan Tambah Gadget untuk multi kolom. Isikan dengan widget apa saja.

Nah, sekarang di blog anda akan terlihat multi kolom. Semoga artikel ini bermanfaat. Apabila ada pertanyaan atau komplain, silakan komen di blog ini.


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



5 komentar:

secangkir teh dan sekerat roti mengatakan...

main CSS....
takut berantakan ah.. hehe

Rizki mengatakan...

Itulah gunanya backup. Jika ada kesalahan bisa kembali ke pengaturan semula.

uchu mengatakan...

mantab gan

Indonesia Furniture Handicraft Wholesale Marketplace mengatakan...

mantap gan infonya..salam kenal..

Unknown mengatakan...

thanks bngt nih bos.. ilmu yg bermnfaat. salm knal ya. msh newbie nih tlnong bntuannya y bos.

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.