Thursday, 17 January 2013

How to Add a Custom Top Banner in Blogger

This great question came from Cava. She wanted to know how we put this extra advertisement on the top of our Blogger blog.

By default, Blogger offers you a static blog header including title and description of your blog. Sometimes you might want to add something else on the top of your blog header, like we wanted to add StyleLoving advertisement.


So lets add a new custom header to your blog. This is fairly simple, takes 5 mins max. :)
  1. Navigate to your Blogger Dashboard.
  2. Click on your Blog Title (in our case Bloggerial).
  3. Move on to Template tab from the left pane.


Click Edit HTML button.



Tick on, Expand Widget Templates option.



Now search for following or similar line of code in your template which relates to your blog header section and alter attributes using regarding attribute information indicated.

Maximum Widgets in Header Section

This attribute specifies the maximum number of widgets can be included in header section. The default value is 1. So, by default, you can't add widgets more than one for your header section. By changing this value, you can allow adding more widgets for header section.

i.e: <b:section ... maxwidgets='2' ...


Enable/Disable Adding New Elements

Though you specified a new maxwidgets attribute value, you may not see Add a Gadget link at Page Elements page until you change this attribute value to yes. Change value to yes as you gonna add new custom header.

i.e: <b:section ... showaddelement='yes'

Now you can add custom header for your blog. But before you proceed, let's remove current header on your blog. You can find the line similar to below, just after the line of code


Change the locked attribute value to false.

i.e: <b:widget id='Header... locked='false'...

Now Save Template.

Go to Layout tab.




Now you can see in your layout above header there is one Add a Gadget link. Click on the link to implement custom header.
Hopefully you got it working. :) If not, please comment.

42 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Hi =) I've tried this on my blog but I think my html is different, you see there's not a "maxwidgets" in the code and I think it's odd but it doesn't appear with Ctrl + F and I also tried going to the Layout Tab and editing the Header section, now I can see the image I want to show but it doesn't appear when I acces the blog. I hope you can help me (Btw, I already had the Header section as "locked = 'false'")

    ReplyDelete
  3. Thank you so much for this. I have to create a blog for my English exam {It's Digital Communications} and FINALLY I can remove the pre-set header. I found it useful to also change the maximum width and height of the header as well; especially if you have an image which is really big. ^o^ Thanks again!

    ReplyDelete
  4. Ugh, an hour later and it would not let me save the template. Add a gadget link was under my header and there was no "implement custom header" this is so confusing for a beginner!!!

    ReplyDelete
  5. Nice one.) Did lost a couple of hours with this problem before I find your tutorial. Nice one.) Thanks

    ReplyDelete
  6. Worked perfectly! Thank you so much for this tutorial!

    xxxooo

    http://catharinashieldsromantica.blogspot.com/

    ReplyDelete
  7. Hi, I changed all the things but the extra widget does not appear under layout :( Can you help me?

    ReplyDelete
  8. how can i add in this blog http://djmulah.blogspot.com/

    ReplyDelete
  9. how to add please help icant find the html text
    http://crushitnow.blogspot.com/

    ReplyDelete
  10. o!this not working on my blog.can i send you my html code?

    ReplyDelete
    Replies
    1. Oh! mine neither. With the old interface I could do it. Could you help me, please? thanks

      Delete
  11. What are the steps to follow in adding a banner to my blog page please, I need this info urgently and if possible now. Thanks.

    ReplyDelete
  12. welcome to our site: www.topgoodssala.com we are a leading company in dealing with cheap brand sneakers(nike shoes,jordan shoes,air max, kicks jordan,nike shox,adidas,acics shoes, af1,bape,nike dunks,iceream,puma,timberland,etc),bags,jeans(red monkey,Levis,etc),T-shirts (lacosate,DG,prada,etc),hats,sun glasses,etc.We can provide all kind of series sneakers and others in my website and keep updating our stock with new colors and styles. Free shipment.

    ReplyDelete
  13. thanks friend for this Aticle,it realy work thankyou very much ...

    visit my blog i ad a banner on the top

    http://freewarepcsoftware.blogspot.com

    ReplyDelete
  14. Thank You Very Much!!!!
    It Works Very Nice.
    windowstechnics

    ReplyDelete
  15. I was able to add it but the original header went down. I wanted the ad to be below the header but I couldn't do it. =(

    ReplyDelete
  16. This great question came from Cava. She wanted to know how we put this extra advertisement on the top of our Blogger blog. How To Blog

    ReplyDelete
  17. It worked like a charm, thanks so much! I didn't want to remove my old header, but to add a banner underneath my header and pages to link to a cookbook / ebook bundle that's going on sale in 2 days. So all I did was follow the steps up until maxwidgets and showaddelement. The only problem is the banner is aligned to the left. Is there a trick to centering it? Thx :)

    ReplyDelete
  18. Thank you, worked a treat even for a novice like me.

    ReplyDelete
  19. Thank you for the simple tutorial. It worked like a charm!

    ReplyDelete
  20. When one conceives the issue at hand, i have to agree with your endings. You
    intelligibly show cognition about this topic and i have much to learn after reading
    your post.Lot's of greetings and i will come back for any further updates.

    Social Media Marketing in Karachi

    ReplyDelete
  21. Really the blogging is spreading its wings rapidly. Your write up is a fine example of it.

    I am quite sure they will learn lots of new stuff here than anybody else!

    These kind of courses are very important to the society that we live in if these kind of
    courses were start before the situation was much batter

    Hosting Services Karachi

    ReplyDelete
  22. How do I do the Expand Widget Templates thing?

    ReplyDelete
  23. Thank you!!

    http://jenngaged.blogspot.co.uk/

    ReplyDelete
  24. Thanks, I found it very useful!

    ReplyDelete
  25. Great banner making ideas everything looks so beautiful...Thank you for coming by One More Time and linking. I do appreciate it. Have a great weekend and banner design packages are very expensive today.

    ReplyDelete
  26. Thanks for Article.I really love it

    Please If you don't mind visit my blog for latest health and make tips

    http://zipshell.blogspot.com

    ReplyDelete
  27. Make your advertising campaign strong with pop up advertising

    Katie Lennon

    ReplyDelete
  28. THANKS.

    I use this trick at Learn Vietnamese. It's OK.

    ReplyDelete
  29. Worked like a charm, thanks ever so much!!

    ReplyDelete
  30. guys ever heard of sfi just check it out www.sfippa.com/14044706/real

    ReplyDelete
  31. I have a quick question...do you know how to add a photo to a banner? I've done it before but my picture ends up sitting on the banner...I adjust the size and everything but my picture doesn't fit the banner picture area that it should. Does this make sense? Can you comment on my blog and let me know if you know how to do this and how?!

    theyarbroughsblog.blogspot.com

    Thanks so much.

    ReplyDelete
  32. For Awesome Tricks Visit This Site
    www.Tricksabout.net

    ReplyDelete
  33. Thanks a lot! It works. I am looking you are a professional in blogger. I want to share here a problem i am facing with my blogger blog and associated domain. Last few days ago, i set up a custom domain www.downloadcinemas.com on http://imovz.blogspot.com. It worked well, but after a few days passed the website started redirect to the google.com.pk/rdw... only on my browser. I tried it to resolve, but could not. Finally, I discontented. I request you please help me to sort this out. Thanks in advance

    ReplyDelete
  34. it was awesome view currentbit.blogspot.com to view it!!!!!!!

    ReplyDelete