Jumat, 16 Desember 2011


Dalam posting ini saya akan berbagi Css menu drop down untuk Blogger. Cara penerapan nya cukup mudah karena hanya menggunakan Css bukan jQuery sehingga tidak ada script atau tambah waktu buka ke blog Anda dan lebih mudah untuk implement dan menu telah diuji ke IE6 hasilnya cukup memuaskan. berikut  screenshot, demo dan penerapan nya di bawah ini.


Menu Css mengagumkan ini Gratis, Sekarang ikuti langkah penerapan nya ke blog Anda!
Ingat Selalu Back Up Template Anda Sebelum Anda melakukan Perubahan  

Langkah 1. Pada Dashboard Blogger Anda Klik Desain> Edit Html

Langkah 2. Cari kode ]]></b:skin> di blog Anda Html: (Klik Ctrl dan F untuk bar pencarian untuk membantu menemukan kode ]]></b:skin>

Langkah 3. Salin dan sisipkan kode Dibawah ini letakkan Di atas / sebelum kode ]]></ b: skin>.
Catatan -pastikan copy semua kode!
.nav {
height:35px;
background: url(http://3.bp.blogspot.com/-iYO_dq-SM3k/Ti1qX6kEh0I/AAAAAAAAE1g/riMnCYQz3_4/s1600/bg.gif) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
width:100%;
z-index:100;
margin:0;
padding:0;
}

.nav .table {

display:table;
margin:0 auto;
}

.nav .select,

.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}

.nav li {

margin:0;
padding:0;
height:auto;
float:left;
}

.nav .select a {

display:block;
height:35px;
float:left;
font-weight:bold;
background: url(http://3.bp.blogspot.com/-iYO_dq-SM3k/Ti1qX6kEh0I/AAAAAAAAE1g/riMnCYQz3_4/s1600/bg.gif);
padding:0 30px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#2b3238;
}


.nav .select a:hover,

.nav .select li:hover a {
background: url(http://2.bp.blogspot.com/-nVl9muJMq7Q/Ti1qYHKkioI/AAAAAAAAE1k/-xo6sTlGN-A/s1600/hover.gif);
padding:0 0 0 15px;
cursor:pointer;
color:#2b3238;
}

.nav .select a b{

font-weight:bold;
}

.nav .select a:hover b,

.nav .select li:hover a b {
display:block;
float:left;
padding:0 30px 0 15px;
background:url(http://2.bp.blogspot.com/-nVl9muJMq7Q/Ti1qYHKkioI/AAAAAAAAE1k/-xo6sTlGN-A/s1600/hover.gif) right top;
cursor:pointer;
}

.nav .select_sub {

display:none;
}

/* IE6 only */

.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}

.nav .sub {

display:table;
margin:0 auto;
padding:0;
list-style:none;
}

.nav .sub_active .current_sub a,

.nav .sub_active a:hover {
background:transparent;
color:#2b3238;
}

.nav .select :hover .select_sub,

.nav .current .show {
display:block;
position:absolute;
width:100%;
top:35px;
background:url(http://1.bp.blogspot.com/-ha6EhdiZxBI/Ti1qXa6bmsI/AAAAAAAAE1c/A7NU-qQ_-Ls/s1600/back.gif);
padding:0;
z-index:100;
left:0;
text-align:center;
}

.nav .current .show {

z-index:10;
}

.nav .select :hover .sub li a,

.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 10px 0 10px;
margin:0;
white-space:nowrap;
border:0;
color:#2b3238;
}

.nav .current .sub li.sub_show a {

color:#2b3238;
cursor:default;
}

.nav .select .sub li a {

font-weight:normal;
}

.nav .select :hover .sub li a:hover,

.nav .current .sub li a:hover {
visibility:visible;
color:#73a0d2;
}
<!--[if IE]>
.nav ul {display:inline-block;}
.nav ul {display:inline;}
.nav ul li {float:left;}
.nav {text-align:center;}
.nav .select a:hover b,
.nav .select li:hover a b {float:none;}
<![endif]-->

Langkah 4. Simpan template Anda.

Itulah Css untuk menu dropdown.

Sekarang ke halaman blog Anda Desainadd gadget dibawah atau diarea header anda biasa nya dinamakan kolom cross. untuk menambah kan gadget tersebut ikuti turorial membuat widget kolom cross di atas posting atau dibawah header.


Add Html menu
Dalam Page Desain blog Anda klik Tambah Gadget> Pilih Html / Javascript> Salin dan sisipkan kode berikut ke dalam gadget Html / Javascript:

<div class="nav">
<div class="table">
<ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
 Ganti tanda # dengan link anda, simpan dan lihat hasilnya.

{ 2 comments... read them below or Comment }

  1. nice info sobat,, kalau ada waktu saya ijin praktek plus coba ya hhe

    thanks for share,,, keep postings

    BalasHapus
  2. iya sob silahkan di coba... terimakasih juga uda mampir kesini

    BalasHapus

Welcome to My Blog

Popular Post

Followers

- Copyright ©2008Pelajar Goblok -Robotic Notes- Powered by Blogger - Edited by M Nanda Perdana -