Sunday, January 11, 2009

Add javascript in blogspot (blogger) post

Did you ask yourself why in blogspot posts some javascript code works but in some cases don't. In this article you will find answer.

In HTML\Jscript gadgets jscript code work well. But this is not a case in posts.

For example I added this code to my blogspot post and it didn't working.

<a onclick=javascript:showMessage() href="#" >Test</a>
<script language="JavaScript">
function showMessage()
{
alert("Is working in post?");
}
</script>


So this javascript code was inserted in blogspot post (another method is to put javascript code in external file). If you are interested in jQuery inside blogger post check : jQuery on blogspot post.

I couldn't understand why this code doesn't working in blogspot post but in my HTML editor work.

Later I found that this jscript code works well in blogspot post:

<a onclick="alert('This works')" href="#" >Test</a>


Conclusion is that if you put jscript code inside quote code will work. But I was not satisfied with this because I wanted to use jscript function and reuse function code (for example function showMessage() called from multiple places in post). And I didn't find answer how to put jscript function in quote. Find more blogger tips on this blog!


Somewhere I founded tip to make jscript file with jscript code and put this file on the web. After that call jscript function addressing that file.

It shold look something like this:

<script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript">

</script>


I think that this method have too many steps and that is too complicated (you must upload you jscript file somewhere on the web and later call this file from your blogspot post).

After rejecting this method, I take look at my blog source (View source):

<script language="JavaScript">
<br />function showMessage()<br />
{<br />alert("Is working in post?");
<br />}
<br /></script>


There is a problem. In new line. Every time you have new line blogger editor add <br /> tag. Because of this <br /> tag web browser can't execute jscript.

So correct solution for my problem should look like this:

<a onclick=javascript:showMessage() href="#" >Test</a>
<script language="JavaScript">function showMessage(){alert("Is working in post?");}</script>


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


This is example of JavaScript code that works (click on Test to see):
Test

Check more javascript for blogspot samples:


Related articles:
jQuery on blogspot (blogger) post
Problem with HTML table in blogspot post

60 comments:

GK India said...

First, Thanks for providing very useful tips and tricks.

I tried this in one blog post but on clicking the alert message it takes to the top of page. How to overcome it ?

Mark said...

Thank you on your observation.

You should write link code without href="#" and then focus will not go on top page.

Like this:

<a onclick=javascript:showMessage() >Test</a>

I will be happy if you join in my followers or put a link on my blog. :)

GK India said...

Hallo Mark

I will try it. Thanks. I am joining as your followers.

GK India said...
This comment has been removed by a blog administrator.
GK India said...

Hallo Mark,

Thanks as I got the functionalty, I needed, with the help of your guidance. I used JS for a button in my blog at http://www.indiagktime.blogspot.com

However, when I click the Okay in alert message, the page becomes sticky and it does not move up and down. In yours & many other sites it do not happen so that my browser is okay but there seems some other problem with the code. I used the below code (with some button style properties) :

*input type="button" style="margin-left: 0px" style="border:none" style="color:#999999" style="background-color: #fff0e0" value="Click me" onclick=javascript:msg() /$ *script language="JavaScript"$ function msg(){alert("click me");} */script$'

Since HTML tags not allowed in comments So here I have changed left and right brackets with * and $ respectively.

Will you kindly spare some precious time to help me to overcome this problem. Thanks in advance.

Mark said...

Hi GK India.

I try your blog in IE 8 and Firefox and it works ok.

I click the Okay in alert message, and page do not become sticky.

GK India said...

Hallo Mark,

Thanks for your efforts for testing, and feedback. In my browser IE6 problem still persists. May be due to some other reason. Anyways, thanks again.

Anonymous said...
This comment has been removed by a blog administrator.
Kill-Bill said...

Excellent Article!
Awesome Life Gadget

vipin cheriyanveetil said...

For javascript tutorials , examples and sample codes visit the upcoming site
http://javascriptfactory.blogspot.com/

MRR said...

thanks ... I really need it and its work... thanks for sharing :)

Unknown said...

thanks for the usefull tip in javascript....

Work from home India

blogger said...

real nice....usfull for all blogger friends

SMiGL said...

You can add as a template. And best of all to make a separate file.

JavaScript Code Samples said...

Cool stuff, make sure to check out my JavaScript code samples too!

Heleh Hunt said...

Thanks Mark

I will give it a go and see how it works out for me. Thanks. I am joining your RSS.

Anonymous said...

Thank you very much, after spending almost half of my day searching for this bug, I finally found your blog with the correct answer !! Thanks so much !!

Regards,
gob

Unknown said...

Hi Mark,

It was very interesting post. I have a problem and while searching for the solution, I landed here. One of my blog is getting copied using my blog's RSS feed. This autoblog is publishing my full articles without linking back to me and ranking very well in Google. I want such a script which i can include in my blog post and when my content is being displayed on that spammy site. It would replace the content or redirect to my site. Please help me in this regard.

Thanks again for a wonderful post.

Mark said...

To Mobile Geek:

Simple solution is to have one link to your blog or original post in every your post, so when your text is published on autoblog, links to your blog or original post will be copied too.

Or, you can try with jscript command location.href to check url and make redirect if url is not valid.

Something like this:
if (location.href.indexOf("come.to") != -1){
document.write("Thanks for visiting!");
}
else {
document.write("Our new address is http://come.to/......");
}

Eduardo Rolim said...

This can resolve the problem of one-line javscript code: <script type="text/javascrtipt"> //<[[CDATA[

your javascript code here

//]]></script>

J.AJ.MD said...

Hello

How would you execute this action in a blogspot entry? I do not want to put this in the HTML Editor b/c I do not know how to do this. I just want an entry to have a TOC that has chapters and subtopics.

+(which you click on) Chapter Title
(then it would expand to show->)-subtopic
-subtopic
-subtopic
-subtopic

[space]

+(which you click on) Chapter Title
(then it would expand to show->)-subtopic
-subtopic
-subtopic
-subtopic

Can you give me exactly what I need to use? I have been trying to figure this out for hours! :(

www.Richonet.com said...

Thanks for your content.


Thanks,
www.richonet.com
www.oracledba.in

TECHNOFROLIC said...

THANX ! IT WAS RELY HELPFUL

Dan said...

I've had similar problems myself thanks for posting these tips.

Dan said...

These are helpful tips I've been having similar problems myself thanks.

adrian said...

Hy..i have a blog and i want to put a JScript in blog...How can i do that or lod those files...are 4 file that needs to be in blog and i don`t know where to put those scripts to work..if you can respond to my blog...10x

varisphere said...

http://2.bp.blogspot.com/_sPX4FpKP0mg/TEh_STRCUrI/AAAAAAAAAcQ/DBLeBTz6yNY/s320/Edit+HTML+Line+Breaks.gif

In the post options, there are option for Line Breaks and we can choose to use only br tags for line breaks.

I think, it means that "Enter" would no longer interpret as br tags. So, we dont have to create an one-line-code.

I use this method to post your very first code on this article, and yeah, it works.

Magento Open Source Solution said...

OH! Really nice stuff you have provided.Thanks for sharing. really very useful.

Cakephp Programming India said...

Nice Blog for jscript you have shared.

Suresh Raju Pilli said...

Hi Mark,
Thanks for sharing the info. I tried this in my blog ( http://psrdotcom.blogspot.com ). It works for me.

sim only deals said...

Thanks..
good one..

magento themes said...

The tricks are very useful and easy to understand.Thanks for sharing and helping me to solve my coding doubts.

java tutorial said...

I have just started learning computer programming. I found this website very informative. It will help me to get some good programming concepts.

Anonymous said...

Didn't works for me but nice try
Error: google.csi is null or not defined

Ana sumber said...

Does It mean that i Can show any script using this Method?

Sai said...

Thanks for the tip. Is it working for latest blogs also. Direct one-line javascript is working but not with 'script' tags.

Nifty Setups

Eran Smith said...

Nice post.
Thanks for sharing
.net Obfuscators

Sangram Nandkhile said...

Hi

i am trying to add following code in the template..
But i m getting an error that "The plugin requires an href parameter"

I guess the widget is not getting the href parameter..can u help me in putting javascript over there..



How to use document.url to get current url using javascript and instead of data:post.url

Mark said...

To Sangram Nandkhile:

Try without href!

Like this:

<a onclick=javascript:showMessage() >Test</a>

<script language="JavaScript"> function showMessage() { alert("Is working in post?"); }</script>

P. HARRISON PICOT II said...

When I go to preview, I see from page source that my javascript has been cut out, when I hide the preview it is back in the editor. Does that show some other error?

Dan Regaz said...

test of free commenting availability... :)

Nur said...

At the end of the post there is a "Post Options" link, click it and choose "Use
tags", this will forbid blogspot from filling in
s and you can use any compatible js there.

Magento theme said...

In your blog I found so many tips and tricks...Really you observed very keenly...

Michael Feeley said...

Hi Mark,

Thank you for this article and for taking the time to help people out.

I wondered if you or anyone could help me... I am using a java slideshow maker which I've just been told doesn't work with Blogger. But I wanted to know if there is anyway to make it work, maybe something in the code needs changing?

The program produces a set of two codes, the first to go between the head tags in the blogger template and the 2nd to go in the place where I want the slideshow to appear.

If you have the time please could you take a look at the codes below and let me know if you think anything can be done? I'd really appreciate it. Tried to post it here but it's not having it!

All the best anyway and thanks again

Sarah

alfred said...

JavaScript and search engine optimization. You need to gain experience as most of the employers usually look for specialists who hold one year working experience. If you do not have the experience, you can log up to the online training schools, and there are some schools that are free of cost.

javascript jobs

ZeviTa said...

Great post!..thanks for tips..
my problem solved

Μάρσι said...

Thank you so much for this helpfull article!

Jonna Martinez said...

nice tutorial
thanks for sharing

berita terbaru said...

Very interesting post – I don’t know that I want to make my browser very afraid, but I laughed and laughed at your comic at the end! Have a good day!

kamal said...

yes...that works.. I applied same on my website -www.5xdeals.com

Unknown said...

I love jQuery but to add animations to my site either i should use jQuery or GIF file

General knowledge said...

This javascript tutorial works fine on my blogger site.

samsamqqqj said...


I am very enjoyed for this blog. I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information? It is extremely helpful for me
Kansas City Wordpress

niazi said...

This blog awesome and i learn a lot about programming from here.The best thing about this blog is that you doing from beginning to experts level.

Love from

Computerquiz said...

After clicking on the alert message it takes me to the top of the page. Why it is happening?

Sarah Alfred said...

I am new to website development field and currently working as a developer in one of the UK based website development agency. Your this code really helped me a lot. Will be sharing it with my development community.

Elstel said...

This is my first visit to your blog, your post made productive reading, thank you html video scripting with javascript

JavaScript Framework Interview Questions said...

Nice blog with lot of JavaScript stuff to learn.

w3spoint said...

It was such a good post. Visit JavaScript Tutorial. Thanks for sharing.

best said...

tanx