Cara membuat menu bar di blogspot
dengan mudah adalah
sebuah cara jitu jika agan menginginkan tampilan semua halaman blog di lihat
dengan mudah oleh pengunjung dan salah satu cara dari kian banyak cara jika
agan ingin blog agan tampil lebih cantik yang mana sebelumnya juga ane sempet
sharing tentang cara membuat background blog
agar tampilannya lebih menarik nan cantik.
Kali ini ane akan mencoba berbagi
tips tentang cara membuat menu bar di blogspot dengan mudah yang hanya di
butuhkan sedikit keahlian dalam mengedit HTML. Sebelum kita melanjutkan
tutorial tentang cara membuat menu bar di blogspot, terlebih dahulu
silahkan lihatlah gambar di bawah ini yang menampilkan hasil akhir
dari menu bar di blogspot.
Nah bagaimana tertarik bukan?
Baiklah bagi agan-agan 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.
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;
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.
- See more at:
http://langkah2membuatblog.blogspot.com/2012/12/cara-membuat-menu-bar-di-blogspot.html#sthash.b4kVzJeG.dpuf