How to Add Rounded Corners to Your Blogger's Blockquote

In this post, I am going to share with you a simple way to create a rounded blockquote for Blogger's blog. Previously, I already shared with you the way to "Add Blockquote to Blogger's Blog" and then I shared with you "How to add shadow to Blogger's Blockquote".  I hope both of the posts are helpful for you.

In this post, I will share with you "How to Add Rounded Corners to Blogger Blockquote". I always wanted to get a rounded blockquote for blogger's blog and I think that it is quite cool. Finally, I found the answer. If you like rounded blockquote for blogger's blog, please read on to get the codes.


First of all:
If you are following my previous post to create customized Blogger's Blockquote, then find your codes just like below:

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". You can use the shortcut key "Ctrl + F", then find "blockquote".  It would be faster for you to find the codes.

Secondly:
Add the codes below to your codes:

Rounded Corners Coding:

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

After you add in the codes, you new "blockquote" codes will look like 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;
}

Finally:

All you need to do is to click "Save the Template". That's it!

Done. Now, you can go ahead and add your blockquote, you will find that the blockquote is now having rounded corners.

I hope you can implement the codes correctly. If you find any difficulties, please let me know.

Have fun and enjoy!

Earn Money From Blog Recommends:
Confession of a Lazy Super Affiliate Chris Rempel
Personally, I bought this ebook and I find that it is very useful and very informative. I am now trying out his methods and I will be making some great income soon.

I will show you my earnings using his methods as soon as I got paid. You would want to read about it. The ebook is being sold at a good price. Grab it and learn the technique.

I Really Very Recommend This Ebook! Never before I found such an informative ebook. 

How to Add Shadow To Your Blogger's Blockquote

I have written about "How to Add a Blogger's Blockquote to your Blogger's Blog" the other day. Today, I am going to share with you the way to add shadow to your Blogger's Blockquote to make your blockquote more appealingto your blog's readers.

How to Add Shadows to Your Blogger's Blockquote:
From my previous post on "How to Add a Blogger's Blockquote to your Blogger's Blog", I shared with you that you need to add certain codes to your Blogger's template to customize your Blogger's blockquote. In this post, in order for you to add shadow, you will need to add some more short codes to the previous codes to make the shadow appear in your customize Blogger's blockquote.


Firstly, your customize blockquote codes look like this:

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

Secondly, copy the codes below and paste to your Blogger's template to replace the previous codes above:

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

Finally, save your template.

That's it. Now, your customize Blogger's blockquote will look just like:

Note:
If you find that my blog's post are helpful, you might want to subscribe to my blog by using the subscription box at the top of my blog.

How to Add and Customize Your Blogger's Blockquote

As promised in my previous post about "What is Blockquote in Blogger's Blog", in this post I will share with you the way to add a blockquote to your blogger's blog and customize the blogger's blockquote to make it look like Earn Money From Blog's blockquote.

If you would like to have a Blogger's blockquote like my blog, then this post would be a great guide for you to get started to create a blockquote like Earn Money From Blog.

Earn Money From Blog Blockqoute:

This is Earn Money From Blog's blockquote. 

First: Add the Following code to your Blogger's blog Template:

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

Reminder: Add the codes above before the "]]>". Look at the picture below:

Second: Save your Blogger's Template.

DONE!

Now, you can go to create a new post.
1. Type something in your post area.
2. Highlight the sentences you want to change to be blockquote.
3. Click on the "Blockquote" button. As shown in the picture below:

4. Publish and you will see your post now contain blockquote that look like mine.
Note: 
You might have notice that my Blogger's Blockquote has shadow around it. I will teach you how to add shadow to the Blogger's Blockquote in the next post. We do it one step at a time. :)

Congratulation!!! You just created a Customize Blogger's Blockquote or your blog. 

I hope this post will be clear for you to follow.If it is too confusing, please give some comments. Thanks.

Note: 
If you find that my blog's posts are helpful for you, maybe you would want to subscribe to Earn Money From Blog. Thanks. :)

What Is Blockquote in Blogger's Blog

Have you seen blogs with blockquotes? Personally, I feel that blockquotes are amazing because they makes the blog look more alive and more approachable.

What is Blockquote?
Blockquote are snippets of memo or notes normally included in a blog post by bloggers. Bloggers normally place some short notes in their post as a highlight or important notice.

How to Insert Blockquotes?

In Blogger.com, we can insert blockquote easily using the "Blockquote" button in the post page of Blogger.com. Look at the picture above, that is the button of "Blockquote". All you need to do is to Select the part of your blog's post and click the Blockquote button. Then, the part of your blog's post will become Blockquote.

Please continue reading to read about Blogger's Blockquote.


Examples of Blockquote:

I have found 2 examples of blockquotes using Google. And the image below shows the example of Earn Money From Blog's blockquote.

I will share with you the way to implement blockquote just like my Earn Money From Blog blockquote in my next post.