Putting Code Box On Blogger Posts - Web Freaks (Where Noobs Become Pros)

Trending

Friday, 31 May 2013

Putting Code Box On Blogger Posts











Ever wondered how to add code boxes on your blogger post? There are two ways, one is a simple method which is best suited for beginners(like me) and the other is the advanced method which gives your code box a more professional look but requires a little source tweaking.

So here's the simple method, just paste this code on your post editor in Edit HTML tab.
<textarea name="textarea" cols="40" rows="4" wrap="VIRTUAL">
YOUR CODE 
</textarea>

Here's an image on where to post the code:













And here is the result:


It's just the simple version, but if you want it Professional Code Box look, follow this second method.


1. Find(CTRL+F) ]]></b:skin>

2. Add this code ABOVE ]]></b:skin>
.code {
  background:#f5f8fa;
  background-image:url(http://i142.photobucket.com/albums/r99/nilarimogard/30bmq7a.gif);
  background-repeat:no-repeat;
  border: solid #5C7B90;
  border-width: 1px 1px 1px 20px;
  color: #000000;
  font: 13px 'Courier New', Courier, monospace;
  line-height: 16px;
  margin: 10px 0 10px 10px;
  max-height: 200px;
  min-height: 16px;
  overflow: auto;
  padding: 28px 10px 10px; width: 90%;
}

.code:hover {
  background: #FAFAFA; background-image:url(http://i142.photobucket.com/albums/r99/nilarimogard/o7t4j9.gif);
  background-repeat:no-repeat;
}

4. Click Save Template

5. Now go to your Dashboard and make a new post on the blog where you added the Professional Code Box.

On Edit HTML tab, just paste this code:
<div class="code">
 YOUR CODE 
</div>

 Note: You cannot see the Professional Code Box on your post editor, so you'll have to save it and view the post from your blog.


 

No comments:

Post a Comment