Styling the source code with css

If you want to display code into a beautiful way like this one you need to add a css into your template. The code you display is inside the <pre></pre> tags...  therefor by adding style in the class pre we get awesome results... this is a cool way and visitors feel easy to copy the code and easily recognize the code..
this first style is the current one which i am using on this blog.. in second and third style a yellow pad and a black pad is used.. simple add this code to your design->Template Designer->advanced->add css...add css...

or Edit HTML of your template and paste the code above ]]</b:skin>

Current style:

pre {
     font-size: 12px;
     padding: 20px 0 15px 35px;
     margin: 0;
     background: #ccc;
     border-left: 1px solid #ccc;
     border-bottom: 1px solid #ccc;
     line-height: 20px; /*--Height of each line of code--*/
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoZQpLobZJ1ElwvwBTJe1VGE_aYKD9nzMXyhHU-7q1BI72TrDbJn81W262RbXZL0KpxZw72CNe-nkfcgmIyuizFjjCvgZW5LYYvnAkxlsY2A85pfvH_j8XuMpukmYsZJvfHj0z_9yj5fwa/s1600/pre-pad.gif) repeat-y left top; /*--Background of lined paper--*/
     width: 410px;
     overflow: auto; /*--If the Code exceeds the width, a scrolling is available--*/
     overflow-Y: hidden;  /*--Hides vertical scroll created by IE--*/
}

Yellow Pad Background:

pre {
     font-size: 12px;
     padding: 20px 0 15px 35px;
     margin: 0;
     background: #ccc;
     line-height: 20px; /*--Height of each line of code--*/
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKEReMTW-9rY7-jFuBxXiIhmrkNr1Etivg8kaltQiRtz38uP3PdeogUbr5ryC2IGb9xd9kNEab3zKM_Ay0F2_xP_n6HVPfEZhGrUh87ayWDgSwYPfZaF7p0E3cXOVBVJ-tFh1IgIJ40Tm4/s1600/pre-yellow.gif) repeat-y left top; /*--Background of lined paper--*/
     width: 410px;
     overflow: auto; /*--If the Code exceeds the width, a scrolling is available--*/
     overflow-Y: hidden;  /*--Hides vertical scroll created by IE--*/
}

Black Pad Background:

pre {
     font-size: 12px;
     padding: 20px 0 15px 35px;
     color: #ffff;
     line-height: 20px; /*--Height of each line of code--*/
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtCVsCCGNCkdkal7hCLsm7helgm0HhyphenhyphenxHYHeshFrE7bjNh0twZuxNjs6c4VPfoLk_AbsJuGNW0fmcEHakZjl-Px-sxXv4e7XL54QCjYfAihukPeEH-6-PeDulokMlYuG29_RrFri3EZPNC/s1600/pre-black.gif) repeat-y left top; /*--Background of lined paper--*/
     width: 410px;
     overflow: auto; /*--If the Code exceeds the width, a scrolling is available--*/
     overflow-Y: hidden;  /*--Hides vertical scroll created by IE--*/
}