Customizing Blockquote With Light Bulb Effect

• Go to Blogger dashboard
• Click on Design > Edit HTML > backup your template
• Use CTRL+F to find ]]></b:skin> and paste the following code above/befor ]]></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/AVvXsEg_PjChPOaXm0HsgoxynImGzvPsYpLzgBscaDEJs-lNzA2t1sMN3E6D4qYZ2AEA294i3AlOXYddTZH8STMe5cfUGzBMba4AA-NGv1D1m_IKxdNiZcDfiOc8Yepe0rAQzSO7Vd5Of5wPlpRr/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/AVvXsEgtVbATwSRnnNPsg47kHjK5WpdYPVIIeQY6O1aU1fB1VosyMjEow1eVVO3PSgVowDAj6d9hvlUb8vNBXfhcGqTd68HOrs_uWpiYe2rddpeI63HfzNYBF5Oi7QxCPyRRd2oceJSjJ0UhVe62/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 & Customization

when you are composing a post in your post editor and you are about to use thi Blockquote simply switch to EDIT HTML mode and copy the below code in the post editor box

<div class="code1"> Enter Your Code Here </div>

• Switch back to compose mode & replace Enter Your Code Here with your HTML or CSS code
• To change the width of the blockquote box simple edit Width:520px;

Socialize This Post

SOCIALIZE IT →

Tweet

SHARE IT →