Add a border or image to the top of your blog

Today’s tutorial is about adding a border or image to the top of your blog along the browser window. It’s really quick and easy but can really bring your blog design together. If you try it out, let me know below. I’d love to see how you customised it.

Turn off Bloggers Nav Bar

Go to Layout > Navbar and select off. We turn it off because otherwise it will be shown over our image.

Add image to top of blog

Create your image, you can use GIMP which is a free alternative to Photoshop. You can make it small in width as it’s set to repeat horizontally. Upload your image to Dropbox, Photobucket, Flickr or another image hosting site. On Blogger, go to Template > Edit HTML and search for ]]> </b:skin>. Right above ]]> </b:skin> paste the following code. Paste your image code and adjust the height.

body .navbar {
height: 50px; /* ADJUST THE HEIGHT */
padding: 0;
margin: 0;
background: url('DIRECT IMG URL HERE') repeat-x; /* ADD IMAGE */
}

Alternative – you could also add the code above to body { ... } in Template > Edit HTML. If you’re a WordPress user, you can use this tutorial with body { ... } instead of body .navbar { ... }.

add-scallop-image-to-top-of-blogadd-triangle-banner-image-to-top-of-blog.png

Add border to top of blog

On Blogger, go to Template > Edit HTML and search for ]]> </b:skin>. Right above ]]> </b:skin> paste the following code, change the border thickness, style type and colour. You may need to adjust the height as well if there’s too much space between the border and your header.

body .navbar {
height: 20px; /* ADJUST THE HEIGHT */
padding: 0;
margin: 0;
border-top: 10px solid #EEEEEE; /* ADJUST THICKNESS, TYPE, COLOUR */
}

Alternative – you could also add the code above to body { ... } in Template > Edit HTML. If you’re a WordPress user, you can use this tutorial with body { ... } instead of body .navbar { ... }.

add-border-to-top-of-blog

Related Posts

center header image in blogger
how to move and remove the header gadget on your blog
create the blog header shown in the example

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

27 comments

    • Ellie M on

      Hello. It’s because of the padding on your content width. To workaround this you can find .content-inner and change padding to padding: 10px 0px;. Find html body .region-inner and change it min-width: 0; max-width: 100%; width: 1150px;. Then find .content-outer, .content-fauxcolumn-outer, .region-inner and change max-width to max-width: 100%;. You can then add the line, I’d recommend adding it to your tabs so it appears below your header image, if that’s what you want. To do this find .tabs-outer and add border-top: 1px solid #000000; or border-top: 1px dashed #000000; πŸ™‚

      Reply
        • Ellie M on

          Hello, yes of course I can. There’s a couple of things to alter first so I’ll explain why – blog templates are set up to have padding and margin values on either side of the main content giving it blank space. To have a header or footer full width, we need to remove this and apply it only to your main content area and adjust the width of your blog. So here’s what to do – Find .content-outer, .content-fauxcolumn-outer, .region-inner and change max-width: 995px; to max-width: 100%; then find .main-outer and add max-width: 915px; margin: 0 auto; between the brackets. Add .tabs-outer to your CSS (before ]]> </b:skin>) and add max-width: 915px; margin: 0 auto; between the brackets, then find .content-inner and change padding: 10px 40px; to padding: 10px 0px; now you add style your footer and it should be full width while keeping everything else the way it was. You can do this in the Template Designer > Advanced > Footer or manually by adding .footer-outer { background-color: #HEXVALUE; } to the CSS – Template > Edit HTML > Before ]]> </b:skin>. Hope this helps.

          Reply
  1. Jana on

    Thanks for this Ellie! πŸ™‚ With this does does the border/image span the entire width no matter what the screen size the blog is viewed on?

    Reply
  2. janie on

    how do i add a horizontal line below my header image and also below my tabs? and how can i extend the full width of the blog? also how do i remove the dotted and dashed lines at the bottom of my blog??

    thanks

    Reply
    • Ellie M on

      You could add a border to the top and bottom of your navigation which will look the same, add .tabs-outer { border-bottom: 1px solid #000; border-top: 1px solid #000; padding-top: 5px;} above ]]> </b:skin> in Template > Edit HTML. Find .content-inner in Template > Edit HTML and change padding: 10px 40px; to padding: 10px 0px; and save. I don’t see any dotted or dashed borders?

      Reply
  3. kelly on

    Hi πŸ™‚ Thank you for this! Is there a way that I can make my own navigation bar with this header that is on the top of the page? Such as adding social media icons?

    also would you be willing to do a tutorial or at least let me know what this is called: I have been googling for EVER and can’t find the answer to what it is even called….

    but http://prettylittlethings-demo.blogspot.com

    The boxes that say socialize, follow by email, blog archive, etc. Are they called shadow boxes?

    Reply
  4. Michaela on

    Hi Ellie

    I just stumbled upon your blog yesterday when I was searching for some tutorial and I just had to leave a comment. I LOVE everything you do here. So many useful tips, ideas & tutorials – and how you respond to all comments in detail is just amazing.

    Thanks so much for your work! I’m just implementing about half a dozen of your tutorials on a blogger re-design i’m working on for a friend.

    Cheers
    Michaela

    Reply
  5. Lea Raak on

    Hey πŸ™‚
    I don’t know why, but it doesn’t work for me πŸ™
    I used the Minima Template and just copy and pasted it where you told me to.

    Reply
    • Ellie M on

      Hello. Minima is an older Blogger template so the code has changed since then, try the code above using body instead of body .navbar. If using an image double check you’re using the direct image link and not the page link πŸ™‚

      Reply
  6. Kacie on

    Hi there πŸ™‚ I know this is an old post, but it’s the only tutorial I can manage to find on this topic, and I cannot get it to work for some reason. I am totally puzzled as to why not. I’m using the Simple template in Blogger. I find the b:skin tag (it won’t let me write that exactly here without erroring) (mine has no space in the middle like yours does) and then put the code you give right above that, with my photobucket photo’s direct url in the right place and nothing happens. Any ideas? (Btw, the blog is a brand new work in progress, thus its roughness. πŸ˜‰

    Reply
  7. Kaari on

    Hi – I tried this 100 times and could not get it to work for my blog πŸ™ please help. Would love the dotted line at the top of my blog or the bunting banner in black.

    Reply