Setup a Header Banner Image for your blog using Thesis Theme

Header of a blog is the prominent advertising spot and a banner image here would just make things better.  I will share a very simple tip to setup the header banner image using the powerful Thesis Theme.

I assume that you have setup the Thesis OpenHook plugin.  If not, go grab it here and Thesis is just 50% useful without this!

1.  Create the CSS Style for the Banner Image

Go to Thesis Custom Styling section of your Thesis Administration Panel.  (you can find it just below the Editor link)

Let us now add the following entry into the entry box, which would find its place in the custom.css file.

/* Banner Ad in the Header */
.custom #leaderboard_ad {
  float: right;
  position: absolute;
  width: 468px;
  height: 60px;
  top: 25px;
  left: 675px;
}

width – Value must match the width of the Banner Image (typical value is 468px)
height – Value must match the height of the Banner Image (typical value is 60px)
top – Gap between the top of your blog and the start of the Banner Image
left – From where the Banner Image should start, on the left side of the page.  Higher the value, the image would be shifted on the right

Adjust the top and left values based on the styling and layout of your blog.

2.  Add the HTML code for the Banner Image

Typically the banner images are setup using the Affiliate Code that your affiliate has provided you or the Google Adsense script.

Go to your Thesis OpenHook section in the administration page and add the Banner Image code in the After Title field.

thesisheaderimage

Following is an example Banner Image code, that I used for display.


And that’s it!  You are all set to display the Banner Image on the header section of your blog.  You can also check out how this works on my blog.

One such Banner Image I really liked, is that of ProBlogger.  It is so nicely positioned and fits exactly with rest of the header.

thesisheaderimage_2


Share this post:

Post on Twitter
Share on Facebook

Thoughts Unlimited runs on Genesis Framework


Comments

  1. thank you for your post, excelente informacion,

    i really need it , cause im designin my new theme on thesis…

    saludos

  2. Great William! good that you found it useful…

  3. I did the same thing , but my ad is displaying just below the header Title not after that . not sure what to change ?

    Manish

  4. Manish,

    Can you try adjusting the 'left' value (reduce it) in the CSS code given in the post? Let me know if it works.

  5. I am having the same problem in the home page its perfect on other pages but not on homepage

  6. Working perfectly sorry.

  7. Great! Glad to know it helped.

  8. Its really cool, I came to know this really worth visiting, just bookmarked your site.

    http://gisnap.com/
    The place where fun never ends

  9. Thank you very much! That helped me out alot :o )

  10. Great. Keep visiting often for more such useful tips :)

  11. Thank you very much! That helped me out alot :o )

  12. Great. Keep visiting often for more such useful tips :)

  13. Clear instructions.

  14. www.newlyswissed.com

    Thanks for this great tutorial! It has worked perfectly on my site…

  15. Finally, I can take my simple looking blog and make it look more official. Thanks so much.

  16. it doesnt work

Trackbacks

  1. Ashwin says:

    Setup a Header Banner Image for your blog using Thesis Theme:

    Header of a blog is the prominent advertising s.. http://bit.ly/13kRts

    Reply
  2. links for 2009-08-05 » Thoughts Unlimited says:

    [...] Setup a Header Banner Image for your blog using Thesis Theme (tags: wordpress thesis bannerimage) [...]

    Reply
  3. 47 Customizations for the Thesis Theme says:

    [...] Setup a Header Banner Image Add a banner ad to the right of your header using css and custom functions. [...]

    Reply

Leave a Reply to bannersky Cancel reply

*