Blog Design Tips #1: Blogger Basics


I am by no means a blog design expert but I have been designing my own websites and blogs for the past seven or so years, and have picked up a fair bit of HTML and CSS along the way. Once you get started with HTML/CSS it’s (usually!) surprisingly easy to understand, but staring at a page of code you don’t understand can be very daunting. I thought I would share a few tips for customising Blogger templates that are pretty simple and quick to do but will instantly smarten up your layout.

Before we get started, it’s important to remember the difference between HTML and CSS. HTML controls the construction of a webpage whereas CSS determines the design of the page. So, for instance, if you wanted to change the order of elements on the page you would alter the HTML, but if you wanted to change the colour of elements you would alter the CSS. This post will mostly be dealing with CSS. You should also note that everything uses the American spelling, so you’ll have to use “color” not “colour” etc!

How to: Remove drop shadows from images

 

I quite often see people asking this question and it’s so easy to fix. To get rid of the annoying grey shadows from around all the images on your blog, open the Blogger dashboard and go to Template >> Customise >> Advanced >> Add CSS and enter the following code:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}

 

How to: Remove shadow from content box

Blogger’s default Simple Template has a shadow surrounding the main content box which can look a bit weird, especially if you’re using a white background. To remove it, go to the Add CSS section (as above) and enter the following code:

.content-outer {
-moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0);
-goog-ms-box-shadow: 0 0 10px ;
box-shadow: 0 0 40px rgba(0, 0, 0, 0);
margin-bottom: 1px;
}

 

How to: Centre the header image

By default, header images are aligned to the left. If your header is smaller than the full width of your content area, this can be annoying so it usually looks much neater if the image is centred. To do this, simply paste the following code into the Add CSS section:

#header-inner img {
margin: 0 auto ;
}

 

How to: Centre the page tabs navigation bar

If your header image is centred, you might also want to centre your page tabs (the navigation links which are often found directly under the header). If you have the ‘Pages’ widget installed on the Blogger Layout dashboard, just add the following code to the Add CSS section to centre the page tabs:

.PageList {
text-align:center !important;
}

.PageList li {
display:inline !important; float:none !important;
}

 

How to: Create a clickable image link

I’m sure most of you will already know how to create a text link, and how to add an image to your page using HTML. To create a clickable image link, all you need to do is combine these two codes by wrapping the link around the image. This can be used for anything e.g. social media buttons, blog sharing buttons (or grab buttons, I’m not sure what the ‘proper’ name is!), navigation titles etc. Copy the following code and add in your own URLs where appropriate:

<a href=”LINK URL”> <img src=”PICTURE URL” /> </a>

 

How to: Turn off Word Verification

This is not so much HTML-related, but it’s a question I often see getting asked and it’s so easy to fix. Turning off Word Verification makes it much easier for your readers to leave a comment on your blog. To make sure yours is turned off, open the Blogger dashboard and click on Settings >> Posts and comments >> Show word verification and then select “No”. Done!

How to: Remove the Blogger Navbar

Since removing the ‘Follow’ function from the Navbar (the bar right at the top of the page above the header) it has become pretty redundant. Personally, I think most layouts look a lot nicer and cleaner without it. To remove it, open the Blogger dashboard and go to Layout >> Navbar (it’s in the upper right corner) and click “Off”. You can easily turn it back on again here if you decide you want it back at a later date.

I hope you found these little tips useful, they’re all pretty simple but by changing these few basic things your layout will instantly look more “finished”. I’m planning on doing a series of these Blog Design posts with some more in-depth design tips, so if there’s anything you would like to know then please let me know (either by email, tweet or leaving a comment) and I will do my best to include it in the next post.

Gillian x

Gillian

Freelance social media and digital marketing consultant with a penchant for writing blog posts, drinking sickly sweet cocktails and exploring the cobbled streets of Edinburgh.

