Social Icons

  • Thursday, April 26, 2012

    14 ப்ளாக்கருக்கு அழகான 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-ஐ குறிக்கும்
    3. தளத்தில் உள்ள நிறங்களின் HTML Code-ஐ கண்டுபிடிக்க 
    • சிவப்பு நிறத்தில் உள்ள Your URL என்ற இடத்தில் உங்களுக்கு தேவையான URL-ஐ கொடுக்கவும்
    • நீல நிறத்தில் உள்ளதை உங்களுக்கு ஏற்ற்வாறு மாற்றிக்கொள்ளவும்
    அவ்வளவு தான்
    Share
    எனது பதிவு பிடித்திருக்கிறதா?

    புதுப்பதிவுகளை மின்னஞ்சலில் பெற!

    பின்தொடர

    14 comments:

    1. ஹாய் சதீஷ் ,

      நலமா ..வந்துப் போட்டேன் அல்லோ ..உங்கட தளத்திற்கும் .........சுப்பரா இருக்கு ப்ளாக் .....

      பதிவு எல்லாருக்கும் உதவியா இருக்கும் ..........

      வாழ்த்துக்கள் தம்பி

      ReplyDelete
    2. arumayaana pathivukal anaiththum
      palsuvai pathivukalukku www.suncnn.blogspot.com

      ReplyDelete
    3. உங்கள் பதிவுகள் அனைத்தும் அருமையாக உள்ளது
      பல்சுவை பதிவுகளுக்கு www.suncnn.blogspot.com

      ReplyDelete
    4. eppaa!

      eppadithaan!
      intha bloggarai jodanai-
      seyreenga!

      adengappa athai naan seyyave-
      paathi vaazh naal pokidum pola!

      vaazhthukkal!

      ReplyDelete
    5. மிக்க நன்றி ஐயா.......

      ReplyDelete
    6. சுப்பரா இருக்கு சதீஷ் உன் விளக்கம்
      எப்படி சுகம்? தொடர்ந்து இப்படிப்பட்ட நல்ல
      விடயங்களை கொடுத்து வா.
      அழகா இருக்கடா தம்பி உன் வலைப் பூ

      ReplyDelete
    7. பரீட்சை முடிந்ததும் அவுத்து விட்ட ... மாதிரி..-:)

      அடுத்து என்ன ப்ளான் சதீஷ்...?

      ReplyDelete
    8. நன்றி நண்பரே பயன் படுத்தி பார்த்து விட்டு சொல்கிறேன்

      ReplyDelete
    9. Thanks friend useful post...pakkaa

      ReplyDelete
    10. மிகவும் பயனுள்ள பதிவு நண்பா.

      ReplyDelete
    11. http://blogintamil.blogspot.com/2012/09/blog-post_19.html
      இந்த பதிவை வலைச்சரத்தில் அறிமுகப்படுத்தி உள்ளேன் நேரமிருந்தால் வந்து பார்வையிடவும்.

      ReplyDelete

     

    Google+ Followers

    FaceBook Followers

    Followers