ShareTweet

Please note, the blog featured in this post has been transferred to ReflectingtheDesigner.blogspot.com now! The tips below still apply, however.

I’ve been working to update my Blogger Scrapbook site to make it more visually appealing and easier to navigate, so make sure to check it out! I’m very pleased with the results. I was also able to add a search box and some social icons that I created to the header for further usability. The icons I added simply by the “Add a Gadget” method, but the Google Search Box I added by creating a new div in the Header code.

Here’s how I added a new div to the html:

I first added the div into the html at the bottom of the code  along with the javascript for the search box, and gave it the following class (my addition to the code is in purple):
<div class=’art-Header-png’/>
<div class=’art-Header-jpeg’/>
<div class=’art-Header-Search’><the google search box code></div>

I then added that class up into the Header section (making sure to put it directly above /* end Header */ of  the CSS and placed in the desired positioning code which now looks like the following:

div.art-Header-Search
{
position:absolute;
z-index:0;
top: 125px;
left: 540px;
}

Please let me know if you have any questions about adding links or forms to your header. Adding these items to WordPress is actually quite a bit easier than adding them to Blogger since WP divides up the code so nicely for you. Feel free to contact me if you are interested in a completely customized WP or Blogger Theme, or if you are interested in customized design elements and set-up for your current theme.

© 2009 – 2011, Sarah. All rights reserved.

ShareTweet