Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
Pin It

Customize Blockquote With Light Bulb Effect On Mouse Hover

by Durodola Ridwan | Saturday, September 15, 2012 | 60 Comments

Customizing your blockqoute with cool effect is the best way of showing your HTML/JavaScript or CSS code in a more presentable way. This blockquote am sharing with you is built up of simple CSS code in which it does not affect your post page load time, and it contain a light bulb which lights up on mover hover with a cool drop shadow effect that is included.
See the preview of the blockquote before and after hover effect below



Customizing Blockquote With Light Bulb Effect
  • Go to your blogger dashboard
  • Click on "Design" > "Edit HTML" > back up your template
  • Use ctrl to find ]]></b:skin> and paste the following code above/before ]]></b:skin>
.code1 {
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000 url(http://2.bp.blogspot.com/-_VIOvrpUNdQ/UFOpIFlp3UI/AAAAAAAABIs/stchvv8qETc/s1600/rb+light+bulb.jpg) repeat-y top left;
border : 1px solid #000000;
border-left:20px solid #ccc;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
background : #000000 url(http://4.bp.blogspot.com/-QmNJFDBKrB4/UFOk-M-QBGI/AAAAAAAABH4/NZIdhx0Aj1Y/s1600/rb+light+bulb+2.jpg) repeat-y top left;
border : 1px solid #000;
border-left:20px solid #ccc;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 10px 10px 5px #888888;

Implementing and Customization

When you are composing a post in your post editor, and you are about to use the blockquote, simply switch to "Edit HTML" mode and copy the code below in the post editor box

<div class="code1"> Enter Your Code Here </div>
  • Switch back to Compose mode and replace Enter Your Code Here with your html or css code
  • To change the width of the blockquote box simply edit width:520px;
That's all
If you need any further help, don't hesitate to ask and share this post with friends/followers

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

60 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Thanks for sharing. Its good to see fresh content always.
    mobile website design and development

  2. In fact your creative writing abilities have inspired me to start my own blog now. Really blogging is spreading its wings rapidly. Your write up is a fine example of it.
    Lightbar Towtruck

  3. thanks for sharing,,may i repost this article? i'll place live link as a source link in my post
    visit too at http://dhanynurdiansyah.blogspot.com

  4. Hi,

    A great article indeed and a very detailed, realistic and superb analysis, of this issue, very nice write up, Thanks.

    Buy Incandescent Light Bulbs

  5. Valentine day 2016 will be celebrated on Tuesday 14 Feb 2016, it's celebrated every year around the world.As the increasing trends of mobile / cell phones, peoples have selected SMS / text messages as a medium to send valentine greetings,Valentine SMSHappy valentine's day sms,Valentine's day 2016 sms, valentine messages, valentine wishes, valentine text greetings, valentine quotes sms and valentine day messages. Hindi valentine SMS and urdu valentine sms messages are very popular among asian peoples.

    you will get the variety of sms and wishes in our site

    here we provide the best valentine day wishes


    promise day wishes
    teddy bear day wishes
    chocolate day wishes
    rose day wishes
    valentines day 2016 wishes


  6. http://www.valentinesdayjoke.com/2016/03/new-zealand-vs-england.html




  7. Siteflu.com is a website design & development company in Pune India offering professional Website design and development services at low price / budget.

  8. The Christmas 2016 we have included Merry Christmas Images, Merry Christmas Greetings, Christmas SMS.
    Merry Christmas 2016

  9. courses after 12th science The core courses in an MBA program cover various areas of business such as accounting, finance, marketing, human resources, and operations in a manner Courses After 12th most relevant to management analysis and strategy. Most programs also include elective courses Courses After 12th Commerce The MBA is a terminal degree and a professional degree


About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger