Add 4 killer effects to blogger posts

Default design of the blogger posts is very boring but it can be easily customized by adding little CSS in the template code. This article is about adding stylish and very attractive effects to the blogger posts. Today we will discuss about 4 different effects, which are shadow effect, leaf effect, neon effect and rounded corners effect. All these effects are created in CSS only so they do not reduce your blog’s loading speed. You can add these beautiful effects to your blogger posts in few minutes by following this easy guide.

Add shadow effect around blogger posts

This effect adds beautiful shadow around your blogger posts.

Code

.post
{
box-shadow:1px 1px 4px  #dcdcdc;
-moz-box-shadow:1px 1px 4px  #dcdcdc;
-webkit-box-shadow:1px 1px 4px  #dcdcdc;
-goog-ms-box-shadow:1px 1px 4px  #dcdcdc;
}

 

Leaf effect for blogger posts

Add attractive leaf effect to your blogger post

Code

.post
{
border:1px solid #dcdcdc;
border-top-right-radius:50px;
-moz-border-radius-topright:50px;
-webkit-border-top-right-radius:50px;
border-bottom-left-radius:50px;
-moz-border-radius-bottomleft:50px;
-webkit-border-bottom-left-radius:50px;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
padding-left:15px;
}

 

Add rounded corner effect to blogger posts

It convert normal corners of the blogger posts into stylish rounded corners

Code

.post
{
border:1px solid #dcdcdc;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
}

Add multicolor Neon effect to blogger posts

This effect adds multicolor neon around blogger posts according to your choice. You can change color of this neon according to your own choice.

Code

.post
{
box-shadow:1px 1px 4px  #7fbf4d;
-moz-box-shadow:1px 1px 4px  #7fbf4d;
-webkit-box-shadow:1px 1px 4px  #7fbf4d;
-goog-ms-box-shadow:1px 1px 4px  #7fbf4d;
}

Change neon color – In the above code replace red colored code with your own choice of color.

 

How to add these effects to blogger posts ?

Step 1: Open to your blogger dashboard and Select Template option.

Step 2: Click Edit HTML option.

Step 3: In the template code find ]]></b:skin> .

Step 4: Just above it paste the code of required effect. You can select code of your choice from any of the above given 5 effects.

Step 5: Save the template and after open your blog to see the new effect in action.