How To Add Stylish Blockquote With Hover Effects

Hello Friends, Today I am going to tell you that how you can add a Blockquote for your blog code Blockquote is a html tag in which you can write the code like as JavaScript, VB Script or any others.
with hover effects. You have visited many web or blogs. In which you often see that when your mouse pointer is on the code or certain text that area will be highlighted.

Since Here I am going to tell you that how you can implement the
stylish Blockquote for you blog.

Process to Implement:

1. Copy the Below CSS Code
   

   .post blockquote {
   background: #F2F1F1 url(https://lh6.googleusercontent.com/-PsU7eE1sA5U/UWYdgK4Vs0I/AAAAAAAABa4/-4cCEDLDn9I/s400/paramworld+quote1.gif)top left repeat-y;
   margin: 0 20px;
   padding: 10px 20px 10px 45px;
   border-top: 1px solid #DDD;
   border-right: 1px solid #666;
   border-left: 1px solid #DDD;
   border-bottom: 1px solid #666;
   font-size: 0.9em;
   }
   .post blockquote p {
   margin: 0;
   padding: 0 0 15px;
   }
   .post blockquote:hover {
   background: #F2F1F1 url(https://lh3.googleusercontent.com/-q2TIF2HgrzY/UWYcFAsmZvI/AAAAAAAABaY/T_qwtTfoQYQ/s400/paramworld+quote.gif)top left repeat-y;
   }
   .blockquote {
   font: 18px normal  sans-serif,Tahoma;
   padding-top: 10px;
   margin: 5px;
   background: url() no-repeat top left;
   text-indent: 65px;
   }
   .blockquote div {
   display: block;
   background: url() no-repeat bottom right;
   padding-bottom:10px;
   }
   .blockquote p {
   margin: 0;
   padding-top:10px;
   }.home-link {
   display: none;
   }

2. Goto Blogger.
3. Click on Template.
4. Again Click on Edit HTML.
5. Press 'Ctrl+F'
6. And Search For "]]>".
7. Paste the Copied code above ]]> it.
8. Now Add the block statements under blockquote in your blog or web like as
   
   <blockquote>
   HI , This is Param Word!
   Demostrating BlcokQuite
   </blockquote>
9. Now You are Done! Above is the Demo of Stylish Block Quote.
10. Replace gif images with your own images.

Enjoy!