Menu Navigasi Dalam Navigasi Bar (Navbar)

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?<span class="fullpost">

Contoh hasil dari kreasi navbar ini,bisa anda lihat seperti gambar di bawah ini [<i>klik gambar untuk hasil yang lebih besar</i>]:
<hr size="1" />



<center><a href="http://4.bp.blogspot.com/_n7xseT2-HDU/SwIem6Awr6I/AAAAAAAAAcA/9JfZaQGylw0/s1600/pelajaran+blog+membuat+navbar+blogger.JPG" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" style="color: #333333; text-decoration: none;" target="_blank"><img alt="Navigasi Bar / Navbar Blogger" border="0" src="http://4.bp.blogspot.com/_n7xseT2-HDU/SwIem6Awr6I/AAAAAAAAAcA/9JfZaQGylw0/s200/pelajaran+blog+membuat+navbar+blogger.JPG" style="border: 0px solid rgb(179, 179, 179); cursor: pointer; height: 96px; padding: 2px 10px 2px 2px; width: 200px;" /></a></center>
<hr size="1" />
Sedangkan jika anda ingin memastikan seperti apa sih hasil sebenarnya,silakan kunjungi situsnya langsung di&nbsp;<a href="http://pujiantoro.blogspot.com/" style="color: #333333; text-decoration: none;" target="_blank"><b>SINI</b></a>.
Bagaimana? tertarik untuk membuatnya?

<h3 name="Langkah Cara Membuat Navbar Blogger Sederhana" style="margin: 0px;">
Langkah Membuat Navbar Blogger Sederhana</h3>


Sesederhana judul artikel ini,penempatan barisan kode css maupun kode untuk navbarnya,sangat sederhana sekali.
Sekali lagi,tutorial membuat navbar ini hanyauntuk blogspot dari blogger saja ya :p


Pertama,Pergilah ke&nbsp;<b>Dashboard</b>&nbsp;blogger anda,lalu pilih&nbsp;<b>Tata Letak</b>,selanjutnya seperti biasa pilih tab&nbsp;<b>Edit HTML</b>.
Selanjutnya,contreng tulisan&nbsp;<b>Expand Widget Templates</b>.
Lalu cari kode berikut:
<hr size="1" />
<b><code></code></b>
[untuk membantu,carilah menggunakan keyboard dengan menekan tombol alt+F]
<hr size="1" />
Setelah ketemu,letakkan kode css berikut persis di atas kode&nbsp;<code></code>&nbsp;tersebut.
<hr size="1" />
<code><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></code>
<hr size="1" />
Jika sudah anda letakkan kodenya css-nya,sekarang cari lagi kode berikut:
<hr size="1" />
<code></code>
<hr size="1" />
Jika sudah ketemu,letakkan kode berikut persis di bawahnya.
<hr size="1" />
<code></code>
<code></code>
<code></code><div id="pelajaranblognav">




<ul>
<li><a href="http://www.blogger.com/%3Cstrong%3E#%3C/strong%3E">Home</a></li>
<li><a href="http://www.blogger.com/%3Cstrong%3E#%3C/strong%3E">About</a></li>
<li><a href="http://www.blogger.com/%3Cstrong%3E#%3C/strong%3E">Daftar Isi</a></li>
<li><a href="http://www.blogger.com/%3Cstrong%3Ehttp://pelajaran-blog.blogspot.com/%3C/strong%3E">Belajar Blog</a></li>
<li><a href="http://www.blogger.com/%3Cstrong%3Ehttp://cepat-terindex-google.blogspot.com/%3C/strong%3E">Belajar Seo</a></li>
<li><a href="http://www.blogger.com/%3Cstrong%3E#%3C/strong%3E">Links</a></li>
</ul>



<code></code>
<code></code>
<table bgcolor="#222222" border="0"><tbody>
<tr><td>
<a href="http://www.blogger.com/%3Cstrong%3Ehttp://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro%3C/strong%3E"><img border="0" height="80" src="%3Cstrong%3Ehttp://www.awsurveys.com/Pictures/AWS2_ad3_600by100.jpg%3C/strong%3E" width="500" /></a></td><td>
<code></code>
<code></code>
<code></code>
<center><a href="http://www.blogger.com/%3C/code%3E%3Ccode%3E%3Cstrong%3Ehttp://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro%3C/strong%3E%3C/code%3E%3Ccode%3E"><img border="0" height="50" src="%3Cstrong%3Ehttp://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg%3C/strong%3E" width="80" /></a></center>

<center><a href="http://www.blogger.com/%3C/code%3E%3Ccode%3E%3Cstrong%3Ehttp://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro%3C/strong%3E%3C/code%3E%3Ccode%3E"><img border="0" height="50" src="%3Cstrong%3Ehttp://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg%3C/strong%3E" width="80" /></a></center><code>
</code></td><td>
<code></code>
<code></code>
<code></code>
<center><a href="http://www.blogger.com/%3C/code%3E%3Ccode%3E%3Cstrong%3Ehttp://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro%3C/strong%3E%3C/code%3E%3Ccode%3E"><img border="0" height="50" src="%3Cstrong%3Ehttp://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg%3C/strong%3E" width="80" /></a></center>

<center><a href="http://www.blogger.com/%3C/code%3E%3Ccode%3E%3Cstrong%3Ehttp://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro%3C/strong%3E%3C/code%3E%3Ccode%3E"><img border="0" height="50" src="%3Cstrong%3Ehttp://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg%3C/strong%3E" width="80" /></a></center>
<code></code></td></tr>
</tbody></table>

</div>



<div id="copyright">

Langganan <a href="http://www.blogger.com/%3Cstrong%3Ehttp://url_blog_anda.blogspot.com/%3C/strong%3Efeeds/posts/default" target="_self"><b>RSS Artikel</b></a>
| Langganan <a href="http://www.blogger.com/%3Cstrong%3Ehttp://url_blog_anda.blogspot.com/%3C/strong%3Efeeds/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>

<hr size="1" />
Setelah itu&nbsp;<b>Simpan Template</b>,dan lihat hasilnya sekarang :D

<u>Keterangan</u>:
<blockquote style="margin: 0.75em 0px;">
<ul>
<li>Untuk tanda&nbsp;<b><code>#</code></b>,gantilah dengan url alamat yang ingin anda tuju.</li>
<li>Untuk&nbsp;<b><code>http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro</code></b>,gantilah dengan alamat iklan banner anda.</li>
<li>Untuk&nbsp;<b><code>http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg</code></b>,gantilah dengan url gambar banner anda.</li>
<li>Untuk&nbsp;<b><code>http://url_blog_anda.blogspot.com/</code></b>,gantilah dengan url blog anda.</li>
</ul>
</blockquote>
Semoga bermanfaat dan modifikasilah sesuai selera anda masing-masing.
Goosd Luck Ya!

<div>
<span style="color: #001c00; font-family: Arial; font-size: small;"><span style="font-size: 12px; line-height: 13px;">
</span></span></div>
</span>