Kali ini saya 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;
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://beatdownx.blogspot.com/p/about.html'>About Me</a></li>
<li><a href='http://beatdownx.blogspot.com/p/email.html'>Contact Me</a>
<ul>
<li><a href='https://plus.google.com/b/107404934236027850004/107404934236027850004/posts'>Google +</a></li>
<li><ahref='http://www.facebook.com/pages/'>Facebook</a></li>
<li><a href='https://twitter.com/ErixBeatdown'>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://beatdownx.blogspot.com/p/about.html dengan link agan.
Itulah pembahasan mengenai tutorial tentang
cara membuat menu bar di blog dengan mudah
semoga dengan adanya pembahasan ini dapat membantu sobat blogger yang
ingin membuat menu bar di blogspot, silahkan tinggalkan komentar jika
mendapatkan kesulitan agar saya dapat segera membantu.
Rahasia Bogspot - Sebelum memasang widget feedjit
sebaiknya sobat mengetahui dulu manfaat tentang widget yang satu ini.
Widget feedjit seringkali ditampilkan pada blog terutama yang
menggunakan platform blogspot banyak sekali yang sudah
menggunakan selain bermanfaat widget yang satu ini cukup lumayan untuk
menambah aksesoris blog terutama blog baru yang masih kosong. Kebanyakan
blogger memasangnya pada sidebar atau bagian bawah blog.
