Show Your Javascrifts/HTML and CSS Codes in Bulbs Lights

Hi Friends Today Known How to Showing HTML/Javascript are your important matter is a most important part. Every Blogger try something new their HTML/Javascript codes differently. Today i am to show you this amazing tool which shows your HTML/Javascript Code in light of glowing bulb. Actually it is a magic of css, there is no need install any thing, you can get it just by adding a simple code.

How to Add It Explain Below

1. Go to your Blogger > Design > Edit HTML
2. Now Search (ctrl+f) for the tag ]]></b:skin> tag.
3. Copy and Paste Below Code and Past Before/Above this Code ]]></b:skin>

.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/AVvXsEjmheehhd8uwMBArIXpf0JAysObLV84xOAnatZpreUl-2a6NwHSYcNobNJa-vDh0ZlBMhTCGGzDNpeQIgFy648HLKD0dSDlG5OhIpUwJNBzThc-2ZugB41kugSZO-QPd9BR_hg__0BzxPuf/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/AVvXsEjk_FMf2XwDuEBOZU5wo0IFXqhW7EIUcnNdjumGD8M1lbJIARPGhyphenhyphen91s6Z2iSVaIx1zVud12-tgW1HiMT1wgYs1tMAeEhACN16eC903dWifwUivRc-JCkfzaBrMRoBwMHd1u9JfAFKZN7lc/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;

And Save your Template

And Now add Some More Important Code to Show This Magic

1. Go to post editor and choose Edit HTML

2. Add <div class="code1">Your Code Here</div>

Source Form
Helper Blogger Thanks to Help Blogger

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

Kindly Bookmark and Share it: