How To Add Eye Catching Blockquote With Hover Effects In Your Blog And website

<div style="text-align: left;"> Today i am going to share Blockquote for blogger and website.  Created Simple Css Codes For a Blockquote. This Blockquote Highlighter Is quite Nice And Eye-Catching.</div> <div style="text-align: left;"> <br /></div> <div style="text-align: left;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcDnzaCBUo9v3VfIthye_N6LCyNkBVDgDbA9PRAupPIrYTlOovruqEb0ajsJuL89A-94ikad9sxepZIn-01Lbkhco11PnFgAQiI8ZZPMz4gDnv3KgORJ8FUWX-CdFK9K6zAtew0MpU4Z0/s1600/How+To+Add+Eye+Catching+Blockquote+With+Hover+Effects+In+Your+Blog+And+website.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How To Add Eye Catching Blockquote With Hover Effects In Your Blog And website " border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcDnzaCBUo9v3VfIthye_N6LCyNkBVDgDbA9PRAupPIrYTlOovruqEb0ajsJuL89A-94ikad9sxepZIn-01Lbkhco11PnFgAQiI8ZZPMz4gDnv3KgORJ8FUWX-CdFK9K6zAtew0MpU4Z0/s1600/How+To+Add+Eye+Catching+Blockquote+With+Hover+Effects+In+Your+Blog+And+website.png" title="How To Add Eye Catching Blockquote With Hover Effects In Your Blog And website " width="400" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEYpZRYV-KG63VI3FrVUYmbtvOqdSFqNpf-Dy2aEY_Qo1qn6tCfMvz-EYm1fV3m1i9bAx2YatZOB8EujT12F1OJC7Xj1kEbzZoCOmJgXMxvXiXfIPgfMoZV1_qxFhYTtumWIAlC8TvOQ0/s1600/How+To+Add+Eye+Catching+Blockquote+With+Hover+Effects+In+Your+Blog+And+website.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="322" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEYpZRYV-KG63VI3FrVUYmbtvOqdSFqNpf-Dy2aEY_Qo1qn6tCfMvz-EYm1fV3m1i9bAx2YatZOB8EujT12F1OJC7Xj1kEbzZoCOmJgXMxvXiXfIPgfMoZV1_qxFhYTtumWIAlC8TvOQ0/s1600/How+To+Add+Eye+Catching+Blockquote+With+Hover+Effects+In+Your+Blog+And+website.png" width="400" /> </a></div> <div class="separator" style="clear: both; text-align: left;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> How to add CSS Style Sheet in Blogger Template:</div>   Go to <b>Blogger</b><br />   select  <b>Template</b><br />   EDIT HTML<br /> <br /> And now Search For <span style="color: red;">]]></b:skin></span><br /> With CTRL+F<br /> <br />   After you find<span style="color: red;"> ]]></b:skin></span> just above it paste the following coding <br /> <div class="separator" style="clear: both; text-align: left;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> <span style="color: red;"><a href="http://thetricklab-demo.blogspot.com/2014/02/how-ro-add-eye-catching-blockquote-with.html"><i><b><span style="font-size: x-large;">Live Demo</span></b></i></a></span></div> <div class="separator" style="clear: both; text-align: left;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> <br /></div> <div style="text-align: left;"> <blockquote class="tr_bq"> <div class="separator" style="clear: both;"> /*****************************************</div> Thetricklab.blogspot.com blockquote<br /> ******************************************/<br /> .post blockquote<br /> {<br /> font-size: 15px;font-family: Verdana;font-weight: normal;font-style:italic;<br /> background-color: #F2F1F1;<br /> color: #000;<br /> margin: 5px 10px;<br /> padding: 20px 20px 20px 20px;<br /> border: 2px dotted lightgrey;<br /> border-radius: 10px;<br /> box-shadow: -1px -1px 12px 2px gainsboro;<br /> transition: background-color .777s;<br /> -webkit-transition: background-color .777s;<br /> -moz-transition: background-color .777s;<br /> -o-transition: background-color .777s;<br /> -ms-transition: background-color .777s;<br /> }<br /> .post blockquote:hover<br /> {<br /> background-color: darkgreen ;<br /> color: #fff;<br /> }<br /> .post blockquote:active<br /> {<br /> background-color: CornflowerBlue ;<br /> color: #000;<br /> }  <br /> <div class="separator" style="clear: both;"> <br /></div> </blockquote> <br /> <br /> Save your Template and enjoy  </div>

How To Add Eye Catching Blockquote With Hover Effects In Your Blog And website

Today i am going to share Blockquote for blogger and website.  Created Simple Css Codes For a Blockquote. This Blockquote Highlighter Is qu...

Read more »