செய்முறை
- முதலில் 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-ல் மாற்றம் செய்யவும்.
2.HTML Color Code-ஐ கண்டுப்டிக்க
3. தளத்தில் உள்ள நிறங்களின் HTML Code-ஐ கண்டுபிடிக்க
- சிவப்பு நிறத்தில் உள்ள Your URL என்ற இடத்தில் உங்களுக்கு தேவையான URL-ஐ கொடுக்கவும்
- நீல நிறத்தில் உள்ளதை உங்களுக்கு ஏற்ற்வாறு மாற்றிக்கொள்ளவும்
அவ்வளவு தான்
Share | Tweet |
|
ஹாய் சதீஷ் ,
ReplyDeleteநலமா ..வந்துப் போட்டேன் அல்லோ ..உங்கட தளத்திற்கும் .........சுப்பரா இருக்கு ப்ளாக் .....
பதிவு எல்லாருக்கும் உதவியா இருக்கும் ..........
வாழ்த்துக்கள் தம்பி
நன்றி!
ReplyDeletearumayaana pathivukal anaiththum
ReplyDeletepalsuvai pathivukalukku www.suncnn.blogspot.com
உங்கள் பதிவுகள் அனைத்தும் அருமையாக உள்ளது
ReplyDeleteபல்சுவை பதிவுகளுக்கு www.suncnn.blogspot.com
eppaa!
ReplyDeleteeppadithaan!
intha bloggarai jodanai-
seyreenga!
adengappa athai naan seyyave-
paathi vaazh naal pokidum pola!
vaazhthukkal!
மிக்க நன்றி ஐயா.......
ReplyDeleteசுப்பரா இருக்கு சதீஷ் உன் விளக்கம்
ReplyDeleteஎப்படி சுகம்? தொடர்ந்து இப்படிப்பட்ட நல்ல
விடயங்களை கொடுத்து வா.
அழகா இருக்கடா தம்பி உன் வலைப் பூ
பரீட்சை முடிந்ததும் அவுத்து விட்ட ... மாதிரி..-:)
ReplyDeleteஅடுத்து என்ன ப்ளான் சதீஷ்...?
டாப்பு நண்பா ..!
ReplyDeleteநன்றி நண்பரே பயன் படுத்தி பார்த்து விட்டு சொல்கிறேன்
ReplyDeleteThanks friend useful post...pakkaa
ReplyDeleteSUPER NANBA
ReplyDeleteமிகவும் பயனுள்ள பதிவு நண்பா.
ReplyDeletehttp://blogintamil.blogspot.com/2012/09/blog-post_19.html
ReplyDeleteஇந்த பதிவை வலைச்சரத்தில் அறிமுகப்படுத்தி உள்ளேன் நேரமிருந்தால் வந்து பார்வையிடவும்.