UrduBloggingHub | Informatvie Blog About SEO & Blogging: Add Four Stylish CSS Attractive Effects To Blogger Post

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,and appears as

Css 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,this post will be appeared as

Css 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,and looks like

Css 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,and looks like

Css 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;
}

Adding these effects to blogger posts:

Step 1: Open to your blogger dashboard and Select Edit 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 4 effects.

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

Need Help?

We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below or make a tweet to @MrAbdullahMalik. Peace and blessings buddies. :)