Menu Navbar dengan Background Image

Pujangga Blogs

03 September 2009

Menu Navbar dengan Background Image

Memang menyenangkan bila kita dapat menciptakan WEB/Blog dengan tampilan yang indah dan keren untuk dipandang.Salah satunya dengan meletakkan Navbar menu menggunakan background image agar lebih terlihat atraktif dan profesional seperti contoh disini.
Apakah anda ingin mencobanya...? kalau memang iya,silahkan ikuti langkah-langkahnya sebagai berikut.

  1. Pastikan bahwa sahabat telah login pada blog dan berada pada halaman Template HTML.
  2. Silahkan Copas CSS code dibawah ini.
  3. /************************************************ * Navbar * ************************************************/ #nav { width: 800px; height: 30px; position: absolute; top: 10px; left: 0; } * html #nav { top: 119px; } *:first-child+html #nav { top: 119px; } #nav ul { position: absolute; bottom: -1px; overflow: hidden; height: 30px; } #nav ul li { float: left; margin: 0 -1px 0 0; font-weight: bold; list-style: none; } #nav ul li.current_page_item { width: 120px; height: 30px; } #nav ul li a { width: 120px; height: 30px; background: url(http://2.bp.blogspot.com/_kMUpUqMmduA/SUC2vhflfTI/AAAAAAAAAc8/z2ncB0gZJPA/s1600/nav_bg.jpg) no-repeat; display: block; text-decoration: none; color: #FFF; line-height: 30px; text-align: center; } #nav ul li a:hover { color: #FFF; background: url(http://1.bp.blogspot.com/_kMUpUqMmduA/SUC2v25bKGI/AAAAAAAAAdE/eefy1DeZJy4/s1600/nav_bg_over.jpg) no-repeat; } #nav ul li.current_page_item a { background: url(http://1.bp.blogspot.com/_kMUpUqMmduA/SUC2v25bKGI/AAAAAAAAAdE/eefy1DeZJy4/s1600/nav_bg_over.jpg) no-repeat; color: #FDF782; } ul.tabbernav li a:hover { color:#ccff33; } ul.tabbernav li.tabberactive a { color:#ccff33; background: url(http://3.bp.blogspot.com/_kMUpUqMmduA/SUC2xpgiCcI/AAAAAAAAAeM/uid110uj_tI/s1600/tab-bg.jpg) top left repeat-x; border-top:1px solid #111; border-left:1px solid #111; border-right:1px solid #111; border-bottom:1px solid #333; text-decoration:none; font-weight:bold; } ul.tabbernav li.tabberactive a:hover { color:#ccff33; background: url(http://3.bp.blogspot.com/_kMUpUqMmduA/SUC2xpgiCcI/AAAAAAAAAeM/uid110uj_tI/s1600/tab-bg.jpg) top left repeat-x; border-left:1px solid #111; border-right:1px solid #111; border-top:1px solid #111; } .tabberlive .tabbertab { background:#333; padding:5px 10px 10px 10px; border-top:0px; border-left:1px solid #111; border-right:1px solid #111; border-bottom:1px solid #111; } .tabberlive .tabbertab h2 { display:none; color:#fff; } .tabberlive .tabbertab h3 { display:none; } .tabbertab { margin:0px; padding:0px; } .tabbertab ul { margin:5px 0 5px 5px; padding: 0; list-style-type:none; } .tabbertab li { width: 335px; margin:0; padding: 0 0 5px 22px; background: #363E43 url(http://2.bp.blogspot.com/_kMUpUqMmduA/SUC2vuAxH2I/AAAAAAAAAc0/NKmGnsD58Ys/s1600/li-img.jpg) no-repeat; overflow: hidden; }
  4. dan letakkan diatas code ]]></b:skin>
  5. Kemudian,letakkan Script berikut ini dibawah code ]]></b:skin>
  6. <script src='http://gooddesignweb.chicappa.jp/brownline/wp-content/themes/brownline/js/tabber.js' type='text/javascript'/>
  7. Sekarang ...silahkan sahabat masuk dan perhatikan pada tag <body> HTML sahabat.
  8. Copy dahulu code html dibawah ini.
  9. <!-- Menu --> <div id='nav'> <ul> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li> <li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li> <li><a href='#'>Edit</a></li> </ul> </div> <!-- /Menu -->
  10. Letakkan kode diatas diantara tag <body></body>.Sebagai contoh...saya mencoba meletakkan code diatas pada bagian bawah header html code.contohnya seperti ini.
  11. <body> <!-- Header --> <div id='header'> <!-- Blogtitle --> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Brownline (Header)' type='Header'> <b:includable id='title'> <div id='blogtitle'> <h1><a expr:href='data:blog.homepageUrl'><data:title/></a></h1> </div> </b:includable> <b:includable id='description'> <div id='subtitle'> <data:description/> </div> </b:includable> <b:includable id='main'> <b:include name='title'/> <b:include name='description'/> </b:includable> </b:widget> </b:section> <!-- /Blogtitle --> <div class='rss'><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' id='feed'><img alt='rss' src='http://2.bp.blogspot.com/_kMUpUqMmduA/SUC2wQK-4dI/AAAAAAAAAdU/40mvfTx0YF4/s1600/rss.jpg'/></a></div> <!-- Menu --> <div id='nav'> <ul> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li> <li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li> <li><a href='#'>Edit</a></li> </ul> </div> <!-- /Menu --> *************-------Code------*********** *************-------Code------*********** *************-------Code------*********** </body> </html>
  12. Hasilnya akan nampak seperti gambar dibawah. posisi navbar berada dibawah header.
  13. Coba klik tab Prievew dahulu untuk melihat hasilnya.Pabila kurang pas pada penempatan posisinya sahabat bisa pindahkan kode HTML diatas pada posisi yang tepat.Apabila sudah merasa yakin...barulah sahabat simpan setingan tersebut.
