Auto Expandable Blockquote Style widget for Blogger

Our Blogger Tricks and Blogging Tips helping to various bloggers in all the ways to enhance their blog/website look better. We already shared about Blockquotes styles in our earlier posts, most of our subscribers are emerging as bloggers and expressing their views on their blogs in other dimension.
By the request of our Loyal Subscribers in this article we educate about style of standard form of Auto Expandable Blockquote in hiding position. When ever any visitor wish to copy script or html code and mouse over on Blockquote which is hidden, automatically expands and enables readers to copy code. Let’s begin tutorial for adding this widget to blog/website.

Advantages for adding ‘Auto Expanadable Blockquote Style Widget for Blogger’

• Save the content space on blogger post
• Widget improves blog post space into attractive
• Code block will be in Hiding position
• Auto Expandable on visitors mouse over
• Compatible to all the browsers available online
• Build with Pure CSS and Transition effect style

Sign into your blogger account
From Blogger Dashboard select ‘Template’ link tab
Click on ‘Edit HTML’ link tab and proceed
Now search for tag

]]></b:skin>

After finding tag copy below code and pate above to it

/Expandable Blockquote Style by www.blogtariff.com.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;
}