Cover Flow based content slider for blogger

Hello friends , Today i am sharing a very cool content slider for your blog which is powered by the effect used by iTunes and other Apple products , this effect is commonly known as Cover Flow.
This is originally written by Sebastian Kutsch and optimized for used by blogger by me.

This is easy to install and awesome in looks , have a look on its features.

Supports all major browsers and loads quickly
Applies reflection effect automatically to images
Scrolling can be done via Keyboard , mouse and scroll-bar

So lets start adding this to our blog.Firstly open Edit HTML from template designer.

Now look for </head> and replace it with the code below -
---------------------------------------------------------------------------------------------------------------
<script language='JavaScript' src='http://dl.dropbox.com/u/42114534/contentflow.js' type='text/javascript'/> </head>
---------------------------------------------------------------------------------------------------------------
Now Goto edit Layout option from your Blogger Dashboard and click on Add a gadget.
Its recommended that you add the widget above the posts section.

Now Scroll down add HTML/JavaScript gadget and copy the following code in it.

---------------------------------------------------------------------------------------------------------------
<div class="ContentFlow">
            <div class="loadIndicator"><div class="indicator"></div></div>
            <div class="flow">
                <img class="item" href="link1" src="image-location1" title="Your_Image_Title"/>
                 <img class="item" href="link2" src="image-location2" title="Your_Image_Title"/>
                 <img class="item" href="link3" src="image-location3" title="Your_Image_Title"/>


            </div>
            <div class="globalCaption"></div>
            <div class="scrollbar"><div class="slider"><div class="position"></div></div></div>
        </div>
---------------------------------------------------------------------------------------------------------------------

Please note the things for better use and lesser bugs.

You can use <img class ='item' .... tag for adding each item
Please add at-least four three items for full functionality and more would be better.

Thanks for reading and dont forget to share

Blogger Radar

Pages

Cover Flow based content slider for blogger