Find What You Need

7 Feb 2010

Membuat Double Navigasi/Navbar Di Blogger Plus..

Setiap web biasanya menyediakan Navbar di tampilan utamanya, maksudnya tentu saja untuk memudahkan pengunjung mencari halaman yang berisi topik yang sedang dibutuhkannya. Nah, kali ini kita akan belajar cara membuat Navigasi atau Navbar sekaligus double plus link untuk Facebook dan Twitter, khususnya yang akan ditempatkan di blogger. Contohnya bisa dilihat gambar diatas.

Untuk itu kita harus :
Signin di draft blogger
Dalam Dasbor masuk Tata Letak --> Edit HTML
  1. Membuat Kode Untuk CSS
Untuk membuat tampilan navbar seperti diatas yang pertama kali kita lakukan adalah, menambahkan kode css kedalam template kita. Untuk itu silahkan copy kode css dibawah ini :

Navbar Pertama :

#top-wrap{ margin:auto;padding:0;width: 980px;background:#1b1613;height:20px;}


#navataskiri {margin:auto; width:560px; float:left;}
.navatas ul {list-style:none;margin:0;padding:0px;  float:left;}
.navatas li {float:left;margin:0;text-align:center;}
.navatas li a { font-weight:normal; font-size:11px; text-transform:uppercase; 
 padding:15px;color:#a4a5a1;text-decoration:none;}
.navatas li a {background:none; }
.navatas li a:hover, li a:focus, li a:active {text-decoration:none;  color:#fff;}


#navataskanan {margin: 0px auto; width:400px; float:right; text-align:right;}


.navataskanan ul {list-style:none;margin:0;padding:0px;  float:right;}
.navataskanan li {float:left;margin:0;text-align:center;}
.navataskanan li span.facebook a {background:url( alamat url gambar anda )
 no-repeat left center; font-weight:normal; font-size:11px; text-transform:uppercase;
 padding:10px 10px 10px 20px;color:#a4a5a1;text-decoration:none;}
.navataskanan li span.twitter a {background:url( alamat url gambar anda )
 no-repeat left center; font-weight:normal; font-size:11px; text-transform:uppercase;
 padding:10px 10px 10px 20px;color:#a4a5a1;text-decoration:none;}
.navataskanan li span a:hover, li span a:focus, li span a:active {text-
 decoration:none;  color:#fff;}

Navbar Kedua :

#navbawah {background:#ff6600;width: 980px;font-size: 11px;color: #a79578;
 font-weight: bold;margin: 0 auto 0px;padding: 0px auto 0px;}

#navbawah ul {float: left;list-style: none;margin: 0;padding:0;}

#navbawah li {list-style: none;margin: 0;padding: 0;}

#navbawah li a, #navbawah li a:link, #navbawah li a:visited {color: #FFF;display: block;
 font-weight: normal;text-transform: lowercase;margin: 0;padding: 7px 10px;}

#navbawah li a:hover, #navbawah li a:active {background:#f3f2e8;color:#372c24;margin: 0;
 padding: 7px 10px;text-decoration: none;}

#navbawah li li a, #navbawah li li a:link, #navbawah li li a:visited {
 background: #372c24;width: 150px;color: #FFF;font-weight: normal;
 text-transform: lowercase;float: none;margin: 0;padding: 7px 10px;
 border-bottom: 1px solid #372c24;border-left: 1px solid #372c24;
 border-right: 1px solid #372c24;}

#navbawah li li a:hover, #navbawah li li a:active {background:  #a79578;color: #FFF;
 padding: 7px 10px;}

#navbawah li {float: left;padding: 0;}

#navbawah li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;
 margin: 0;padding: 0;}

#navbawah li ul a {width: 140px;}

#navbawah li ul ul {margin: -32px 0 0 171px;}

#navbawah li:hover ul ul, #navbawah li:hover ul ul ul, #navbawah li.sfhover ul ul, #navbawah li.sfhover ul ul ul {left: -999em;}

