How to add HTML codes in Blogger Posts?

Recently, one my blog readers wanted to know how do I add Java scripts and other HTML codes in my blog posts. To be very frank, even I had this question when I started my blog initially. And when I tried to implement such tricks in my blog, I faced a lot of difficulties with the coding. But nowadays, I find many sites have come up with blogging tips and it has become very simple to customize your blog. Let me straight away tell you, how to implement this trick on your blog posts.

If you just want to show up HTML codes in your blogger post, that is without any customization, then use this site : Simple Code. This method will show the HTML as it is and looks very simple. If you want to customize the way it is displayed, like I do in my blog, then you should follow the next method. In this method, you will have to include some codings and then your job will be done.

Follow these simple steps to include the HTML/Java script codes in your blog post:
1. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you do any changes in the template.

2. Now, do a search using "CTRL+F" for the following line: ]]></b:skin>
(Note: I have used the first method here. Just to show you how it looks)
3. Once you find the code, paste the following piece of code above it:

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://img17.imageshack.us/img17/5162/codeview.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #FFFFFF;
font-weight : normal;
margin : 0;
padding : 0;
}

4. Once you do this step, save your template and return to your blog post where you want to insert the HTML code. Place the HTML content in between the following two tags namely, <div class="codeview"> and </div>
5. You can include the code straight away in the "Compose Mode" of your blog post area. After you complete your post, you can simply click the button "PUBLISH POST" and later, view the result.

If you still find problems with the display of HTML codes, then use Simple Code and get the simplified code from that site. Now, place this simplified code in between the two tags as mentioned in step four. That's all folks. Hope I made it simple and clear. Please post your views below through comments.

Enjoyed the article?

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Other Recommended Posts

SBA said on August 22, 2009 at 6:37 AM :

I like the second method! It's a pain to switch to html view. But instead of 'publish' can't you just use the preview to see if there are any problems?

Mukund said on August 22, 2009 at 1:52 PM :

@SBA: Yes!! You are right! You can preview before you publish but some times, the preview do not work well with respect to fonts. I mean I use Verdana type of font. When I publish, I find it is Verdana but in preview it is still Arial font. So, it is better you publish and take a look at your result!

SBA said on August 23, 2009 at 5:53 AM :

I had trouble getting the background image to appear. Can you show the method 2 and the simple view ? I just tried it on an old post after I updated the template.

Mukund said on August 23, 2009 at 1:11 PM :

@SBA: I have showed both method 2 and method 1 in my post up there. Method one is very simple. Use the site and paste the code in your blog post. The method two includes two steps. Add the HTML code shown in step 3 and then use Simple Code to get the simplified HTML code. Later place it between the two tags. Hope I cleared your doubt.

SBA said on August 23, 2009 at 11:26 PM :

There is no doubt --- I know you discuss both methods but I don't see the background image with is a nice one (diagonal strip that says 'CodeView" on dark background)

The image is at
img17.imageshack.us/img17/5162/codeview.gif

So I meant show an example of both methods in your post. I saw no difference when I tried both ways --- no image and styling was same, maybe because the code tag carries default styling?

Mukund said on August 24, 2009 at 5:36 PM :

@SBA: I got what you said now. Yes! It works on certain templates while does not work fine in few templates. I will check out the code once again and let you know!

article marketing said on August 26, 2009 at 11:14 AM :

thanks for your sharing!

about-html-codes said on September 1, 2009 at 4:43 AM :

