2009/03/17

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.
thanks much

3 comments:

suraj78 said...

Nice trick!

Anonymous said...

It does not work correctly if there are more tham 100 lines of code. The image is numbered from 0 to 99.

vuluganck said...

Yes , base on the codes for each blog.Your blog is the long code case.So I advise you to find another background for it, or you can make it longer by adding more lines,use editors to make it longer.For example, I have added more 50 lines for this background,you can see it here:Click here

Post a Comment

Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words tohelp each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on Zenplate.
Best regard
Zen

 
.