#navbawah li:hover ul, #navbawah li li:hover ul, #navbawah li li li:hover ul, #navbawah li.sfhover ul,#navbawah li li.sfhover ul, #navbawah li li li.sfhover ul {left: auto;}

#navbawah li:hover, #navbawah li.sfhover {position: static;}

Sebagai catatan, silahkan ubah ukuran lebar yang diwarnai merah, sesuai ukuran lebar template yang digunakan.
Kemudian Paste diatas kode ini  ]]></b:skin> Jangan lupa di simpan dulu.

    2. Membuat Kode Untuk HTML

Untuk pemanggilan kode css diatas, diperlukan ID untuk memanggilnya. Jadi silahkan copy kode ID untuk pemanggilan dibawah ini.

ID Navbar Pertama :

<div id='top-wrap'>
<div id='navataskiri'>   
<div class='navatas'>
<ul id='navatas'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='url anda' target='_blank'>About</a></li>
<li><a href='url anda' target='_blank'>Contact</a></li>
<li><a href='url anda' target='_blank'>Page</a></li>
</ul>
</div>
</div>

<div id='navataskanan'>
<div class='navataskanan'>
<ul id='navataskanan'>
<li><span class='facebook'><a href='url facebook anda'>Facebook</a></span></li>
<li><span class='twitter'><a href='url twitter anda'>Twitter</a></span></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

ID NavbarKedua :

<div id='navbawah'>
      <ul id='navbawah'>
        <li><a href='Ganti dg link url anda'>Nama Link1</a></li>
        <li><a href='Ganti dg link url anda'>Nama Link2</a></li>
        <li><a href='Ganti dg link url anda'>Nama Link3</a></li>
        <li><a href='Ganti dg link url anda'>Nama Link4</a></li>
        <li><a href='Ganti dg link url anda'>Nama Link5</a></li>
        <li><a href='Ganti dg link url anda'>Nama Link6</a></li>
        <li><a href='Ganti dg link url anda'>Nama Link7</a></li>
        <li><a href='Ganti dg link url anda'>Nama Link8</a></li>
        <li><a href='Ganti dg link url anda'>Nama Link9</a></li>
        <li><a href='Ganti dg link url anda'>Nama Link10</a></li>
        <li><a href='Ganti dg link url anda'>Nama Link11</a></li>
        </ul>
    </div>
<div style='clear: both;'/>


Kemudian Paste dibawah kode ini  :

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama Blog Anda (Header)' type='Header'/>
</b:section>
    </div>

Jangan lupa simpan. Selesai.
Sekarang coba lihat hasilnya, bila tidak ada yang terlewat pasti sudah berhasil.



**** Semoga Bermanfaat ****

Untuk mendapatkan informasi dan postingan terbaru dari blog ini, silahkan ketikkan email anda di form berlangganan. Gratiiiis...

Berlangganan Lewat RSS

2 komentar:

erlangga Pada 20 September 2012 pukul 16.39 mengatakan...

thenks ya...
jangan lupa mampir ke http://erlangga-yudian.blogspot.com/

Anonim mengatakan...

bang bisa buat menu navigasi kayak di Indowebster gk??kloq bisa share donk....

Posting Komentar

Biar tambah semangat nulis blognya,ketikkan saran dan komentar. Walaupun singkat tetapi saran dan komentar yang anda berikan sangat berarti buat blog ini.

Ketikkan Karakter Jika Ingin Memasang Emoticon.
:)):)];));;):D;):p:((:):(:X=((:-o:-/:-*:|8-}~x(:-tb-(:-Lx(=))

Artikel Yang Lainnya

 

My Best Friend

Mengenai Saya

Foto saya
Sebagai tempat belajar dan menyimpan arsip jika saya membutuhkannya suatu waktu, dan semoga menjadi ilmu yg Bermanfaat bagi Orang yang membacanya .

Visitor

free counters

Belajar Bersama Copyright © 2009 Template Wanaking Di Desain Ulang Oleh Albaniyu | Blogger Template