Add HTML and java Scripts Inside Blogger posts in a Display Box

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 ]]></b:skin> on appearing search box then enterPaste 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

<pre>

"your HTML or JAVA script"

</pre>

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 linkInside the box provided paste the script and click make it friendlyNow 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.


Please leave a comment if you like this post or subscribe to this blog via RSS or Email.

7 comments:

  1. great tutorial...i take this...

    how about if i want to put javascript/html in blog post...

    ReplyDelete
  2. This is my first time that i visit here. I found many useful thing in your website especially its discussion. From the tons of feedback on your posts, I guess I’m not the only one receiving all the satisfaction here! keep up a good job.

    ReplyDelete
  3. If you are planning to use java, you must read this post. I am sure you will learn from here.

    ReplyDelete
  4. The blog is innovative and provide essential information to viewers regarding this issue.I hope you will provide such more excellent information to us in coming days.

    ReplyDelete
  5. It can be enlightening to come along with a site that offers much specifics of any common subject just like that which you are covering. Appreciate posting, keep up the nice work!

    ReplyDelete
  6. Still need to practice on this one...
    thanks for the tip though!

    http://lincOne.blogspot.com | http://www.facebook.com/lincOneInternational

    ReplyDelete
  7. Ohhh this looks like a neat feature to add to my blog. Normally I go to my seo agency for most of my blog stuff, but this looks pretty easy and I think I might be able to handle it!

    ReplyDelete

Share your ideas with us, we will be very greatful to hear from you