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

Jumat, 29 Januari 2010

Modifikasi Multi Kolom

Beberapa hari yang lalu saya pernah membahas cara membuat multikolom. Artikel tersebut dapat dilihat DISINI. Nah, kali ini kita akan memodifikasi multi kolom tersebut supaya terlihat semakin mantap.

Merubah warna dan jenis font.

Caranya mudah. Anda tinggal login ke Blogger lalu masuk menu Tata Letak > Font dan Warna.
Ini dia beberapa elemen/bagian yang bisa dimodifikasi.
  • Multi Column Background Color: Latar belakang multi kolom.
  • Multi Column Text Color: Warna teks multi kolom.
  • Multi Column Link Color: Warna link multi kolom.
  • Multi Column Visited Color: Warna link multi kolom yang telah dikunjungi.
  • Multi Column Hover Color: Warna link multi kolom saat hover
  • Multi Column Header Color: Warna judul widget pada multi kolom.
  • Multi Column Font: Font teks multi kolom.
  • Multi Colom Header Font: Font teks judul widget pada multi kolom.
Untuk mengubahnya tinggal klik pada bagian tersebut lalu atur sendiri.
Kalau sudah, klik Simpan Perubahan.
Mungkin ada yang bertanya. Kok bisa ya pengaturan multikolom muncul di font dan warna? Rahasianya, eng ing eng... pada pembahasan tentang cara membuat multikolom kemarin (Baca DISINI), kita menempatkan variabel di bawah tulisan:
/* Variable definitions
====================
Salah satu contoh variabel adalah:
<Variable name="multicolbgcolor" description="Multi Column Background Color" type="color" default="#81F781" value="#81F781">
atau:
<Variable name="multicolfont" description="Multi Column Font" type="font" default="12px Arial, Tahoma, Verdana" value="12px Arial, Tahoma, Verdana">
Lalu di kode CSS multikolom, kita memasukkan variabel diatas kedalam kode CSS. Seperti ini.
#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;
}
Jadi, coba anda lihat kodenya baik-baik. Misalnya kode variabelnya adalah < Variable name="multicolbgcolor" description="Multi Column Background Color" type="color" default="#81F781" value="#81F781">. Jadi, nama variabel tersebut adalah multicolbgcolor (dilihat dari kode name="...") sehingga untuk meletakkan variabel tersebut di kode CSS maka ditambah $ sehingga jika variabel tersebut dimasukkan ke dalam kode CSS maka akan menjadi $multicolbgcolor.

Biar nggak bundar ujungnya?

Untuk membuat multi kolom agar tidak bundar ujungnya, sebenarnya gampang saja. Caranya login ke Blogger lalu klik menu Tata Letak > Edit HTML. Silakan backup templatenya. Lalu cari kode berikut:
#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;
}
Hapus kode berikut:
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
Sehingga hasilnya seperti berikut.
#multikolom {
width: 660px;
position: relative;
clear:both;
margin: 0 auto;
color:$multicoltextcolor;
float: left;
font: $multicolfont;
background:$multicolbgcolor;
padding: 10px 0 10px 0;
}
Lalu simpan.

Apabila ada pertanyaan tentang multi kolom, silakan komen di bawah.


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



8 komentar:

Unknown mengatakan...

wah tampilannya menjadi menarik..ane mw coba diblog satunya lg.

kunjungi blog ane sob
http://omyohomework.blogspot.com/

Unknown mengatakan...

salam sahabat wah perlu di coba langkah ini thnxs n good luck ya

putra linggau mengatakan...

wah.. makin keren dan manteb nih tutorial blog nya... sangat membantu bagi rekan blogger lainnya..
lanjutkan dan sukses untuk anda

Kang marno mengatakan...

mantap sob inilah yang saya cari cari, terma kasih

Achmad Zulfikar mengatakan...

Hallooo :)

Forantum I Blogging is My Life I Tutorial Blog I Tips dan Trik Blog I SEO I Free Template mengatakan...

Sangat menarik, thank's ya.

kaos couple mengatakan...

ada efek gak sama layout yang uda dibuat sebelumnya bos???takut kena efek trus blog nya hancur gitu..

Motor Yamaha Mio J Modifikasi mengatakan...

Boleh jg, cmn masih takut otak-atik theme coz nubi bgt.

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.