Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Wednesday, December 1, 2010

Adding Buttons to Blogger Header

It isn't possible to directly add a button to your header. There isn't such feature in Blogger. But there's a workaround. Using CSS 'position' and 'z-index' attributes, you can place an image (button) on top of your header and make it clickable. Check out a live demo here:




Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface:
Go to Dashboard - Template - Backup/Restore - Download Full Template - Close -  Edit HTML - Proceed - 

Find for <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> - Paste the following code directly ABOVE it :

<b:section class='button' id='buttonsection' showaddelement='no'>
<b:widget id='Image999' locked='false' title='' type='Image'/>
</b:section> 

Refer to the image below to see the code in place.


Step 2:

Now go to Layout - Click 'Edit' on the gadget above your Header, the one that says 'Image' - Uncheck 'Shrink to Fit' - Upload your image either by choosing 'From Your Computer' or 'From the Web' - Once uploaded fill the Link field - Save.

Leave other fields blank and click on Save. It is very important for you to insert a link to avoid unnecessary gaps between your header and your navbar.

Step 3:


If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface:
Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog. 
#Image999{
width: 268px; /*Insert width here*/
position: relative;
top: 70px; /*Adjust position*/
left: -20px; /*Adjust position*/
z-index: 100;
}

#Image999_img{
border: outset white;
}

#buttonsection{
height: 0;
}

You have to adjust the above code to fit your button.

1. First, find out what is your button's width. You can do this by going to the image file in your computer - Right click - Properties.

2. Replace 268 in Line 2 with your image's width.

3 Use 'top' and 'left' CSS attributes in Line 4 and 5 to position your button. It is noteworthy that what you see in Template Designer is not what your final outcome will look like. So you might want to hit on 'Apply to Blog' and check your blog for real if the button is where you want it to be.

And that is all. Simple right? Tested with IE8, Firefox 3.6.12, Opera and Google Chrome. Have fun!

Update
Adding more than one button





It's easy actually. Assuming you've attempted to add a single button, I will just briefly go through the method to add more than one button. In this example, I'll be adding 3 buttons. So instead of the HTML code used in Step 1, this is what I'll be using:
<b:section class='button' id='buttonsection' showaddelement='no'>
<b:widget id='Image999' locked='false' title='' type='Image'/>
<b:widget id='Image998' locked='false' title='' type='Image'/>
<b:widget id='Image997' locked='false' title='' type='Image'/>
</b:section>
Go ahead and upload your pictures, then use this CSS code instead. The only additions are the code for the extra two buttons.
#Image999{
width: 268px; /*Insert width here*/
position: relative;
top: 50px;
left: -10px;
z-index: 100;
}

#Image999_img{
border: outset white;
}

#buttonsection{
height: 0;
}

#Image998{
width: 268px; /*Insert width here*/
position: relative;
top: -90px;
left: 500px;
z-index: 100;
}

#Image998_img{
border: outset white;
}

#Image997{
width: 268px; /*Insert width here*/
position: relative;
top: -110px;
left: 240px;
z-index: 100;
}

#Image997_img{
border: outset white;
}
Of course, you'd have to adjust the width and position of your additional buttons. Have fun!

45 comments:

  1. This is by far the best tutorial I have come across, but I'm curious- is there a way to remove the vertical white line that shows up on the left of my button image? Feel free to email me if you can. SugarAndDots (at) gmail (dot) com Thanks so much!

    ReplyDelete
  2. Kimmie: I cant see any vertical lines in your button image. Can you capture a screenshot to show what you're referring to?

    ReplyDelete
  3. I've created a test blog so that I can change my template to celebrate 1 year of blogging & have created this so far: www.sugaranddots.blogspot.com
    I can't seem to escape the white section that attaches itself to my button image. Also, I want 3 buttons side by side...is that possible? Thanks SO much!

    ReplyDelete
  4. Kimmie: Your blog seems to be empty, perhaps I've checked your blog at a bad time. Anyhow, it is possible to add as many buttons as you, wherever you want. I have added a brief update note to the tutorial above, see the last part on how to add more than one button.

    ReplyDelete
  5. hi, this is a great tutorial thank you so much!
    the only problem i have is when i go to look on my blog they have the annoying shadow box blogger puts on photo's, i've already put a html to stop this on my blog post photo's but is there a way to do this for this tutorial?

    www.sjmwelll.blogspot.com

    ReplyDelete
  6. @sjmwell:

    Glad you made a good use of it. Here, use the code in this tutorial - it will remove the border and shadows:

    Remove Blogger Picture Shadow and Border

    ReplyDelete
  7. Hello, i made what you said but i have a big gap between the header and the posts. you can see it live at www.betvlog.com .

    Here is the CSS code that i used:

    #Image999{
    width: 65px; /*Insert width here*/
    position: relative;
    top: 46px;
    left: 300px;
    z-index: 100;
    }

    #buttonsection{
    height: 0;
    }

    #Image998{
    width: 85px; /*Insert width here*/
    position: relative;
    top: -43px;
    left: 368px;
    z-index: 100;
    }

    #Image997{
    width: 108px; /*Insert width here*/
    position: relative;
    top: -130px;
    left: 459px;
    z-index: 100;
    }

    #Image996{
    width: 71px; /*Insert width here*/
    position: relative;
    top: -218px;
    left: 572px;
    z-index: 100;
    }

    ReplyDelete
  8. Hi there,

    Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

    .main-inner{
    top: -100px;
    }

    That should get rid of the gap. Cheers.

    ReplyDelete
  9. WoW you are amazing. Thanks for the fast response!! It tottaly works fine.! I will consider donating if you have somewhere here, but not just yet cause i maybe have similar problems until i finish my page ! Thanx again.

    ReplyDelete
    Replies
    1. Thanks Kostas. Just leave a comment if you have questions :)

      Delete
  10. Well im back ! Know because i modufied my page based on this style when i put etc more gadets above the header i kinda have some problems there. Thats why i would like you to tell me how to do this. If you go to my site you will se the green header. ok? well on the top end of that header/photo i have a about 30px coulour difference, you can see it its a 30pxhigt piece of the photo dark green. I want to put EXACT THERE the widget that i have just for you to see under the header with the scrolling games/scores.I dont want to put it before the header. On the header ! :) . Kinda like the style i made my buttons float all over the header. until i got them where i wanted. Is this possible?

    ReplyDelete
    Replies
    1. It certainly isn't impossible. But the running text has been jumping around your page when I refresh your blog. Are you repositioning it by any chance?

      Delete
  11. Yeah i was kinda experamenting now :). Ill leave it as it is now to see. Can we do something ?

    ReplyDelete
  12. This is awesome and closest to what I want to do. I want to add a series of follow buttons in my header (five in all). When I modify the code and use my pics, they stack up on the top. The problem is that when I try to move them to line up, all that empty space hangs at the top of my header. The button moves, but the gadget space is still there. It wouldn't be a problem with just one pic but several really adds a lot of space to the header.

    ReplyDelete
    Replies
    1. Hi Jacob,

      I see you've already got your buttons embedded in your header picture. This is ideal for HTML mapping. Why don't you give that a try instead? I haven't got any post on it yet, but do Google it up. If you need help, let me know.

      Cheers!

      Delete
  13. Yogaratnam I followed your instructions related to getting rid of the large space under the head but for me it does not work. I am applying it here at my test blog called blognowtest.blogspot.com .... PS you have the best blog support I have seen. I am failure new to blogger.

    This was your directions that did not work for me:

    N.Mar 13, 2012 04:48 PM

    Hi there,

    Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

    .main-inner{
    top: -100px;
    }

    That should get rid of the gap. Cheers.

    ReplyDelete
    Replies
    1. Hi Miles,

      This should work in your case:

      .main-inner {
      top: -520px !important;
      }

      Cheers! :)
      -Yoga-

      Delete
  14. Replies
    1. Remove the code that you've entered in Step 1.

      Cheers :)

      Delete
    2. Thank you so much. I decided to ask before breaking some stuff ;P

      Delete
    3. Hi Yogaratnam. I removed the code and pressed SAVE TEMPLATES and I got such a message:
      "We're sorry, but we were unable to complete your request.

      When reporting this error to Blogger Support or on the Blogger Help Group, please:

      Describe what you were doing when you got this error.
      Provide the following error code.

      bX-88nhhl

      This information will help us to track down your specific problem and fix it! We apologize for the inconvenience."

      Delete
    4. Hi Glow,

      The error has been around for few days now. Use the Old Interface to edit your template's HTML. Go to Dashboard - Gear Icon - Old Blogger Interface. Then go to Design - Edit HTML - Find and delete the lines from Step 1.

      Cheers :)

      Delete
  15. Can you help me please, i managed to successfully get all my buttons on the correct position, but there's a big blank gap between my header and my posts... I tried using

    .main-inner {
    top: -100px !important;
    }

    and also

    .main-inner {
    top: -520px !important;
    }

    But when i apply it, the only thing that goes up is the text part of the blog, not the template, so it ends all broken

    can you help me please :)?

    Thanks for your tutorial :)

    ReplyDelete
    Replies
    1. Hi Christian,

      Yes I can help. But I need to have a look at your blog first. What is your blog's address?

      Cheers..

      Delete
    2. oh yeah, sorry hehe :)

      Here is the address

      http://superb150.blogspot.mx

      Thank you again :)

      Delete
    3. Hi Christ,

      Add this to your CSS:

      .tabs-outer, .main-outer{
      top: -180px;
      }

      And you might wanna re-adjust your orange button as it may move up once you add this code.

      Cheers :)

      Delete
    4. Thank you very much, it worked perfectly :)

      You are awesome :D

      Delete
  16. Hey, I love this blog. I was hoping for some help. My blog does not have the section to post above to get this to work. Is there an alternate code I could post around? Thanks for your help!

    ReplyDelete
    Replies
    1. Hi Jason,

      It appears that you're using a Dynamic View template. Unfortunately, we can't add buttons to Dynamic View's header.. The closest I've come across in DV is changing the links in DV's menu to graphical buttons, which might not be what you're looking for..

      Delete
  17. I've had this coding in my blog until yesterday, when I accidentally ruined EVERYTHING... but when I add it again and align the buttons, they appear in different locations of the header in different browsers (does that make sense? Basically, I want them all next to each other, and they are in Safari, but in Chrome and Firefox, they're all wonky).

    ReplyDelete
    Replies
    1. I don't see any buttons on your header in ladygoats.com. Have you got them removed? Or perhaps you were referring to a another blog?

      Delete
  18. Hi There!

    I am finding step two a little difficult to complete.
    I have changed the HTML in step one okay and can add the CCS with no problem but Step two?????

    http://www.seanocarolan.com

    ReplyDelete
    Replies
    1. Hi Sean,

      I've update Step 2 in the tutorial above. Could you give it another try please?

      Delete
  19. hi, this is good- I managed to get my translate button out of the body into the header. Is there a way of getting a button like this into the outer body- if you see the top right of the blog ---www.thorinus.blogspot.com--- the google translate element is there; And what I'd hoped to achieve was both elements adjacent either vertical or horizontal in either position really- prefer outside top.
    Makes no difference with palemoon browser(mozilla/firefox type it seems) or I.E. With QT web browser- can't see the outside one( only use this one as a tester)
    All on win7. Thanks-

    ReplyDelete
    Replies
    1. Hello,

      Add this to your CSS:

      #HTML9{
      position: absolute !imporrtant;
      top: -150px !important;
      right: -325px !important;
      }

      FYI, this positions the button exactly below your language button - at least on my browser it does so. If you have to change the values in the code to place it on a proper position, chances are the gadget will be off-position when viewed using another browser/machine - which defeats the purpose.

      Delete
  20. Thanks, I tried 3x, and the translator tag disappeared - might not look balanced currently, but will leave it there I think - bearing in mind what you said about being in an off posn. in other browsers - at the moment is pretty constant in 4 of them. Maybe I am overriding/compromising the CSS in the actual widget, if that is possible?

    ReplyDelete
    Replies
    1. Perhaps you could trying changing the values in the code. This could be due the different in your screen size (as opposed to mine)

      Delete
  21. hi. im having a hard time editing because there's a huge space ontop of my header. please help

    ReplyDelete
    Replies
    1. Are you referring to your layout page? Do you know which step (as per the tutorial above) you're in at the moment?

      Delete
  22. Hi its not working to me with simple template, got the message after applying it: "This content is not yet available over secure connections". Have no clue what to do. If you can please help me thanx

    ReplyDelete
    Replies
    1. Sounds like non-Blogger issue - more like something local to your pc, browser or network. Are you still seeing this?

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.