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;
}]]></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;
}
---------------------------------------------*/
#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='no'/>
</div>
<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>
<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>
Posts
Post a Comment