Add Animated Blockquote in your blog V2

Add Animated Blockquote in your blog V2

0
data:blog.title
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(http://3.bp.blogspot.com/-q1s5nbtt8gY/UbwJO4Pt0sI/AAAAAAAADiU/LGiQmD1hHjQ/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!!!!
Add Animated Blockquote in your blog V2
4 Stars stars - "Add Animated Blockquote in your blog V2" Blockquote is essential to highlight your code block. Every blogger who wants to share widget ...
Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *