List Navigasi MSN Style

Posted by Tips Trick Blogger Sunday, August 24, 2008 0 comments

Ini sebenarnya bukan saya lho yang ngasih namanya, tapi pertanyaan yang di ajukan oleh bung Hendrawan. “ ngomong2 gimana caranya bikin seperti yang ada diantara navbigasi dan isi postingan itu (yg kayak MSN style) “.

dan kalau di pikir-pikir enak juga kedengarannya . heuheuehu….

Sebenarnya untuk membuat Style list atau navigasi seperti itu, saya mengunakan pembagian kolom seperti yang telah di jelaskan pada “ Membuat postingan ala Majalah atau Koran “, dan untuk list image-nya saya mengunakan teknik Css Sprite, dan ini pun sudah saya tulis pada “ list image dengan teknik css sprite “ .

Otre-lah karena terkadang kita tidak butuh teori, dan lebih paham setelah mempraktekannya. jadi langsung saja pada prakteknnya.

Pertamaxxx.

seperti biasa buka tab Tata-Letak – Edit Html.

kemudian simpan syntax Css ini.

* {
margin: 0px;
padding: 0px;
}

di atas syntax ini.

body {
background:#ffffff;margin:0;color:#333333;
font:x-small Georgia Serif;font-size/* */:/**/small;
font-size: /**/small;text-align: center;
}

Setelah itu cari kode ini.

]]></b:skin>

kemudian di atas tag tersebut , yakni.

simpan syntax Css ini.

/* List Yahooo

---------------------------------------------*/

#nyaho li {

list-style:none;font-size:12px;padding:0px;margin:0px;

}

#nyaho li a {

background:url(http://www.geocities.com/jaloea/icon-yahoo-04.gif)

no-repeat scroll 0pt;display:block;font-family:verdana;

font-size:84%;font-weight:bold;

line-height:normal;margin:-1px 0pt -2px 0;

padding:3px 0pt 13px 40px;text-indent:-15px;

}

/* Box

-----------------------------------------------*/

#boxes {

float:left;width:100%;

margin:5px auto;border:0px solid $bordercolor;

}

#box1 {

width : 140px;float : left;text-align : left;

padding : 0px;margin-left : 10px;margin-top : 10px;

text-align : justify;

}

#box2 {

width : 120px;float : left;text-align : justify;

padding : 0px;margin-left : 10px;margin-top : 10px;

}

#box3 {

width : 140px;float : left;text-align : justify;

padding : 0px;margin-left : 10px;margin-top : 10px;

}

#box4 {

width : 140px;float : left;text-align : justify;

padding-right : 0px;margin-left : 10px;margin-top : 10px;

}

#box5 {

width : 140px;float : left;text-align : justify;

padding-right : 0px;margin-left : 10px;margin-top : 10px;

}

#box6 {

width : 200px;float : right;text-align : justify;

padding-right : 10px;margin-left : 10px;margin-top : 6px;

}