Whilst giving my blog a make over, I have picked up quite a few HTML coding tips & tricks. In this post I am going to show you how to add Space to your Blogger Template in 7 different ways.
If you would like to move your blog posts a little to the left or the right, then here is how you do it. Click 'Template' then 'Customise', click on the 'Advanced' Tab and open 'Add CSS'. Copy and paste the code below to shift your blogposts in whatever way you want. The code highlighted in red can be changed to whatever measurement you see fit.
To move them to the left:
.post-body img { margin-left: -20px;}
To move them to the right:
.post-body img { margin-left: 20px;}
How to Increase the space between your blog posts
When I looked at my home page, I found that my blogposts were very squished together. What I wanted was to add a little more space between my blog posts. It made such a big improvement to my blog! To increase the space between your blog posts click 'Template' - 'Customise' - 'Advanced' - 'Add CSS' and then copy & paste the code below into the box. Press enter once you have pasted the code to see the results on your blog. You can change the code in red to suit your blog design.
.post {
margin-bottom: 90px;
}
How to Increase the space between your blog posts and the side bar
I wanted to put some space between my blog posts and the side bar. I found that they sat a little too close together. By spacing them apart, I found that the blog design improved a whole lot more. Copy & paste the code below into the 'Add CSS' box. To access the 'Add CSS' box, click 'Template' - 'Customise' - 'Advanced' - 'Add CSS'. Once again, change the code below to match your blog.
#sidebar-right-1{
margin-left: 40px !important;
}
How to space text in a blog post
I have always found the fonts on my blog to be very squished and too compact for my liking. I wanted to put a small amount of space between the words and letters so that my content was easier to read. To space your font apart click 'Template' - 'Customise' - 'Advanced' - 'Add CSS' and copy & paste. You can change the code in red to fit the measurements you would like on your blog. I would stick to measurements from 0.1em to 0.5em because any higher can be too much.
.post {
letter-spacing: 0.1em;
}
How to space a blog title and make it all uppercase
I was never happy with how the blog titles looked on my blog. Spacing the font apart and changing my title to Uppercase letters changed the look of my blog completely. Now I am so happy with the changes! If you would like to change the font of your blog titles then click 'Template' - 'Customise' - 'Advanced' - 'Add CSS' and copy & paste the code below into the box. You can change the code in red to your liking. In 'Advanced' you can change & play around with the font of your blog title to your liking. I chose the font 'Josefin Sans'.
h3.post-title {
letter-spacing: 0.5em;
text-transform: uppercase;
}
How to Space and upper case letters in your side bar
If you would like to do the same for your side bar titles, then access 'Add CSS' and copy & paste the code below into the box. Remember to press the enter button to see a result of the code in the preview window. The code in red can be changed to suit your blog.
.sidebar h2 {
letter-spacing: 0.5em;
text-transform: uppercase;
}
How to space and Uppercase page list/ Navigation bar
I wanted to make sure that the tabs on my Navigation Bar matched the font that was already on my blog. Access 'Add CSS' and copy & paste the code below into the box. Change the code in red to suit your needs.
.PageList {
letter-spacing: 0.5em;
text-transform: uppercase;
}
* I am by no means an expert with HTML and coding. However, I thought it would be nice to put together a blog post, to help those who would like to apply some space to their blogs. I hope this is a blog post that has helped you out.
-------------------------------------------------------
Are these tips helpful to you? Would you like to see more of these posts?
Leave me with your thoughts.
Nadja
xx
I'm definitely saving this for next time I feel the need to have a play around with my design & layout! Thank you :)
ReplyDeleteJess xo | The Indigo Hours