Using Jquery plugin Innerfade to create news sticker bar

Have you take a look on my latest template Simplex Enews ? Do you notice in Breaking news ? What do you think about it ? In this post , I will show you a small tip for using this Jquery plugin to make a news sticker like that and more ^^

To make this news sticker ,I use InnerFade script . InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out.
These elements could be anything you want, e.g. images, list-items, divs. It can be used to make a slideshow, advertising banners or stickers ,animation...


Live Demo

A,Make a Sticker

1,First of all ,create a HTML/Javascript widget in Blogger for script and HTML code .
2, We have a HTML code like that .
Change the text and link to whatever you want . You can add some CSS code to make it look better .

3,Now add a little Jquery to make it work :
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="http://simplexportfolio.googlecode.com/files/jquery.innerfade.js"></script>
        <script type="text/javascript">
       $(document).ready(
                function(){
                    $('#news').innerfade({
                        animationtype: 'slide',
                        speed: 750,
                        timeout: 2000,
                        type: 'random',
                        containerheight: '1em'
                    });   
            });
      </script>
Ok,save it ,and we have a sticker

B,Make an advertising banner

1, We have a code like that :
<ul id="banner">                   
                    <li>
                        <a href="......"><img src="banner1.jpg"  /></a>
                    </li>       
<li>
                        <a href="......"><img src="banner2.jpg" /></a>
                    </li>   
<li>
                        <a href="......"><img src="banner3.jpg"  /></a>
                    </li>   
<li>
                        <a href="......"><img src="banner4.jpg" /></a>
                    </li>           
                </ul>

You can add or remove banner by add or remove <li>    <a href="......"><img src="banner....jpg" /></a>
                    </li>  for more or less banner.
2,The Jquery code like example A :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="http://simplexportfolio.googlecode.com/files/jquery.innerfade.js"></script>
        <script type="text/javascript">
       $(document).ready(
                function(){
                    $('ul#banner').innerfade({
                        speed: 1000,
                        timeout: 5000,
                        type: 'sequence',
                        containerheight: '220px'
                    });
            });
      </script>
 Ok,save it and we are done .

C,So the structure to call Innerfade 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="http://simplexportfolio.googlecode.com/files/jquery.innerfade.js"></script>
        <script type="text/javascript">
       $(document).ready(
                function(){
        $('ID or class of the element containing the fading objects').innerfade({ 
    });
      </script>
 That's all for Innerfade Jquery plugin . Although simple but I think this plugin is very useful .If you need a light-weight , fast Jquery plugin for making a news sticker or rotating banner ,it's the plugin for you .