Try the Most Addicted Game - Real Rocket Racing 3d Game

Friday, April 20, 2012

Pin It


Rotating jQuery Content Slider Gadget for your website

This content jquery gadget is a famous one you definitely like it. It slides the recent posts in 3D rounding style. It has a feature that it automatically catches the images from the posts along with the title of the post.

Lets see how to add it to your blogger.
  • Login to Blogger Dashboard and navigate to Template > Edit Html
  • Don’t click the checkbox which says ‘Expand Widget Templates’
  • Find this ]]></b:skin> 
  • Then paste the below code before ]]></b:skin>

 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
 Content Slider using jQuery

Note: In the above code you can edit the highlighted code which is in red color as your wish to adjust the width and height.
  • Next find </body>
  • Paste the below code before </body>
<!-- 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);

Note: In the above code you can modify the highlighted code(red color) to set the rotation speed.

  • Now goto Layout -> Click on “Add a Gadget” -> HTML/JavaScript type and paste the below code.
<script style="text/javascript" src=""></script><script style="text/javascript">
 var numposts_gal = 6;
 var random_posts = false;
<script src=""></script>

That's it.


Post a Comment