Les nouveautés et Tutoriels de Votre Codeur | SEO | Création de site web | Création de logiciel

Loading...
Seo Master present to you:
blogger drop down menu
A drop down is really essential tool or widget for any blog or websites. It gives real feel or look of the template or blog. Drop down menu lets users easily navigate through different parts of the blog. In this tutorial i will teach you to add simple navigation menu or Drop down menu to your blog. The good thing about this widget is that it requires no jquery and is coded completely in Html and CSS. So it loads really fast. Lets get started!.

How To Add Drop Down Menu ?

1. Go to blogger Dashboard and click on Layout.
2. Then Click on Add Gadget (Below Header not on sidebar) and Choose Html/Javascript Widget.
3. Now Paste below code into it.
<div id='mbwnavbar'>
      <ul id='mbwnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>About</a>
       </li>
        <li>
          <a href='#'>Contact</a>
        </li>
         <li>
           <a href='#'>Sitemap</a>
            <ul>
                <li><a href='#'>Sub Category #1</a></li>
                <li><a href='#'>Sub Category#2</a></li>
            </ul>
        </li>
      </ul>
    </div>
4. Now Change the text in Bold with appropriate label and also replace the url highlighted in red color (#).
5. To add another tab to the drop down menu then add below code before </ul>. or delete that code from above code to remove any menu.
 <li>
       <a href='#'>Contact</a>
 </li> 
6. Now we will add CSS, Go to Blogger Dashboard and click on Template and click on Edit Html. Backup your template before doing this.


7. Then Search for below code.
]]></b:skin>
8. Paste the below code above the code you searched in Step 7.
/**MBW Navgation bar**/
#mbwnavbar {
    background: #464849;
    width: 960px;
    color: #FFF;
    margin: 0px;
    padding: 0;
    position: relative;
    border-top:0px solid #960100;
    height:35px;
}
#mbwnav {
    margin: 0;
    padding: 0;
}
#mbwnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbwnav li {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left:1px solid #333;
    border-right:1px solid #333;
    height:35px;
}
#mbwnav li a, #mbwnav li a:link, #mbwnav li a:visited {
   color: #FFF;
   display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
     
}
#mbwnav li a:hover, #mbwnav li a:active {
    background: #028490;
    color: #FFF;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 9px 12px 10px 12px;
             
}
#mbwnav li {
    float: left;
    padding: 0;
}
#mbwnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#mbwnav li ul a {
    width: 140px;
}
#mbwnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbwnav li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul ul, #mbwnav li.sfhover ul ul ul {
    left: -999em;
}
#mbwnav li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul, #mbwnav li.sfhover ul, #mbwnav li li.sfhover ul, #mbwnav li li li.sfhover ul {
    left: auto;
}
#mbwnav li:hover, #mbwnav li.sfhover {
    position: static;
}
#mbwnav li li a, #mbwnav li li a:link, #mbwnav li li a:visited {
    background: #028490;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
    z-index:9999;
    border-bottom:1px dotted #333;
 
}
#mbwnav li li a:hover, #mbwnavli li a:active {
    background: #70b6bd;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
}
 9. Save the template and you will have drop down menu added to your blog.

Customizing Above Widget

This part is completely optional. If the above provided plugin does not match the theme of your blog and want to customize to match template of your blog then change some Hex code listed below.
  • Change #464849 to change background color of navigation bar which is currently dark grey.
  • Change #028490 to change the color of tab on mouse hover.
  • Change #028490 to change the color of Drop down menu
  • Change #70b6bd to change the color of Drop down on mouse hover.

Any Question ?

If you find this plugin usefull or got into problem while adding this plugin to your blog then leave a comment below i will be glad to help you out. Dont forget to subscribe and follow us on google+,twitter and facebook.

2013, By: Seo Master

seo Creating Simple Drop Down Menu For Blogger 2013

Seo Master present to you: Author Photo
By Jan Kleinert, Developer Relations Team

Google Apps Script is a JavaScript cloud scripting language that provides easy ways to automate tasks across Google products and third party services. If you want to learn more about Google Apps Script, collaborate with other developers, and meet the Apps Script team, here’s your chance! We will be holding an Apps Script hackathon in Washington, DC on Wednesday, March 7 from 2pm - 8pm.

After we cover the basics of Apps Script, you can code along with us as we build a complete script, or you can bring your own ideas and get some help and guidance from the team. There will be food, power, and Apps Script experts available to help throughout the day. Just bring your laptop, ideas, enthusiasm, and basic knowledge of JavaScript. Check out out the details of the event and be sure to RSVP to let us know you’re coming.


Jan Kleinert is a Developer Programs Engineer based in NYC, focusing on helping developers get the most out of Google Apps Script. Prior to Apps Script, she worked on Commerce, helping merchants integrate with Google Checkout and on Chrome, helping developers build great web apps.

Posted by Scott Knaster, Editor
2013, By: Seo Master

seo Come learn about Apps Script in Washington, DC 2013

Seo Master present to you:

(Cross-posted from the Official Google Blog)

Over the past two years, we’ve made public data easier to find, explore and understand in several ways, providing unemployment figures, population statistics and world development indicators in search results, and introducing the Public Data Explorer tool. Together with our data provider partners, we’ve curated 27 datasets including more than 300 data metrics. You can now use the Public Data Explorer to visualize everything from labor productivity (OECD) to Internet speed (Ookla) to gender balance in parliaments (UNECE) to government debt levels (IMF) to population density by municipality (Statistics Catalonia), with more data being added every week.

Today, we’re opening the Public Data Explorer to your data. We’re making a new data format, the Dataset Publishing Language (DSPL), openly available, and providing an interface for anyone to upload their datasets. DSPL is an XML-based format designed from the ground up to support rich, interactive visualizations like those in the Public Data Explorer. The DSPL language and upload interface are available in Google Labs.

To upload a dataset, click on the “My Datasets” link on the left-hand side of the Public Data Explorer. Once imported, a dataset can be visualized, embedded in external websites, shared with others and published. If you’re an official provider, you can request that your datasets appear in the Public Data Explorer directory; please contact us to discuss this process.

With this new capability, we hope more datasets can come to life through Public Data Explorer visualisations and enable people to better understand the world around them and make more informed, data-driven decisions. Stay tuned for more datasets, visualization features and DSPL extensions in the future.


By Omar Benjelloun, Google Public Data Team2013, By: Seo Master

seo Visualize your own data in the Google Public Data Explorer 2013

Powered by Blogger.
Design by Dev Nasser