Roundabout Content Slider for Blogger

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
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
Then insert the script in front of it
 Roundabout Content Slider using jQuery for blogger
#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

Step 2 : Apply Javascript

Find This :
Then insert the script in front of it
<!-- jQuery -->
<script src='' type='text/javascript'/>
<script src="" 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);

Step 3 : Apply Gadget

Design -> Click on “Add a Gadget” -> HTML/JavaScript type.
<script style="text/javascript" src=""></script><script style="text/javascript">
 var numposts_gal = 6;
 var random_posts = false;
<script src=""></script>


0 Respones to "Roundabout Content Slider for Blogger"




Blog Promotion, Promote Your Blog
Submit Blog, Blog Directory Submission
Bloggers - Meet Millions of Bloggers Web Design Blogs
blog directory
Online Marketing
Return to top of page Copyright © 2010 | Platinum Theme Converted into Blogger Template by HackTutors