Top 5 ways to customize block Quote

While writing a post sometimes we need insert HTML coding in the post. We want this coding will be visible and easy for readers. That’s why we use block quote during writing. It effect very neat and clean.

How to insert blockquote:

In html Editor on the top of the tool bar you may see this type of button as in the figure below.

Click on this button for inserting blockquote

 This works as a block quote. When we need to insert it then follow these instructions.
Select the portion you want to display.
Then press this button once time and you are done.
For simplicity and visibility I place here top six codings of blockquote.
Go to Template > Edit HTML >
Open  <b:skin>
now search for ]]></b:skin>
And paste the following any one code upon your choice just above/before ]]></b:skin>
Save it by clicking orange button and refresh the page.

1. Simple Green Background Effect

/*****TCM gREEN background*****/
.post blockquote {
background-color:#00CC66;
margin: 0 20px;
padding: 10px 20px 10px 45px;
border: 2px 2px 3px 1px solid #0000FF;
font-size: 1em;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.blockquote {
font: 25px   candare, sans-serif;
padding-top: 10px;
margin: 5px;
text-indent: 65px;
}
.blockquote p {
margin: 0;
padding-top:10px;
}

                                                                 Demo Fig:

Blockquote customization green image

2. Hover effect:

////****Tcm Hover effect****/////
.post blockquote {
background-color:#E6F0E6
;
background:url(http://2.bp.blogspot.com/-dmB3ZTU4O2Q/UskWBam4UeI/AAAAAAAABHA/6NVgEb4TbzI/s320/bigbutton_bg.gif);
background-repeat:repeat-x;
background-position:bottom;
margin: 0 20px;
padding: 10px 20px 45px 10px;
border:5px dashed #006600;
font-size: 0.9em;
}
.post blockquote:hover{background-color:#000000; color:#00FF00;}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.blockquote {
font: 18px normal  sans-serif,Tahoma;
padding-top: 10px;
margin: 5px;
text-indent: 65px;
}
.blockquote div {
display: block;
padding-bottom:10px;
}
.blockquote p {
margin: 0;
padding-top:10px;}

                                                   

Blockquote with hover

3. Left sided Watermark:

////***Tcm left side***////
.post blockquote {
background:#339966
 url(http://3.bp.blogspot.com/-eiHLSNMHAkA/Usky4q7NVvI/AAAAAAAABIs/4eUa4R1VvN8/s320/images.jpg);
background-repeat:repeat-y;
background-position:left;
margin: 0 20px;
color:#000000;
padding: 20px 20px 15px 45px;
border:10px dotted #fff;
font-size: 1em;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
font: 18px Chango;
padding-top: 10px;
margin: 5px;
text-indent: 65px;
}
.blockquote div {
display: block;
padding-bottom:10px;
}
.blockquote p {
margin: 0;
padding-top:10px;
}

Blockquote with water mark on left side

4. Black background with border radius Hover:

////*****Tcm second****///////
.post blockquote {
background:#EBF5F0;
margin: 0 20px;
padding: 20px 20px 40px 20px;
border:3px solid #00FF00;
border-radius:25px;
font-size: 1em;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.post blockquote:hover{ color:#00FF00;}
.blockquote {
font: 18px   Verdana, sans-serif;
padding-top: 10px;
margin: 5px;
text-indent: 65px;
}
.blockquote div {
display: block;
padding-bottom:10px;
}
.blockquote p {
margin: 0;
padding-top:10px;
}

Hover effect with border radius blockquote

5. Bottom watermark:

////****Box shadow with bottom water mark****/////
.post blockquote {
background: #eeeeee url(http://1.bp.blogspot.com/-PMVqrAQD1Nw/UslAqCQT6RI/AAAAAAAABJI/RnUS8us_Ku8/s1600/1.png)repeat-x bottom;
margin: 0 20px;
padding: 10px 20px 45px 20px;
border-top: 2px solid #464A48;
border-right: 2px solid #666;
border-left: 2px solid #DDD;
border-bottom: 2px solid #464A48;
box-shadow:10px 10px 5px #888888;
font-size: 0.9em;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.blockquote {
font: 18px   Verdana, sans-serif;
padding-top: 10px;
margin: 5px;
text-indent: 65px;
}
.blockquote div {
display: block;
padding-bottom:10px;
}
.blockquote p {
margin: 0;
padding-top:10px;
}

beautiful block quote

Customization:
You may customized its Border, padding. background as you wish.

Leave a Reply