Insert HTML-CSS-Javascript Codes in Blogger Posts As Plain Text

Advertisements
If you are using blogger platform, and want to insert HTML, JavaScript and CSS source codes in your posts then I am sure you are facing many problems. If you try to insert Html code or JavaScript in Blogger posts you will either get an error message or by chance if your post is published then it will not give the desirable result's which was expected .You can use HTML Encoders but they will never give an attractive look to your codes.

How To Insert HTML, CSS, JavaScripts Codes in Blogger Posts? This is one of a most common question which arrives in users minds. It has been a biggest headache for many Blogger (Blogspot) users. Still many Blogspot users are unable to discover why they cannot display HTML coding as plain text in there posts.

So today I will show you how you can easily insert any HTML coding in you Blogger Posts. We will insert all of our HTML codes in a Stylish Box which will make our coding look different from the all other text present in our post.

I know, you would love to preview how your coding would look  a like after applying this tutorial.Here it is see the live demo here

Insert CSS Style Sheet in Blogger Template:

First we will insert the CSS style Sheet to stylize our quote box.
  • Go to Blogger >> Your Blog >> Template >> EDIT HTML >> Proceed 
  • And now Search For ]]></b:skin> With (CTRL+F)
  • After you find ]]></b:skin> just above it paste the following coding


.post blockquote {
background: #C8EFFF url(http://2.bp.blogspot.com/-jSiMPSsf6Rs/T4lHasB89hI/AAAAAAAABM4/nKdZmTXYrto/s1600/1.png);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
border-top: 2px solid #DDD;
border-right: 5px solid #666;
border-left: 2px solid #DDD;
border-bottom: 5px solid #666;
font-size: 0.9em;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.blockquote {
font: 18px normal  sans-serif,Tahoma;
padding-top: 10px;
margin: 5px;
text-indent: 65px;
}
.blockquote div {
display: block;
padding-bottom:10px;
}
.blockquote p {
margin: 0;
padding-top:10px;
}
  • Now After pasting the above code save your template by pressing Save Template Button

Inserting HTML, CSS or JavaScript Coding in Blogger Post as Plain Text:

Now in order to display the HTML, CSS or JavaScript coding in your Blogger post we'll use a blogger tool called "QUOTE". This tool is available in your Blogger Post Editor which will make your HTML Coding appear as plain text,
  • First Go To Blogger >> Your Blog >> Create a New Post >>
  • Now Just paste the HTML, CSS or JavaScript coding in the Blogger Post editor 
  • Now Select the HTML, CSS or JavaScript coding which you pasted previously.

  • Now After Selecting the HTML, CSS, or JavaScript coding just Press the "QUOTE" button Which is at the "Top Right" of you "Blogger Post Editor Tool Bar" Remember: Press the Button only once.
  • Publish your Post
Tip:If you want to Quote any text You can also select text to quote by adding the “<blockquote>” tag around the text. For Example <blockquote>Hey I am On MyBloggerLab<blockquote>. But Remember This will work only if you are working on HTML TAB in Blogger Post Editor


And Now go to your blog post and it will give a picture perfect finish. So that's how you can Display HTML, CSS or JavaScript coding in Blogger Posts. You can also use this "QUOTE" Tools to highlight important quotations.If you Feel any Difficulties feel free to ask.Till then Peace, Blessing and happy Quoting.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

15 comments

May 5, 2012 at 5:34 AM

Is there any other way I can make this Possible without using the "Quote".
I think some bloggers used the CSS div-class tag to make their own, they just named it CODE, so if they wanna post make a post, the simply use the tag {div class=code} HTML to post {/div}, if you have idea how they did it with the DIV tag in their blogspot template . Pls Share

Editorial Team MOD
May 5, 2012 at 6:03 AM

@editweaks.com
Yeah Brother it is possible due to New Blogger Interface Simply Go To Blogger.com >> Your Blog >> Create a Post >> Paste Your HTML-CSS-JavaScript Code Under Compose TAB >> Now Publish And Done See Live Demo Here http://aioweb.blogspot.com/2012/05/adding-html-javascript-css-without.html . Peace Pal

May 5, 2012 at 12:35 PM

Interesting article, this blog has value!
http://hostcarioca.com.br

Editorial Team MOD
May 5, 2012 at 12:35 PM

@HostCarioca
Thanks Pal, Keep Your Self Motivated, Peace

Editorial Team MOD
May 22, 2012 at 2:25 AM

@clinicme.com
Hey Pal, Can you Explain in More Details We would love to Help. Currently We are unable to Identify which H2 Tag you are talking either it is your templates body of Title. Please Clear. Peace

July 14, 2012 at 8:27 PM

Thanks pal
This really helped

July 15, 2012 at 12:14 AM

thanks bro......

July 30, 2012 at 11:17 PM

Oh ! thanks a lot. its working in my blog : www.goprobloggers.blogspot.in

August 14, 2012 at 4:01 PM

Hey brother, this post is really nice. You’re all the tips are helpful thanks for sharing…

Visit my blog: www.mybloggertopic.blogspot.com

August 18, 2012 at 11:07 AM
This comment has been removed by the author.
October 1, 2012 at 2:13 AM

Well done! I am gratified that you have shared this important news with me. Thanks!
open source developer

October 14, 2012 at 5:52 AM

Can u tell me how to change the background colour

November 15, 2012 at 8:47 PM
This comment has been removed by a blog administrator.
February 24, 2013 at 4:14 AM

the text appear white after publishing why???
http://technotrickology.blogspot.in/2013/02/border-in-blogpost.html#more

August 10, 2013 at 1:37 PM

yeah man it works and nice and helpful article thumbs Up

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2014. MBL Networks, All Rights are Strictly Reserved.