RSS
| 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 SederhanaSesederhana 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">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"><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/>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><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/>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>Setelah itu Simpan Template,dan lihat hasilnya sekarang :D Keterangan: Semoga bermanfaat dan modifikasilah sesuai selera anda masing-masing. Goosd Luck Ya! --------------------------------------------------------------------------------------------------------------------------------------- Menu Navigation The Navigation Bar (Navbar) Have you ever had difficulty to make a navigation menu like 'Home', 'About', 'Contents', Links, etc.? Here, we will learn to create a navigation bar (navbar) bloggers a simple menu, like the case above. So, not only create a navbar, but make 'navigation menu' in the navbar itself. Confused? Sample results from this navbar creations, like the picture you can see below [click image for greater results]: Navigation Bar / Blogger Navbar Meanwhile, if you want to make sure like what actual results, please visit the site directly HERE. How? attracted to him? Simple Steps to Make Blogger Navbar Simple as the title of this article, the placement of rows of css code and the code for navbarnya, very simple. Once again, the tutorial makes this navbar blogspot from bloggers just to be yes: p First, Go to your Blogger Dashboard, select Layout, then as usual select Edit HTML tab. Next, tick the writing Expand Widget Templates. Then find the following code: </ Head> [For help, seek to use the keyboard by pressing alt + F] After the meet, put the following css code right above the code </ head> it. <style type="text/css"># Pelajaranblognav img {margin: 0px 0px 0px-8px;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> If you already put the css code, it is now looking again the following code: <body> If you've met, put the following code just below it. <div id="pelajaranblognav"><table border="0" bgcolor="#222222"><tr><br/> <li> <a href="#"> Home </ a> </ li><li> <a href="#"> About </ a> </ li><li> <a href="#"> Table of Contents </ a> </ li><li> <a href="http://pelajaran-blog.blogspot.com/"> Learning Blog </ a> </ li><li> <a href="http://cepat-terindex-google.blogspot.com/"> Learning 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">Subscriptions <a href="http://url_blog_anda.blogspot.com/feeds/posts/default" target="_self"> <b> RSS Articles </ b> </ a>| Subscriptions <a href="http://url_blog_anda.blogspot.com/feeds/comments/default" target="_self"> <b> RSS Comments </ b> </ a>| Create <a href="http://pelajaran-blog.blogspot.com/2009/11/belajar-membuat-navigasi-bar-navbar.html" target="blank"> <b> Navbar </ b> < / a> This On You Blog</ Div> After that, Save Template, and see the results now: D Description: To sign #, replace with the url address you want to go. To http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro, change the address of your banner ads. To http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg, replace with your banner image url. To http://url_blog_anda.blogspot.com/, replace with url of your blog. Hopefully useful and modify according to your taste each one. Goosd Luck Yes! |
|
Sabtu, 19 Maret 2011
Menu Navigasi Dalam Navigasi Bar (Navbar) / Menu Navigation The Navigation Bar (Navbar)
