ADVERTISEMENT

HTML Code Modification

  • Login to Blogger.
  • From the Dashboard, click on Layout.
  • Click or go to Page Elements to see if you already have the "Add a Gadget" underneath your banner/header.
  • If not, then you have to modify the HTML to enable it.
  • Go to the Edit HTML tab.
  • Scroll thru the HTML code, towards the bottom, looking for the HEADER WRAPPER code:

    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
    </b:section>
    </div>
     
  • Where you should enter a 2 or greater for maxwidgets....I used 2.
  • Then change 'no' to 'yes' for showaddelement.
  • Then click SAVE TEMPLATE button.
  • Now go back to Page Elements and you should now see the Add a Gadget under the header.
  • Add a Gadget
  • From the page elements view, now click on Add a Gadget under the banner/header area.
  • Choose HTML/JavaScript element.
  • Then you could write something like this....

<Table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>


  • What this is is creating a table....it has one row and 3 columns at present using the code above.
     
    Now you have to add the text links.
     
    For example:
     
    <Table>
    <tr>
    <td><a href="your link here(home)" target=_blank>HOME</a></td>
    <td><a href="your link here(about me)" target=_blank>EVENTS</a></td>
    <td><a href="your link here" target=_blank>PROMOTIONS</a></td>
    </tr>
    </table>

  • Another example with further table formatting - using "cell padding", "bgcolor" and "background" attributes.

    If you want a color to appear behind all elements of the navigational bar area, then use the "bgcolor" attribe of the TABLE tag. If you want the
    color just to appear with each word so it looks more like a button,
    then use the "background" property of the TD tag.  Use one or the other.

    In this example, the color purple (#a565cc) is being used as the
    background color and the font color gray (#333333) is being used for
    the text links.

    <table cellpadding=20 bgcolor="#a565cc">
    <tr>
    <td>
    <a style="background=#a565cc; color:#333333; font-family: Georgia;" href="your liml">HOME</a>
    </td>
    <td>
    <a style="background=#a565cc; color:#333333; font-family: Georgia;" href="your link">UPCOMING EVENTS</a>
    </td>
    <td>
    <a style="background=#a565cc; color:#333333; font-family: Georgia;" href="your link">SHOP ONLINE</a>
    </td>
    </TR>
    </TABLE>


  • Then click SAVE.
  • You're done.

Graphical Navigational Bar

If you want to do some type of graphical navigational bar then the
process is more complex. First you need to modify the banner in
Photoshop or other graphical program to include the buttons (basic or
fancy).  Then, you'll need Photoshop / Image Ready or some other
graphical program to do what is called "slicing" and then create
Rollovers, save the outputed images and HTML, store the images to an
online storage area like http://sites.google.com
since Blogger doesn't have a file manager, edit the the outputed HTML
code to reference the online storage path (instead of that of your
personal computer), modify the HTML code, then copy to your Gadget in
Blogger. Lastly, you would go to Layout, Edit HTML, and add "onload =
"preloadImages();" to the BODY tag.

Views: 3

FOLLOW US

Our Latest Food, Travel & Lifestyle Posts

Tired of Being Disorganized? Simplify Your Life with Chart and Soul

Do you struggle with not getting everything done that you want to get done in a day? Home organization and time management are 2 of the toughest obstacles parents face. With so little time and so much to do, sometimes it feels impossible to get ahead. Our friends at Chart and Soul designed a line of…

OUR DAILY PINS

Latest Activity

Profile IconMom Bloggers Club via Facebook
Thumbnail

Have You RSVP'd for the #SheSavvy #TwitterParty | $300 in Cash Prizes | bit.ly/iamsavvyy to win! #ad

Timeline…

See More
Facebook13 hours ago · Reply
Clare Lee updated their profile
16 hours ago
Clare Lee is now friends with Sarah McCormick, Jessica, Janine Hill and Helen Shep
16 hours ago
Elizabeth Doren posted a status
17 hours ago
Richa Choudhary commented on Mayra's group 'Moms with Tots'
18 hours ago
Richa Choudhary commented on Mayra's group 'Moms with Tots'
18 hours ago
Richa Choudhary commented on Mom Bloggers Club's group 'Newbie Bloggers'
19 hours ago
Richa Choudhary commented on Richa Choudhary's album
19 hours ago

Advertisement

© 2016   Created by Mom Bloggers Club.   Powered by

Badges  |  Report an Issue  |  Terms of Service