Tuesday, June 14, 2011

How to Add CSS Rounded Corners to Blogger's Blockquote

Sponsored Ads
Blogger Customization
In my previous posts "Add Customize Blockquote to Blogger's Blog" and "How to add shadow to Blogger's Blockquote", I hope you already familiar about blockquote and how to add one for your blog. In this post, you will learn how to add rounded corners to blogger's blockquote and it is quite simple.

If you ever wonder "How to Add Rounded Corners to Blogger Blockquote", then just follow the simple steps below and you will be able to do so. I make it very easy for you to follow and I am using CSS3 to create rounded corners for blogger's blockquote.


The First Step of all:
Before you proceed with this tutorial, I hope you already read my previous post about Blogger's Blockquote because it would be better if you have a basic understanding about blockquote before proceeding with this tutorial.

If you have read my previous posts and already implemented the blockquote's codes, then you need to find your codes just like the one below (Please go to the page "Design" > "Edit HTML"):

Blogger's Blockquote with Shadow:

blockquote {
background: #FFFFCC;
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
width: 450px;
height: auto;
border: 2px dotted #FFCC66;
text-align: left;
font-style:italic;
color: #6e6e6e;
-moz-box-shadow: 0px 5px 15px #ccc;
-webkit-box-shadow: 0px 5px 15px #ccc;
box-shadow: 0px 5px 15px #ccc;
}
Note:
I suggest you find the word "blockquote" as it would be easier for you to find the codes from the lengthy template codes. You can use the shortcut key "Ctrl + F", then find "blockquote".  It would be faster for you to find the codes.

The Second Step:
Now, copy and paste the codes below to your codes:

Rounded Corners Coding:

-moz-border-radius: 15px;
border-radius: 15px;

After adding in the codes above, your blockquote's coding will become the codes below:

Blogger's Blockquote with Shadow and Rounder Corners:

blockquote {
background: #FFFFCC;
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
width: 450px;
height: auto;
border: 2px dotted #FFCC66;
text-align: left;
font-style:italic;
color: #6e6e6e;
-moz-box-shadow: 0px 5px 15px #ccc;
-webkit-box-shadow: 0px 5px 15px #ccc;
box-shadow: 0px 5px 15px #ccc;
-moz-border-radius: 15px;border-radius: 15px;
}


And, Finally:

Lastly, all you need to do is to click on the "Save the Template" button. Done, you have added rounded CSS3 corners to your blogger's blockquotes. It is quite simple right?

Go ahead and add blockquotes to your blog posts or you can find your old posts that have blockquotes, you will notice that the blockquotes are now having shadow and rounded corners.

I hope this tutorial is simple enough to follow. In case you have problems implementing the codes, please let me know.

Have fun and enjoy!

Note:
If you like my blog and if you find my tutorial helpful, I would like to invite you to subscribe to Earn Money From Blog 2.0 using the subscription box on the top right. It is Free!

About the Author: This Post is written by William Lee (Nickname: Greenleaf). Make money blogging and work from home is the best job I ever experienced.

2 comments:

Post a Comment