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 :
How to host all the Javascripts in Blogger for free:
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.
<script type="text/javascript">
// <![CDATA[
<--Paste all code here from .js file -->
// ]]>
</script>
just replace the following text <--Paste all code here from .js file --> then add your javascript code. Other than this you can also host your scripts in Google code for free.
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.
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
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.
Featured Category Slider Widget Creator.
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.
