Cara Membuat Menu pada Blogspot

Setelah kemarin saya membahas bagaimana membuat blog dan bagaimana cara memposting artikel ke dalam blog, maka sekarang saya coba menjelaskan bagaimana cara membuat menu bar pada blogspot. Saya tahu cara ini dulu dari isnaini.com, salah satu pakar bloger Indonesia. Dan sekarang mau saya coba kasih ilmunya ke anda semua.

Ok, langsung aja ke pembahasan.

Sebelum anda membuat menu, terlebih dahulu sebaiknya anda membuat postingan dengan judul seperti apa yang nantinya akan anda jadikan judul menu tersebut.

Misalnya kamu ingin membuat menu Home, Ebout Me, dan Artikel. maka kamu harus membuat postingan dengan Judul/Title: Home, Ebout Me, dan Artikel, dengan demikian kita akan mempunya 3 halaman dengan url:

http://nama.blogspot.com/home.html,
http://nama.blogspot.com/eboout me.html dan
http://nama.blogspot.com/artikel.html.

Untuk selanjutnya anda masuk ke List-O-Matic. Dan ikuti langkah-langkah yang ada di dalamnya. 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>

ket : ganti teks yang berwarna biru dengan nama blog anda.
Kemudian anda masuk ke Dashbor – Layout - Add a Page Element – HTML/JavaScript dan copy / paste kode HTML tersebut di tab content. Selanjutnya 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;
}

Setelah selesai penyimpanan kode HTML di atas, sekarang anda masuk lagi ke dashbor-Layout-Edit HTML, dan letakkan kode CSS yang anda dapat dari List-O-Matic tadi sebelum kode :

]]></b:skin>

dan save template.

Selamat Mencoba !

Bagi Anda yang Pengen Belajar Design Grafis, Silahkan Klik Link Ini: Graphickoe.Com. Ayo Atuh di Klik, Biar Tutorialnya Muncul.

silahkan baca juga: