How To Beautify Blockquote

♥ ASSALAMUALAIKUM ♥

A blockquote is a XHTML tag which is purposely used element in an article. The basic usage of blockquote in an article is when an author wants to post a thought,or a long piece of sentence from another resources or another author.

In the spirit of making a better Blockquote is more beautiful here are a few ways blockquote dress up the lowly. Mine is very simple for a reason. (not mean I do not want a beautiful and wonderful, but it would only confuse my readers blockquote). That way my readers can see the code that need to be copied at a glance ... No guessing needed. I chose a soft color code for codes to make you mad, and softpink is my way of offsetting any madness! .. hehehe ..

Ok, how easy..Lets started..

1. Dashboard / Layout / Edit HTML / Download Full Template

(important as a backup!)

2. Do tick Expand Widget Templates

3. Find code. post blockquote {

(press Ctrl + f to facilitate the search)

You have found the code?

4. Replace the code with the code below shown

This one sample code of my blockquote:

Sample No.1 Image

Sample No.1

blockquote {
padding: 10px;
margin: 10px 0 10px 20px;
background-image: url(Your Image Link Here);
font: 15px/18px Berlin Sans Fb;
color: #FF54a7;
border: 3px solid #ff54a7;
border-radius: 20px 10px 20px 10px;
-moz-border-radius: 20px 10px 20px 10px;
-webkit-border-radius: 20px 10px 20px 10px;
-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-in;
-webkit-transition: all 1.2s ease-in;
}
blockquote:hover {
color: #B041FF;
-o-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
-moz-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
-webkit-transform: rotate(0deg) scale(1.06) translate(-10px, 0);}
blockquote span.bbuka, blockquote span.btutup {
float: left;
margin-right: 5px;
height: 17px;
width: 22px;
-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-in;
-webkit-transition: all 1.2s ease-in;
}
blockquote span.bbtutup {
float: right;
margin-left: 5px;
margin-right: 0;

}
blockquote:hover span.bbuka, blockquote:hover span.btutup {
-o-transform: rotate(1090deg) scale(1.1);
-moz-transform: rotate(1090deg) scale(1.1);
-webkit-transform: rotate(1090deg) scale(1.1);
}

Note :
Change the (Your Image Link Here) into your own image link.
color: #FF54a7 -  Text Color
border: 3px solid #ff54a7 - Border Style and Color
color: #B041FF - Hover Color

Sample No.2

Sample No.2 Image

.post blockquote {
background: #Fad7e8;
-moz-border-radius-topleft: 30px;
-moz-border-radius-bottomright: 30px;
padding: 6px;
Border: 3px solid #Ff54a7;
margin:1em 20px;
}

Note : Change This If On Your Own preferred color.
background: #Fad7e8 - Background Color
Border: 3px solid #Ff54a7 - Border Style And Color

Sample No.3  ( With Left Border)

Sample No.3 Image

blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 10px solid #ff54a7;
background-color: #fad7e8; }
blockquote p {
margin: 0; }

Note : Change This If On Your Own preferred color.
border-left: 10px solid #ff54a7 - Border Style And Color
background-color: #fad7e8 - Background Color

I'm going to stop for now. But, this is really fun, so I will probably do more of this type of thing in the future. Especially if I see much interest in it. Let me know!

Please let me know if this tutorial was useful to you by leaving your comments and opinions below. If you found this post useful, please consider subscribing to the Gurlalush feed..TQ

Sharing The Love :)