Displaying javacode or Html code in Blogger is really a Big challange For New Bloggger Beta But after reading this post all you problem about posting code in blogger will be solved.If you are New to blogger beta i recommend you to read the basic of blogger hack , this Post will help you in playing with Template Html Code in blogger.First you need to put Css code in yours Template ,
To Insert Css Code In Blogger Log In Blogger >> Layout >>> Template –> Edit HTML Now Inser below Code in <body> Tag as shown in below iMage.
pre
{
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;
}
After putting Above code in Template Save the Template
Now Important Part of Blog start Here .When ever you Insert JavaCode or any other code in Blog Post In Blogger or in Wordpress Use Either<pre>Tag Or<code> Tag Before The Code as Shown in below Example Or
<code>Your Post Code Goes Here</code>
Important-The Code you Insert In Between <pre> Tag Or <code> Tag must be edited using Postable ,Postable is best and easy way to convert code into Html mode by making yours code Friendly to post ,so that there is no change in code After the code is publish in post. Postable is very easy to use just copy the code and paste in postable box and click make it Friendly .In short Postable Convert code in character entities, Visit below Table to know more about character entities.Note - When ever you Post Code In Post ,Use HTML mode to insert code ,if you Dont understand see below Image for more clarification. about posting Code In post.
The most common character entities you will need to use
Here are the most common characters and their equivilent character entities you would need to use to display code in your posts:
| Result | Description | Entity Name | Entity Number |
|---|---|---|---|
| < | less than | < | < |
| > | greater than | > | > |
| & | ampersand | & | & |
| “ | quotation mark | “ | “ |
For a complete list of character entities, take a look at the reference page provided by W3 Schools.
- Trick to Add AdSense code, Directly to Blogger HTML Template
- How to Put Related blog to your Post in Blogger.com
- Blogger Hacks -How To Add Digg Buttom To Blog Post
- Blogger Hack - Expandable post summaries for professional blog design
- Blogger Archive Hacks -Show Blog Post Headers In Archive
4 Responses to “Displaying Html Code In between Blog Post”
Please Wait
Leave a Reply
Hey, I Am wondering, i have a refferal banner and the code is Now, i dont understand how come when i add it to my signautre, i see that and not my banner. that code above is a test 1. what am i doing wrong?
Dear Better Mail Yrs Problem Via Mail Or Contact Link I dont Able To Show Yrs Post Code Here
Thank you very much for this post, because I’m continuously suffering from the breakage of code. Now I can publish it! Thanks again!
Hi there
I was wondering
if there is HTML code
that it will prevent
the visitors from copy
my posts and photos
thank you in advance