Sabtu, 14 April 2012

Cara Membuat Menu di Blogspot dengan List-O-Matic

Membuat postingan dengan Judul/Title: Depan, Tentang, dan Portofolio, dengan demikian kita akan mempunya 3 halaman dengan url http://nama.blogspot.com/depan.html, http://nama.blogspot.com/tentang.html dan http://nama.blogspot.com/portofolio.html. Selanjutnya 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.
Here is the HTML for this list:
<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 ElementHTML/JavaScript dan letakkan dimana kamu pengen menunya muncul.
Here is the CSS for this list:
#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.

0 komentar: