Sesederhana judul artikel ini,penempatan barisan kode css maupun kode untuk navbarnya,sangat sederhana sekali.
Sekali lagi,tutorial membuat navbar ini hanya untuk blogspot dari blogger saja ya :p
Pertama,Pergilah ke Dashboard blogger anda,lalu pilih Tata Letak,selanjutnya seperti biasa pilih tab Edit HTML.
Selanjutnya,contreng tulisan Expand Widget Templates.
Lalu cari kode berikut:
</head>[untuk membantu,carilah menggunakan keyboard dengan menekan tombol alt+F]
Setelah ketemu,letakkan kode css berikut persis di atas kode
</head> tersebut.<style type="text/css">
#pelajaranblognav img {
margin: 0px 0px -8px 0px;
vertical-align: middle;
}
#pelajaranblognav {
background-color: #222222;
width: 100%;
left: 0px;
text-align: center;
font-family: Arial, Tahoma, Verdana;
font-size: 12px;
z-index:10000;
bottom:0;
}
#pelajaranblognav ul {
margin: 0px;
padding: 0px;
list-style: none;
color:white;
font-family:arial;
font-size:11px;
}
#pelajaranblognav a {
background: #222222;
color: #FFFFFF;
text-decoration:none;
font-weight: bold;
margin: 0px;
padding: 8px 12px 8px 12px;
border-left: 0px solid #444444;
border-top:0px solid #444444;
border-right: 0px solid #000000;
border-bottom: 0px solid white;
}
#pelajaranblognav a:visited {
background: #222222;
color: #FFFFFF;
text-decoration:none;
font-weight: bold;
margin: 0px;
padding: 8px 12px 8px 12px;
border-left: 0px solid #444444;
border-top:0px solid #444444;
border-right: 0px solid #000000;
border-bottom: 0px solid white;
}
#pelajaranblognav a:hover {
background: #222222;
color: green;
text-decoration:none;
font-weight: bold;
margin: 0px;
padding: 8px 12px 8px 12px;
border-left: 0px solid #444444;
border-top:0px solid #444444;
border-right: 0px solid #000000;
border-bottom: 0px solid white;
}
#pelajaranblognav li {
float: left;
margin: 0px;
padding: 0px;
}
#copyright a {
text-decoration: none;
font-family:arial;
font-size:11px;
}
#copyright {
color: black;
text-decoration: none;
float:right;
font-family:arial;
font-size:11px;
}
</style>Jika sudah anda letakkan kodenya css-nya,sekarang cari lagi kode berikut:
<body>Jika sudah ketemu,letakkan kode berikut persis di bawahnya.
<div id="pelajaranblognav">
<table border="0" bgcolor="#222222">
<tr>
<br/><ul><li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Daftar Isi</a></li>
<li><a href="http://pelajaran-blog.blogspot.com/">Belajar Blog</a></li>
<li><a href="http://cepat-terindex-google.blogspot.com/">Belajar Seo</a></li>
<li><a href="#">Links</a></li></ul>
<td>
<a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS2_ad3_600by100.jpg" width="500" height="80"/></a>
</td>
<td><center><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/>
<center><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/>
</td><td><center><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/>
<center><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/></td></tr>
</table>
</div>
<div id="copyright">
Langganan <a href="http://url_blog_anda.blogspot.com/feeds/posts/default" target="_self"><b>RSS Artikel</b></a>
| Langganan <a href="http://url_blog_anda.blogspot.com/feeds/comments/default" target="_self"><b>RSS Komentar</b></a>
| Buat <a href="http://pelajaran-blog.blogspot.com/2009/11/belajar-membuat-navigasi-bar-navbar.html" target="blank"><b>Navbar</b></a> Ini Di Blog Kamu
</div>Setelah itu Simpan Template,dan lihat hasilnya sekarang :D
Keterangan:
Semoga bermanfaat dan modifikasilah sesuai selera anda masing-masing.
- Untuk tanda
#,gantilah dengan url alamat yang ingin anda tuju.- Untuk
http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro,gantilah dengan alamat iklan banner anda.- Untuk
http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg,gantilah dengan url gambar banner anda.- Untuk
http://url_blog_anda.blogspot.com/,gantilah dengan url blog anda.
Goosd Luck Ya!
komikmanual.blogspot.co.id
ReplyDelete