Showing HTML/Javascript codes is a most important part. Every blogger try something new to show their HTML/Javascript codes diffrently. Today I am going to show you this amazing tool which shows your HTML.Javascript code in light of glowing bulb. Actually it is a magic of css no need to install any widget,just by adding a simple code.

How To Add It To Blogger ?

Let's see how to add this tool to blogger.

  1. First go to Blogger > Design Edit HTML
  2. Now Search for the tag ]]></b:skin>
  3. Copy and paste below code just above/before ]]></b:skin> tag.

.code1 {
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000 url( 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
background : #000000 url( repeat-y top left;
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;

How To Show It In Blogger Posts ?

1. Go to your post editor and choose Edit HTML.
2. Add <div class="code1"> Your Code Here </div>

Note - If you want to show your HTML/Javascript in your posts then first encode them

If still you are getting any problem then throw it into comment box.

Post a Comment

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM