Put code in a frame

I have posted 1 instruction how to show code in post , you can view here to read the instruction clearly before following this tip.

So with this tip , I will lead you to put/show code in a frame like my blog-template , you see ? I have put it in a frame with the line numbers.It is very easy for readers who want to follow the tips.
This can help you and your blog will be more crowd and get much traffic if your visitors feel satisfy and have a good impression.

Ok all of you have known how to change the symbol "<" and ">" to what ?
So now you just have to add this CSS code before ]]></b:skin>:

pre, code {
display:block;
font: 1em 'Courier New', Fixed, monospace;
font-size : 100%;
color: #666666;
background : #fff url(http://img178.imageshack.us/img178/1307/prepb3.jpg) no-repeat left top;
overflow : auto;
text-align:left;
border : 1px solid #99cc66;
padding : 0px 20px 0 30px;
margin:1em 0 1em 0;
line-height:17px;
}

Look this pic:

Can you see the red code that I give you above ? that is the link of the type of frame.You can change another frame by changing the frame link, so you can design or if you like any frame just change it.

Ok when you have added the CSS code , you have to do put your code between 2 tag <code> and </code> or<pre> and </pre>, it looks like this:

<code>
... code ...
</code>

or this :

<pre>
... code ...
</pre>

Done , now click save and join your blog.
If you dont know how to show your code to your blog , go to here.
If you have any problems please leave a Message/Comment.
thanks much..