Wednesday, August 29, 2012

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

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>


    Click Here To add Comment