18 drop-down menu CSS horisonta

Berikut adalah daftar dari 18 drop-down menu CSS horisontal,menambahkan menu drop-down di blogger bisa mendapatkan keuntungan pembaca Anda untuk mengetahui tulisan yang dimaksudkan dari blog dengan mudah. Tidak ada seperti widgetuntuk menu blogger, Anda kira untuk menambahkan menudengan Anda sendiri. Untuk menambahkan menu drop down di blogger Anda butuhkan adalah hanya sedikit kode CSS dan HTML dan menempatkan kode yang di tempat yang tepat di blog Anda dan selesai.

Kami memiliki daftar Drop CSS Menu Horizontal bawah untuk Blog Blogspot, Anda perlu memilih menu dan menambahkan kode ke blog Anda. Anda mungkin telah melihat artikel tentang Cara Menambahkan menu navigasi di blogger di blogger culun.

Di bawah ini adalah Nota Drop down Menu, Anda dapat menambahkan menu apapun dari daftar yang diberikan di bawah gambar.

sehingga memungkinkan mulai sekarang memperkenalkan menu yang tinggal satu, mana yang Anda suka hanya menyalin kode dan paste kode, Anda juga dapat menyesuaikan menu online dan kemudian salin kode. Menu-menu di bawah ini dari gambar atas dan nomor menu 1 sampai 18 masing-masing.

1. Massive Blue Drop Down menu: Demo | Download Source
2. Sunrise Gloss: Demo | Download Source
3. Blue Dawn Drop Down: Demo | Download Source
4. Blue Center Drop Bar: Demo | Download Source
5. Black Center Drop Bar: Demo | Download Source
6. Blue Impression Drop Down Menu: Demo | Download Source
7. Green Impression Drop Down Menu: Demo | Download Source
8. Sunrise Gloss: Demo | Download Source
9. Blue Tabbed Drop Down: Demo | Download Source
10. Yellow Tabbed Drop Down Menu: Demo | Download Source
11. Tabbed Grey Drop Down: Demo | Download Source
12. Red Tabbed Drop Down: Demo | Download Source
13. Black Tabbed Drop Down: Demo | Download Source
14. Orange Tabbed Drop Down: Demo | Download Source
15. Simple Red: Demo | Download Source
16. Simple Black: Demo | Download Source
17. Simple Blue: Demo | Download Source
18. Simple Green: Demo | Download Source

Pilih menu Setiap satu dari daftar yang diberikan di atas dan download file. Zip yang harus berisi file HTML, gambar dan file CSS untuk menu.

Wajib 3 hal yang harus Anda miliki sebelum pergi ke depan

1. File HTML - Berisi kode menu
2. Folder Foto - Berisi Gambar yang digunakan dalam menu
3. File CSS - Berisi Gaya yang digunakan dalam menu

# Langkah 1. Login ke Dashboard Blogger Anda dan Arahkan ke Elemen Desain> Halaman.

# Langkah 2. Klik Tambah Gadget> HTML / JavaScript link dan masukkan jenis kode berikut (Anda akan mendapatkannya dari file HTML Downloaded) dan klik tombol Simpan.

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a id="current" href="#">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>

# Langkah 3. Sekarang Drag & Drop Widget yang ke puncak Bagian Blog Posts.

Bagaimana menambahkan CSS untuk Menu:

# Langkah 4. Sekarang Navigasikan ke Desain> Edit 

Bagian

  HTML .

Cari jenis kode ]]></ b: skin> dan menggantinya dengan jenis Kode CSS (Anda akan mendapatkan file css dalam folder download Anda.)

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(images/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #0079b2;
border-right:2px solid #0079b2;
border-bottom:2px solid #0079b2;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(images/current-bg.gif) top left repeat-x;
color:#ffffff;
}
]]></b:skin>

Bagaimana Tambahkan Gambar Menu di Blogger:

- Sebelum Menyimpan kode CSS di atas, Anda harus mengubah URL gambar path yang diberikan dalam teks merah di atas. Anda hanya perlu perlu meng-upload ke Picasa atau di blogger dan salin gambar yang dihasilkan Kode HTML dan paste kode di Kode Kode CSS Menu atau dimanapun berlaku. (Upload gambar yang akan Anda dapatkan dari folder gambar \) Anda dapat menggunakan blogger, picasa, photobucket atau gambar lain layanan hosting untuk host gambar menu Anda.

# Langkah 5. Simpan template dan selesai!.

Catatan: Jika Anda ingin aku untuk menambahkan menu CSS untuk blog Anda atau ingin Tutorial untuk menambahkan menu apapun silakan komentar di bawah URL dari menu yang dan Nama Blog Anda + Link. Tentunya saya akan mencoba untuk membantu Anda.