Hay sobat STKL, membuat tampilan blog menjadi menarik adalah dambaan bagi setiap blogger. Di samping konten yg berisi dan bermanfaat, tampilan blog yang menarik tentunya akan mendatangkan Viewer/ visitor yg cukup banyak. Bagi para pemburu dollar di blogger, visitor adalah sebuah "kado" yg sangat berharga. kali ini STKL akan memberikan Cara Membuat Menu Navigasi di Blog Baru. Pada postingan STKL kali ini saya akan memberikan style menu navigasi ‘Horizontal’.
Berikut adalah langkah-langkah membuat menu navigari horizontal:
- Masuk ke Blogger.
- Pilih Template – Edit HTML.
- Copy-kan kode berikut kemudian paste-kan di atas kode]]></b:skin>
/* navbar Step1 */
#bg_nav { background: #ffffff; width: 960px; height: 26px;
font-size: 11px; font-family: Arial, Tahoma, Verdana; color: #000000;
font-weight: bold; margin: 0px auto 0px; padding: 0px; border-top: 1px solid
#000000; border-bottom: 1px solid #ffffff; overflow: hidden; }
#bg_nav a, #bg_nav a:visited { color: #000000; font-size:
11px; text-decoration: none; text-transform: uppercase; padding: 0px 0px 0px
3px; }
#bg_nav a:hover { color: #000000; text-decoration:
underline; padding: 0px 0px 0px 3px; } #navleft { width: 500px; float: left;
margin: 0px; padding: 0px; }
#navright { width: 220px; font-size: 11px; float: right;
margin: 0px; padding: 3px 5px 0px 0px; }
#navright a img { border: none; margin: 0px; padding: 3px
5px 0px 0px; }
#nav { margin: 0px; padding: 0px; list-style: none; }
#nav ul { margin: 0px; padding: 0px; list-style: none; }
#nav a, #nav a:visited { background: #ffffff; color:
#000000; display: block; font-weight: bold; margin: 0px; padding: 8px 15px 8px
15px; border-left: 1px solid #ffffff; }
#nav a:hover { background: #c06000; color: #000000; margin:
0px; padding: 8px 15px 8px 15px; text-decoration: none; }
#nav li { float: left; margin: 0px; padding: 0px; }
#nav li li { float: left; margin: 0px; padding: 0px; width:
150px; }
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff; width: 160px; float: none; margin: 0px; padding: 7px 30px
7px 10px; border-bottom: 1px solid #ffffff; border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff; }
#nav li li a:hover, #nav li li a:active { background:
#c06000; padding: 7px 30px 7px 10px; }
#nav li ul { position: absolute; width: 10em; left: -999em;
}
#nav li:hover ul { left: auto; display: block; }
#nav li:hover ul, #nav li.sfhover ul { left: auto; }
- Setelah kode diatas di paste-kan, copy-kan kode dibawah ini diatas kode </body> atau di bawah kode <body> dan kode </b:section>
<div id='bg_nav'>
<div id='Navleft'>
<div id='nav'>
<ul>
<li><a href='
http://pasukanlondok.blogspot.co.id/'>HOME</a></li>
<li><a href='
http://pasukanlondok.blogspot.co.id/'>Tentang</a></li>
<li><a href='
http://pasukanlondok.blogspot.co.id/'>Disclaimer</a></li>
<li><a href='
http://pasukanlondok.blogspot.co.id/'>Privacy Policy</a></li>
<li><a href='
http://pasukanlondok.blogspot.co.id/'>TOS</a></li>
<li><a href='
http://pasukanlondok.blogspot.co.id/'>Sitemap</a></li>
</ul>
</div>
</div>
<div id='navright'>
<form action='
http://pasukanlondok.blogspot.co.id/search' id='searchform' method='get'
name='searchform'><input id='s' name='q' type='text' value=''/>
<input id='searchsubmit' type='submit' value='cari'/>
</form>
</div>
</div>
- Setelah kode diatas di copy-kan lalu save template dan hasilnya akan seperti gambar dibawah :
Catatan :
- Gantikan kode warna sesuai keinginan sobat STKL.
- Ganti kode yang berwarna merah dengah halaman blog sobat STKL.
Sekian tips Cara Membuat Menu Navigasi di Blog Baru versi STKL. Semoga cara yg STKL berikan bermanfaat bagi sobat STKL semua.
No comments:
Post a Comment
- Hargai Karya Orang Pada Website Walaupun Hanya Dengan Berkomentar atau Membagikan Artikel
- Komentar Yang Relevan
- No Spamming