Membuat Daftar Menu 5 Kolom

Menu seperti ini pertama kali saya lihat di tempat Kang Yasin. Menu seperti ini menurut saya sangat berguna. Selain desain yang menarik juga mampu menampung banyak link karena terdiri dari 5 Kolom. Juga dilengkapi gambar di bagian kanan untuk semakin mempercantik dan terlihat tidak kaku. Untuk membuatnya? Mudah sekali mari ikuti tutor saya...

Guest Post dari Firex Santos di http://4-bang.blogspot.com/

1. Login ke blogger
2. Tata Letak
3. Edit HTML
4. Centang Expand Templates Widget
5. Masukkan css nya, Cari kode ]]></b:skin>
6. Letakkan kode berikut di atasnya

/* 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 #e6e6e6;
}
#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 : 190px;float : right;text-align : justify;
padding-right : 10px;margin-left : 5px;margin-top : 6px;
}
#boxes p {
padding-left : 0px;padding-right : 0px;
}
#boxes2 {
float:left;width:100%;
margin:5px auto;border:0px solid #e6e6e6;
}

7. Simpan Template
8. Selanjutnya adalah membuat gadget HTML d bawah header.
- Klik add gadget
- Pilih HTML/Java Script
- Masukan script berikut ini

<div id="boxes">
<div id="box1"><ul id="nyaho">
<li><a style="background-position: 0pt -1120px;" href="http://4-bang.blogspot.com/search/label/AntiVirus%20Software" title="Antivirus">Antivirus</a></li>

<li><a style="background-position: -400px -1280px;" href="http://4-bang.blogspot.com/search/label/Hacking%20Software" title="Hacking Software">Hacking Software</a></li>
<li><a style="background-position: -400px -120px;" href="http://4-bang.blogspot.com/search/label/Converter" title="Converter">Converter</a></li>
</ul></div>
<div id="box2"> <ul id="nyaho">
<li><a style="background-position: 0pt -1600px;" href="http://4-bang.blogspot.com/search/label/Mp3%20download" title="Download Mp3">Download Mp3</a></li>
<li><a style="background-position: 0pt -1400px;" href="http://4-bang.blogspot.com/search/label/Utilities" title="Utilities">Utilities</a></li>
<li><a style="background-position: 0pt -600px;" href="http://4-bang.blogspot.com/search/label/Dictionary" title="Dictionary">Dictionary</a></li>
</ul></div>

<div id="box3"> <ul id="nyaho">
<li><a style="background-position: -400px -760px;" href="http://4-bang.blogspot.com/search/label/Multimedia" title="Multimedia">Multimedia</a></li>
<li><a style="background-position: 0pt -439px;" href="http://4-bang.blogspot.com/search/label/Apperance" title="Themes and Apperances">Apperances</a></li>
<li><a style="background-position: 0pt 0px;" href="http://4-bang.blogspot.com/search/label/Downloader" title="Downloader">Downloader</a></li>
</ul></div>
<div id="box4"><ul id="nyaho">
<li><a style="background-position: 0pt -1320px;" href="http://4-bang.blogspot.com/search/label/Online%20Software" title="Online Software">Online Software</a></li>
<li><a style="background-position: 0pt -1280px;" href="http://4-bang.blogspot.com/search/label/Picture%20Editor" title="Picture Editor">Picture Editor</a></li>
<li><a style="background-position: 0pt -80px;" href="http://4-bang.blogspot.com/search/label/Security%20and%20Privacy" title="Security and Privacy">Privacy</a></li>

</ul></div>

<div id="box5"><ul id="nyaho">
<li><a style="background-position: 0pt -600px;" href="http://4-bang.blogspot.com/search/label/Global%20Posting" title="Global Posting">Global Posting</a></li>
<li><a style="background-position: 0pt -880px;" href="http://4-bang.blogspot.com/search/label/Games" title="Games">Games</a></li>
<li><a style="background-position: 0pt -1080px;" href="http://4-bang.blogspot.com/search/label/Link%20Exchange" title="Link Exchange">Link Exchange</a></li>
</ul></div>

<div id="box6">
<a target="_blank" href="http://4-bang.blogspot.com"><img style="width: 200px; height: 100px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi93tcdUWI5FMsPwZOScyNhLg-7kITGZ1Pn307UTXjC7Tr9db4HwgGJrOf0pFv5Anlr0o1MMaudTg_8dHSrTnlDf_cfncPWqlvQK2Rkkd0NL2D-KF2GT6MHKbqRf3PcCZyc7CdIZbZJ-0Gf/s400/KASPERSKY2010-ISOEM.jpg" title="Free Premium Software"/></a>

<p></p></div>


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

Catatan... Bagi yang elemen halamannya belum dilengkapi penambahan gadget Anda bisa membuatnya dengan mengikuti tutor Menambah Elemen di atas header atau di bawah header.

Related Posts by Categories

Widget by Hoctro | Jack Book