Advertise
Abdul Hamid Info - 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?
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.
Pergilah ke Dashboard blogger Sobat,lalu pilih Tata Letak,selanjutnya seperti biasa pilih tab Edit HTML. Selanjutnya,contreng tulisan Expand Widget Templates. Lalu cari kode </head>. Copas kode css dibawah ini persis di atas kode </head>.
<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 Sobat letakkan kodenya css-nya,sekarang cari lagi kode <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
Halaman: