Pasang banner iklan disini

Sunday, March 18, 2012

CARA MEMBUAT MENU BLOGSPOT DENGAN LIST-O-MATICK

Sebagai blogger pemula, awalnya saya buingung banget, melihat blog-blog tetangga tampilanya keren-keren, dan rapi..... banget. teru tama yang sangat menarik buat saya ketika melihat ke paling atas halaman mereka. disitu ada sederet menu yang kelihatan rapi dan bagus kalo menurut saya. tapi kok saya tidak bisa membuatnya ya?
Saya udah otak-atik dibagian templatnya, tapi tetep enggak ketemu cara menempatkan menu seperti di blogg teman senior.
Lalu saya blogwallking, dan saya menemukan cara praktis dan mudah
dalam pembuatan menu blogspot ini. Nah, mari sobat punggawa simak langkah-langkahnya berikut ini:

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 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.
Sudah cukup jelas?
Selamat mencoba dan Sukses.

Shalam....



1 comments:

SMS Gratis Disini