menu style LIST

Sebenarnya untuk membuat Style list atau navigasi seperti itu,  saya mengunakan  "mebuat kolom dibawah header" dengan pembagian kolom dengan mengunakan teknik Css Sprite, yang saya tulis pada “ list image dengan teknik css sprite “ . agar lebih paham setelah mempraktekannya. jadi langsung saja pada prakteknnya.
Pertama
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>