Bismillah, Alhamdulillah

Skip to Content

Roundabout Content Slider for Blogger

August 7th, 2011

Roundabout is very famous jquery plugin that make content slider look like 3d rounding. This plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. Now I make this plugin automatic catch image from the post of blogger to Content Slider of Round About.

you can see the slider for blogger from this image

Round About Slider for Blogger

Demo

Now Follow all of these steps

Step 1 : Apply Style

  1. Login to Blogger Dashboard and navigate to Layout > Edit Html
  2. Don’t click the checkbox which says ‘Expand Widget Templates’
  3. Find this
]]></b:skin>

Then insert the script in front of it

/* START
--------------------------------------------------------------------
 Roundabout Content Slider using jQuery for blogger
 By http://www.abu-farhan.com
--------------------------------------------------------------------
 Roundabout
*/
#featured                            {margin:10px 0 30px 0;}
#folio_scroller_container            {margin-top:35px; margin-bottom:40px; height:auto;}
#folio_scroller_container .roundabout-holder {list-style:none; height:400px; margin:0px auto 20px auto;}
.roundabout-holder                    {list-style:none; width:400px; height:250px; margin:0px auto;}
.roundabout-moveable-item             {font-size:12px!important;
/* Resize Image*/
height:180px;
width:350px;
/*-------------*/
cursor:pointer; padding:5px; border:1px solid #aaaaaa; -webkit-border-radius:5px; -moz-border-radius:5px; background:#f9f9f9;}
.roundabout-moveable-item img         {height:100%; width:100%; background-color:#FFFFFF; margin:0;}
.roundabout-in-focus                 {cursor:auto;}
.roundabout-in-focus:hover            {-webkit-box-shadow:0px 0px 20px #787878; -moz-box-shadow:0px 0px 20px #787878; background:#f9f9f9;}
.roundabout-holder span                {display:none; font-size:12px;}
.roundabout-in-focus:hover span        {display:inline; position:absolute; bottom:5px; right:5px; padding:8px 20px; background:#f9f9f9; color:#000000; z-index:999; -webkit-border-top-left-radius: 5px; -moz-border-radius-topLeft: 5px; font-size : 12px;border-left:1px solid #aaaaaa; border-top:1px solid #aaaaaa; }
.roundabout a:active,
.roundabout a:focus,
.roundabout a:visited                {outline:none; text-decoration:none;}
.roundabou li                         {margin:0}
a img                                {border:none; outline:0;}

/* END
--------------------------------------------------------------------
 Roundabout Content Slider using jQuery
 By http://www.abu-farhan.com
--------------------------------------------------------------------
 Roundabout
*/

Step 2 : Apply Javascript

Find This :

</body>

Then insert the script in front of it

<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/jquery.roundabout-1.1.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 jQuery(document).ready(function($) {
 var interval;
 $('#featured ul')
 .roundabout({
 duration: 600 }
 )
 .hover(
 function() {
 // oh no, it's the cops!
 clearInterval(interval);
 },
 function() {
 // false alarm: PARTY!
 interval = startAutoPlay();
 }
 );
 // let's get this party started
 interval = startAutoPlay();
 });
 function startAutoPlay() {
 return setInterval(function() {
 jQuery('#featured ul').roundabout_animateToNextChild();
 }, 5000);
 }
 </script>

Step 3 : Apply Gadget

Design -> Click on “Add a Gadget” -> HTML/JavaScript type.

<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-roundabout.js"></script><script style="text/javascript">
 var numposts_gal = 6;
 var random_posts = false;
</script>
<script src="http://abu-farhan-demo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>

Demo


Categories: Content Slider, Widget

Tags: , , ,

Abu Farhan

I'm an Owner of this blog and it's always been a passion of mine to write about Blogger. I like to make original script for blogger. I also run the awesome Website at The Best Lists.

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or Comments RSS Feed

Donate towards my web hosting bill!

Trackback
Leave a response

24 Responses to “Roundabout Content Slider for Blogger”

  1. Blogger says:

    thnkz Admin ! very usefull widget

    u know what am just open any blog and find ur Blog widget countdown great!!

  2. Blogger says:

    Really nice talk. Very interesting and informative

  3. Narender says:

    Awesome slider collection Abu Farhan Bro.But i need something apart.It should be featured content slider whose Url and Images can be edited.I should look like a slide show.
    For example of slider you can see my enemy’s website :- http://www.satishlecturer.com/
    He has a magazine slider on footer.Me too wanna have like this one.

  4. Kevin Envoy says:

    importantly, article submission sites rely on good…

    quality content which they know will provide value to their readers. it is good to try and find a hidden sub-category to write around to provide new breakthrough content.once you have found your subject area and have some good understanding of…

  5. Catherine says:

    Can you customize it to show only post of a certain label? Is there any way to choose which photo is shown from the blog?

  6. nash says:

    thanks Mr. Abu Farhan that’s usefull info..

  7. sanjhar says:

    I want to make this image slider how to do so..
    just image slider without links

  8. Ahmed says:

    Thank you for this add-on, great blog

  9. bangjasmin says:

    assalamualaikum,…bos mungkin nggak pada saat hover, selain judul posting dimunculkan juga tanggal posting,……(hehehe asa loba kahayang)

  10. Raj says:

    Thanx! I’ve Done! Pls. Check it..

  11. xart269 says:

    I use ‘http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js’ in blog and use ” Roundabout Content Slider for Blogger”
    it does not work . Pls help me .Tks .

  12. Christina says:

    Is it possible to reset the easing after hover… basically, the part where the hover stops – false alarm: PARTY!… the interval is set to 5000. What I’d like to be able to do is have it where it moves immediately to the next image when you take your mouse off the image and then starts back at the 5000 interval. Does anyone know how to accomplish this?

  13. Miriam says:

    Hey there! I don’t know why but some how this only works in my labels pages, but not in the static or item pages? Can you help me find some solution? Thanks!

  14. Psd River says:

    realy very usefully post………….. I create that

  15. Sebastian says:

    Saya tidak dapat memasangnya di blog saya… Why this is happening?

  16. Grande Abu ! Já estou produzindo vários templates com seus slides. Farei um post depois para indicar seus slides. Beijos do Brasil.

  17. Beben Koben says:

    haduh…so amazing my master…
    it’s a good content slider…hohoho
    Terima kasih^^

  18. [...] more: Roundabout Content Slider for Blogger | Blogger Templates and … This entry was posted in Uncategorized by admin. Bookmark the [...]

  19. daniel says:

    Thank you for that.

    Does it supposed to pick the post title as well?

    I wonder if you could help me to show the post title as well.

    thank you in advance

Leave a Reply


two + three =

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen