CARA MEMBUAT MENU BAR DI BLOG

Kali ini saya akan mencoba berbagi trik tentang cara membuat menu bar di blog. Baiklah silahkan perhatikan langkah-langkah dari tutorial cara pembuatannya

1. Silahkan masuk ke akun Blogger anda

2. Klik Template pilih cadangkan/pulihkan untuk berjaga-jaga jika terjadi hal-hal yang tidak di inginkan.

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

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

script 1 :

#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 style="margin: 5px 20 px 20 px;"> 

       
<div id='menubar'>

<ul>

<li><a expr:href='data:blog.homepageUrl'> Judul menu bar </a></li>

<li><a href='Ganti dengan alamat menu bar'>Judul menu bar</a></li>

<li><a href='Ganti dengan alamat menu bar'> Judul menu bar </a>

<ul>

<li><a href='Ganti dengan alamat Google +'>Google +</a></li>

<li><a href='Ganti dengan alamat Facebook'> Facebook</a></li>

<li><a href='Ganti dengan alamat Twitter’>Twitter</a></li>

</ul></li>

</ul>

</div>

8. Simpan Template.

KETERANGAN :

1. Sesuaikan kode #ff0000 (border bawah menubar), 1025px (lebar menubar), #000000 (background menubar).

2. Silahkan nama menu bar yang berwarna biru di ganti sesuai dengan keinginan.

3. Ganti link yang berwarna hijau  dengan link menu b ar.

Semoga dengan adanya pembahasan ini dapat membantu anda yang ingin membuat menu bar di blog, silahkan tinggalkan komentar jika mendapatkan kesulitan agar saya dapat segera membantu.