Subscribe:

Ads 468x60px

Monday, August 13, 2012

How to show HTML codes inside your posts?

Showing the HTML code of a banner or a script in your blogger posts for most of us becomes to be a problem, especially if your new to blogging or coding. But that's not a big problem, as in this article i'll give you some examples on displaying your codes properly on your post content. It's easy to use and doesn't require too much time.












For those of you who don't know for some time Blogger added a new option in the Post Options and i am referring to the Compose Settings options given, and those are:

  1. Interpret typed HTML - if you check that variant then the editor will interpret all the HTML codes that you insert; 
  2. Show HTML literally - in this case the HTML codes will be simply shown in the posts content without being interpreted; 

This option (2) can be accessed following the image below instructions:



So all you have to do is check the Show HTML literally and you are done, not that hard at all. Isn't it?

But what if you want to customize your codes, by giving a background color to it or a border around it. So to make it look more attractive to the visitor. In order to do that you can copy this lines below and paste them in your Edit HTML, after change the line that says Type Your Code Here with your desired one.

<div style="border: 1px solid #000000; padding: 10px;">
Type Your Code Here 
</div>

The 1px shows your border highlight, the number in green the frame color, and the blue one the distance between the frame and code on the four sides.

If you want to give your frame a background color use the code highlighted in green, you can see the result below:
<div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;">
Type your code here
</div>

If you got a bigger line of code that takes lots space you can make a scroll frame like below it's really nice and also easy to customize:

Code:
<pre style="background-color: #9fc5e8; border: 1px solid black; height: 380px; overflow: auto;">
Code HERE
</pre>

Result from the code given above you can see below:
<div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;"><div style="border: 1px solid #000000; padding: 10px; background-color:#EFEFEF;">

These are some examples on How to show HTML codes inside your blogger posts! I really hope this helped you.

For more tutorials subscribe by email, like our posts and of course comment!
Do you Like this story..?

Get Free Email Updates Daily!

Follow us!

Read more

7 comments:

  1. Nice informative Blog. Gained th knowledge of using html tags. Zinavo Technologies

    ReplyDelete
  2. Thanks for Sharing this Coding Its very helpful for developers

    Wedding Websites Online

    ReplyDelete
  3. TY so much for this post. Yours is the only one I've found even close to what I'm looking for. But my main question is (and please bare with my newness) How does one get rid of HTML codes. Somehow it got turned on and i can't turn it back off. I'm pulling my hair out. Please help. TY

    ReplyDelete
  4. This nice and useful blog....Thanks for this post. web designing in jalandhar

    ReplyDelete