Blogger Tips and Tricks

Friday, March 8, 2013

How To Add Drop Down Menu In New Blogger Template

Template editing have been so much difficult ever since blogger introduce new blogger template designer, especially picture window template and watermark, which have cause a great headache for most blogger newbies.
In my next post i will be publishing how you can add a drop down menu to your blog, and i know most newbies are going to experience a little difficulties in implement the code, so i think i have to share this with you before releasing my awesome drop down menu widget.

How To Add Drop Down Menu To New Blogger Template

Go to your blogger dashboard
Click on "Design" > Edit HTML" > back up your template
Now find your tab/menu tag code, it will look very similar to the code below, you can scroll through your template until you find it

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}

.tabs-inner .section:first-child ul {
margin-top: -$(header.border.size);
border-top: $(header.border.size) solid $(tabs.border.color);
border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: $(tabs.border.width) solid $(tabs.border.color);

margin-top: $(tabs.margin.top);
margin-left: -$(tabs.margin.side);
margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
display: inline-block;

padding: .6em 1em;

font: $(tabs.font);
color: $(tabs.text.color);

border-$startSide: $(tabs.border.width) solid $(content.background.color);
border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: $(tabs.selected.text.color);
background-color: $(tabs.selected.background.color);
text-decoration: none;
}

Techmma

Remove the comment quote (*/) from the top and add it the bottom of your tab tag like the example below.

/* Tabs
-----------------------------------------------
.tabs-inner .section:first-child {
border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}

.tabs-inner .section:first-child ul {
margin-top: -$(header.border.size);
border-top: $(header.border.size) solid $(tabs.border.color);
border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: $(tabs.border.width) solid $(tabs.border.color);

margin-top: $(tabs.margin.top);
margin-left: -$(tabs.margin.side);
margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
display: inline-block;

padding: .6em 1em;

font: $(tabs.font);
color: $(tabs.text.color);

border-$startSide: $(tabs.border.width) solid $(content.background.color);
border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: $(tabs.selected.text.color);
background-color: $(tabs.selected.background.color);
text-decoration: none;
}

*/

Techmma

Click "SAVE TEMPLATE" and that's all. you can reverse the case anytime.

Now you can add any drop down menu to your navigation bar without any difficulties.Hope this tricks help? take few seconds to share and subscribe to receive our free posts update into your email.

Create a Simple Drop Down Menu In Blogger Blog

Adding drop down menu to your blog is the best way to arrange your blog/site important links, it will helps your readers to easily navigate through your blog which will definitely increase your site page views and impression.
This drop down menu comprises of CSS and html and it doesn't affect your blog load time.

How To Add The Drop Down Menu

Step 1

Go to your blogger dashboard.
Click on "Design" > "Edit HTML" back up your template.
Use ctrl F to find ]]></b:skin>and paste the following code above/before it.

/*----- Drop Down Menu BY www.techmma.com----*/

#rbnavbar {
    background: #2a2626;
    width: 100%;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #7f7777;
        height:35px;
}

#rbnav {
    margin: 0;
    padding: 0;
}
#rbnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#rbnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#rbnav li a, #rbnav li a:link, #rbnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;

}
#rbnav li a:hover, #rbnav li a:active {
    background: #6c6464;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;



}
#rbnav li {
    float: left;
    padding: 0;
}
#rbnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#rbnav li ul a {
    width: 140px;
}
#rbnav li ul ul {
    margin: -25px 0 0 161px;
}
#rbnav li:hover ul ul, #rbnav li:hover ul ul ul, #rbnav li.sfhover ul ul, #rbnav li.sfhover ul ul ul {
    left: -999em;
}
#rbnav li:hover ul, #rbnav li li:hover ul, #rbnav li li li:hover ul, #rbnav li.sfhover ul, #rbnav li li.sfhover ul, #rbnav li li li.sfhover ul {
    left: auto;
}
#rbnav li:hover, #rbnav li.sfhover {
    position: static;
}
#rbnav li li a, #rbnav li li a:link, #rbnav li li a:visited {
    background: #6c6464;
    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;

}
#rbnav li li a:hover, #rbnavli li a:active {
    background: #2a2626;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

Techmma

To change the color of your background menu, simply edit #2a2626
To change the background color of the menu on mouse hover, then edit #6c6464
To change the background color of the drop down menu, edit #6c6464
Click "SAVE TEMPLATE" when you are done with your editing

Step 2

Now we are need to add the html code

Go to "Page Elements", click "Add a Gadget" below your header.
Choose "HTML/JavaScript" from the list of the options and paste the following code in the content box leaving the title blank.

<div id='rbnavbar'>
      <ul id='rbnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>Contact</a>
       </li>
        <li>
          <a href='#'>About</a>
       </li>
        <li>
          <a href='#'>Blogging</a>
        </li>
<li>
           <a href='#'>Services</a>
            <ul>
                <li><a href='#'>Sub Page #1</a></li>
                <li><a href='#'>Sub Page #2</a></li>
                <li><a href='#'>Sub Page #3</a></li>
                <li><a href='#'>Sub Page #4</a></li>
                <li><a href='#'>Sub Page #5</a></li>
              </ul>
        </li>
         <li>
          <a href='#'>Create This ></a>
        </li>
      </ul>
    </div>

Techamma

Replace all occurrence of # with the link/url of each page you want to point the menu to
Replace all text highlighted in green with the title of each menu
Click "Save" and if you need any further help, please feel free to ask using the comment box, and we will get back to you asap.

Note: If you observed that your submenu (Sub Page) is hidden, kindly read this:

How to add drop down menu in new blogger template.

Hope you enjoy this articles? take few seconds to share it and subscribe for our latest posts update.

Add HTML Box to your Blogger Blog Post

Am sharing with you today how to add HTML box in your blogger blog post, you have to focus for you to get this simple tricks. I dont know maybe you have tried to add a html code to your post which it eventually exceed your computer screen, if you are a victim of this, then you have to worry no more, because am going to break down the secrete behind this trick to you.

Let's get started :

when you are creating a new post and you about to paste a html code to your post, check beside compose tab at the top of your new post box, click Edit HTML.
Paste the code in the box below in your Edit HTML tab, now go back to compose, you should find the html box in your compose tab, fill in the html code you want paste.

If you want to use a box with border as shown below, use the code in the box below.

<div style="font: 16px/26px durodola, ridwan, olabode; height: 120px; overflow: scroll; width: 500px;border:3px solid black;">
Enter your text here</div>
<div style="font-family: verdana,arial,sans-serif; font-size: 10px;">
<a href="http://techmma.com/">apslogo</a></div>

Techmma

If you want a box without a border as shown below, use the code in the box below.

<div style="font: 16px/26px durodola, ridwan, olabode; height: 120px; overflow: scroll; width: 500px;">
Enter your text here</div>
<div style="font-family: verdana,arial,sans-serif; font-size: 10px;">
<a href="http://techmma.com/">apslogo</a></div>

Techmma

Note: Both the code highlighted in Blue can be change to your desired height and width. If you really love this or having problem with it drop a comment, please share this with friends using the share button below. In my future future post i will be dropping a lot of tricks which you can use to spice up your html box and look more professional, so for you not to miss any of this offer, subscribe to this blog now, and receive a lot of tricks/tips/tutorials directly into your email.

Hope you enjoy this articles? take few seconds to share it and subscribe for our latest posts update.

Pages

Blogger Tips and Tricks

New Post

Rss

How To Add Drop Down Menu In New Blogger Template

Create a Simple Drop Down Menu In Blogger Blog

Add HTML Box to your Blogger Blog Post