25 Comments

  • Sparkle says:

    this is so cool! great tip!

    xx

    asteria-sparkle.blogspot.com

  • Laura says:

    This is such a helpful post. Having had a blog designed by you I have to disagree and say you ARE a blog design expert (definitely much much more than me anyway!)

    x

  • Rachael says:

    Thanks so much for this – finally got around to centring my pages under my header now!

  • Charlotte says:

    Thank you so much! That grey box around my photos was so annoying and your tips are so easy to follow 🙂
    -x-

  • Caroline says:

    Such a helpful post Gillian! I've bookmarked it for future reference! 🙂

    Caroline x
    Caroline's Catwalk

  • Jaz xo says:

    This would've helped me so incredibly much when I first started blogging, great post xo

  • Something I wondered about your design was the share buttons at the bottom of your posts? Was it another div you put there within the template or did you find a way to replace the ugly default buttons Blogger can add at the end of every post? I tried to replace them but it looked more like programming than CSS/HTML :/

    Morag x
    moadore.blogspot.com

    • gillian says:

      Yeah I couldn't find a way to replace the fugly buttons either, so added in an extra div above the post footer with my own buttons. I just did lots of googling to try and find the right codes, it seems pretty confusing but this page was quite useful for lots of the codes!

  • Jo says:

    Thank you for this Gillian, such a helpful post! I end up googling an awful lot of things but some sites are just so complicated so it's nice to have it all put plain and simply (: xx

  • Chelseyxlou says:

    Such a great post and great tips! Looking forward to more helpful design tips – particular about the sidebar? I've been wanting for smarten mine up for a while but nothing seems to work to well 🙁 xo

  • Thank you! I'm the least tech savvy person but when explained like this it makes it more understandable! I appreciate it!!

  • EilidhPie says:

    When MySpace was all the rage I was relatively ok at HTML, but I've forgotten everything since then, so this post is really helpful! I've starred it on my google reader for future reference, thanks! Xo

  • Sarah says:

    Thank you so much! I wanted rid of those ugly shadows for such a long time! I used to be quite good at CSS and HTML and I remember spending my sunday afternoons re-doing my myspace page lol. Now I just ask my computer programming boyfriend, knew I kept him around for something xxx

  • Shannon Beer says:

    This is so helpful, I've been wanting to centre the page tabs navigation bar for ages! Can you do a post about sprucing up post titles? Such as the underline that yours has etc xx

    • gillian says:

      Glad you found it useful Shannon! Of course, will definitely include a bit about customising titles in my next post! x

  • Thank you Gillian what an amazing post! Finally I don't have those annoying grey shadows around the images of my blog! xx

  • Edelyn says:

    Thank you!
    This had everything i was looking for 🙂

  • Nadja Baxter says:

    I have tried to get rid of the grey shadow with many codes on the add css but I cannot get this to work. Have you got any tips? Those grey shadows on my images are annoying me so much!

    • gillian says:

      Have you tried editing it within the Edit HTML section? Some of the previous code you've added might be overwriting it. Open the HTML Editor and click the little arrow beside the bit of code that says b:skin (should be around line 15-20), then search for "box-shadow". Change all the values to 0px, there might be a few different box-shadow, moz-box-shadow, webkit-box-shadow etc so make sure you change them all. That should get rid of it. 🙂

  • Claire says:

    Thank you, thank you, thank you, I've been trying to remove the shadow box around the outside of my blog for a year and I could never figure it out, what a star!

  • You're awesome!! I've been trying for MONTHS to get that stupid shadow to go away, and not understanding CSS/HTML properly I didn't get that my HTML code was overwriting the CSS. Sighs of relief all around. Thanks so much.

  • Grace Mattei says:

    Love this posting!! I am constantly trying to revamp my blog and I always come across pesky HTML/CSS problems. This made it so simple and it actually WORKED! Thanks for being brilliant! 😉

  • Literally what am I doing wrong non of these will work for me :(!

  • Thank you SO much for your help! I'm very new to all this malarkey but you've certainly helped! Thanks again, Megan xoxo

  • Katie Urich says:

    Found your post two years later- thank you so much! This was so helpful!

Leave a Reply

Your email address will not be published.