Home
Blogger

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

www.bloggerspice.com

If you face any problem please feel free to ask a question. Happy Blogging!!!!

18 comments

  1. Oh! Nice Post Bro This Is Very Helpful For Beginners In The Blogging World
    • Thank samad for your comments and Eid Mubarak
    • Eid Mubarak You My Friend
  2. Cool Blockquote thanks for sharing Muhammad Fazle Rabbi
    • You are welcome Furqan and Eid Mubarak in advance.
  3. Mohammad Fazle Rabbi Please Follow My Blogger And Like My Facebook Page Pleaseeeee My Name Is Faiq-Ul-Hussain
  4. Wow! Great post Mohammad bhai. Thanks for sharing brother.
    • Hi Gagan glad to see u here again..long time no interact between us.
  5. Nice sharing brother this is very nice effect i like it
  6. 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.
    • 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.
    • 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.
    • But at least i can say that you have taken the credit footer from my "skillmag".
    • 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.
    • 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
    • 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.
  7. ভাই একটা প্রশ্ন :- আমি যদি edit trample এ না গিয়ে temple customiz এ গিয়ে add css এর মাধ্যমে css এড করি তবে কোন সমস্যা হবে?
    • 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
Go Up