Setup a Header Banner Image for your blog using Thesis Theme

by Ashwin

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

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • http://twitter.com/thotsunlimited/status/3140983686 Ashwin

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

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

  • https://thoughtsunlimited.net/blog/2009/08/links-for-2009-08-05 links for 2009-08-05 » Thoughts Unlimited

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

  • http://www.cancunforos.com/ william

    thank you for your post, excelente informacion,

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

    saludos

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    Great William! good that you found it useful…

  • http://www.jagoinvestor.com/ Manish

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

    Manish

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    Manish,

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

  • somu

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

  • somu

    Working perfectly sorry.

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    Great! Glad to know it helped.

  • http://gisnap.com gisnap

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

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

  • http://www.normamaxwell.com/ Norma Maxwell

    Thank you very much! That helped me out alot )

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

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

  • http://www.normamaxwell.com/ Norma Maxwell

    Thank you very much! That helped me out alot )

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

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

  • http://themethesis.com/tutorials/47-customizations-for-the-thesis-theme/ 47 Customizations for the Thesis Theme

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

  • http://www.bannersky.com bannersky

    Clear instructions.

  • www.newlyswissed.com

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

  • http://athleanxprogram.com Steven James

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

  • faisalraj

    it doesnt work

blog comments powered by Disqus

Previous post:

Next post: