Add Auto Expand Blockquote with CSS Transition effect

Blockquote for blogger

Post Blockquote

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
.post blockquote {
  margin:15px 30px;
  font:italic normal 14px/1.4 Georgia,Serif;
  padding:0 0;
  border:10px solid #80C8FE;
  -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);
  -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;
  border:5px solid #00477D;

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!!!!
Abdul Samad Essani says: 8/06/2013

Oh! Nice Post Bro This Is Very Helpful For Beginners In The Blogging World

Unknown says: 8/07/2013

Cool Blockquote thanks for sharing Muhammad Fazle Rabbi

BloggerSpice says: ADMIN 8/07/2013

You are welcome Furqan and Eid Mubarak in advance.

BloggerSpice says: ADMIN 8/07/2013

Thank samad for your comments and Eid Mubarak

Abdul Samad Essani says: 8/07/2013

Eid Mubarak You My Friend

Syed faiq ul hussain says: 8/07/2013

Mohammad Fazle Rabbi Please Follow My Blogger And Like My Facebook Page Pleaseeeee My Name Is Faiq-Ul-Hussain

Gagan Masoun says: 8/11/2013

Wow! Great post Mohammad bhai. Thanks for sharing brother.

Rizwan says: 8/12/2013

Nice sharing brother this is very nice effect i like it

Deep Sinha says: 8/13/2013

Its a nice idea to add hover effect in your blockquote but i recommend to keep your blockquote as simple as possible so your reader will be irrtated. BTW !! You have customized my Skill mag template very well buddy But You should keep my credits intact.

BloggerSpice says: ADMIN 8/17/2013

Hi Deep..there is a misunderstanding..I have created this blog since July 2012..And from the beginning I an using this template and brought changes time to time. How you can say I have customized your template because you have started released skill mag Jun 2013??? Give me logical answer?And check the base code if you get any similarity with yours I would delete BloggerSpice template.

BloggerSpice says: ADMIN 8/17/2013

Hi Gagan glad to see u here again..long time no interact between us.

Deep Sinha says: 8/17/2013

Woah Chill buddy !! as you said its a misunderstanding so i don't think we don't have discuss about the past or something else anyways. Peace and happy blogging. Hope You understand.

Deep Sinha says: 8/17/2013

But at least i can say that you have taken the credit footer from my "skillmag".

BloggerSpice says: ADMIN 8/17/2013

Hi Deep..thanks for your quick response...Can you check your Skillmag template footer Credit again...I didn't find Blogger Icon like mine and Ask for host as well as BloggerSpice written on Credit footer.

Deep Sinha says: 8/17/2013

Buddy its very easy to change the images in css and you are almost a pro.......So you can understand what i am saying :p

BloggerSpice says: ADMIN 8/18/2013

I know that But beside of blogger I am a Graphic designer also..and I have created the bread through Adobe Photoshop CS6. I have seen your Bread that you are using in your blog. Main integrated image is Blog, Jquery and CSS and you have used Deep and DMCA by using CSS. It doesn't match properly. You would see when you mouse over on Deep and DMCA then it is not working like Blog, Jquery and CSS icons. But in my case I have integrated all icons in single bread which is working smoothly.I didn't use extra icon Blogger and BloggerSpice icon. all icons are integrated in single image. Hope it makes you clear.

S Alam says: 9/06/2016

ভাই একটা প্রশ্ন :- আমি যদি edit trample এ না গিয়ে temple customiz এ গিয়ে add css এর মাধ্যমে css এড করি তবে কোন সমস্যা হবে?

BloggerSpice says: ADMIN 9/06/2016

Hi RealTipsBD, Nah kono problem hobe na. But future a code edit korte gele ta kothay add kora ace ooita pete problem hobe. But script mone thakle problem nai. :wr

Contact Form


Email *

Message *