Unblockable POPUP embeding a javascript code in BLOGGER - WTF?!

[TheWicker]

Okay, the issue is that I need a popup script which will display and embed a javascript code (widgetbucks) on a blogger blog.

All methods I tried have ended up with :

"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly."

How could you do this?

 

[bruce6667]

try wrapping the js in cdata tags.

example:

<![CDATA[

    <script>alert('suck it, blogger');</script>

]]>

and make sure you put it in the right place.

 

[bhnoobz]

http://ecmanaut.blogspot.com/2006/01/adding-javascript-to-blogger-posts.html

 

[TheWicker]

try wrapping the js in cdata tags.

example:

<![CDATA[

    <script>alert('suck it, blogger');</script>

]]>

and make sure you put it in the right place.

Okay, tried, however still no luck. Here is what I did so far. I uploaded the javascript and css for the popup into external hosting and called for these file in the head section of the blogger template.

Here the codes:

JAVASCRIPT

var timer;
var h = -450;	// set this to the same value of the top property for the pa div in the style sheet
var w = 250;	// set this to the same value of the width property for the pa div in the style sheet, smaller to move it to the right, larger to move it to the left
var t = 100;	// set this to the actual pixel distance from the top where you want the pa div to be at the end of the descent

function startAp() {
	setLeft();
	showAp();
}

function hideAp() { 
	if (document.layers) document.layers.pa.visibility = 'hide';
	else if (document.all) document.all.pa.style.visibility = 'hidden';
	else if (document.getElementById) document.getElementById("pa").style.visibility = 'hidden';
}

function showAp() { 
	state=typeof tPos;
	if(state=='undefined') tPos = h;
	if(tPos < t) { 
		tPos+=25;
		if (document.layers) document.layers.pa.top = tPos+"px";
		else if (document.all) document.all.pa.style.top = tPos+"px";
		else if (document.getElementById) document.getElementById("pa").style.top = tPos+"px";
	}

	if(timer!=null) clearInterval(timer);
	timer = setTimeout("showAp()",10);
}

function getoPos() {
	if (document.layers) alert(document.layers.pa.top);
	else if (document.all) alert(document.all.pa.style.top);
	else if (document.getElementById) alert(document.getElementById("pa").style.top);
}

function setLeft() {
	if (document.layers) document.layers.pa.left = ((window.innerWidth / 2) - (w / 2))+"px";
	else if (document.all) document.all.pa.style.left = ((document.body.offsetWidth / 2) - (w / 2))+"px";
	else if (document.getElementById) document.getElementById("pa").style.left = ((window.innerWidth / 2) - (w / 2))+"px";
}

CSS

#pa {
	font-family: Arial,sans-serif;
	background: #FFF;
	text-align: center;
	padding: 10px;
	border: 2px solid #666;
	position: absolute;
	z-index: 100000;
}

#pa .pa_close {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 5px;
	right: 5px;
}

#pa a img {
	border: none;
	text-decoration: none;
}

Then I implemented this right before the closing </body> tag:

<script type='text/javascript'>startAp();</script>

And then in the body/post tag I used this code to display the widgetbucks script, but it doesn't show up...

<div id='pa'>
    <div class='pa_close'><a href='javascript:void(0)' onclick='hideAp()'><img alt='close' src='close1.jpg'/></a></div>
    <![CDATA[<script src="http://api.widgetbucks.com/script/ads.js?uid=8Pzl9RIoirg12yN1"></script>]]></div>

Javascript popup displays, but widgetbucks doesn't. Here take a look, a small square appears on this test website:

http://guitartestblog.blogspot.com/

I'm not a programmer by nature, so what am I doing wrong?