Quick and Easy CSS Codes to Improve Your Blogger Template

3 comments



Time to let out my inner ‘IT Crowd’ geek – “Have you tried turning it off and on again?” – I claim to be no expert in the field, I do however have a hidden secret from my past being that I taught myself HTML as a 14 year old – yes, I had many, many boyfriends in school… So I have a basic understanding to get me by. To create my blog I purchased a template from Etsy and customised it to my liking.

You can see original here.

I think this is a great way to create a professional looking design for a relatively small investment. Creating a blog template is no mean feat – it takes a lot of knowledge, time and effort. So choosing a design you really like and tweaking it to your liking is a great work around.  

I have put together some quick and easy CSS codes you can use to alter the look of your blog. These CSS codes can be integrated with a purchased template or they will be great for working with Blogger’s provided ‘Basic Template’. I have used many of these in my own blog design; I hope you can find something useful that you can apply to your own. 




Okay, all of these – but one – are added through the Customise Template feature. Here is how you will add your CSS;

Step 1: Click the "Template" link located in the left column of your blogger homepage.
Step 2: Click the "Customize" button.
Step 3: Click the "Advanced" link.
Step 4: Click the scroll-down arrow in the middle column and select "Add CSS."
Step 5: Enter your custom CSS code in the "Add Custom CSS" box.
Step 6: Click the "Apply to Blog" button located in the right corner of the page.


Position Header Text/Image
Add the below code to your CSS editor. Change ‘center’ to ‘left’, ‘right’ or ‘center’ depending on your preference.

Text: 
#header-inner {text-align: center ;}
Image: 
#header-inner img {margin: 0 auto !important;} #header-inner {text-align:center !important;}


Center Date and Post Header

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

Auto size images in blog posts 
This code will resize your images without stretching/squashing, it is better to upload images larger or equivalent to your set width to avoid losing image quality.
Add the below code to your CSS editor. Change the width to your preference.

.post-body img { width:660px; height:auto; }

If you have a signature image in your posts you will need to add the following code to prevent it stretching to the same size as your post images. Change the width to the width of your signature.

.signature { width: 120px !important; }


Justify align post text
This code will align your text to fit the width of your post area.

.post{ text-align: justify; }


Auto uppercase for all blog post titles
This code will automatically change your blog post titles to uppercase.

h3 { text-transform: uppercase; }


Add padding between blog posts and sidebar
This code will allow you to change the spacing between your posts and sidebar. You may need to adjust your blog layout widths to accommodate changes.

Change to ‘padding-left’ if your blog has the sidebar on the left or ‘padding-right’ if the sidebar is on the right. Change ‘20px’ to suit preference.

#Blog1 {padding-right: 20px;}


Center widget titles in the sidebar
This code will center the titles of the widgets in your sidebar.

.sidebar h2 {text-align:center !important;}


Remove titles for individual widgets
I was so pleased when I found this. To use this code you will be going into your ‘Layout’ section of you blog homepage. Click on the widget you want to have no title (useful for images and HTML.) Blogger insists on having a title for every widget so replace the title with this code.

<! - - >


Remove shadow and border on post images
Add the below code to your CSS editor to remove shadow and border on post images.

.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;}


Post images fade on when hovered
This code will set your post images to fade when hovered over. Add the below code to your CSS editor and change the value of opacity: .7; (below post-body a:hover) to suit your liking.

.post-body img {
opacity: 1.0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}

.post-body a:hover img {
opacity: .7;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}


That’s it, I hope you found this list  useful! Like I said, I am no CSS expert and some of these codes I have adjusted myself so let me know if you come across any issues when using any of them.


SHARE:
Newer Post Previous PostOlder Post Home

3 comments

  1. Love your images! What camera do you use if you don't mind me asking? :)

    Kirsty | kirsty.ws

    ReplyDelete
    Replies
    1. Hey Kirsty thanks very much! I use a Canon 6D :)

      Delete
  2. Thanks for this post. It was extremely helpful in getting my blog set up the way I wanted. :)

    ReplyDelete

PROFESSIONAL BLOGGER TEMPLATES BY pipdig