How To Add Cool Blockquote Style In Blogger! ~ BLOGGER HEROE

Blockquote others than others are built by engaging CSS transition, transformation CSS, CSS border radius, text shadow CSS and 3 (three) pieces blockquote background image for the background and two span tags that we use. How do I create a truly blockquote other than another's? Are there benefits? Blockquote not "ugly girl" or "rich girl" who does not deserve the groom to complete the blog. I also wonder why bloggers who rarely utilize special tag that is actually a very appropriate use, huh? Oho ... or perhaps not so familiar with the blockquote? Or do you feel antipathy first? Or catch another blogger who rarely use the blockquote? Feel how easy and the importance of using "the girl's beauty." It can be used for containers of certain texts that need to be highlighted in the post.

View Live Demo

Adding Blockquote To Blogger

Go to Blogger > Layout > Edit HTML
Backup your template
Search for ]]></b:skin> and just above ]]></b:skin> , paste the code below.

blockquote {
padding: 10px;
margin: 10px 0 10px 20px;
background-image: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/bgBloquoteV236H2.png);
font: 13px/17px Serif, Times, Helvetica;
font-style: italic;
color: #FFCC99; /* original code: gubhugreyot.blogspot.com */
text-shadow: 1px 1px 1px #000;
border: 1px ridge #0099FF;
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: #eee;
-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;
background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-L.png) left top no-repeat;
-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;
background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-R.png) right top no-repeat;
}
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);
}

Now Whenever you have written a Quote inside the compose mode of Blogger Editor simply switch to the HTML mode and add two tags i.e <div> and </div> between the blockquote tags as demonstrated below,