How to show HTML/java codes in blogger(blogspot) blog posts

by Tamal Anwar on Monday, December 12, 2011

14 Flares 14 Flares ×

If you’re a blogspot platform blogger and want to show HTML source codes in your blog posts then you must had a hard time how to make it done. Check out Code BlogKori. You can see that I’ve created special boxes for those HTML codes and the code remains intact inside the post. It’s a nice trick for blogger platform if you’re willing to post tutorials and badges for your readers.

For this you have to take two simple steps,

Step 1

You have to add a special code inside your blogger template. Go to your blogger Dashboard > Layout > Edit HTML. Now hit CTRL+F on your keyboard and search this tag,

]]></b:skin>

Now you have to add this code above that code,

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; }

Now it will look something like this,

After you done it, click the “Preview” button to see if your blog shows or not. If everything’s okay, then click, “Save template

Step 2

Now each time you create a post and you need to add some HTML codes inside your post, you have to convert it into escapable characters. For this go to this tool called Quick escape and insert your code. Click, “Convert to escaped character” the converted code will be different than the original.

Now create a new blog post and add the converted code. You have to enclosed the code with a “pre” tag(marked as blue) For this I’ve added the same code twice. One normally and the other one with the hack.

Publish your post and see the magic! The normal code showed up with the effect but the hacked on remained intact inside the table.

Please leave a comment with your response and any suggestion for this blogger hack. If you run into any trouble, feel free to ask me a question. Please do share/save this page if it helped you.

14 Flares Twitter 3 Facebook 5 Google+ 5 LinkedIn 0 Buffer 0 StumbleUpon 1 14 Flares ×

{ 43 comments… read them below or add one }

scrollock

you best haa i try to my blog and look good thanks so much

scrollock’s latest blog post..Ongbak 2 aka fist tyrant 2 DVDrip Movie 2008

Reply

Sylvain

Thanks this was useful.

Reply

sansayan

It works, thanks for your valuable info.

Reply

Tamal Anwar

@scrollock
@Sylvain
@sansayan

~thanks for letting me know that. Blogspot has changed their HTML couple of times and glad that this tip still works!

Reply

Basant Singh

Quick escape is good. Thanks for sharing.

Reply

l_i_z

I mentioned your blog here. :)

Reply

kamrul

dear Tomal, please let us know how do yo give a different background colour for HTML code. in this post you have darker background for bellow code
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;
}

please let us know. thanks for help.
.-= kamrul´s last blog ..Photo Post: My early days of blogging and how BlogKori started =-.

Reply

Monir

it’s really work.thanks
.-= Monir´s last blog ..Amplitude Shift Keying =-.

Reply

Mg Lashaung

Thankyou so much .
I want to share these at my blog .

Aero

ভালো আইডিয়া। তবে আমি html কোড দেখানোর জন্য সরাসরি blockquote ব্যবহার করি।

Reply

Shoaib

This post is nice. But it doesn’t work sometimes. Moreover it is hard for beginner. I have a blog where I describe that how to show HTML code blog post. This is the post http://how2pediabuzz.blogspot.com/2010/04/how-to-show-html-code-on-blog-post.html

Reply

yahaya

thanks ,it’s working

Reply

Neha

Hey..It is CTRL+F for searching any keyword in any document.

Reply

Neha

By the way,Great post working…Thanks

Reply

jaganmangat

thank you very much,it works gr8……keep on adding such a type of posts…
GOOD LUCK……!!
.-= jaganmangat´s last blog ..Mostly searched Google words from A to Z. =-.

Reply

marian

thak you …i didn’t knew that!
.-= marian´s last blog ..Naruto shippuden 166-Confession =-.

Reply

http://trickstoall.blogspot.com

thanks u very much

Reply

Vince

This is what I have been looking for months. It worked on my blogger blog.

Reply

Harshit Singhal

Hey thanx for the code man

Reply

Rakhee Kadam

nice post, i also use the same technique for my blog.

Reply

LetsBeFrugal.com

Thank you! Worked well and now I can inform my readers with actual code!

Reply

Ruchiwebsolutions

Cool guide. Thanks for sharing a very detailed steps.

php2ranjan

Thanks for the code. Helped me a lot.

Reply

Seoruchi

his site is very informative. Very easy to use your tips and tricks. Keep up the good work, you Rock!!!!

Reply

webdesignpatna

Good research work. Thanks for sharing it.

Reply

webhostingruchi

Thanks for the step by step procedure.

Reply

lukman

thanks for sharing. it’s useful for my blogging experience.

Reply

Rafiqul Islam

Many thanks for the useful post, hope you will be continued it.

Reply

Ben - Personal Training Coach

Works great, thank you for the advice!

Reply

Obaidul Huq

I try it but no result. plz advice me.

Reply

Prime Aque

Thank you so much, I know this would work to my blog as well. I have added the code.

Reply

Stephen Cobb

Great post, thanks! I read about 10 different posts on solving this problem and yours was the best. The one thing that nobody seems to mention is that the final result is not visible until you a. publish the post, or b. preview the post.

At least that is my experience. In other words, you go through the escaping of your code and it looks terrible in both the Edit HTML view and the Compose view. Only when you Publish or Preview do you see the final results. This is not a criticism of your instructions, which worked great for me. But Blogger really should include this stuff in the program.

Thanks again…Stephen

Reply

Rajib Kumar

Nice tutorial.. thanks for share..

Reply

healthybeautifulblogq

I have try but seems not works in blog.

Reply

Analyst

I applied the hack and it worked perfectly fine, however the code box has become extremely elongated and thus may I request you to please let me know the way to reduce the size of code box or it be like a scroll box etc..

You can see demo at http://www.indian-share-tips.com/2011/09/share-market-widgets-for-blogs-and.html

Regards
Indian-Share-Tips.Com

Reply

Diedre Krell

Does ETR still offer an affiliate program? If so how do I join as I would like to promote for you.

Reply

vivek

i want to ask you that this we have to do every time while writing a post or one time..

Reply

WooThemes Blogspot

Check out http://woospot.com with Premium WooThemes (no charge).

Reply

TopOne

it was great…and really helpful.

Reply

Sandu

Thnks bro its really working :D

Reply

Tamal Anwar

You are most welcome!

Commentator

Thanks, it is working.

Reply

Kris

Thank you! It works like a charm.

Reply

Leave a Comment