Add look and feel to your display code on the blog post or on the webpage - Tips4ever

Latest

Hi this is Mahesh, Tips4ever is my IT Journey to technology, computers, software, Internet and much more....

Jan 11, 2009

Add look and feel to your display code on the blog post or on the webpage

In previous post we are describe about how to display the code in the blog posting and in the web pages and it is time to add some look & feel to the displaying code area by adding background color and border to the code area. Just add the following code in above the b:skin> for the blogger.com user and for old blogger.com, wordpress and webpage means webmaster add the below code in between <style type="text/css"></style> as follows
.codeview { background:#F5F8FA; border:2px solid #D7E8F0; color:#000000; font-family:"Courier New",Courier,monospace; font-size:12px; line-height:14px; padding:10px; }
After that you can use the above class by using <div> like follows
<div class="codeview">Your code here...</div>
and enjoy......