Cara Membuat Menu di Blogspot dengan List-O-Matic

Banyak
yang nanyain cara bikin menu seperti yang aku pake di blog ini. Untuk blogspot,
sebelum membuat menu, halaman yang akan di link sebaiknya di buat dulu dari
postingan biasa, karena di blogspot tidak ada fasilitas membuat halaman, yang
ada hanya membuat postingan. jadi menu kita nantinya akan di link ke postingan
yang udah kita buat.



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.



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 Element – HTML/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.



Selamat Mencoba !