How To Add Cool Blockquote Style In Blogger!

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,

<blockquote><div>Your Quote Will Be Here</div></blockquote>

Now If You Enjoy This Post! Please Take 5 Seconds To Share It.

Note:- Hello There!Happy for reading the article and don't forget share this article on your social network.Thanks You ^_^

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Admin ID-Netblog, Published at 10:43 PM and have 0 comments

Writed by : Admin ID-Netblog

My friend was reading the article onHow To Add Cool Blockquote Style In Blogger!. Admin, buddy permitted copying and pasting or disseminate this article, but do not forget to put the source link below.

<a href="https://bloggerheroe.blogspot.com/2012/11/how-to-add-cool-blockquote-style-in.html" target="_blank">How To Add Cool Blockquote Style In Blogger!</a>