Buat List menu dengan List-O-Matic

. Friday, November 2, 2007
5 komentar

Ni tutorial uda aku terapin di blogku yang laen eh baru kepikiran ngepos sekarang setelah baca2 di tempat om isnaini. trims mas jd kepikiran bwt ngepos neh..

contohnya gini, misal kamu ingin membuat menu HOME, ABOUT US,FEED. maka kamu harus membuat postingan dengan Judul/Title: HOME, ABOUT US, dan CONTACT US, dengan demikian kita akan mempunya 3 halaman dengan url

http://nama.blogspot.com/home.html, http://nama.blogspot.com/about us.html dan http://nama.blogspot.com/feed.html.

Lalu abis ntu ikuti langkah-langkah pembuatan menu secara otomatis menggunakan List-O-Matic. Setelah semua langkah di lakukan, kamu akan di beri 2 jenis kode yaitu HTML dan CSS.


contoh yg akan muncul di list-o-matic setelah di generate

kode HTMLnya:

<div id="navcontainer">

<ul id="navlist">

<li><a href="http://nama.blogspot.com/depan.html">Depan</a></li>

<li><a href="http://nama.blogspot.com/tentang.html">Tentang</a></li>


<li><a href="http://nama.blogspot.com/portofolio.html">Portofolio</a></li>

</ul>

</div>


Copy kode HTML dan masukkan lewat Add a Page Element - HTML/JavaScript dan letakkan dimana kamu pengen menunya muncul.

kode CSSnya:

#navlist ul

{

margin-left: 0;

padding-left: 0;

white-space: nowrap;

}

#navlist li

{

display: inline;


list-style-type: none;

}

#navlist a { padding: 3px 10px; }

#navlist a:link, #navlist a:visited

{

color: #fff;

background-color: #036;

text-decoration: none;

}


#navlist a:hover

{

color: #fff;

background-color: #369;

text-decoration: none;

}



Sedangkan untuk kode CSS harus di copy dan di letakkan dalam kode template. Di halaman template blog kamu, pilih Edit HTML, letakkan kode CSS dari List-O-Matic tadi sebelum kode ]]></b:skin> dan save template.

jadi deh....



Free psp themes, free psp themes, download ps3 themes


Read More......