Awesome Automatic Content Slider for Blogger using jQuery Part 2
July 8th, 2011
Bismillah…
Installation method is almost the same as the previous tutorial … Awesome Automatic Content Slider for jQuery using Blogger Part 1 …
On the content slider this time (Awesome Automatic Content Slider for jQuery using Blogger Part 1) I use the style from Slick Slideshow and a little adjustment that can be used on Blogger …
Just follow the steps below … I’m sure there will be no problem …
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
--------------------------------------------------------------------
Awesome Automatic Content Sliders for Blogger using jQuery
By http://www.abu-farhan.com
--------------------------------------------------------------------
Slick Slideshow
*/
#slideshow { margin:0 auto; width:640px; height:263px; background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-bg_slideshow.jpg) no-repeat 0 0; position:relative; }
#slideshow #slidesContainer { margin:0 auto; width:560px; height:263px; overflow:auto; /* allow scrollbar */ position:relative; }
#slideshow #slidesContainer .slide { margin:0 auto; width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */ height:263px; }
/** * Slideshow controls style rules. */
.control { display:block; width:39px; height:263px; text-indent:-10000px; position:absolute; cursor: pointer; }
#leftControl { top:0; left:0; background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-control_left.jpg) no-repeat 0 0; }
#rightControl { top:0; right:0; background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-control_right.jpg) no-repeat 0 0; }
.slide h2, .slide p { margin:15px; font:normal 11px Verdana, Geneva, sans-serif; color:#ccc; }
.slide h2 { font:italic 24px Georgia, "Times New Roman", Times, serif; color:#ccc; letter-spacing:-1px; }
.slide img { float:right; margin:0 15px; }
/* END
--------------------------------------------------------------------
Awesome Automatic Content Sliders for Blogger using jQuery
By http://www.abu-farhan.com
--------------------------------------------------------------------
Slick Slideshow
*/
Step 2 : Apply Gadget
Design -> Click on “Add a Gadget” -> HTML/JavaScript type.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
});
</script>
<!-- Slideshow HTML -->
<div id="slideshow">
<div id="slidesContainer">
<script type="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-slick-slideshow.min.js"></script>
<script style="text/javascript">
var numposts_gal = 6;
var numchars_gal = 150;
var caption_position = 'right'; // top,bottom,left,right -> choose one
var random_posts = false; // random posts
</script>
<script src="http://abu-farhan-demo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>
</div>
<!-- Slideshow HTML -->
if you have any questions please leave a comment….thx u
Alhamdulillah… by Catur
Another post about the Automatic Content Slider for Blogger :
39 Responses to “Awesome Automatic Content Slider for Blogger using jQuery Part 2”
Leave a Reply
PLEASE DONATE MY BLOG
Social Network
Nice collection, thanks for sharing!
it seems that the code is not functioning on my blog. Already did what you said above but nothing… any ideas?
face i enjoy everything to do with…
this type of site. one of the best aspects is my ability to interact with the church sites community. i get to write articles like this one to help promote the use of the internet to tell the world about god’s…
adsense units full of text ads …
image ads (you can customize). and you’ll start earning each time the ads are clicked by your visitors.problem arises for getting adsense approvalnowadays, its a very hard job to get your adsense approved (specially for indians). various new terms of …
is reading it then what’s the point?there…
are several ways to capture an audience and draw people to your blog. it is your job once you have captured their attention to keep it. below is a list of 6 ways that you can increase readership and traffic that…
for relevant contents to the site; •…
articles on the web can prove that they are the authorities on the subject and people interested in the subject will come back again and again to the site; • it will help the customers if the contents are relevant and…
yeees thank you 3arabi
[...] for your blog : Tips on writing unique Meta DescriptionHow to write a better meta descriptionAwesome Automatic Content Slider for Blogger using jQuery Part 2jQuery(document).ready(function($){ if (navigator.platform == "iPad") return; [...]
Hi … this’s best post i have ever seen but …
i want the images in this slide resized automatic
i tried to use
img {
width: 300px;
height: 200px
in many place in css but all resized except the images
so can you till me how to resize images from css code .. ?
i see it’s long and i tried but i faild ,, i need images of posts in slide auto resized in same height and width … i wait your reply =)
Hello, and thank you for this excellent slider. I hope you can help me on the 2 problems I got. Here is my test blog : http://test-mgz.blogspot.com
> Picture appears in the slider, but no title or excerpt are showing.
> How can I change the feed to grab a label specifically ?
I understand it should be around here, but where ?
Thanks in advance, hope you can help.
Mat
thank u again. i use this my blog. i ask some questions. my post reply sometimes not each time, i have about 300 post. why? anda only see title and pictures. your example pic includes some part of post
thank u so much this post its very useful
in the slider post titles lines look to too close to each other
How can/where can I change in the script to make the lines are apart from each other just a bit more space between the lines
or change the font size of the post titles to look smaller
thank you
The Script Given by You not Running on my blog y? i have paste this script after
]]> this am i right ?
not after but before ]]>…
How to resize this slider?
on Step 2
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $(‘.slide’);
change slideWidth as you want..
Hello sir this is a fantastic idea! Is there a way to make it so it also automatically flips through the slides, like some sort of timing? Otherwise, great idea to have it automatically read the feed and use any image size.
[...] Awesome Automatic Content Slider for Blogger using jQuery Part 2 [...]
[...] Awesome Automatic Content Slider for Blogger using jQuery Part 2 [...]
nice..i will use this for my blog soon, can i save the code plz???
hmmm..abu farhan, can you help me how can i get a related post like your own? ^^
its awesome but frnd i want automativb slider
nice post, I going to my blog now
visit back
hellowww….
i have create your clue and edit some but i did not make it
this my test blogs
http://open-test.blogspot.com/
already running but i need just image only, not include the tittle,
how to clear the tittle ?
pls help…
must change the javascript and css styles..
how to edit javascript file, wich file i must edit ?.
how…. ???
Automatic Content Slider with Image Only.
I already make for image only
U just need to change the source file of javascript.
http://accordion-template.googlecode.com/svn/trunk/galleryposts-slick-slideshow-min.js
to:
http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-slick-slideshow-image-only.min.js
Thx A lot Bro :)
It would be awesome if you guys make one using NIVO SLIDER. It’s the best free content slider, it has some awesome transition effects and very customizable, really superior.
Please take a look on it http://nivo.dev7studios.com/
Hi dante how are you ?
Now I’m busy so my student manage my blog.
I know about nuvo and coin slider but it can’t show image in any size. The size is original size of image.
Assalamualaikum brother ^_^
by the way i want to ask you (exactly a request), do you know how to have an image slider preloading jquery like this one:
http://readerchains.blogspot.com/2011/07/ao-no-exorcist-07.html
i think its very good because its make the page more lighter, i want posting my photo collection like that, thank you very much ^.^
wa’alaikumsalam
It used javascript to call image location. this method very difficult because he make manual the image url link.
Oh, the demo seems that the contents not sliding :(
You have to click arrow button to slide.
so why “automatic” on the name?!
can I change colours?
Automatic to show your images and post contents. Yes you change from the css
Does this one capture the contents from feed? How many can we set to display?
yes this automatic from Feed. dont use too many post it will slow your loading time
Thank you.
“full post feed in dashboard custumization” You mean in the Blogger admin panel ? Cause it’s already set to “full”.
Thanks