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(https://drive.google.com/uc?export=view&id=14KXWsDTBnHzoqZPgcdt79uxezJ7TUnCc);
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;
overflow:hidden;
}
.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;
}
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 tralalalala.....you did it.
Or you can watch the video for the detail....