Thursday 27 June 2013

Styling Your Blog Posts With Borders In Blogger


Day by day as the blog business is growing, you might have seen something new and unique in different blogs. The unique blog is the dream of every blogger. Every blogger wants to look his/her blog different. To do so, many bloggers try different styles in order to make their blog look exceptional like styling their blog posts, headers, footers etc. So we are here with the tutorial to show you how you can change the look of your blog posts by applying different Borders styles. Borders make the look of blog posts very nice and also the posts written within borders look attractive too. This simple CSS styles borders are easy to implement in Blogger Blog Posts, so let’s get to work:

1. Log-in to your Blogger Dashboard.

2. Go to Template > Backup. (Click Here To See, How?)

3. Now click “Edit HTML.”

4. Inside the “HTML EDITOR”, Press CTRL+F and search for </b:skin> tag.

5. Copy & paste the following code just above </b:skin> tag.


/*----- Post Styling Starts -----*/
.post
{
margin: 0 7px 20px 0;
padding: 10px 20px 10px 5px;
box-shadow: 1px 2px 2px 1px #C1C1C1;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
font-size: 13px;

text-align:justify;
}
/*----- Post Styling Ends -----*/

6. Click “Save Template”.


You are all done, refresh your blog to see the BORDERS AROUND THE BLOG POSTS.


Customization:


1. To adjust the margins according to your blog, set the values in margin styles i.e. margin: 0 7px 20px 0;

2. To adjust the positions according to your blog, set the values in padding styles i.e. padding: 10px 20px 10px 5px;

3. To adjust the box around blog posts according to your blog, set the values in box-shadow i.e. box-shadow: 1px 2px 2px 1px; 

4. To change the box/border color around blog posts, change #C1C1C1; to your own color.

5. To change the corners around the blog posts, set the values in border-radius. i.e. change 15px; to your own value.

6. To change the font size of the blog posts, set the value in font-size. i.e. change 13px; to your own value.


That’s All.


Happy Blogging.

Need Help?

Hope you have learnt how to Style Your Blog Posts With Borders In Blogger. Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any help, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)

No comments:

Post a Comment

THANK YOU FOR COMMENT ON HTTP://TWEEKNTRICK.blogspot.com