Breaking News

How to add a post slider on blogger




When it comes to blogging Adding a slider on blogger has been very very difficult for most bloggers expecially the newest bloggers and today am gonna show you

how to add a post slider to your bloggersite

How It Works

 The slider content generates from blogger blog's feed, dynamically by jQuery AJAX call, and then FlexSlider takes effect and take care of the sliding features. That it, nothing fancy but very useful for blogger users. Installation Guide

STEP - 1: Go to Your Blogs Home > Template (Backup your template to be safe)

STEP - 2: Edit HTML

STEP - 3: Search for closing head: in the template ( Hint: to search on template: click anywhere in the code block and press Ctrl+F)

STEP - 4: Copy the following code below and paste just before

  < style type = "text/css" > /** * jQuery BloggerDynamicSlider v1.0.0 * Copyright 2016 http://shuvojitdas.com * Contributing Author: Shuvojit Das * Plugin URL: https://github.com/shuvojit33/blogger-dynamic-slider * */ @ import url(https://fonts.googleapis.com/css?family=Open+Sans: 300 , 400 ); @ import url( "https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css" ); /* Preloader */ .flexslider.loading:after { content : ''; position: absolute; top : 0 ; right : 0 ; bottom: 0 ; 

Note: If you had already added jQuery .js into your blogs template then don't add it again as sometimes multiple jQuery ruins everything. Here jQuery script tag is located at the very first of this code block above. STEP - 5: So now the slider engine scripts are installed, you are ready to add slider(s) anywhere in your blog including gadget, post or page. Well, just copy the code below and paste in a HTML Gadget or Post or Page


  < div id= "slider1" ></ div > < script type= "text/javascript" > $( document ).ready( function () { $( "#slider1" ).BloggerDynamicSlider({ imageWidth: 636 , // Image width in px value imageHeight: 398 , // Image height in px value maxItem: 6 , // Max number of Slider Image to show animation: "slide" , // Select your animation type, "fade" or "slide" showPostTitle: true , // Show post title as Caption ? (true/false) postTitleStyle: "overlayLight" , // Caption style: "default, "overlayDark" or "overlayLight" }); }); </ script > 

STEP - 6: Save & Done! Pretty Simple & Dynamic. If you want to Show that Posts from a Specific Label Add This after the ImageWidth : 636 Line in HTML Script. labelName: "", For Example if you want to show posts from the Label Food then it goes like this : labelName: "Food" , Thanks for Reading and f you have Any Problems Please feel free to comment. Happy Blogging !!




Reference: http://helptoblogging.blogspot.com/2016/08/how-to-add-dynamic-slider-in-blogger.html


No comments

be free to comment
here