You may have come across many blogs with content slider with cool slideshows. Just Wondering, I also need this slider for my blog, but don’t know how to create it. Then you are in right place. In this post we are going to discuss about How to implement this Light-weight jQuery Flex slider for blogger blogspot. Flex slider is a light-weight and responsive slider and free to use, which is also one of the most used Sliders in all kind websites and blogs. Flex slider is used in our recent Spicemag Blogger Template also. This slider has fade and slide transitions with lot customization options including slide navigation options.
1. Big Auto Featured Category slider for Blogger Templates (Of course, you can use it for any category)
2. Small Auto Featured Category slider for Blogger Templates :
Before going to our main topic, we need to host our Flex slider scripts. Blogger only provides content hosting then how to host our scripts in blogger? Just follow the simple steps and host it in blogger.
just replace the following text
Steps to Create Simple jQuery Flex Slider Slideshow for blogger/blogspot:
1. Go to blogger Dashboard and the navigate to your blog’s Template section and then Backup your Template.
2. Open the script in Editor like Notepad++. Download NotePad++ here .
3. Download the Flex slider host it in Google code or use our above trick to host in blogger.
4. Then Press the Ctrl + F and find the</head> tag . Then post the below code above head tag.
<!-- Place somewhere in the <head> of your document --> <link rel="stylesheet" href="flexslider.css" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="jquery.flexslider.js"></script>
5. Then Add the images like below markup
<!-- Place somewhere in the <body> of your page --> <div class="flexslider"> <ul class="slides"> <li> <img src="slide1.jpg" /> </li> <li> <img src="slide2.jpg" /> </li> <li> <img src="slide3.jpg" /> </li> </ul> </div>
6. Finally add the following code before tag.
The above steps will only create simple Manual slideshow with your content. You can use this slider for any single posts also.
How to Create category jQuery Slide show with Automatic content Update:
In our all blogger templates, We have designed the featured posts slider with auto update feature. That is you don’t need to edit the slider manually, just put your category name in your slider, the content will be automatically generated. We made your job easy! Yes We have already created the slider Widgets for you, just hit below button and get the auto slider in your blog. Create your Featured Category Slideshow slider for blogger posts with Our Widget Creator. Slider Widget will be Automatically updated when you post new content.
Just copy the content from Widget creator page and insert it in your template anywhere you want to show the slider.It is a Responsive slider, so that it will adjust its size, depends upon the width of parent element. We have shown a two sample slider in our demo page, first one is a big slider and another one is a sidebar slider.
Please like and share this post with your friends and Don’t forget to subscribe to our newsletter for future update. More posts like this will be here soon, so stay with us.