How to add Photo style border to image posted in Blogger


 Just learned a really simple CSS trick to add a photo like border to every image posted on blogger. It is so simple that all we need to do is to "copy and paste" a "CSS" style into the existing template that your blogger account is using.

Here are the steps:

1) Select the blog from your blogger administration account.

2) Click "Template" on the left column and click "Customize" button (see picture below)




4) Click "Advanced"





5)  Scroll down the CSS style name list (the one starting with "Page Text") all the way to the bottom. You will see "Add CSS" at the end of the list. Select "Add CSS"

6) Copy and paste the following code in the box on the left box.

.post a img {

/* This centers the image */
display: block;
margin-left: auto;
margin-right: auto;

/* This adds the border */
padding:8px;
border:solid;
border-color: #dddddd #aaaaaa #aaaaaa #dddddd;
border-width: 1px 2px 2px 1px;
background-color:white;
}




7) Click "Apply to blog"  bottom on the top right corner.

Done. Now you can go to your blog to see the affect.

Share this:

0 comments:

Post a Comment