Monday, May 30, 2011

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.

No comments:

Post a Comment