Met malem semua. Di malam yang dingin ini, ditemani sms dengan gebetan, saya mau share sebuah tips yang mudah-mudahan berguna bagi kita semua. Saya mau berbagi pengetahuan yang sebenarnya baru tadi siang juga saya dapet secara tidak sengaja. Yups, sesuai judul diatas, membuat Menu Bar di Template Blogspot yang Baru.
Langsung aja kita mulai tutorial membuat menu bar. Pertama-tama masuk ke blogger > klik Rancangan > Edit HTML. Beri tanda centang pada Expand Template Widget. Kemudian cari kode ]]></b:skin> . Untuk lebih mudah dalam mencari, tekan ctrl+F pada keyboard dan pastekan kode tersebut di kotak pencarian. Setelah kode ]]></b:skin> ketemu, copy paste kode dibawah ini tepat diatas ]]></b:skin>.
#menubar{
width:900px;
height:32px;
background:#de360f;
float:center;
margin-bottom:10px;
}
#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{
border-right:1px solid #F0512D;
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 {
color:#ffa500;
text-decoration:underline;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
color: #ffa500;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##F0512D;
}
#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
}
Sekarang masalah yang sering saya temui ketika membuat menu bar di mulai dari langkah ini. Biasanya kalau di blog lain, perintah selanjutnya mencari kode <div id='content-wrapper'>. Akan tetapi, di template blog yang baru seperti yang sedang saya gunakan sekarang tidak ada lagi kode tersebut.
Tanpa sengaja, tadi siang saya menemukan cara untuk mengakali hal tersebut. sebagai ganti kode <div id='content-wrapper'>, cari kode <div class='tabs-outer'>, kemudian copy paste kode di bawah ini tepat di atas kode <div class='tabs-outer'>.
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Edit Me</a>
<ul class='children'>
<li><a href='#'>Edit Me</a></li>
<li><a href='#'>Edit Me</a></li>
</ul>
</li>
<li><a href='#'>Edit Me</a>
<ul class='children'>
<li><a href='#'>Edit Me</a></li>
<li><a href='#'>Edit Me</a></li>
<li><a href='#'>Edit Me</a></li>
<li><a href='#'>Edit Me</a></li>
</ul>
</li>
<li><a href='#'>Edit Me</a>
<ul class='children'>
<li><a href='#'>Edit Me</a></li>
<li><a href='#'>Edit Me</a></li>
<li><a href='#'>Edit Me</a></li>
<li><a href='#'>Edit Me</a></li>
</ul>
</li>
<li><a href='#'>Edit Me</a>
<ul class='children'>
<li><a href='#'>Edit Me</a></li>
<li><a href='#'>Edit Me</a></li>
<li><a href='#'>Edit Me</a></li>
<li><a href='#'>Edit Me</a></li>
</ul>
</li>
</ul>
</div>
Ganti tulisan Edit Me dengan judul menu yang diinginkan dan ganti tanda # dengan alamat url yang ingin dituju.
Sentuhan terakhir yang diperlukan adalah dengan mengeklik save template/simpan template, lalu lihat hasilnya. Menu bar telah selesai anda buat.
Tidak ada komentar:
Posting Komentar