You are on page 1of 7

8/24/2015

FlexSlider Basic Image Slider Widget for Blogger ~ ISFB

Image Slider For Blogger

All image slider for Blogger and content slider is here.
Home

JavaScript Slider

jQuery Slider

CSS3 Slider

FlexSlider Basic Image Slider Widget for
Blogger
Like

14

Tweet

0

12

448

Blog Archive
▼  2014 ﴾1﴿
▼  January ﴾1﴿
FlexSlider Basic Image Slider Widget
for Blogger
►  2013 ﴾5﴿

Follow by Email
Email address...

Submit

Popular Posts
FlexSlider Basic Image
Slider Widget for Blogger
This is a responsive jQuery
image slider. This simple
but amazing slider
developed by woothemes.com. It has
some really nice features th...
Pure CSS3 Image Slider for
Blogspot ﴾Cycle Style﴿
Here I came up with a
stylish and hot image slider
for blogger that is just
using pure CSS3. No Javascript or jQuery
is used. So this ...

This is a responsive jQuery image slider. This simple but amazing slider developed by
woothemes.com. It has some really nice features that makes you like it. The most cool feature is it is
extremely responsive and lightweight; you don't have to tensed about the sliders width / height even
all images width and height are auto adjustable. Here it is customized for blogger/blogspot so you
can just copy and paste the code to install on your blogger blog. Check out the live demo below.
Slider DEMO1 ﴾Blogspot﴿
Slider DEMO2 ﴾Static﴿

Let’s Install the FlexSlider Image Slider Widget in Blogger
1. Go to Blogger Dashboard > Layout > Add a Gadget Select HTML/Javascript 
2. Copy the code below and paste on it.

jQuery Image Slider﴾wow
slider﴿ with Thumbnails for
Blogspot
Here I came up with
another awesome image
slider for blogspot. This is a 'jQuery
Image Slider with Thumbnails' created
by WOWS...
Add JavaScript Image
Slider to Blogger Easily
Here I’m sharing a cool
JavaScript image slider for
blogger. It could be easily
usable as featured content on blogger
blog. This image s...
jQuery Carousel Slider for
Blogger ﴾FlexSlider﴿
This is a responsive jQuery
carousel slider. This
amazing slider developed
by flexslider.woothemes.com. It has
some really cool features ...
Nivo Slider ‐ jQuery Image
Slider For Blogger
Today I'm sharing another
awesome, beautiful image
slider for Blogger/
BlogSpot blog. It is made with jQuery.
and of course HTML ...

http://imagesliderforblogger.blogspot.in/2014/01/flexslider­basic­image­slider­widget.html#.Vdsuvfmqqko

1/7

