Customize Blockquote With Light Bulb Effect On Mouse Hover

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

Follow @realcombiz