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

Customize Blockquote With Light Bulb Effect On Mouse Hover

by Unknown | Saturday, September 15, 2012 | 59 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

BEFORE MOUSE HOVER

AFTER MOUSE HOVER




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 {
overflow:auto;width:520px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#848176;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_vcUnZ6ZaUmsfSBgVgMaQ4Ags0pio3dZ7oFYyEAP0Y7l_YZ5jNb_lP2_exUbvoJP3zBJe4ewaWOssz7uIHrvF0d6KCKdGrGhNPvm91ARoCjSYkoqPBBuzBZzWpGtplqdqk0FZEteHx1YE/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
}
.code1:hover{
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsZslCaoHXjYP_p9is-9zqownGlW0dO0VwQE6lV2eQAIPlnuMku9Nz_s8lTXo_v39W9mqAzAfPrrq1WZjFdiI40KExCFqFJp9jvgxlZ-ZK7U0eBSrsnrXbOwTS3taM8BDKphkxkewyn-dH/s1600/rb+light+bulb+2.jpg) repeat-y top left;
color:#FEF9BF;
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;
}
  • Click "SAVE TEMPLATE"


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

59 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    http://valentinedaywishes.in/
    http://valentinedaywishes.in/happy-promise-day-sms-and-messages-in-hindi-and-english/.html
    http://valentinedaywishes.in/happy-teddy-bear-day-sms-in-hindi-and-english/.html
    http://valentinedaywishes.in/happy-chocolate-day-sms-in-hindi-and-english/.html
    http://valentinedaywishes.in/romantic-rose-day-wishes-2016-and-messages/.html
    http://valentinedaywishes.in/happy-valentines-day-2016-wishes-and-messages/.html
    https://www.facebook.com/Indian-Premier-League-2016-869515366500395/



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

    ReplyDelete

  6. http://www.valentinesdayjoke.com/2016/03/new-zealand-vs-england.html
    http://www.valentinesdayjoke.com/2016/03/teams-participating-in-copa-america.html
    http://www.valentinesdayjoke.com/2016/03/copa-america-centenario.html

    http://www.valentinesdayjoke.com/2016/01/valentines-day-text-for-her.html

    http://www.valentinesdayjoke.com/

    http://greetingsncards.blogspot.com/

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

    ReplyDelete
  8. Love Sad Shayari in Hindi Sad Shayari Best Shayari Sad

    ReplyDelete
  9. Download Ludo King Mod Apk India No.1 Board Game Ludo King Mod Apk for Always Winning in Game Ludo King Mod also Help to get Unlimited Coins Ludo King Mod App Free Premium Themes

    ReplyDelete
  10. Your article is very informative, thanks for this amazing post. I have also written some:
    Sad Shayari
    Love Shayari

    ReplyDelete

Recent Posts

Let's Connect

Site Links

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