Cara membuat menu bar di blogspot dengan mudah

Cara membuat menu bar di blogspot dengan mudah adalah sebuah cara jitu jika sobat blogger ingin menampilkan semua halaman blog, dan bisa di lihat dengan mudah oleh pengunjung yang datang ke blog kita,

Nah kali ini saya akan mencoba sebuah trik untuk membuat menu bar dengan mudah, yang hanya di butuhkan sedikit keahlian dalam mengutak-atik HTML. Sebelum lanjut tutorialnya tidak ada salahnya lihat gambarnya nih di bawah. cekidoot....

Nah bagaimana tertarik bukan? Baiklah bagi yang sudah tidak sabar lagi ingin membuat menu bar di blogspot silahkan perhatikan langkah-langkah dari tutorial cara membuat menu bar di blogspot dengan mudah dibawah ini. Cekidot......

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>

#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://langkah2membuatblog.blogspot.com/p/abaut.html'>About Me</a></li>

<li><a href='http://langkah2membuatblog.blogspot.com/p/email.html'>Contact Me</a>

<ul>

<li><a href='https://plus.google.com/b/107404934236027850004/107404934236027850004/posts'>Google +</a></li>

<li><a href='http://www.facebook.com/pages/Langkah-Langkah-Membuat-Blog/474992502544254'>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), 1025px (lebar menubar), #000000 (background menubar).
Silahkan nama menubar yang berwarna biru Home sesuai dengan keinginan agan.
Ganti link yang berwarna merah http://langkah2membuatblog.blogspot.com/p/abaut.html dengan link agan.

Sekian pembahasan dari saya nih sob semoga tutorial cara membuat menu bar dengan mudah ini mampu membanti sobat semua yang pengen nambahin menu bar nih. sekian yaa......
wassalamualaikum. wr. wb.