List Navigasi MSN Style

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;
}

#boxes p {
padding-left : 0px;padding-right : 0px;
}

 

* Sebenarnya kita bisa saja membuat  list-nya langsung pada tag boxes, namun mungkin seaktu-waktu anda membutuhkannya pada Html lain.

Keduaaaxxxx :

cari html ini.

<div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol' showaddelement='no'/>
      </div>

kemudian ganti dari tulisan “ no “ menjadi “ yes” seperti di bawah ini.

<b:section class='crosscol' id='crosscol' showaddelement='yes'/>

Jika di ilustrasikan seperti ini.

sebelum ( lihat garis merah ):

Sesudah :

Karena kita akan menambahkan Navigasi/list MSN ini di bawah header.

 

Setelah beres Simpan Template.

Ketigaaxxxxx :

Buka tab Elemen Halaman, dalam tab Tambahkan Gadget ( di bawah header )

 

Setelah terbuka  pilih Html/Javascript.

 

kemudian masukan tag html ini.

 

<div id="boxes">

<div id="box1"><ul id="nyaho">
<li><a style="background-position: 0pt -1120px;" href="Url Link" title="keterangan link">Nama List</a></li>

<li><a style="background-position: -400px -1280px;" href="Url Link" title="Keterangan">Nama List</a></li>
<li><a style="background-position: -400px -120px;" href="Url Link" title="keterangan">Nama List</a></li>
</ul></div>

                               <div id="box2"> <ul id="nyaho">
<li><a style="background-position: 0pt -1600px;" href="Url Link">Nama List</a></li>

<li><a style="background-position: 0pt -1400px;" href="Url Link">Nama List</a></li>

<li><a style="background-position: 0pt -600px;" href="Url Link">Nama List</a></li>

</ul></div>

<div id="box3"> <ul id="nyaho">
<li><a style="background-position: -400px -760px;" href="Url Link">Nama List</a></li>

<li><a style="background-position: 0pt -439px;" href="Url Link">Nama List</a></li>

<li><a style="background-position: 0pt 0px;" href="Url Link">Nama List</a></li>

</ul></div>          

              <div id="box4"><ul id="nyaho">
<li><a style="background-position: 0pt -1320px;" href="Url Link">Banner Link</a></li>

<li><a style="background-position: 0pt -1280px;" href="Url Link"> Komentar</a></li>

<li><a style="background-position: 0pt -80px;" href="Url Link" title="Recent Post">Recent Post</a></li>

</ul></div> 

                 <div class="clear"></div>
                </div>

 

* atau kode-nya bisa kamu donlot di sini.

Url Link  ( alamat link ) , contoh ; http://catalog-tutorial.blogspot.com/2008/04/technorati-vitamin-untuk-blog.html

Keterangan : Vitamin Blog

Nama List : Tecknorati.

Page views this post: reader