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>
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(http://3.bp.blogspot.com/-RscyBhrDXU8/TrZBM-T364I/AAAAAAAAEjo/Msg5tjXyFgs/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(http://3.bp.blogspot.com/-i3A2NMS9ejQ/TrZBNV_RivI/AAAAAAAAEkA/tl5Kp6KLHnk/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(http://1.bp.blogspot.com/-q2dOtl7q2gI/TrZBNJ2wn-I/AAAAAAAAEjw/21nRnx4lLmQ/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--*/ }
Comments
Post a Comment