Tuesday, September 22, 2009

Make your Blogger Post Images fancy with Border Styles

Using border style we can give extra look for images on your blogger posts. It can make images more attractive with extra beauty to the text.

I have discussed about wrapping text around images in my earlier post. We can do lot more with Style sheets.

Keeping or removing the border is depending on the template you’re using and you need to find the best suit for your site.

  • DELETE, REMOVE POST IMAGE BORDERS IN BLOGGER
1. As we usually do Login into Blogger and Navigate to Layout and then Edit HTML
2. Before do any changes backup of your existing template.

3. Now search for the “.post img “this is the tag which applies styles for post images. Peoples, who are using blogger templates with external stylesheets, must do their search with external style sheets.

If you couldn’t find “.post img” then narrow the search for “img” and you should be able to find CSS portion similar to bellow.

.post img {
padding:4px;
border:1px solid #333;
}

Or

Img {
padding:4px;
border:1px solid #333;
}

4. “Border:1px solid #333;” This is the part which define border for post images, you can do either simply remove this portion or change the value to “border: none; “

  • ALTERING THE BORDER STYLE OF IMAGES
Even though I have discussed about removing the border I do lot more concern about altering the border with many different styles. With ongoing text I have show you varies values which can apply with border property.

Bellow code and image demonstrate how styles are applied to images according to the code, change the code settings as you prefer and find best match to your site.

border image kontera
.post img {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
background-color:#F7F5F7;
border:1px solid #E5E5E5;
margin:10px;
padding:5px;
}

We can do lot more changes simply altering the values of background-color and border of above code.

Replace these values with “solid” part of the “border:1px solid #E5E5E5;“. With first two values you don’t need to specify a color as they are removing and hiding the border of the images. 1px define the thickness of the border.

none --- Specifies no border
hidden --- The same as "none", except in border conflict resolution for table elements
dotted --- Specifies a dotted border dashed Specifies a dashed border
solid --- Specifies a solid border double Specifies a double border
groove --- Specifies a 3D grooved border. The effect depends on the border-color value
ridge --- Specifies a 3D ridged border. The effect depends on the border-color value
inset --- Specifies 3D inset border. The effect depends on the border-color value
outset --- Specifies a 3D outset border. The effect depends on the border-color value
inherit --- Specifies that the border style should be inherited from the parent element

“background-color” provides a frame for the images here, do experiment and find the most suited settings for your site. It is up to you.

1 comments:

Anonymous said...

thanks nice tutorial

Post a Comment