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 advancedmethod 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 thissecond method.

1. Follow this guide on How To Edit Your Blog Template

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

3. 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 theProfessional Code Box.

On Edit HTML tab, just paste this code:
<div class="code">
 YOUR CODE 
</div>
(refer to the image above for reference)

Here is the result:
THIS IS THE
RESULT
CALLED
PROFESSIONAL CODE BOX

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.



source: ilook12.blogspot.com
Digg Stumble Delicious Technorati Twitter Facebook Reddit Furl RSS

2 comments:

Sadiqur Rahman said...

great post buddy. If anyone need to buy real facebook likes then you can recommend this website.

Candy Sim said...

All the best blogs that is very useful for keeping me share the ideas
of the future as well this is really what I was looking for, and I am
very happy to come here. Thank you very much
earn to die
earn to die 2
earn to die 3
Hi! I’ve been reading your blog for a while now and finally got the
earn to die 4
courage to go ahead and give youu a shout out from
earn to die 6
Austin Texas! Just wanted to tell
earn to die 5
Hi! I’ve been reading your blog for a while now and finally got the
happy wheels
strike force heroes
slitherio
good game empire

Post a Comment