Turn your photos & videos into pure amazing.

Animoto automatically produces beautifully orchestrated, completely unique video pieces from your photos, video clips and music. Fast, free and shockingly easy. -Animoto

Here's a sample of an Animoto image music video:



Pretty cool right?

Its not just cool, its also easy to use. As simple as step 1;


2..... ,


......3.



Now and see for yourself.

You can also use Animoto for:

Read more >>

• 1 comments

WP-Clear blogger template.

This is my latest work, The WP-clear theme for blogger blog. See it in live action here. But it doesn't look like the original one so please bear with it. I haven't post the tutorials yet, coz its pretty long and quite complicated. There may be some revisions too. In the meantime, feel free to explore the Alexiel version of WP-clear. Lol!

Live demo

Read more >>

• 0 comments

10 Photoshop (PSD) Web Templates

Here are the 10 photoshop (PSD) templates for you. Codes are not included in the template, only a PSD (.psd) format template which can be open using an Adobe Photoshop.

1. Your Design
Author: Feenwick
DOWNLOAD PHOTOSHOP WEB TEMPLATE



2. Clan Template
Author: blazedryan
DOWNLOAD PHOTOSHOP WEB TEMPLATE



3. Halloween Template
Author: Apokalypse AT
DOWNLOAD PHOTOSHOP WEB TEMPLATE



4. Template 1 PSD
Author: An1ken
DOWNLOAD PHOTOSHOP WEB TEMPLATE



5. Personal Portfolio Page Layout
Author: Elhadibrahimi
DOWNLOAD PHOTOSHOP WEB TEMPLATE



6. Business Website Template
Author: PAULW
DOWNLOAD PHOTOSHOP WEB TEMPLATE



7. RD Web Layout PSD
Author: PAULW
DOWNLOAD PHOTOSHOP WEB TEMPLATE



8. Full PSD Gaming Layout
Author: Sundox
DOWNLOAD PHOTOSHOP WEB TEMPLATE


9. Halloween Template
Author: Velvet Elvis Design
DOWNLOAD PHOTOSHOP WEB TEMPLATE


10. Vista-Themed Template
Author: soflyfx
DOWNLOAD PHOTOSHOP WEB TEMPLATE

Read more >>

• 3 comments

A simple text ticker.

It is nothing more than a simple JS text effect. Pretty cool. See live demo here. Its on the right sidebar.

It's easy to install too. Just go to Layout -> Add gadget -> HTML/Javascript. Add the code below then save it.

<script language="JavaScript">
<!--
// 1996 by Christoph Bergmann... http://acc.de/cb
// Please keep this note...
// global variables
var max=0;
function textlist()
{
max=textlist.arguments.length;
for (i=0; i<max; i )
this[i]=textlist.arguments[i];
}
tl=new textlist
(

"Alexiel-the blogger design blog!"
);
var x=0; pos=0;
var l=tl[0].length;

function textticker()
{
document.tickform.tickfield.value=tl[x].substring(0,pos) "_";

if(pos ==l)
{
pos=0;
setTimeout("textticker()",1000);
x ;
if(x==max)
x=0;
l=tl[x].length;
} else
setTimeout("textticker()",50);
}
// end -->
</script>
</head>
<center><h1>A Simple Text Ticker</h1></center>
<script language="JavaScript">
<!--
document.write("<CENTER><FORM NAME=\"tickform\">");
document.write("<INPUT TYPE=\"TEXT\" NAME=\"tickfield\" SIZE=\"48\">");
document.write("</FORM></CENTER>");
textticker();
//-->
</script>

To edit, follow this guidelines:
text to be display: just edit the colored green text (refer colored text above code)
title: the colored orange text is the title of your script, its up to you if you want to add or remove this part
length: the colored red text is the length of the box or form

enjoy :D

Read more >>

• 4 comments

Random banner ads on blogger.

This trick is similar with my tutorials on random images in Php. However, we used javscripts instead of a php. This JavaScript will print out a random banner ad each time your page is viewed. You need to reload the page to see a new banner load everytime. See live demo here.

On my live example click any title or link on the blog to see the effect of the script. The example are the banners below the title. If you noticed, there are three different banners, each has a link.

To add in blogger, Go to Layout -> Add gadget -> HTML/Javascript. Add the code below, then save it.

<SCRIPT LANGUAGE="JavaScript">



