Add a Three Colored Background Area for Codes in your Blog

Well the Best Way to Display Html and Css Codes on your blog is to Use them in a Background Box or a Syntax Highlighter. Usually Blackquotes Sometimes. Well Here is an Awesome Syntax Highlighter Or a Background Box for Display your HTML,CSS Codes in a More Stylish manner.

This is a New and very different HTML, CSS and other coding background for blogger which highly customizes the Form for blogger from CSS with three different colors on mouse hover effects with big font and highly customization,i Hope, you will like it.So Let's Have A Demo of the Background Highlighter.

Live Demo

Now Adding the Widget To Blogger:.


Login to Blogger < Dashboard < Edit Html < Proceed
Now Check Expand Widget Templates.

Search for the Below Tag in your Template

]]></b:skin>

Now Paste the Below Code Above it.

.gib { font-size: 15px;font-family: Courier;font-weight: normal;font-style:italic; background-color: #000000; color: #ffffff; width: 90%; margin: 5px 10px; padding: 20px 20px 20px 20px; border: 2px dotted lightgrey; transition: background-color .777s; -webkit-transition: background-color .777s; -moz-transition: background-color .777s; -o-transition: background-color .777s; -ms-transition: background-color .777s; } .gib:hover { background-color: #0c991a ; color: #fff; box-shadow: -1px -1px 12px 2px gainsboro; border-radius: 10px; } .gib:active { background-color: CornflowerBlue ; color: #000; }

Now save Your Template..

How to Add it to Your Posts:.

Just Post Your Post Normally Then Switch to Edit Html Area in the Post Editor.

Now Paste the Required Code in the Below Tags.

<div class="gib"> Paste your Required Code here</div>

Now Replace the Highlighted text With Your Html or CSS or Any Other Codes.That's It Now You're Done..