CARA MEMBUAT MENU CSS DI BLOG

one, two, three, four.. ,, hehee

pada postingan kali ini saya akan share tentang cara membuat menu CSS..




karena banyak juga teman saya yang nanya,,,  jadi saya akan coba share ...

berhubung saya juga dulu susah banget belajarnya,
tapi sekarang ...saya udah tau , jadi saya akan share buat temen-temen yang pengen belajar ngebloger :D

oke lansung saja .. turitorialnya ..
cekidout...

1. buka dashboar sobat/masuk ke Akun Blog Sobat,
2. Klik Template dan Klik Edit HTML,
3. Kemudian Cari ]]></b:skin> (cari dengan Ctrl + F) & letakkan/paste Kode CSS di bawah ini tepat di atasnya.

<style type="text/css">

#tabs {
    float:left;
    width:100%;
    font-size:93%;
    line-height:normal;
    border-bottom:1px solid #666;
    margin-bottom:1em; /*margin between menu and rest of page*/
    overflow:hidden;
    }

#tabs ul {
    margin:0;
    padding:10px 10px 0 0px;
    list-style:none;
   
    }

#tabs li {
    display:inline;
    margin:0;
    padding:0;
    }

#tabs a {
    float:left;
    background:url("media/left.png") no-repeat left top;
    margin:0;
    padding:0 0 0 6px;
    text-decoration:none;
    }

#tabs a span {
    float:left;
    display:block;
    background:url("media/right.png") no-repeat right top;
    padding:6px 15px 4px 6px;
    margin-right:2px;
    color:#FFF;
    }

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}

/* End IE5-Mac hack */
#tabs a:hover span {
    }

#tabs a:hover {
    background-position:0% -42px;
    }

#tabs a:hover span {
    background-position:100% -42px;
    }

</style>

4. Setelah kode tersebut selesai ditambahkan, silahkan Save Template.

5. Selanjutnya, Masuk ke Tata Letak dan ikuti langkah - langkah berikut :

• Klik Tambah Gadget,
• Lalu tambahkan Fungsi Pihak ke tiga HTML/Javascript,
• Selanjutnya, Copy Paste Kode di Bawah,

<div id="tabs">
  <ul>
    <li></li>
    <li><a href="#"><span>Menu 1</span></a></li>
    <li><a href="#"><span>Menu 2</span></a></li>
    <li><a href="#"><span>Menu 3</span></a></li>
    <li><a href="#"><span>Menu 4</span></a></li>
    <li><a href="#"><span>Menu 5</span></a></li>
    <li><a href="#"><span>Menu 6</span></a></li>
  </ul>
</div>

KETERANGAN

• tanda # yaitu alamat blog sobat
• tanda Menu 1,2,3,4 dan seterusnya adalah Menu yang sobat inginkan

6. Kemudian simpan dan liat hasilnya.

oke sobat ... :)