How to Add Drop Down Menu Widget in Blogger - Horizontal Menus (HTML+CSS)

Berikut ini adalah 18 jenis drop down menu  CSS, menambah drop down menu di blogger boleh memudahkan dan memberi kemudahan kepada pembaca anda untuk mengetahui pos-pos yang ada dalam blog anda.

Di bawah ini adalah Nota Drop down Menu, anda boleh menambah menu dari senarai gambar-gambar dibawah.

jadi sekarang mari perkanalkan menu satu persatu, jika anda meminatinya copy dan paste je code tue, anda juga boleh customize menu2 tersebut secara on9, kemudia copy code dibawah. Berikut adalah senari menu mengikut susunan gambar diatas.

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 salah satu menu dari senarai di atas dan download zip fail yang seharusnya mengndungi fail HTML, gambar dan fail CSS untuk menu tersebut. 

3 Hal-hal yang wajib ada sebelum ada meneruskannya.

1. HTML File - Contains the code of the menu
2. Images folder - Contains Images used in menu
3. CSS file - Contains Style used in menu

Steps to Add Drop Down Menu Widget in Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design > Page Element.

#Step 2. Click on Add a Gadget > HTML/JavaScript link and insert the following type of code (You will get it from Downloaded HTML file) and click Save button.



#Step 3. Now Drag & Drop that Widget to the top of the Blog Posts Section.



How to Add CSS for Menu:

#Step 4. Now Navigate to Design > Edit HTML Section.





- Find this type of code ]]> and replace it with this type of CSS Code (You will get the .css file in your downloaded folder) :
.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;
}
]]>
How to Add Images of Menu in Blogger:

- Before Saving the above CSS code you have to change image path URL given in red text above. you need to just need to upload it to the Picasa or in blogger and copy the generated HTML image Code and paste that code in Menu Code or CSS Code wherever applicable. (Upload images which you will get from \images folder) You can use either blogger, picasa, photobucket or any other image hosting services to host your menu images.

#Step 5. Save template and done!.

That's Done! Hope this Post will be helpful for Blogspot Users.

Note: If you want me to add any CSS menu to your blog or want Tutorial for adding any menu please comment Below the URL of that menu and your Blog Name + Link. I will Surely try to help you.