Very interesting article. If you interested in me showing your guides on my site let me know (Obvious with the credit to you @craig@about-html-codes.com

Anyway nice article thanks for the share

Isolinx said on October 19, 2009 at 2:30 PM :

Hi Admin
Thanks for placement the unique info on adding the html codes in blogger posting, by your guidance, i m able too, for code adding in my posts, no need other web-designer.
Really Unique Info.......Thanks again

HTML CODES said on October 20, 2010 at 3:36 PM :

How to add HTML codes in Blogger Posts? is very smart post...great work.I like it very much........i m able too, for code accumulation in my posts, no need other web-designer.
Really Unique Information.......Thanks for this information....

Mukund said on October 20, 2010 at 6:18 PM :

@HTML CODES: Thanks for the comment! I hope you enjoy the other unique updates from my blog as well!!!

Mobil Keluarga Ideal Terbaik Indonesia said on October 24, 2010 at 12:08 AM :

Great posting.
Can u share how to embed any type full functional javascript into blogger's post area. Thx.

Mukund said on October 24, 2010 at 8:38 AM :

@Mobil Keluarga Ideal Terbaik Indonesia: That is pretty simple!! You just need to open the javascript file and save it to your computer as text file. Later, proceed with the above steps and your done!!!

Search engine marketing Vancouver said on November 1, 2010 at 3:44 PM :

Toronto Marketing Company also liked the second method as if you have any problem in your comment you can trap it while previewing and then correct it. If you don't have preview option then a single mistake can become very big to you.

Mukund said on November 1, 2010 at 6:04 PM :

@Search engine marketing Vancouver: Thanks for the comment! Your point is valid. Always preview your comments before you publish them!!

about-html-codes said on November 12, 2010 at 4:01 PM :

article marketing said on November 12, 2010 at 4:01 PM :

Generic Viagra said on February 15, 2011 at 12:47 PM :

Fantastic website! I must say i appreciate the best way it is very in our little brown eyes and also the information is definitely well written.

Mukund said on February 15, 2011 at 8:14 PM :

@Generic Viagra: Thanks for the comment! I hope you enjoy the other articles on my blog as well! Would love to hear more from you!!!

mari belajar seo said on February 18, 2011 at 1:49 PM :

Thanks for the post, really useful for newbie like me, by the i like your template. at first i though it's wp theme

keep posting

Mukund said on February 18, 2011 at 7:53 PM :

@mari belajar seo: Thanks for the comment! Yup! Im happy that I helped you in some way! Yeah! Designing templates like WP takes time but it's actually pretty easy!

Mahe said on April 21, 2011 at 6:43 PM :

Hi Mukund it worked for me in my one of the post but its not working for another post I am getting error while saving

Mukund said on April 22, 2011 at 11:00 AM :

@Mahe: Please ensure that your div and span tags have been enclosed properly. Else, you will get errors while saving the post. If you need help, contact me via email and I will help you!

Game-World said on June 7, 2011 at 10:20 AM :

thanks work very good :)

Mukund said on June 7, 2011 at 10:29 PM :

@Game-World: Yup! Thanks for your comment buddy! Hope you enjoy the other articles on my blog as well!

websilog said on July 26, 2011 at 8:06 AM :

this is a good alternative to pre and code tags. great tutorial! posted a similar one and linked to this post. :-)

Mukund said on July 26, 2011 at 8:07 AM :

@websilog: Yup! Thanks for the comment and the link back as well! I hope you enjoy the other tutorials on my blog as well!

Calgary Web Design said on August 25, 2011 at 3:02 PM :

Thanks for sharing. Looking forward to reading more of your post.

Mukund said on August 25, 2011 at 6:34 PM :

@Calgary Web Design: Yup! Thanks for the comment! I hope you enjoy the upcoming articles on my blog as well!

Techmaker said on September 1, 2011 at 1:31 PM :

@SBA

yes I also got the same results

Mukund said on September 1, 2011 at 6:26 PM :

@Techmaker: Well, the reason was because I uploaded them to imageshack! You may ping me on gtalk if you need the image!

iphone 4 cases said on October 11, 2011 at 8:58 AM :

thank you,i like it

Snub_Fighter said on January 20, 2012 at 10:20 PM :

It's interesting that neither blogger nor Wordpress fully support highlighting and rendering HTML markup as text in a blog post.

kady said on February 29, 2012 at 6:21 PM :

Hi thanks for posting this, but I have a problem with it. I added the css code right before the and saved the template.. Now in the header I see all the css code on the front page. After posting the code in between the div tags nothing is displayed as code. I have html and php code. Am I doing something wrong or this is not meant for php code.

Cheers,
Kady

Mukund said on March 1, 2012 at 6:02 PM :

@kady: Well, I doubt with the php stuff. This stuff works on blogger. Probably you are a WP user I guess! Right?

Use the tab below to comment. No spam please!!!

POST YOUR COMMENT