Cara membuat menubar di blogspot

Cara membuat menubar di blogspot dengan mudah adalah sebuah cara untuk menigkatkan tampilan sehingga halaman blog di lihat dengan mudah oleh pengunjung dengan cara membuat background blog agar tampilannya lebih menarik. 

Membuat menubar di blogspot dengan perhatikan langkah-langkah dibawah ini:

Cara membuat menu bar di blogspot dengan mudah

     1.      Silahkan masuk ke akun Blogger agan.

     2.      Klik halaman "Template" download template lengkap untuk berjaga-jaga terjadi hal-hal yang tidak di inginkan.

     3.      Centang "Expand Template Widget". 

     4.      Terus silahkan cari kode ]]></b:skin> denan menggunakan Ctrl + F.

     5.      Simpan kode script di bawah ini tepat di atas kode ]]></b:skin>

/*  Awal MenuBAR menny */

#menubar{

border-bottom:4px solid #ff0000;

width:825px;

height:40px;

background:#000000;

float:center;

margin-bottom:3px;

}

#menubar ul{

float:left;

margin:0;

padding:0;

}

#menubar li{

float:left;

list-style:none;

margin:0;

padding:0;

}

#menubar li a, #menubar li a:link{

float:left;

padding:8px 12px;

color:#fff;

text-decoration:none;

font-size:13px;

font-weight:bold;

}

#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {

background: #ff0000;

color: #fff;

text-decoration:none;

}

#menubar li li a, #menubar li li a:link, #menubar li li a:visited{

font-size: 12px;

background: #ff0000;

color: #fff;

text-decoration:none;

width: 150px;

padding: 0px 10px;

line-height:30px;

}

#menubar li li a:hover, #menubar li li a:active {

background: #000000;

color: #ffffff;

}

#menubar li ul{

z-index:9999;

position:absolute;

left:-999em;

height:auto;

width:170px;

margin-top:32px;

border:1px solid ##ff0000;

}

#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{

left:auto

}

#menubar li:hover, #menubar li.sfhover{

position:static

}      

/* Akhir dari menubar Menny */

     6.      Untuk seterusnya silahkan cari kode <div id="content-wrapper"> 

     7.      Simpan kode script di bawah ini tepat di atas kode <div id="content-wrapper">

<div id='menubar'>

<ul>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Algoritma</a></li>

<li><a href='#'>Pemrograman</a></li>

<li><a href='#'>Komputer Umum</a></li>

<li><a href='#'>About Me</a></li>

<li><a href='#'>Contact Me</a>

<ul>

<li><a href='https://plus.google.com/u/0/'>Google +</a></li>

<li><a href='https://www.facebook.com/menny.laviola'>Facebook</a></li>

<li><a href='https://twitter.com/Langkah2_Blog'>Twitter</a></li>

</ul></li>

</ul>

</div>

      8.      Simpan Template.

Note: 

·         Sesuaikan kode #ff0000 (border bawah menubar), 850 px (lebar menubar), #000000 (background menubar).

·         Silahkan nama menubar yang berwarna biru Home sesuai dengan keinginan anda.

·         Ganti link yang berwarna.