<!-- Begin
var how_many_ads = 3;
var now = new Date()
var sec = now.getSeconds()
var ad = sec % how_many_ads;
ad =1;
if (ad==1) {
txt="The World's Largest Online Bookstore, Amazon.com";
url="http://www.amazon.com";
alt="amazon.com";
banner="http://imageserv.imgis.com/images/Ad12669St1Sz1Sq1_Ban1.gif";
width="468";
height="60";
}
if (ad==2) {
txt="Palm III by 3Com, in stock!";
url="http://cybershop.com/";
alt="cybershop.com";
banner="http://imageserv.imgis.com/images/Ad13189St1Sz1Sq5_Ban10.gif";
width="468";
height="60";
}
if (ad==3) {
txt="Find it at GoTo.com";
url="http://www.goto.com";
alt="goto.com";
banner="http://imageserv.imgis.com/images/Ad13700St1Sz1Sq1_Ban1.gif";
width="468";
height="60";
}
document.write('<center>');
document.write('<a href=\"' url '\" target=\"_top\">');
document.write('<img src=\"' banner '\" width=')
document.write(width ' height=' height ' ');
document.write('alt=\"' alt '\" border=0><br>');
document.write('<small>' txt '</small></a>');
document.write('</center>');
// End -->
</SCRIPT>

Notes: refer the colors on the above code

txt: the colored green text in the code represent the description of the banner/ad
url: is the link of the banner ad, the red colored text
banner: the image url or the source of your image link
alt: alterantive text of an image or banner/ad

Unfortunately, I still don't know how to make it work inside the blogger post. But it may work if we add it directly in the template within blogger posts.

Read more >>

• 0 comments

Marquee codes/text in blogger posts.

Marquee codes allows your text to scroll or anything else for that matter by using the <marquee> tag.

You can generate marquee codes online here.

Slide-in text
This text slides in from the right, then stays where it is. You will need to refresh this page to see the effect again.

<marquee behavior="slide" direction="left">Your slide-in text goes here</marquee>

Example of Slide-in text:

This is a slide in text

Continuous scrolling text

<marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee>

Example of Continuous scrolling text:

Your scrolling text goes here

Text bouncing back and forth

<marquee behavior="scroll" direction="up">Your upward scrolling text goes here</marquee>

Example of Text bouncing back and forth:

Your bouncing text goes here

Text Scrolling Upwards

<marquee behavior="scroll" direction="up">Your upward scrolling text goes here</marquee>

Example of Text Scrolling Upwards:

Your upward scrolling text goes here

Change the Scrolling Speed

<marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee>

Example of Change the Scrolling Speed:

Slow scroll speed
Medium scroll speed
Fast scroll speed

Scrolling Images

Just replace the image source.

<marquee behavior="scroll" direction="left"><img src="your-image-here.gif" width="100" height="100" alt="image" /></marquee>

Example of Scrolling Images:

Images & Text (Both Scrolling)

Simply add your text under the image tag (but still within the marquee tags).

<marquee behavior="scroll" direction="left">
<img src="you-image-here.gif" width="100" height="100" alt="image" />
<p>Sample text under a marquee image.</p>
</marquee>

Example of Images & Text (Both Scrolling):

Sample text under a marquee image.

Read more >>

• 0 comments

Add Favicon in blogger blog.

A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16, 32×32 or 64×64 pixel square icon associated with a particular website or webpage.[1] A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab. -Wikipedia definition

There are quite a number of free favicons on the net. You may also create one online.

To add favicon in your blogger blog, go to dashboard -> edit HTML -> find this code below:

<title><data:blog.pageTitle/></title>

Copy and insert the following code below the line:

<link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

or use this code:

<link href='URL of your icon file' rel='icon' type='image/vnd.microsoft.icon'/>

Remember to type in the “URL of your icon file”.
You may also want to add the favicon link before the </head> of your blogger template.
Now, save your template. For image type favicon, like .png and .gif you should link them like this:

For PNG format:

<link href='URL of your icon file' rel='shortcut icon' type='image/png'/>

For GIF format:

<link href='URL of your icon file' rel='shortcut icon' type='image/gif'/>

Where to host your favicon?

You may host your favicon file in any web hosting sites that supports the file .ico, images type and allows hotlinking. So far, I'm using this server to host all my external link files, visit here.

Read more >>

• 2 comments