Semoga bermanfaat.......

2 comments:

×÷·´¯`·.·•[ peace ]•·.·´¯`·÷× on September 11, 2009 at 8:22 PM said...

mantab infonya nich jadi lebih kreatif

Pujangga on September 11, 2009 at 9:06 PM said...

×÷·´¯`·.·•[ peace ]•·.·´¯`·÷×: Bisa aja kaka ^_^


Post a Comment

:11
smiley
:12
smiley
:13 smiley :14
smiley
:15
smiley
:16
smiley
:17
smiley
:18
smiley
:19
smiley
:20
smiley
:21
smiley
:22 smiley :23 smiley :24
smiley
:25
smiley
:26
smiley
:27
smiley
:28
smiley
:29
smiley
:30
smiley
:31
smiley
:32
smiley
:33 smiley :34
smiley
:35
smiley
:36
smiley
:34
smiley
:38
smiley
:39
smiley
:40
input code is in the right smile icon image

Silahkan tinggalkan komentar anda dan harap tidak melakukan Spam..!!

Pujangga Blogs

administratorSeandainya segala sesuatu yang telah saya berikan ini bermanfaat bagi rekan-rekan semua.Sungguh saya ucapkan banyak Doa dan terimakasih kepada Mu Allah.SWT yang telah memberikan nikmat Berbagi sesama manusia dengan niat kebaikan dan kemajuan Negeriku ini..

the existence of this blog aims to broaden the information about web design by studying the parts of the structure of the html code for the beginner. Here also you can get the latest info about the entertainment media, affiliate programs etc.

Recent post


Download Free Movie


Pujangga Blogs Head News

Mengubah ILM ads google Untuk mengganti tampilan adsense google yang menampilkan Iklan Layanan Masyarakat tersebut dengan adsense lokal. Anda harus mengupload script adsense lokal dengan extensi html kelayanan webhosting anda.
Recent comment dengan efek overlay menu Following cursorBagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay.
Membuat Guestbook Overlay fading headerEfek yang akan saya bahas kali ini adalah membuat tampilan Guestbook dan status twitter melayang dan berada ditengah - tengah halaman blog. Kita akan menyediakan menu guestbook pada sisi kiri halaman.
Membuat Headline Post widget tooltipsHeadline akan menggulung ke atas dengan sentuhan fade out ,seakan konten tersebut hilang dengan perlahan dan konten yang berada di bawahnya akan naik ke atas mengganti konten sebelumnya.
Membuat Number Page Navigation jQueryUmumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.
Kode adsense didalam post menu navigasiUntuk meletakan Adsense didalam postingan, anda harus meletakan kode Script ads tersebut langsung ke template HTML blogspot. Sebagai langkah awal, silahkan anda login ke blogger.com » Dasboard »Design » Edit HTML » Beri tanda ceklist pada kolom .
1 2 3 4 5 6

Enter your email address:




review www.pujangga-adhitya.blogspot.com on alexa.com

free counters
 

Followers

Live Blog Stats

Recent Comment