com/flexslider/  *  * Copyright 2012 WooThemes  * Free to use under the GPLv2 license. list‐style: none.} /* FlexSlider Necessary Styles *********************************/ . text‐indent: 0 !important. padding: 0 !important.BLOGSPOT. slideshowSpeed: 3000.. padding: 0.  Have fun! Don't forget to say thanks :﴿ Like 14 Tweet 12 0 448 You like FlexSlider Basic Image Slider Widget for Blogger ~ ISFB.} . directionNav: true.html  *  * Contributing author: Tyler Smith (@mbmufffin)  */ /* Browser Resets *********************************/ .flexslider a:active. controlNav: true. } .. animation: "slide".flex‐container a:active. Image Slider.}  3.html#.         animationSpeed: 600. Play with them. flickr etc.gnu. jQuery Slider. see below.flexslider a:focus  {outline: none. Save. . 2014 at 10:52 PM Thank you it works perfectly .. NOTE:  Forget about width and height it will adjust auto.slides.  * http://www.0. One question ‐ how do I make it 600px x 400px ? Reply Zuumisia February 3. 2014 at 8:40 AM I do not know how to change the pictures! help http://imagesliderforblogger.COM Close Add a Comment 50 comments Stevie K January 29.org/licenses/gpl‐2.. and we are done. . easing: "swing".flex‐control‐nav.﴿  There is some other things you may want to play with.flex‐direction‐nav {margin: 0.blogspot.Vdsuvfmqqko 2/7 . Replace the pink colored image URL with your own uploaded image URL﴾You can upload image on blogspot. padding: 0.. .flex‐container a:focus.flexslider {margin: 0. I was playing around with FlexSlider and encountered a peculiar i. . I guess I don't have to explain that because they are named like as they are. . Widget Say something more about this. at 10:02 PM Labels: FlexSlider.woothemes. Related Posts IMAGESLIDERFORBLOGGER. margin‐bottom: 0 !important.in/2014/01/flexslider­basic­image­slider­widget..flexslider li { border: 0 none !important. Responsive. Share this post FlexSlider Basic Image Slider Widget for Blogger ~ ISFB Thank you for featuring all the solutions.8/24/2015 FlexSlider Basic Image Slider Widget for Blogger ~ ISFB  * http://www.

2014 at 7:51 AM Thank you for featuring all the solutions.blogspot. 2014 at 1:00 AM @Jot.. 2014 at 8:18 PM Bro. 2014 at 1:06 AM I think you want to remove right‐bottom shadow.0. its working fine in my test blog but the both navigation arrow mark went down. Do you have any ideas? Reply Admin February 6.html﴿. The code worked great when I tested it on an empty page. Reply Tittle + Jot February 11.com/‐6mSn6P7zbaw/UwCdypvfLoI/AAAAAAAANIk/7meeVB6z59s/s1600/Cap ture+d%E2%80%99e%CC%81cran+2014‐02‐16+a%CC%80+12.14. box‐shadow: 0 1px 4px rgba﴾0. Unfortunetly. 2014 at 2:36 AM Hello. . ‐webkit‐box‐shadow: 0 1px 4px rgba﴾0. dimpost's link is not on the image but below and a piece of previous image is visible on the left ﴾see here: http://czyta‐czyten.bp.html#. 2014 at 3:16 AM Thank you so much for this ! It's absolutly stunning.flexslider li { margin‐bottom: 0 !important. } .2﴿.. but I can't find it.. I still believe the problem is somewhere in the template's css.0. 2014 at 9:21 AM This is great! Is there a way to change the code to make this image slider fluid.com/2014/02/mateusz. Hasan Al Mehdi February 14.0. But I cannot solve your main blogs problem without the URL Hasan Al Mehdi February 14. padding etc.png http://imagesliderforblogger. I can't manage to make it work.slides img.blogspot. 2014 at 10:03 AM Add this little CSS ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ .41. ‐moz‐box‐shadow: 0 1px 4px rgba﴾0.. to do that find this code below. Don't you notice this slider is already fluid/responsive! and its width is 100% Lei February 13.in/2014/02/testing‐slicebox‐image‐slider. Here's a screen cap of what appears when i enter the code http://4.﴿.2﴿. } ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ It will do what you needed And let me know. there is no problem as you say.flexslider . 2014 at 8:18 PM http://demotesing.0. Thank you for the code! I tried installing the Image Slider but I was wondering how can I remove the border/line on the right side and bottom! Thank you! Reply Replies Admin February 19.blogspot.8/24/2015 FlexSlider Basic Image Slider Widget for Blogger ~ ISFB Reply Karina Graj February 6..0.in/2014/01/flexslider­basic­image­slider­widget. I was playing around with FlexSlider and encountered a peculiar issue. padding: 0 !important.2﴿..2﴿. I see your test blog.flex‐direction‐nav { margin: 0 !important. ‐o‐box‐shadow: 0 1px 4px rgba﴾0.html Reply Glittering Delirium February 16. However.0. when I pasted the very same code on blogger the images became a bit out of line – the frame's height is too big. 2014 at 1:10 AM @Hasan Al Mehdi..flexslider .Vdsuvfmqqko 3/7 . I reset all the image properties in the css ﴾removed border. . so it will go across the whole page? Reply Replies Admin February 19.0.0. and remove it. how to fix it please help ?? Reply Replies Admin February 19.slides.blogspot.

2014 at 1:49 AM Very good work. Much like when you click on images in a blogger post and they open up Reply Andy Chan March 6. would you happen to know why my images are not in order.Vdsuvfmqqko 4/7 .8/24/2015 FlexSlider Basic Image Slider Widget for Blogger ~ ISFB Any idea of what I can do to make it right ? Hoping you'll answer ! ﴾Ps : please excuse my english. 2014 at 6:15 PM Your Image size is smaller than slider container. 2014 at 2:04 PM Awesome widget! Can it open up a lightbox image in fullscreen if the images are clicked? I would like to use a small version of this where when you click the image you get a larger view of it. however im a real novice with computers and would just like to know how do i upload my own pics from my saved pictures on my laptop thank you so much Reply Jason February 28. 2014 at 4:32 PM Sorry I forgot to mention my url: http://www. 2014 at 12:53 AM Thank you so much! It helps a lot! Reply Show Bobo March 9. 2014 at 1:13 AM @Glittering Delirium. i'm french . Give me your Blog URL. use bigger than 792X594px images. 2014 at 1:07 PM hi thank you so much for your code. 2014 at 12:08 AM THANK YOU FOR THIS! It is working fluidly on my site: http://www. is it possible to made it " random " ? Reply Replies Admin February 24. I did make the slider bigger but that should affect the images if they are the same size no? Any help is greatly appreciated.parallelplanets.html#.﴿﴿ Reply Replies Admin February 19. 2014 at 6:36 PM Here is a complete list of FlexSlider Properties: http://go.com/ However. Erin Emocling February 23. 2014 at 6:29 PM add ‐ randomize: true just after animationSpeed: 600. Thanks for your feedback.soulostyle.in/2014/01/flexslider­basic­image­slider­widget.com/ Reply Replies Admin February 24. and why the images looked stretched. I'll try to solve it. it works perfectly.dimpost. Admin February 24. 2014 at 12:21 AM http://imagesliderforblogger. Anonymous February 20.blogspot. 2014 at 4:29 PM Hello. thanks Reply Anonymous February 20. how do I add clickable texts on the images so the title of the post can appear on every photo? I appreciate the help! s! Reply Comité d'animation bbc27 February 23.com/47s zoe seaton February 23. what codes do I add if I want to set the default width to something smaller? Also.

2014 at 9:49 PM Thank you ! How do you confine the slider to just the home page ? Reply Henry Chen April 7. display: block.} . thank you so much for this amazing slider! It works great but I wonder if there's a way to put captions in the images? Reply Craig Angus April 16. What do I need to do to have this centered? .slides img {width: 60%.flexslider . However. thank you for your code. exactly what I was looking for. looks great on my site. 2014 at 6:59 PM I can't seem to get this to work…I am getting some sort of js error http://template‐sitebdesign. I found how to change the size of the pics because at 100% it was too large for my taste. Reply Irene Caye April 12. padding: 0.irobotgamingtv. how to the target address will open in another tab. look here and let me know how to fix. 2014 at 12:56 AM hi . 2014 at 5:56 PM Hi.} .slides.blogspot. I'm testing it for a new theme. .flexslider . 2014 at 9:30 PM Hello. Avoids image jumping */ .com Reply Taste Junction May 6. ‐webkit‐backface‐visibility: hidden. Thank you very much for the FlexSlider script. but it looks different to me. here it is: http://madalinasimona.ae/ Reply D'Wayne Wilkins May 9. love this slider and installed it.html#.ro/.html Reply Marta March 20. In the script. I'm using it in my blog.flexslider . Is that what suppose the script doing? Thank you.com I have one question is : When we click in picture. 2014 at 4:02 PM wow! I'm searching for a slider like this from so long! I try to install it on my blog.blogspot. www. how can I change it? Thanks! Reply Jade Gregory March 25.flexslider {margin: 0.Vdsuvfmqqko 5/7 .. I mean those froms lider's bottom to look like in the demo? And can I make this slider to appear only in the main page﴾home﴿? Thank you a lot!! Reply Heidi Bussey March 12. 2014 at 11:53 AM Thanks for this post.. padding: 0 http://imagesliderforblogger. 2014 at 2:48 AM Hi.blogspot. there is an issue of the slider in my blog: http://showbobos.co.in/2014/01/flexslider­basic­image­slider­widget.blogspot. the very bottom image link is displayed first in the slider.} /* Hide the slides before the JS is loaded. . can you have a look of my slide? http://monuchi.uk/ the 3 small circle are not working in my blog. TK.UxwijYVbvng Notice that the arrangement of images is not in order. thank you so much for the code.flex‐direction‐nav { margin: 0 !important.blogspot. but want to reduce height and also remove extra white border coming at boder.html#..blogspot. 2014 at 7:20 AM Thank you. ﴾ not replace current address in same tab﴿. Stewart March 13.flexslider . 2014 at 8:45 AM Hi.com/p/showbobos. Thanks ‐ http://tastejunction.8/24/2015 FlexSlider Basic Image Slider Widget for Blogger ~ ISFB Hi Admin. Reply Mădălina Simona Merca March 12. How can I make the little dots.. Welcome to visit : www. Plz. I was wondering if there is anyway to remove the 'dots' from the bottom? Thanks Reply Bailey B.slides img.com/p/portfolio.inspirationalvideo123.Looks great.slides > li {display: none.

