HTML/ Javascript inside blogger posts

Post views:

It is very difficult for anyone using Blogger blogs to show HTML codes and JavaScript inside the blog posts . You might have also seen people showing the scripts in small display boxes of fixed length and width. Now after applying this Blogger trick , you would be able to show HTML and JavaScript inside Blogger posts with custom display boxes .

Click on layout of the blog in which want show HTML or JavaScript and now select edit HTML .
Before you apply any Blogger hack ,remember to download and save your full template.
Now tick the expand widget templates and move onto the selection shown below ( towards the end of CSS code ) .





Otherwise you can press Cntrl+F and paste ]]> on appearing search box then enter
Paste the following CSS code above that line .

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

The above code is for drawing a display box inside the Blogger post to show HTML and JavaScript.You can change the length ,width ,size and color of the box , back ground image etc. by editing the CSS code. After adding this code you can call the display box anytime into your post by following next step.

[ Download the format here ]

In Blogger in draft , there would be a problem with this HTML and JavaScript display box . For fixing that,
Expand Post options from the Blogger text editor ( On the bottom left corner ) . From the compose settings, select Interpret typed HTML . Now everything would appear fine .

Before you add "your HTML or JAVA script " make it post friendly by following this link
Inside the box provided paste the script and click make it friendly
Now copy the generated code and paste between

 
pre & /pre  to keep it inside display box

Making the script postable is the only requirement if you plan to show the HTML or Java Script alone , without a display box.

You may even like these posts