Create a video slideshow in sidebar

12/26/2011 27 comments nhamngahanh

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

Tags:

Sharing is sexy


Related posts

27 comments for this post

  4. Nice tutorial, dude. Is this compatible for all video resources? Such as youtube, metacafe, dailymotion??

    ReplyDelete

  7. nhamngahanh , Can I use this video slider for simplex blognews template ????????????/

    ReplyDelete

  8. @ireng ajah : yes ,it work for all video services . Just use the right video embed code .
    @MY RAMANTHALI : Yes,it can use for any simplex's templates . But remember to backup before make any changes and follow each step as I wrote above .

    ReplyDelete

  9. 1-where's looped slider script

    2-can you make templet like in "boswtol.com"
    espically the sliders in labels called 'صحه و جمال , فى الملعب , ثقافه و
    ادب'

    3-thanks to your great efforts ..

    ReplyDelete

  10. link of Loopedslider js not working
    https://a248.e.akamai.net/assets.github.com/images/modules/404/parallax_errortext.png?1315937507
    check it

    ReplyDelete

  11. @shady Khatab : you can search for loopedslider.js in google

    ReplyDelete

  13. how to insert flash file in the blog article (directly without the need to upload to these sites)?

    ReplyDelete

  14. @Arya Kamandanu : inserting embedded code into the post in HTML mode .

    ReplyDelete

  15. hi @nhamngahanh thanks for all your template.

    i have 1 question: how we can add comment reply on your template, google has release comment tread.. please update your blog. thanks

    http://www.myreviewsforall.com/

    ReplyDelete

  16. @my review data : Ok ,I will try to update soon .

    ReplyDelete

  17. nhamngahanh,I tried the video slideshow, its working thnx

    but i hav one problem, while change the slide its not a smooth changing, its look like as a jumb ,why its happening?

    here is my blog : http://www.myramanthali.in/

    ReplyDelete

  18. nhamngahanh, I cannot play the video in a slideshow catagory, when i play the video immediately go to the next video, video not play full

    ReplyDelete

  19. @MY RAMANTHALI : I found no video slideshow in your blog . Maybe a problem in loading or javascript is not loaded full ,so you see it now smooth transition

    ReplyDelete

  20. nhamngahanh, I publish many comments in your SimplexEnews - the latest version. but its not showing there, Why???

    ReplyDelete

  21. ñ slide because the work I'm from Brazil and I wanted to also utilize this templante to fix unless you friend?

    ReplyDelete

  22. nhamngahanh, I hav submit many comments in your SimplexEnews - the latest version. but its not showing there, Why???

    ReplyDelete

  23. @MY RAMANTHALI : it's the problem with Blogger . It consider all commend which contain links ,comments repeated many times .... are spam and move to spam list .

    ReplyDelete

  24. great news thanks for your template.

    ReplyDelete

  25. Sinto muito, mas não consegui instalar.
    Poderia explicar mais detalhadamente, por favor?

    ReplyDelete

  26. quero que explique com mais detalhes a instalação do loop slider no simplex enews, ainda não consegui fazer isso.

    aguardo ajuda.

    ReplyDelete

Here are some rules for commenting on Simplex Design blog :
1,Search first ,then ask question . You will get the answer faster
2,All comments except spams are welcome .
3,Please make all requests in English .
4,Do not use generic titles such as Admin or Mod .This confuses readers

Newer Post Older Post Home