We are going to need some CSS to make this work. So let’s learn how.
1st log in to your blogger account and move to “Edit HTML”. Make sure you have backed-up your template before making any change.
Now search for the following code.
]]></b:skin>
Paste the following code just above it.
.post pre { font-size: 12px; padding: 0; margin: 0; background: #f0f0f0; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; background: url(http://4.bp.blogspot.com/-KjlAo-X6h3g/TiB3K7f5mYI/AAAAAAAACwE/31NG0lha5uA/s1600/pre_code_bg_ylw.gif) repeat-y left top; line-height : 20px; width: 600px; overflow: auto; overflow-Y: hidden; } .post pre code { margin: 0 0 0 40px; display: block; }
Save your template and you are done.
To use this style , paste your code inside pre code tag. For example.
<pre><code> Code Snippet Goes Here </code></pre>
The background image is created by Soh Tanaka
No comments :
Post a Comment
Note: Only a member of this blog may post a comment.