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">

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 {
  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);

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">
(refer to the image above for reference)

Here is the result:

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


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
good game empire

hassan bilal said...

Thanks alot for share such a great information, Keep Writing for us please ..

Best Regards,
Get Best Ideas

Vcom Infotech Company said...

Informative to know about these putting code box in blogger posts. Thanks a lot for these useful share. coimbatore website designing company | online shopping in coimbatore

Post a Comment