Create a Video Slideshow in Sidebar

This is a wideget for embeddign video. You are able to place one video from video plan to this sidebar by placing the embed code directly into widget content . But we would like a slideshow for video within this widget ,is it feasible ?
Yes,it is possible . We can produce a small slideshow for video within this widget .


Download Loopedslider.js


How to do ?

Do backup before make anychanges

1,Go to Dashboard ->Design - >Edit HTML

2,Upload Looped slider script in your host or host them in blogger .

3,Add script of Jquery framework right after </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
 After this line ,add script of looped slider .
<script src="your_host............./loopedslider.js" type="text/javascript"></script>

4,Add the script to activate loopedslider in the end of template ,right before </body>

<script>
                                             $('.slides1').cycle({ 
                                                fx:     'fade', 
                                             speed:  'slow', 
                                             timeout: 3000, 
                                             pager:  '.pagination' 
                                             });
                                         </script>

5,Add the CSS code right before ]]></b:skin>

.slides1 { position:absolute; top:0; left:0; }
.slides1 div { position:absolute; top:0; width:500px; display:none; }

You can add or remove CSS code to make the slide display as you want .

6,Save changes .

7,Go to Page Elements ,Click on edit link sidebar widget which you want to add video slideshow ,or create a new HTML/Javascript widget .
Paste the HTML markup as structure bellow :
<ul class="slides1">
            <li>
                .............video embed code .............
         
            </li>
<li>
                ................video embed code ..................
                
            </li>
<li>
                 ..................video embed code .............
                
            </li>
        </ul>
    <ul class="pagination">
    </ul>

Save changes .

10,Back to blog and see the result .