Blogger user might seen the post image come with border and shadow. It varies template to template. You can create different type of border and shadow of your blog images on home page as well as on post page. Actually border isolate the post image from other part of the post. And you can also make your blog image beautiful by adding Border and Shadow. Suppose if you are using white background picture but your blog body is white color then your blog image won't be attractive on post page. sometimes post image seems to readers hazy. But if you use border then visitors can isolate image area.
In this tutorial we will see how we can add different style border and shadow on blog images. Please follow the following tutorial-
Step 1 Log in to your Blogger account and Go to your Blogger Dashboard
Step 2 Now click on -> Template -> Edit HTML
Step 3 Now Find the below code by pressing Ctrl+F
.post img{
..................................................
..................................................
..................................................
}
or
.post img
{
..................................................
..................................................
..................................................
}
or
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
..................................................
..................................................
..................................................
}
or
img {
..................................................
..................................................
..................................................
}
Style 1: Border with Image Opacity
This border will display only simple black border for post image with Image Opacity feature.
.post img {
border: 5px solid #000;
background: #000;
filter:alpha(opacity=30);
opacity:0.6;
padding: 1px;
}
Customization
- Alter 5px for increase thickness of border
- Change this for border background color #000
Style 2: Simple Border with white radius
This border will display only slim white border for post image.
.post img {
padding: 8px;
background: #ffffff;
border: 1px solid #cccccc;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Customization
- Alter 1px for increase thickness of border
- Change this for border background color #ffffff
- To remove border radius remove below line-
-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
Style 3: Dotted Image Border with radius
This border code with display image with dot. Similar like stamp.
.post img {
padding: 8px;
background: #ffffff;
border: 3px dotted #E2E2E2;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
Customization
- Alter 3px for increase thickness of border
- Change this for border background color #ffffff
Style 4 Border like Stamp style
This border code with display image with stamp style on edge area.
.post img {
padding: 8px;
background: #ffffff;
border: 3px dashed #E2E2E2;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Customization
- Alter 3px for increase thickness of border
- Change this for border background color #ffffff
Style 5 Simple double lined border
This border code with display image with double border style you can easily change the border color.
.post img {
padding: 8px;
background: #FFFFFF;
border: 5px double #B8B4B4;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
Customization
- Alter 5px for increase thickness of border
- Change this for border color #B8B4B4
- Change this background color #ffffff
Style 6: Groove style border for image
This is different but simple and professional looking.
.post img {
padding: 8px;
background: #FFFFFF;
border: 5px groove #B8B4B4;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Customization
- Alter 5px for increase thickness of border
- Change this for border color #B8B4B4
- Change this background color #ffffff
Style 7: Ridge style border
This border is similar like photo frame. Your blog image will be inside the frame. But used pure CSS.
.post img {
padding: 8px;
background: #FFFFFF;
border: 8px ridge #4D4D4D;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Customization
- Alter 8px for increase thickness of border
- Change this for border color #4D4D4D
- Change this background color #FFFFFF
Style 8:Inset style border for blog image
This style will display your blog image dark to light color.
.post img {
padding: 8px;
background: #FFFFFF;
border: 8px inset #4D4D4D;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Customization
- Alter 8px for increase thickness of border
- Change this for border color #4D4D4D
- Change this background color #FFFFFF
Style 9:Outset style border for blog image
Outset just opposite of Inset style. Blogger image border will be shown lighter to darker.
.post img {
padding: 8px;
background: #FFFFFF;
border: 8px outset #4D4D4D;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Customization
- Alter 8px for increase thickness of border
- Change this for border color #4D4D4D
- Change this background color #FFFFFF
Hope now you would able to add different border in your blog. And this will give you a new look of your blog. Visitors must be become interested to view your image. because adding border and shadows makes a blog image appealing.
No comments:
Post a Comment