Add Auto Expand Blockquote with CSS Transition effect

I have already release 2 blockquote for highlighting your widget code which is currently using by huge users. But some readers has requested me to release a post for collapsed style  blockquote with expand option. For this reason I have design a very attractive auto expandable blockquote which will be in hiding position in normal mode. But when you just mouse over on blockquote then it will automatically expand and display the code block. The main benefits of this blockquote it will save your content space. Some blogger feel messy about displayed code block but by using this blockquote your code block will be in hiding position, as a result your shared content will be look neat and clean. I hope you would like it like my earlier released 2 blockquotes. This blockquote is extremely fast loading and build with pure CSS and added transition effect to make it smooth. So let's proceed to the tutorial to install this Auto Expand blockquote into your blog.

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 {
  margin:15px 30px;
  font:italic normal 14px/1.4 Georgia,Serif;
  height:0;
  padding:0 0;
  background-color:#0066B3;
  border:10px solid #80C8FE;
  border-left-color:#00477D;
  border-right-color:#00477D;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  overflow:auto;
  -webkit-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  -moz-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  -ms-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  -o-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  transition:all 1s cubic-bezier(1,0,0,1) .5s;
}
.post blockquote:hover {
  padding:10px 15px;
  background-color:#BFE3FE;
  border:5px solid #00477D;
  height:350px;
}

How To Use Auto Expand Blockquote with CSS Transition effect

   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!!!!