Create a video slideshow in sidebar

In SimplexBlognews ,Simplex Enews templates and many other templates ,there's a widget for embedding video . You can insert one video from video service to this sidebar by inserting the embed code right into widget content .
But we want a slideshow for video in this widget ,is it possible ?
Yes,it's possible . We can make a small slideshow for video in this widget .



Download Loopedslider js
Want a demo ? Please see in Demo of SimplexEnews template ,I added a slideshow for video in the right sidebar.

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 .

That's all for video slideshow in sidebar . I hope it helpful to you . Free to leave comment here