No know what the solution. 2014 at 6:07 PM Hi! Really loving this one However when I used this on my blog. Reply Vivek November 9. 2014 at 11:16 AM Thanks for the explanation. I want it under the page titles. } . can u help me to change the navigation arrows to dark color and the dot navigationt o show on the top. I don't know why. Here's a link to my blog: http://ijsmetpindakaas. it's great slider.. I love this slider! I would like the container box was smaller. how to make the slider to work on blog's homepage alone..8/24/2015 FlexSlider Basic Image Slider Widget for Blogger ~ ISFB !important.blogspot. where it is now.? Maybe you can help me? I'd like to have the pictures covering up the whole length and be LESS high. Reply Evaviento October 28.Can you help me with template's css. if possible to have double navigation arrows one on the top and one on the bottom. if I change here if I change here". November 3.. i have same problem like Karina Graj. thank you very much Reply Mieke V.com/p/home.}"is not centered with respect to the box. help me? Reply Vivek November 9..com/ Would you mind helping me? Thanks a lot! Reply Anonymous May 27.blogspot. 2014 at 11:21 AM ar Admin. please? http://www. Thanks for this awesome slider. i have small picture in slider. Reply Neysa Kristanti May 25. Reply Louann Brown August 21. 2014 at 7:10 AM Very Nice Reply Admin & Author InIndiaNow. http://imagesliderforblogger.. Moreover. I apparently have to wait for my whole pages to be loaded first.flex‐pauseplay span {text‐transform: capitalize. and then it will all pop out together. What can I prevent that the slide show is shown on every page? It's only supposed to appear on the front page. And I'd like to have the dots under the image back in the usual place please.In October 24.. 600x400. Moreover. display: block.. making the wait to be longer than usual. Thanks for this awesome slider.flexslider . 2014 at 12:17 AM Thank you very much. 2014 at 11:21 AM ar Admin. Reply bachonkapakistan October 15. 2014 at 6:27 PM Thanks a lot. But the image is supposed to be in the middle and the little circles under the images are supposed to be in the center under the image. 2014 at 4:14 AM I used it on my blog! It works perfectly in every place EXCEPT the one I want it.html#. Here's the url of my blog : http://papierrevue. how to make the slider to work on blog's homepage alone. thank you so much for this slider! Its amazing!! But. but they've become big and distorted. 2014 at 5:11 PM Hi.Vdsuvfmqqko 6/7 .kristynazouzalova.nl/ Do you have any idea to fix this. 2014 at 7:54 PM Hi Bro. Slider is superb and simple as silk.html Thank you so much for your help.slides img {width: 90%.in/2014/01/flexslider­basic­image­slider­widget.. 2014 at 10:48 AM This worked perfectly! Thank you! Reply Esperanza September 1.blogspot..} Reply Kristýna May 21.

