Add Animated Blockquote in your blog V2

Add Animated Blockquote in your blog V2
block quote

Blockquote is essential to highlight your code block. Every blogger who wants to share widget code they use blockquote. Earlier I have shared with you an animated blockquote with glow effect which is currently using in my template, as continuous improvement of blogquote I have designed another simple animated blockquote which will easily grab your visitors attention. This is also eye-catching with hover effect. When you mouse over on them the quote icon will slide at the middle your code block as well as it will change the color. This is really amazing and hopefully I would be able to bring more style for you in future. So please follow the below steps to add blockquote on your blog easily. You can see the Demo from below.

Readmore: Add Glow effects on blockquote for Highlighting Code Block


Live Demo


Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML-> Unfold code  

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 4 Copy the code from below and Paste it  Before/above ]]></b:skin>
  
/*****************************************
Blockquote by www.bloggerspice.com
******************************************/
.post blockquote {border:5px
solid #007FFF;font-size:120%;line-height:100%;overflow:auto;padding:10px;font-family:courier;color:#000;width:360px;position:relative;margin:0
auto 20px auto;padding:12px
80px 15px;text-align:left;border-radius:5px;box-shadow:0 0 5px 2px rgba(0,0,0,.35);cursor:default;background:#9FCFFF;border:1px
solid #6F91B2;background:#9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhLHJ0Sbf5ylFMhtK0wAF5y08Ev2CDpKqpkf4wB0SfCDqZE176fmJNLNxQ__Q7lzijf931dO-vFB4FVDcyk9Z2jy-dRWCMfzWIz7JrsDa_KISiyV-mRYVaaUEveiYbQ1s1InPy5oyZ3ISN/s320/BS+blockquote.png) no-repeat 5% 9%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.post blockquote:hover {
border:5px
solid #0066B3;border-radius:15px;
background:#0186ba;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.post blockquote p {
margin: 0.75em 0;
}

How To Use

     For applying this Trick just select the code that you want to highlight and Click on 

www.bloggerspice.com

If you face any problem please feel free to ask a question. Happy Blogging!!!!
Go Up