How to add HTML codes in Blogger Posts

by Rajib Kumar

Recently, a reader of my blog wants to know how to add HTML code into blogger posts. This is really an important issue for Blogger blog beginners. Because blogger did not accept the HTML code directly into the post. Even I had this question when I started my blog initially. And when I tried to follow different ways on my blog, I faced a lot of difficulties with coding. But nowadays, I am using HTML code into my blog using customization. Let me say immediately how you can apply this trick on your blog.

If you wants to show HTML code without any customization in your blog then just use this site: SimpleCode. This method is too easy to use and it shows code in a very simple way.

HTML+Code+View+Using+SimpleCode

If you wants to add in a stylish way then it need to customize. To do this just follow the following instructions.

1. From Dashboard go Design >> Edit HTML
2. By using F3 or “CTRL+F” search the following code line

]]></b:skin>

3. Now, just before the above code paste the following codes

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9
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. Save your change.

Now, for every time when you wants to add HTML codes into your post, just put HTML codes between <div class="codeview"> and </div>

Example:

<div class="codeview"> ]]></b:skin> </div>

Red portion indicate HTML codes. That’s it. I hope you will enjoy this customization.

1 News April 15, 2011 at 8:47 am

but what will happen from this mrthod i mean what is the benifit of this thing

2 Rajib Kumar April 15, 2011 at 4:09 pm

By this method you can post html code..

3 sam azgor April 17, 2011 at 3:04 pm

by html parser you can also do this.
just copy and paste your parsed code in blogger post.

4 Jewel @ alltips.net July 21, 2012 at 1:41 pm

@Sam: HTML parser tool didn’t work for me.

5 Okagba Mobile June 9, 2011 at 8:39 pm

How do I add Google Adsense to my blog such that it appears, say, between post title and post body, post body and post footer, and in sidebars. Thanks.

6 Paul B. Taubman, II March 15, 2012 at 9:24 pm

Thanks for the post – is there a way to include custom fonts (easily!) on a non-blogger site? If someone is self-hosted and running WordPress on their site, how can they use a custom font other than Google Fonts? Is this possible?

Thanks!
Paul.

7 Rajib Kumar March 15, 2012 at 9:54 pm

Hey Paul, you can use “WP Google Fonts” plugin to use custom fonts in your wp blog. Link is here – http://wordpress.org/extend/plugins/wp-google-fonts/.

8 phphunger June 5, 2012 at 12:57 pm

hi blogger, great tips for bloggers..great work..i love it…but my doubt is i have some php code..for php code it wont work..it works only for html code..how to add some code background for php other codes…looking for your response..as im new to this blogging…

9 Caresofts November 20, 2012 at 3:18 am

by HTML parser you can also do this.

10 Abu Raihan November 22, 2012 at 6:15 pm

Nice post. Very good site. Thanks for adman.

11 Rajib Kumar November 23, 2012 at 1:35 am

Don’t comment just for link building.

12 Plumrose Lane December 3, 2012 at 1:45 am

I’ve been struggling with this one for years, so I can’t tell you how much I appreciate this post. While I wasn’t able to get your code to work, I was able to successfully see how “Simple Code” worked and used that instead.

I’d love to have the code stand out with a gray background the way it should with your code but I’m not sure what the problem might be. Can you recommend any specific settings in the “Options” area when writing a blog post? These settings are the only ones I think might be interfering with it working properly but then I’m no guru so I could be wrong.
Thanks~
Sharon

13 Rajib Kumar December 3, 2012 at 2:35 am

I have used it on my blogger blog. It’s OK and working properly. Please try again. For further help you can send me message following contact form. Personally i will help you.

14 Plumrose Lane December 3, 2012 at 3:23 am

Thanks Rajib ~ sure do appreciate the offer! I’ll keep trying on my test blogs and see if it works out.
Best~
Sharon

15 Pierro December 5, 2012 at 10:59 pm

Please review your code as it did not work on my blog. Anyway thanks for sharing.

16 Plumrose Lane December 8, 2012 at 2:12 am

Just wanted to follow up and let you know your code ended up working great on my blog, just turned out to be user error (usually the case *smile*). Thanks so much for your help Rajib!
Best~
Sharon

Comments on this entry are closed.

Previous post:

Next post:




. Border