Add a border or image to the top of your Blogger 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 navigation 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-blog
add-triangle-banner-image-to-top-of-blog.png

Add a border to the top of your 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

Post last updated:

27 responses to “Add a border or image to the top of your Blogger blog”

  1. I have been wanting to add a thin line or dotted line under the header that spans the entire width of the blog page but can’t seem to make it repeat. how would I do that?

    1. 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; ๐Ÿ™‚

      1. Hi.
        I would also like to add a color background to the footer os my blog full width of the screen.
        But I am not being able to apply this. Could you make a tutorial on this?

        Thanks

        1. 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.

  2. Jana

    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?

    1. Hello Jana, yeah it should be full width.

  3. 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

    1. 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?

  4. kelly

    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?

    1. Yeah I have loads of tutorials on adding navigation menus here. I’ll do a tutorial on it but that’s just the sidebar with a transparent background, a border surrounding each separate box or widget and a customised title.

      1. kelly

        Thank you! ๐Ÿ™‚

  5. nik

    I cant find the ]]> on my blog’s html? Btw your tutorials are amazing!

    1. If you’re using Blogger, it’s definitely there. Have a look at this tutorial for help finding it – How to search and find code in Bloggers new HTML editor

  6. 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

    1. Hello Michaela, thank you so much! That really means a lot to me ๐Ÿ™‚

  7. 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.

    1. 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 ๐Ÿ™‚

  8. 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. ๐Ÿ˜‰

    1. Hello, the code isn’t currently in your template so I can’t check for errors. Remove <hr style="width:5px;"> above ]]> </b:skin> as this isn’t CSS and will cause issues. Once you remove that, try the tutorial again.

      1. Yes!! Thank you so much!!

  9. Hello, I have a white border on top of my blog and now I want to change it but I can’t find the code from my HTML.

    1. Hey, it’s probably the padding on .content-inner, find that in your CSS and reduce the padding value.

  10. Hi there, I want to add a solid colored border above my header. I added this code in but it isn’t showing up. I even changed the height to 50 px and nothing is showing. Do you know what else I can do?

    Thank you!

    Jessica
    http://www.afternoonstyle.com

    1. Hi Jessica, since you have a fixed a navigation you’ll have the add the border to that instead.

  11. I really want to make the image large and to not repeat, is there a way to do this?

    Thanks!

  12. Kaari

    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.

    1. Hi Kaari, what’s your blog link? I’ll take a look for you, the selector may be different depending on your template.

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up youโ€™ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.