Belajar Membuat Navigasi Bar [Navbar Blogger] Menu Sederhana
Menu Navigasi Dalam Navigasi Bar (Navbar)
Pernahkah anda mengalami kesulitan untuk membuat menu navigasi seperti 'Home', 'About','Daftar Isi',Links dll?
Disini,kita akan belajar membuat navigasi bar (navbar) blogger menu sederhana,seperti kasus diatas.
Jadi,bukan hanya membuat sebuah navbar,melainkan membuat 'menu navigasi' di dalam navbar itu sendiri.
Bingung?
Contoh hasil dari kreasi navbar ini,bisa anda lihat seperti gambar di bawah ini [klik gambar untuk hasil yang lebih besar]:
Sedangkan jika anda ingin memastikan seperti apa sih hasil sebenarnya,silakan kunjungi situsnya langsung di SINI.
Bagaimana? tertarik untuk membuatnya?
Langkah Membuat Navbar Blogger Sederhana
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:
- 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.
Semoga bermanfaat dan modifikasilah sesuai selera anda masing-masing.
Goosd Luck Ya! |
Belajar Membuat Navigasi Bar [Navbar Blogger] Menu Sederhana
4.5
5
Om Dadi
Menu Navigasi Dalam Navigasi Bar (Navbar) Pernahkah anda mengalami kesulitan untuk membuat menu navigasi seperti ' Home ', ' ...
No comments:
Post a Comment
Silahkan kasih komentar anda di kolom komentar di bawah.
Dengan baik,sopan,ramah dan penuh tanggung jawab, agar bisa memberikan kenyamanan bagi pengunjung lain.terimakasih sudah mengunjungi blog ini :), Tapi maaf di larang berkomentar spam di antaranya:
1. Di larang berkomentar OOT (Out Of Topik) di luar topik/ postingan di atas
2. Di larang komentar iklan-jualan obat-obatan
3. Di larang meninggalkan Link aktif (Alamat Web/Blog)
Jika ingin OOT atau Ninggalin Link Aktif silahkan masuk di menu CONTACT di atas, bagi yang melanggar akan di hapus oleh admin :) . Berkomentarlah yang sesuai dengan postingan di atas Terimakasih