cara membuat menu pada blog menggunakan blogpot.com

Cara Membuat Menu pada Blog menggunakan Blogspot.com - merupakan cara yang tidak sulit karena, cara membuat menu itu relatif, tergantung dari kita apakah kita mau mempelajarinya atau tidak sehingga dapat membuat menu di blog dan mengedit menu tersebut. 

Cara Membuat Menu di Blog 

Sebelum membuat menu di blog, silahkan membuka blog sobat / kunjungi www.blogger.com untuk login 

• Pertama: Buka Dashboard blog sobat, 

• Kadua: Pada menu di sebelah kanan cari dan klik Tata Letak, 

• Ketiga: Cari tabel dengan judul Blog Posts di atasnya klik Tambahkan Gadget. 

• keempat: Pada saat muncul window/kotak baru klik HTML/Java Scipt (Klik tombol "+")

• Copy dan paste kode berikut pada kolom yang baru saja muncul

<style type="text/css">

/*CSS MENU*/

#menu{background:#343434;color:#eee;height:35px;border-bottom:4px solid #eeeded}

#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none;z-index:9999;}

#menu ul{height:35px}

#menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}

#menu li:first-child{border-left: none}

#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}

#menu li:hover > a,#menu li a:hover{background:#111}

#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}

#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}

#menu label span{font-size:12px;position:absolute;left:35px}

#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}

#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}

#menu li:hover ul.menus{display:block}

#menu a.home {background: #c00;}

#menu a.sub{padding:0 27px 0 14px}

#menu a.sub::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}

#menu ul.menus a:hover{background:#333;}

</style>

<!-- Mulai Area Menu -->

<nav id="menu">

<input type="checkbox" />

<label>≡Navigation</label>

<ul>

<li><a class="home" href="/">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Daftar Isi</a></li>

<li><a href="#">Menu</a></li>

<li><a href="#">Menu 2</a></li>

<li><a href="#">Menu 3</a></li>

<li><a href="#">Login Admin</a></li>

<!-- Mulai Area Menu Dropdown -->

<li><a class="sub" href="#">Menus</a>  <ul class="menus">

<li><a href="#" title="Menus">Menus 1</a></li>

<li><a href="#">Page</a></li>

<li><a href="#">Menus2</a></li>

<li><a href="#">Menus 3</a></li>

<li><a href="#">Menus 4</a></li>

<li><a href="#">Menus 5</a></li>

</ul>

</li>

<!-- Area Dropdown Selesai-->  </ul>

</nav>

<!-- Area Menu Selesai-->

• Kemudian, jangan lupa untuk disimpan. 

• Selesai.

Demikian artikel berjudul cara membuat menu pada blog semoga bermanfaat 

sekian, terima kasih.