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.

bloggers,block quote

[button link=”http://bh-demo.blogspot.com/2012/11/blog-post_25.html” type=”big” newwindow=”yes”] LIVE DEMO[/button]


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,
  • Now If  You Enjoy This Post! Please Take 5 Seconds To Share It.

Be sure to subscribe to the Blogger Heroe newsletter and get regular updates about awesome posts just like this one and more!

About kasper

Hey Guys I am Avinash a.k.a Kasper.I am one of the founder of this blog.I love blogging,gaming and other fitness activities.Blogging has taught me many things in my life and made me different from others.The only thing I believe is that if you ain't First your Last!

Comments

  1. Nitesh saitand says:

    Very NIC……….

Speak Your Mind

*


*