Cara membuat menu bar di blogspot

Cara membuat menu bar di blogspot dengan mudah

Banyak cara membuat tampilan blog anda menjadi lebih menarik, salah satunya dengan membuat tampilan menu bar di blog anda. Berikut ini adalah cara membuat menu bar yang sederhana dengan mengedit kode html di blog.

Tampilan menu bar ini sesuai dengan yang saya gunakan di blog ini.

Nah bagaimana tertarik bukan?

Berikut ini langkah - langkahnya :

1. Silahkan masuk ke akun Blogger anda

2. Klik halaman "Template" download template lengkap untuk berjaga-jaga terjadi hal-hal yang tidak di inginkan.( backup setting widget anda ).

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>

#menubar{

border-bottom:4px solid #ff0000;

width:1025px;

height:32px;

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

}       

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='http:///p/abaut.html'>About Me</a></li>
<li><a href='http:///p/email.html'>Contact Me</a>
<ul>
<li><a href='https://plus.google.com'>Google +</a></li>
<li><a href='http://www.facebook.com'>Facebook</a></li>
<li><a href='https://twitter.com'>Twitter</a></li>
</ul></li>
</ul>
</div>

8. Simpan Template.

Note: 

Sesuaikan lebar dan panjang menu bar dengan blog anda.

• Sesuaikan kode #ff0000 (border bawah menubar), 1025px (lebar menubar), #000000 (background menubar).
• Silahkan nama menubar yang berwarna biru Home sesuai dengan keinginan agan.
• Ganti link yang berwarna merah http:// dengan link agan.