Untuk itu kita harus :
Signin di draft blogger
Dalam Dasbor masuk Tata Letak --> Edit HTML
- Membuat Kode Untuk CSS
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;}
#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;}
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>
<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;'/>
<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>
<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 ****
2 komentar:
thenks ya...
jangan lupa mampir ke http://erlangga-yudian.blogspot.com/
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.