Show HTML, CSS, JavaScript Codes in Colored Background In Blogger

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

We often write tutorial which relating to source codes such as HTML, CSS, JavaScript Codes. In my previous post i showed how to show HTML and JavaScript code in blogger post But this time i am giving tutorial on how you can show HTML,CSS codes in colored background. Many bloggers also follow this technique. This really nice to represent source code or HTML or JavaScript code in colorful background

Colored Source Code

Log in to Blogger → Dashboard

Go to Design Tab → Edit HTML

Search for the following code

]]></b:skin>

Now paste the following CSS code just above ]]></b:skin>

.rafi { 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; } .rafi:hover { background-color: #0c991a ; color: #fff; box-shadow: -1px -1px 12px 2px gainsboro; border-radius: 10px; } .rafi:active { background-color: CornflowerBlue ; color: #000; }

Now save your template

You can change the font size as highlighted red

Implement In Post

when you write a HTML or JavaScript or CSS code just follow this as mentioned below

<div class="rafi">YOUR PARSED HTML CODE</div>

Tweet

We often write tutorial which relating to source codes such as HTML, CSS, JavaScript Codes. In my previous post i showed how to show HTML and JavaScript code in blogger post But this time i am giving tutorial on how you can show HTML,CSS codes in colored background. Many bloggers also follow this technique. This really nice to represent source code or HTML or JavaScript code in colorful background Colored Source Code Log in to Blogger → Dashboard Go to Design Tab → Edit HTML Search for the following code ]]></b:skin> Now paste the following CSS code just above ]]></b:skin> .rafi { 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; } .rafi:hover { background-color: #0c991a ; color: #fff; box-shadow: -1px -1px 12px 2px gainsboro; border-radius: 10px; } .rafi:active { background-color: CornflowerBlue ; color: #000; } Now save your template You can change the font size as highlighted red Implement In Post when you write a HTML or JavaScript or CSS code just follow this as mentioned below <div class="rafi">YOUR PARSED HTML CODE</div>