Tuesday, April 19, 2011

Cara Membuat Menu di Blogspot

Misalnya kamu ingin membuat menu Depan, Tentang, dan Portofolio. maka kamu harus 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.

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


#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;
}



Terus silahkan Copy kode HTML di bawah dan masukkan lewat Add a Page ElementHTML/JavaScript dan letakkan dimana kamu pengen menunya muncul biasanya di bawah (HEADER)..



<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>





Selamat Mencoba !
semoga bermanfaat.

No comments:

Post a Comment