Top CSS Additions to Your Blog

Since opening my blog design website; many of you have ordered a new design or a single design element to add to your blog. However, many choose to design their own blogs to save costs or just personal preference, so I thought I would share with you some of the top CSS codes I found useful for my blog. CSS code is really quick and easy to use - this post is for Blogger as that is what I am most experienced on; and you can add these by going Template // Customise // Advanced // Add CSS. Any CSS you add here will go automatically before the ]]></b:skin> tag, if you wanted to add your CSS 'by hand', so to speak. 

Automatically resize images to fit post area. 

People who have been reading this blog for a while may have noticed that I recently changed the post images to be a lot bigger, so that they align with the post text. I always think this looks so much neater and I wanted to add this to my blog for a while, but couldn't find a code that worked until a couple of days ago! First of all, you need to resize all of your images to Original Size (I recommend doing one to begin with, to check it works!)

 .post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto; 
box-shadow: none;
border: none;
padding: 0px; 
}

Make image fade on hover. 

I always think this looks really creative, especially if you have a PinIt button on your blog they flip back and forward when you hover! It also adds a professional feel to your blog, and this code eases the opacity in and out instead of 'flashing' upon hover!

img {

opacity: 1.0;transition: opacity 1s ease-in-out;-moz-transition: opacity 1s ease-in-out;-webkit-transition: opacity 1s ease-in-out;}

a:hover img {opacity: .6;transition: opacity 1s ease-in-out;-moz-transition: opacity 1s ease-in-out;-webkit-transition: opacity 1s ease-in-out;}

Make post title uppercase and centered.

Although this code applies to only the post title, you can easily customise it to be date header by replacing .post-title with .date-header! You can try different code patterns until one works, the CSS style usually goes in the same format as the post and date header, but you can get the odd one out. Usually, if you Google it then there will be a solution!

.post-title {

text-align: center;

text-transform: uppercase;

}

Did you like this post? What CSS additions do you recommend?