ப்ளாக்கருக்கு அழகான Drop Down Menu அமைக்க

இந்த பதிவு ப்ளாக்கர்  Lable-ஐ இரண்டாக பிரிக்க-என்ற பதிவில் முனைவர் இரா குனசீலன் அவர்கள்  கேட்டுக்கொண்டதற்கு இணங்க இந்த பதிவை எழுதுகிறேன்.அவர் எனது மற்றொரு தளமான No1 Blogger Tricks-ல் உள்ள Drop Down Menu பற்றி கேட்டார்.இது வந்தேமாதரம் சசியின் Facebook Stylil Menubar அமைப்பது எப்படி என்ற பதிவில் உள்ளது தான்.அதைதான் இப்படி மாற்றிருக்கிறேன்.

 செய்முறை  

• முதலில் Blogger => Layout =>HTML JavaScript-->>Add a Gadget பக்கத்திற்கு செல்லவும்
• அங்கு Content பகுதியில் பின்வரும் Code-ஐ Paste செய்யவும்

 <style> 
#mbtnavbar { 
background: ; 
width: 100%;
margin-top:-12px;
color: #FFF; 
margin: 10px 0; 
padding: 0; `
position: relative; 
border-top:0px solid #960100; 
height:35px;
}
#mbtnav { 
margin: 0; 
padding: 0; 
} 
#mbtnav ul { 
float: left; 
list-style: none; 
margin: 0; 
padding: 0; 
} 
#mbtnav li { 
list-style: none; 
margin: 0; 
padding: 0;
} 
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited { 
color: #FFF; 
display: block; 
font:bold 12px Helvetica, sans-serif; 
margin: 0; 
padding: 9px 12px 11px 12px; 
text-decoration: none; 
border-right:0px solid #40A4E3;
} 
#mbtnav li a:hover, #mbtnav li a:active { 
background: #40A4E3; 
color: #FFF; 
display: block; 
text-decoration: none; 
margin: 0; 
padding: 9px 12px 11px 12px;
}
#mbtnav li { 
float: left; 
padding: 0; 
} 
#mbtnav li ul { 
z-index: 9999; 
position: absolute; 
left: -999em; 
height: auto; 
width: 120px; 
margin: 0; 
padding: 0; 
} 
#mbtnav li ul a { 
width: 120px; 
} 
#mbtnav li ul ul { 
margin: -25px 0 0 161px; 
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul { 
left: -999em; 
} 
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul { 
left: auto; 
} 
#mbtnav li:hover, #mbtnav li.sfhover { 
position: static; 
} 
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited { 
background: #EDEFF4; 
width: 120px; 
color: #3B5998; 
display: block; 
font:normal 12px Helvetica, sans-serif; 
margin: 1px 0 0 0; 
padding: 9px 12px 10px 12px; 
text-decoration: none; 
z-index:9999; 
border:1px solid #ddd;
-moz-border-radius:4px; 
-webkit-border-radius:4px;

} 
#mbtnav li li a:hover, #mbtnav li li a:active { 
background: #40A4E3; 
color: #FFF; 
display: block;
}
#mbtnav li li li a, #mbtnav li li li a:link, #mbtnav li li li a:visited {
background: #EDEFF4; 
width: 120px; 
color: #3B5998; 
display: block; 
font:normal 12px Helvetica, sans-serif; 
padding: 9px 12px 10px 12px; 
text-decoration: none; 
z-index:9999; 
border:1px solid #ddd; 
margin: 1px 0 0 -14px;
} 
#mbtnav li li li a:hover, #mbtnav li li li a:active { 
background: #40A4E3; 
color: #FFF; 
display: block; 
}
</style> 
<div id='mbtnavbar'> 
<ul id='mbtnav'> 
<li> 
<a href="Your URl">Home</a> 
</li>
<li> 
<a href='#'>Tips & Tricks ▼</a>
<ul>
<li><a href='Your URL'>Computer tips</a></li> 

<li><a href='Your URL'>Mobile Tips</a> </li>

<li><a href='#'>Blogger Tips▼</a><ul> 
<li><a href='Your URL'>Posts</a></li> 
<li><a href='Your URL'>Background</a></li> 
<li><a href='Your URL'>Labels</a></li>
<li><a href='Your URL'>Comment Box</a></li>

<li><a href='Your URL'>Gadget</a></li>
<li><a href='Your URL'>Widget</a></li>                                                                                 <li><a href='Your URL'>All Blogger Tips </a></li></ul>
</li></ul>
<li>
<a href='#'>Softwares ▼</a>
<ul> 
<li><a href='Your URL'>Computer Softwares</a></li> 
<li><a href='Your URL'>Mobile Softwares</a></li></ul>


<li> 
<a href='#'>Internet ▼</a>
<ul>
<li><a href='Your URL'>Websites</a></li> 
<li><a href='Your URL'>Google </a></li> 

<li><a href='#'>Social Media ▼</a><ul> 
<li><a href='Your URL'>FaceBook</a></li> 

<li><a href='Your URL'>Twitter</a></li>                                                                                 <li><a href='Your Url'>All Social Media Tips</a></li></ul>
</li></ul>
<li> 
<a href='Your URL'>All Posts</a> 
</li>
<li> 
<a href='Your URL'>Contact</a> </li>
<li>
<a href='#'>HTML Tools ▼</a>
<ul> 
<li><a href='Your URL'>Coler Code Generater</a></li> 
</ul>
</li></li></li></li></ul>

</div>

மாற்ற வேண்டியவை:

• இளஞ்சிவப்பு நிறத்தில் இருக்கும் #40A4E3 HTML  Code-ல் மாற்றம் செய்யவும்.

1.#40A4E3 Background Color-ஐ குறிக்கும்

2.HTML Color Code-ஐ கண்டுப்டிக்க

3. தளத்தில் உள்ள நிறங்களின் HTML Code-ஐ கண்டுபிடிக்க 

• சிவப்பு நிறத்தில் உள்ள Your URL என்ற இடத்தில் உங்களுக்கு தேவையான URL-ஐ கொடுக்கவும்
• நீல நிறத்தில் உள்ளதை உங்களுக்கு ஏற்ற்வாறு மாற்றிக்கொள்ளவும்

அவ்வளவு தான்