Thursday, 12 May 2016

Bite-size blogger template tips

Getting my blogger template looking great is a huge deal to me and I feel like it makes such a huge impression on any potential visitor. If I view a blog that has an amateur-looking theme or one with sloppy HTML I'm not likely to revisit whereas tidying up the loose ends makes a massive difference. These are all self taught and as my hosting site is Blogger I can't say that they'll work on Wordpress or any other host but it's always worth a shot. Here are 5 quick HTML tips that I've taught myself which I feel add those little extra touches to any blog!

Wrapping text around an image:
To change the side in which the image is on change where it says 'float:left' to 'float:right'.


Removing 'Showing posts with label X' on label link:
On default blogger themes, when you click on a label link the message 'Showing posts with label X' shows. It's only a little thing but most professional bloggers opt to remove it so that you can create category links without it looking messy.

To do this, go to: Dashboard - Template - Edit HTML and click anywhere within the code. Search the code with CTRL + F for:
<b:includable id='status-message'>

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
<div style='clear: both;'/>

And replace it with this:


Adding an image as a clickable link:
This may be obvious to most but may be useful to complete beginners.


Add a Pinterest 'Pin It!' mouseover button on images:
Firstly you need to enter Dashboard - Template - Edit HTML. Click anywhere within the code and search for </body> using CTRL + F. Inside the body tags is essentially your webpage, if you were to delete everything inside you would end up with an empty white page. Once you've found </body>, insert this script on the line above:

What's cool about this script is that you also have some freedom as to where you wish the button to appear on the image. To play around with this feature, change the word 'center' to any one of these:


You can also change the actual Pin It! image by changing this URL to that of the Pin It! image you wish to appear:

var custom_pinit_button = "";


Automatically resizing images to be the same size as your blog area:
Firstly you need to choose images that are wider than your blog post area, you can resize smaller images but you're likely to loose quality. Next you need to modify the CSS of your blog, this is relatively simple on Blogger and can be done by going to 'Template' > 'Customize' > 'Advanced' > 'Add CSS'. Paste the following code into that box:

Now, whenever you upload an image set it to the 'original size' option by clicking on the image in the compose section of Blogger's post editor and it will automatically resize itself to fit your blogs theme. Remember, this will affect every single image that is set to 'original size' (even images you uploaded before you added the CSS).

To really spruce up an image, add these following lines in the CSS editor:


And there you go! 5 really simple HTML tips that can add those little extra touches to your Blogger theme.

Are there any other codes you're interested in learning about? Leave me a comment below!


  1. I found these tips helpful. Thank you! I find customizing the layout of my blog to be so difficult.I'm not very tech savvy.

  2. So helpful thanks for sharing. I think your blog is lovely by the way, I would love to follow each other, let me know! x


© ALYSPACE | All rights reserved.
Blog Layout Created by pipdig