Reply Hanniz Envato March 18. thank you for such a easy‐to‐follow tutorial to add a cute slider in Blogger. Thank you Caterina~ Reply Anonymous December 4. 2015 at 9:40 AM Perfect. 2015 at 5:31 AM So simple and it works! Thanks! Reply :﴿ :‐﴿ :‐? ﴾p﴿ ﴾h﴿ :﴿﴿ :‐s =﴿﴿ ﴾m﴿ ﴾c﴿ :﴾ :‐﴾ :﴾﴾ :d :‐d @‐﴿ 8‐﴿ :‐t :‐b b‐﴾ :‐# =p~ :p :‐$ :o :>﴿ ﴾b﴿ ﴾o﴿ ﴾f﴿ [‐﴾ x‐﴿ ﴾k﴿ cheer Enter your comment.Vdsuvfmqqko Posts RSS ∙ Comments RSS Back to top 7/7 . I've been trying to find a way to add a great slider and I love this one. thank you!! My images are blurry. 2014 at 4:18 AM Hello. thx for the sharing. 2015 at 6:57 AM Nice slider. how can I text below the images? Reply Dawn Farias February 25.com/ also how to add more images? The images I have are not loading too.. But could you help me solve why it is totally not looking like what you have? http://grandmaslovepantry. but I will dive into that later and try to figure it out. Comment as:  Publish   Aneesh Ps (Google) Preview Sign out   Notify me   © 2011 Image Slider For Blogger Organized by dimpost | Powered by blogger.html#.. I was wondering if you have any ideas how to make it to show only in the mail pages and "hide" in the archive pages.blogspot.8/24/2015 FlexSlider Basic Image Slider Widget for Blogger ~ ISFB Reply Anonymous November 27. 2014 at 6:51 PM Hi.in/2014/01/flexslider­basic­image­slider­widget.blogspot. Thank you so much! Reply etem January 3.com http://imagesliderforblogger.