BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

Triks Css : List Dua Kolom

Membagi satu list style ke dalam dua kolom.

gam2

Trik list menjadi dua kolom ini sebenarnya sangat berguna sekali terutama bagi yang mempunyai sidebar cukup lebar antara 260 px atas.  Setidaknya dengan cara itu bisa memangfaat space atau ruang yang sangat lebar tersebut.


Untuk peng-aplikasiannya sangat mudah pertama cari dulu tag ini.

]]></b:skin>

Kemudian Simpan kode  ini di atasnya.

/* Kode Css List Two Kolom 
------------------------------------------------------------------------------------------*/
#catl {
  padding :5px 10px;
  width : 91%;
  background-color : #ffffdd;
  border : 1px solid #ccc;
  margin : auto;
}

#catl h3 {
display : block; color : #669900; padding-bottom : 5px;
margin-bottom : 5px; border-bottom : 1px solid #666;font-size:14px; }

/* style all the list items here */
#catl ul li {
  height : 1em;
  list-style-type : none;
  color : #333;
  padding : 0.3em 0 0.4em 0.25em;
  font-size : 0.9em;
  border-bottom : 1px solid #ccc;
  text-indent:0px;
}

/* every second list item is positioned outward and moved up equal to LI height to even them */
#catl ul li.catl_l2 {
  margin-left : 50%;
  margin-top : -1.8em;
  padding : 0.3em 0 0.4em 0.5em;
  border : 0;
}  

/* Every other two list items are styled with a background for usability and style */
.catl_alt {
  background-color : #fffffc;
}

/* ini merupakan code hacking css untuk Ie 6*/
* html #catl ul li.catl_l2 {
  margin-top : -2.3em;
}

Setelah itu simpan perubahan. kemudian tambahkan sebuah widget atau gadget Html/javascript. dan masukan kode Html ini.

<div id="catl">
<h3>Satu List Dua Kolom</h3>
<ul>
<li><a href="#">List Item Satu</a></li>
<li class="catl_l2"><a href="#">List Item Dua</a></li>
<li class="catl_alt">List Item Tiga</li>
<li class="catl_l2">List Item Empat</li>
<li>List Item Lima</li>
<li class="catl_l2">List Item Enam</li>
<li class="catl_alt">List Item Tujuh</li>
<li class="catl_l2">List Item Delapan</li>
</ul>
</div>

Yang perlu di ganti adalah tulisan antara tag <li> dan </li>.

Jika ingin membuat linklist  menjadi seperti ini.

<li><a href=”http://alamat url/”> Nama List </a></li>

jika ingin membuat list berupa link gambar seperti ini.

<li><a href="http://alamat url/"><img src="alamat gambar></a></li>

gam2
gam1

* Note :

a. Atur tulisan list-nya jangan terlalu panjang

b Jika ingin mengunkana gambar atur nilai tinggi dan lebarnya, kira-kira 75px X 10px.

View Source : green-beast

Technorati tags: ,

 blog cat


tweety-02 (Custom) Download Minima Cigazine Template

Makacih atas kunjugan dan supportnya selama ini

Page views this post: reader

43 komentar:

Pertamaxxx said...

Pertamaxxx gak ya...

Qittun Nyepam said...

Seeep kang tutorialnya, bungkus dulu ah...

Buat besok2 aja...bingung, template dari kang jaloe masih banyak coloumn yang gak terpakai.. he..he..

subagya said...

Mantab kang ..... hmmm bisa buat modifikasi template.. tapi harus ke add page element yaks? bisa di integrasikan ke struktur templatenya ga kang?

JALOE said...

@ Subagya

bisa.. caranya cari saja bagian sidebar pd html na

abang said...

Waduh ...sering2 mampir sini tambah pinter nih hue he he ..

Top posting ...!!!

Syamsul Alam said...

Wah... nih info sangat berguna! Makasih sekali! Tralalalalalala!!!!

harry said...

asyekkkk....sahur malem....dapet ilmu neh....makasih.....

Tukang Sapu Radio said...

Wah. Lha ane nggak ngerti yang beginian. Belajar ama om jaloe ah... siapa tahu ntar jadi master kayak yang lain.

edisamsuri said...

Katemu juga yang saya cari kang thanks

Brigadista said...

naaah ini diaa,..akhirnya dataang juga,..thanks berat bro,.. nggak percuma pagi pagi ngajakin lari,..!!!

gus said...

jadi rapi jali sidebar kita. kayak anak Akmil baris. Rapi jali. seep Kang. ijin Kantongin....

gus said...

Btw, klo tak inget2...Suhu Jaloe ini kok sukanya ngeposting Sesuatu agar bisa dibagi dua. mulai halaman postingm, kolom komentar. sekarang sidebar.

Jangan2...ini pertanda ada bakat terpendam sebagai poligamers neh. ga cukup satu istri nantinya deh...(hahahaha, *mode ngabuuuur...on*)

brigadista said...

setelah di cobain, ternyata rasanya manis ,..eeh mangnya buah, ..ternyata bisa dibikin 3 atau empat kolom ya !!

Bani Risset said...

Entah kapan,, tp pasti satu waktu nanti saya pake tips ini..

(kaya lagu iwan pals aja)

zlam said...

weleh..weleh...ilmu baru lagi nih...
Suasana lebaran masih sempet nulis tutorial juga ya....hebat..bat..bat..

Blogger Addicter said...

wekzz...dapet aja triknya ini..hehehe..maaf kang br mampir nie..lg sibuk ama kerjaan yg ruwet..kayanya sebulan plng cma gini doang..ndak konsen mau post saya..

ide kang jaloe kagak ada matinyee..wekekekek..

calut..calut..kapan2..tak praktekin dah..mo bookmark dl biar ga lupa..hehehe..

Anasku said...

wah napa gak dari dulu kang nulisnya... ini yang aku carii... tau gitu aku gak usah susah2 bagi sidebarku jadi dua kolom.. jiakakakakka..

Anthony Harman said...

Thanks kang. Berguna banget neh. Ada contohnya yang udah pake ya?

JALOE said...

@ Gus

hihihihihi.. mudah2 iya suhu..wakakkaak

@ Blogger Adicter

Met bersibuk ria dengan pekerjaan deh.. pasti ttg review..wekekkekk

Blogger Addicter said...

engga kang..akun saya di suspend..hikzzz..bulan ini br terima $55 ajah..hikzz..mana BV lom bayar2 lagi..wah jangan ikutan BV kang..ampe tgl skg engga dibayar punya saya..cuma br atu doang yg $10..udah ngimel sgala macem..dicuekin..capeee dehhh..mending reviewme..nikmat..heuheuheu..bulan depan br bs dapet job lg..

saya kok dibilang copas sm advertisernya..lucu..padahal saya kan ambil produk dia jg sebagai bahan post..aneh..dikit lg kata yg diambil..hikzzz..

waduh buka rahasia disini..xixixixi..

JALOE said...

@ Blog Addicter

wekekek..sip bos atas sarannya.. sy dah ikutan BV.. tapi sampe sekarang beloem juga di kasih job.. ya udahlah.. di biarin dulu

ren said...

jalu, jalu,ini ga nyambung dg artikel, ini semacam request yg berharap ditanggapi meski mungkin out of date dan ga terlalu menarik:
gmn sih supaya postingan byk dpt komentar? aku ga suka bloghopping kr aku bukan jangkrik yg suka hopping around, jalan-jalan menelusuri blog2 yg beragam2 tetapi isinya ga beda2 amat, juga ga suka menulis panjang2 bertele-tele menerangkan hal yg sudah jelas (minimal sudah terbahas di blog2 ataw situs2 lain)... tapi aku bukan anti sosial dan bukan si congkak yg tidak butuh masukan ini itu, jadinya aku nyadar juga kalo blog aku kok ga membuka nuansa komunikasi. aliasnya ga ada komentar. tutorialmu dilengkapi beginian dung, semacam artikel tutorial tentang membangun komunitas--tentu saja tipsnya ttg menggaet pengunjung yg nyambung dg ide blog/situs supaya ga hy sekadar datang berulang kali tapi tak pernah menyapa ... :)

Kireina said...

Ilmu kelas tinggi nich... harus dicerna dahulu... apalagi punyaku udah gak pake template standart nich..(perlu bertapa dahulu 3 hari 3 malam) hehehe....

JoVie said...

wah, bagus nih Suhu....
kalo buat label gimana bikinnya???
mohon pencerahan, soalnya disini penghujanan....*halah*

BloGendeng said...

Oalah gitu ta. Thx,bro. Disimpen dulu ntar sewaktu-waktu bisa dipake.
NIce posting

Anthony Harman said...

bedanya list dua kolom ama sidebar dua kolom apa ya, kang? sama ato emang laen?

yog@ said...

dah dipasang,tpi bingung isiin apa ya :(

JALOE said...

@ Mas anthony

sangat berbeda sekali mas.. namun list hanya solusi saja jika punya sidebar lebar namun ngga mau di bagi dua kolom...

@ yoga

Iklan Juga bisa bro

Abah Dani said...

Sering baca...

Jadi Tambah Ilmu.......

Siap mencoba.

Mode Lembur...ON

Mode Sabar....ON

MICK said...

lumayan buat ngisi agenda utak - utik blog mas ... diutil dulu ah ...

blog cak Faris said...

numpang mampir

blog cak Faris said...

trmks atas informasi trik list nya

Panda said...

wah, asik nih. bookmark dulu ah. buat kapan2 kalo ganti layout

makasih Suhu

lilisindrawati.blogger.com said...

Dik, kalo kita mau ganti templat baru apakah pasti konten blog hilang semua? Dan apakah harus di save satu-satu?
terima kasih....

JALOE said...

@Lilisdrawati

iya mba mesti di backup ( di save ) dulu untuk widget2-nya.. satu persatu

Sandro said...

kak, mantab nich tips2nya
kek saya mau tanya:
gimana sih caranya supaya setiap postingan blog jadi ada link "readmore" nya
aha, tolong di reply ya, thx

kapanpun said...

mantap banget ni tutornya OM

agil said...

waduh mantap tutor nya bro...
succes selalu bro..ditunggu update nya...

.: thom :. said...

Wah mantab nih tutornya ...
Ini dia yang saya cari-cari...
Wah jan yang satu ini emang sip dah :)

troublemaker be said...

kok gak bisa ya di blogku, menceng semua, udah gw delete, bisa lihat source aslinya nggak?

adeska said...

alhamdulillah, ilmu ini yang saya cari2 selama ini. akhirnya ketemu juga.
terima kasih, kang Jaloe.
saya jadi follower akang dech!

anidanita kanapi said...

wah bagus sekali teknik ini.aku baru saja mempraktikkanya

idblogku said...

Menari untuk di pelajari

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial