Dari sekian banyak pembahasan dalam artikel anda diperlukan pengklasifikasian dan inilah peran lain dari Menu Navigasi tersebut. Pemilihan jenis navigasi juga diperlukan agar tujuan utamanya bisa tercapai dan bukan malah membuat bingung pengunjung anda yang berakibat trauma sehingga pengunjung enggan mengunjungi kembali blog anda. Nah untuk mengantisipasi hal semacam itu saya akan berbagi dengan anda tentang bagaimana cara memasang Menu Navigasi ini yang tentunya menunjang tampilan blog anda lebih modis. Are You Ready oke kita mulai.
1. Langkah awal login ke Blogger anda
2. Lalu masuk ke halaman Template
3. Selanjutnya pilih Sesuaikan
4. Nah sekarang anda pilih tambah CSS
5. Copas sintaks/kode dibawah ini di halaman tambah CSS tersebut.
#menubar{
width:900px;
height:32px;
background:#de360f;
margin: 0 auto;
}
#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
}
6. Jika sudah di paste anda tekan tombol terapkan ke blog
7. kembalilah ke blogger
8. pilih tata letak dan pilih cross 2 tambah widget html/javascript
9. Copas kode di bawah ini
"<div id="menubar">
<ul>
<li><a expr:href="data:blog.homepageUrl" href="https://www.blogger.com/null">Home</a></li>
<li><a href="http://blognya-margopblog.blogspot.com/">Edit Saya</a></li>
<li><a href="http://blognya-margopblog.blogspot.com/">Edit Saya</a></li>
<li><a href="http://blognya-margopblog.blogspot.com/">Edit Saya</a></li>
<li><a href="http://blognya-margopblog.blogspot.com/">Edit Saya</a></li>
</ul>
</div>"
10. Simpan dan Lihat hasilnya sekarang
Jika ada yang kurang jelas bisa anda tanyakan di kolom komentar saya siap membantu. Terima Kasih.
0 komentar:
Posting Komentar