5 EASY WAYS TO CLEAN UP YOUR BLOG DESIGN (BLOGGER)

Tuesday, 23 June 2015


Hold up a second- is this the third post in three days?? (yes) (omg) (is this real)

Happy Tuesday! It feels so good to be back into the swing of things blog-wise and I'm planning, photographing, and editing a whole new heap of content to make up for my past month of next-to-no posting. I'm on a roll, guys!

As many of you know I've been blogging for about 3 years, and in that time I've gotten more and more comfortable with coding. As someone who is extremely technologically un-savvy (for real- I didn't even know how to turn on a computer until I was 12) I totally sympathise with everyone who steers clear of anything even remotely relating to html. So the fact that even I am able to understand basic html coding shows that it really isn't as freaky as it seems, and the idea that only really experienced bloggers can design their own website is completely false. Here are 5 quick, basic ways you can use coding to clean up your blog design.

1// CENTER YOUR POST TITLE AND DATE HEADER
This is a matter of personal preference, but I definitely love the look of my blog with the centered date and post headers! Go to the template tab on blogger, click 'customise' under the 'live on blog' header. Scroll down to the 'advanced' tab, then go to the 'add CSS' tab and paste this code into the box.

.post-title {
text-align: center;
}

.date-header {
text-align: center;
}

2// REMOVE THE WHITE BORDER AROUND BLOG IMAGES
Some people love the borders, others don't. For those of you itching to be rid of them, again go to the template tab on blogger, click 'customise' under the 'live on blog' header. Scroll down to the 'advanced' tab, then go to the 'add CSS' tab and paste this code into the box.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
 padding: 0 !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;
}

3// MAKE ALL IMAGES THE SAME WIDTH
When all of the images are the same width and fill the post space, it instantly makes a blog look put-together and more professional. Go to the template tab on blogger, click 'customise' under the 'live on blog' header. Scroll down to the 'advanced' tab, then go to the 'add CSS' tab and paste this code into the box. Just be sure to change the width from 680px to however wide your blog is!

.post-body img {

width: 680px;

height: auto;

}


4// REMOVE THE BOX SHADOW AROUND YOUR BLOG (SIMPLE BLOGGER TEMPLATE)
I use the simple template on blogger, which comes with a sort of box shadow that makes your content appear as if it is in front of the background. To get rid of this, go to the template tab on blogger, click 'customise' under the 'live on blog' header. Scroll down to the 'advanced' tab, then go to the 'add CSS' tab and paste this code into the box.

.content-outer { -webkit-box-shadow:none; box-shadow:none; }


5// REMOVE THE GREY BACKGROUND FROM YOUR HEADER

This isn't a code tutorial, but I struggled with this SO MUCH when I was first making design changes to my blog so I thought I'd add this in here too. Don't you hate it when you've made an image for your header, on what appears to be a perfectly white background, only to upload it to the blog and the background to suddenly appear grey? 
To stop this, when you're making the image for your header change the background to 'transparent' rather than white. 

14 comments:

  1. Ooh thanks for sharing, definitely will try use a couple of these! :D xx

    ReplyDelete
    Replies
    1. not a problem Lena, glad it helped you! :) xx

      Delete
  2. Thanks for sharing Zoe! I'll have to update my blog design soon :)

    www.elevatorbrain.blogspot.com

    ReplyDelete
    Replies
    1. glad you found it helpful frances! x

      Delete
  3. Great post! I wish I had something like this when I was using Blogger :( Your blog posts are so well written and so informative. Great content!

    -Vivian
    www.viviannkle.com

    ReplyDelete
  4. Thank you Zoë! Centering and other basic stuff is okay for me but I couldn't figure out how to get rid of that annoying border around images! So thanks a lot :D

    ReplyDelete
    Replies
    1. no problem elsa! ahh yeah it took me so long to figure out how to get rid of those! glad I could help x

      Delete
  5. what font do you use for your headers?

    ReplyDelete
    Replies
    1. Hey Sonia! This is super good timing because just before I saw your comment, I posted 5 free fonts for bloggers which included my header font :) I'll link it below for you! x

      http://brambleandlace.blogspot.com.au/2015/07/5-free-fonts-for-bloggers.html

      Delete
  6. Thank you so much for sharing! I love the little differences all these things make in cleaning up blogs and making them look amazing!

    xo Anisha | http://empoweredinternetwomen.blogspot.com.au/

    ReplyDelete