How to insert HTML css and Javascript to Your Blog Post


    This tutorial is for those who use blogger, and want to insert HTML, JavaScript and CSS source code in your posts.

I'm sure many bloggers face this problem. I couldn't do it myself at first, but with a lot of practice I was finally able to do it.

    Usually when you try to insert HTML or JavaScript code in your Blogger post you will get an error message or coincidentally if your post is published it will not give the desired result as expected. You can use HTML Encoder but they will never give you an attractive look at your code.

How to Insert HTML, CSS, JavaScripts Code in Blogger Posts? 

    This is one of the most common questions that arise in the minds of users. This has been the biggest headache for many Blogger (Blogspot) users. There are still many Blogspot users who can't figure out why they can't display HTML code as plain text in existing posts.

    So today I am going to show you how you can easily insert any HTML code into your Blogger Posts. We'll be putting all of our HTML code into a Stylized Box which will make our coding look different from all the other text in our posts.

The method is as follows :

1. Go to the blogger admin page.Select theme, and select edit HTML.

2. Search With (CTRL+F)  type 'skin' in the box.  Hit the enter key on your keyboard.

3. After you find  ]]></b:skin>, copy code bellow and paste above it.

 .post blockquote {
background: #C8EFFF url(;
background-position:top left;
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;
.blockquote p {
margin: 0;

After pasting the above code, save your template by pressing Save Template Button.

How to Inserting HTML, CSS or JavaScript Coding in Blogger Post as Plain Text ?

    To display the HTML, CSS or JavaScript coding in your Blogger post we'll use a blogger tool called "QUOTE TEXT". This tool is available in your Blogger Post Editor which will make your HTML Coding appear as plain text,

First Go To Blogger >> Your Admin Blog >> Create a New Post >>

Now Just paste the HTML, CSS or JavaScript coding in the Blogger Post editor

    Block the HTML, CSS or JavaScript text, then  press the "Quote Text" button Which is at the "Top Right" of you "Blogger Post Editor Tool Bar", then save your post. Preview your post....and did it.

Or you can watch the video for the detail....

    Okay, that's enough for now from me, if you have any questions, please comment in the comments column. If something goes wrong I apologize. Hopefully helpful, and thank you.

Featured Post

How to fix CLS issue in your blog or web ?

  Fixing CLS issues is a big deal. That's because most of your competitors won't fix CLS problems and as a result won't rank wel...