Add Animated Blockquote in your blog V2
Add Animated Blockquote in your blog V2
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
Readmore: Add Glow effects on blockquote for Highlighting Code Block
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
If you face any problem please feel free to ask a question. Happy Blogging!!!!
Post a Comment