Add JavaScript in blogger (blogspot) post

Summary:
This post talks about why javascript sometimes does not work in blogger post and how to make it works.

Javascript code works well in HTML/Jscript gadgets, so it is no need to talk of this. Here we focus on Javascript in a post.

Let's start with an example. I added this SWFObect Javascript code to embed a flash video player generated by Moyea Web Player (http://www.playerdiy.com/ ) to show videos in my blog post and it was not working:

Player will show here

To my strange is that this code works in my Dreamweaver or other HTML editor. But why does not work in blogger?
I tried many other code and then I found this javascript code work well in blogger post:

Test

After this, I look carefully at my blogger post source (Edit Html):

Player will show here

There is a problem. In almost each new line. Almost Every time you have new line, blogger editor adds
tag. Because of this
tag web browser can't execute jscript.

So correct solution for my problem should look like this:

Player
will show here

To work well javascript in blogger post should be in one line.

Add A JavaScript Calendar To BloggSpot Blogger

---

The two most common widgets/gadgets you can see on a blog are clock and calendar. Although you would have seen them in most of the blogs hosted on WordPress, but these are rare in Blogger blogs, as Blogger doesn't directly gives you the facility to add them.

You can see my previous post, on how to embed flash clocks, in your blog here.
And this post, I will help you to add a simple calendar.

You can see the live DEMO here.

And here's the code required to add it to your blog:

Log in to Blogger.com
Go to Layout -> Click on "Add a Gadget" -> HTML/JavaScript type.

And copy paste this code in to it:

<style type="text/css">



.month {

background-color:black;

font:bold 12px verdana;

color:white;

}



.daysofweek {

background-color:gray;


font:bold 12px verdana;

color:white;

}



.days {

font-size: 12px;

font-family:verdana;

color:black;

background-color: lightyellow;


padding: 2px;

}



.days #today{

font-weight: bold;

color: red;

}



</style>






<script type="text/javascript" src="http://dsai.588.googlepages.com/basiccalendar.js">



/***********************************************

* Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/

* Script featured on Dynamic Drive (http://www.dynamicdrive.com)

* Via http://bloggerstop.net

* This notice must stay intact for use

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/




</script>

<script type="text/javascript">



var todaydate=new Date()

var curmonth=todaydate.getMonth()+1 //get current month (1-12)

var curyear=todaydate.getFullYear() //get current year



document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));

</script>

Save the widget, and your blog will be ready with a new calendar !