14 September 2011

Roundabout Recent Content Slider for Blogger


Roundabout is jquery plugin that is used to make content slider look like 3d rounding.  Abu Farhan has made a awesome content slider using this script.


Following is the installation procedure:

Step 1: Style

Login to Blogger and go to Template > Edit HTML and look for ]]></b:skin>

Nod following code ABOVE ]]></b:skin>

 Roundabout Content Slider using jQuery for blogger
 By http://www.abu-farhan.com

#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*/
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

Step 2: Script

Now look for </body>
And add following code BELOW </body>

<!-- 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')
 duration: 600 }
 function() {
 // oh no, it's the cops!
 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);
 Save the template.

Step 3: Add Gadget
Now go to Layout Add a Gadget > HTML/JavaScript  and add following code to it and save.

<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 src="http://wegamers.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>

Special thanks to Abu Farhan of www.abu-farhan.com

Related Posts


September 18, 2011 at 1:57 AM

Is there any way to make this more box style as in 150x150 and with the title on top of the picture. Thax.

September 18, 2011 at 8:03 PM

To set box style, in Step 1 code alter values given below
/* Resize Image*/

And title on top of the picture experiment with "margin"

Post a Comment


Twitter Delicious Facebook Digg Stumbleupon Favorites More