Show Your HTML/Javascript and Css Codes In Bulb Lights

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.

View Demo

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 {
overflow:auto;width:503px;height:200px;
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/AVvXsEgweX-n90hAeRLb1PAXIGwAAyJDJ3ObBvl5UYK4_7p5paW6EnCmuHn1fVlE8zO6grGYXzXAz5Z96C5CJcxbyRJLK7IE5DiCE_twz2Hc_8C2al2hSIrc7dITY_sNTzJrhXh2xiubNAIf5PRs/s320/btsnts-show-codes1.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/AVvXsEh0kPSiGRfF2tKRCEz15wtXDVZLsHUs19-9ZOPwoLHk4nwCZdqe016EX0t_k3pnsiZL4SnZRK27pO4M-D-Nk7pu4_vgYsRz0h6a1hN5HT1gzEcDK57xxzDY1sdIsZvu-0fzFLUDCEaJmW1g/s1600/btsnts-show-codes2.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;
}

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 firstencode them

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