Friday, March 21, 2008

Posted by catacc at 5:31 PM

Blogger how to - insert a script in blog - method 1

Ever wanted to install a script in your blog, to do what ever you want to do? Maybe to apply a cool effect on some pictures, with fading and sizing animations, or maybe to count your blog visitors?

The Blogger xml template is a little difficult to handle in order to have a satisfactory result, without compromising the template integrity.
Well, if you want to do it, you have 3 options, each of them being suited for different approaches.

1. insert your script in the blogger xml template as a link to another hosting domain;
2. insert your script in the blogger xml template, as source code;
3. insert your script in another html widget, as source code.

Warning: inserting anything, or modifying the xml template may destroy your blog, so be careful.
Backup your xml template every time you modify it, by clicking the "Download Full Template" link in the Layout -> Edit html page of the blog admin area.

Let's take them one by one:
1. inserting the script in your xml template by linking it to another site.

You have a script and you want to run this script in your blog.
By default, the Blogger engine of the blog will scan your xml template and removes any block codes which are not suitable for the XML format. As you may (not) know, the xml architecture is a little different than the script one, so writing code pieces in the unsuitable format may ruin all your work.

You can save the script as .js file and host it at some place on the web.
So, in your xml template of the Blogger, insert the following line somewhere in the head section (between <head> and </head> tags):
<script src="path_to_your_script_file" type="text/javascript"></script>

Example: <script src="http://mydomain.com/myscriptfile.js" type="text/javascript"></script>

That's it.
The disadvantage of this method is that every time the external hosting domain is not available (maybe the server on which is hosted is not running), the script will not run also into your blog, so those cool effects that you wanted for your visitors are not available at all.

A second method of the tutorial will be available soon.

As an example on what to do with a script, click onto the following picture and you may see a beautiful enlarge/fade effect.

example picture for an enlarge/fade effect

e-mail e-mail this post to a friend Labels:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)