I Look 12

Blogging, Computers, Internet, Gaming, Make Money Online


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. 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 the Professional 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: WebUpd8










What are the benefits of being a subscriber?
All subscribers will get these updates directly from their email.
  • Blogging/SEO tips and tutorials
  • Technology news and tips
  • Computer tips, guides and optimizations
  • Gaming tips, tricks and cheat guides
  • Online money making tips
If you wish to subscribe, just fill up the form below:
Email address:
Lijit Search

Followers

Translate