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
Now Follow all of these steps
Step 1 : Apply Style
- Login to Blogger Dashboard and navigate to Layout > Edit Html
- Don’t click the checkbox which says ‘Expand Widget Templates’
- 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>
24 Responses to “Roundabout Content Slider for Blogger”
Leave a Reply
PLEASE DONATE MY BLOG
Social Network
thnkz Admin ! very usefull widget
u know what am just open any blog and find ur Blog widget countdown great!!
Really nice talk. Very interesting and informative
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.
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…
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?
thanks Mr. Abu Farhan that’s usefull info..
I want to make this image slider how to do so..
just image slider without links
Thank you for this add-on, great blog
assalamualaikum,…bos mungkin nggak pada saat hover, selain judul posting dimunculkan juga tanggal posting,……(hehehe asa loba kahayang)
Thanx! I’ve Done! Pls. Check it..
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 .
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?
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!
realy very usefully post………….. I create that
Saya tidak dapat memasangnya di blog saya… Why this is happening?
tidak bisanya dimananya?…
Grande Abu ! Já estou produzindo vários templates com seus slides. Farei um post depois para indicar seus slides. Beijos do Brasil.
haduh…so amazing my master…
it’s a good content slider…hohoho
Terima kasih^^
Sama-sama, masih eksis aja kamu ben. Mau tricks apa lagi nih yang perlu ditampilkan?
apa lagi yak…hihihi
perasaan dah semua kalo blogspot, mentok disitu-situ juga bos…
paling omptimasi saja nih…xixixix
[...] more: Roundabout Content Slider for Blogger | Blogger Templates and … This entry was posted in Uncategorized by admin. Bookmark the [...]
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
Already show if you hover the mouse to the front image you can see the title
Excellent work.
If you also add an option to show the title without mouseover later on, that would be great as well.
Thank you indeed for this excellent work Abu