Showing posts from October 30, 2016

Blogger Dynamic Slider by Label/Recent Posts. "Blogger Dynamic Slider" is a straightforward yet intense programmed slider for blogger.

The slider content creates from blog's nourish powerfully, based upon clients settings through jQuery Ajax Call. It is completely responsive.

As it is a Dynamic Slider, the slider content overhauls at whatever point another post comes (in the event that it fits with client settings criteria).

Blogger Dynamic Slider(bdSlider) Features

Dynamic - Slider Content Generates Automatically

Completely Responsive
Slider By a Specific Label
Slider By Recent Posts
Preloader Function
Loads of Customization Options
Simple Setup and Customization
Live Testing Tool for Blogger Dynamic Slider

Well now this programmed late post slider have a testing instrument where you can enter your blog URL and perceive how Dynamically it create a slider from your blog's bolster.

This devices have other essential alternatives like Image Size, Max Item, Label (you can indicate a mark to create slider from. Despite the fact that it is optional).How It Works ?

The slider content creates from blogger blog's encourage, powerfully by jQuery AJAX call, and afterward FlexSlider produces results and deal with the sliding elements.

That it, nothing extravagant except for extremely helpful for blogger clients.

Establishment Guide

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

STEP - 2: Edit HTML

STEP - 3: Search for shutting head: </head> in the format (Hint: to look on layout: click anyplace in the code piece and press Ctrl+F)

STEP - 4: Copy the accompanying code beneath and glue just before </head>

<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; left: 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggziHxPg_1-EtE8-0Hd7-27vkBO16uTggYeneTS09fcttLzeinDn7ophcd14FuW-G5q0zrqof9gZVA5pZenzVsGIAFIOi3dIUN-UhD_VGv45sIsDBbvVP7GKcXS1n6cfnmPvWLNXGk0DWM/h120/loader.gif) no-repeat center center; background-color: rgba(255, 255, 255, 0.9); z-index: 9999;}.flexslider.loading ul.flex-direction-nav,.flexslider.loading ol,.loading .flex-caption { display: none;}.flexslider { border: 1px solid #cacaca; padding: 4px; margin: 0 auto 60px auto; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}.flexslider a { text-decoration: none;}/* Caption/Post Title */.flex-caption { position: relative; padding-left: 15px; padding-right: 10px; height: 60px; background: #FFFFFF; color: #1C1C1C; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 26px; line-height: 26px; margin: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden;}.flex-caption span { display: table-cell; vertical-align: middle; height: 60px;}.flex-caption.overlayDark,.flex-caption.overlayLight { margin-bottom: -60px; bottom: 60px; position: relative;}.flex-caption.overlayDark { background: rgba(0, 0, 0, 0.7); color: #fff;}.flex-caption.overlayLight { background: rgba(255, 255, 239, 0.9); color: #000;}ul.slides li a { display: block; overflow: hidden;}/* blogger css conflicts fix */.flexslider ul { margin: 0 !important; padding: 0 !important; line-height: initial !important;}.flexslider ul.flex-direction-nav li { margin: 0; padding: 0; line-height: initial;}.flexslider ul li { margin-bottom: 0 !important;}.flexslider img { padding: 0; border: none; -webkit-box-shadow: none; box-shadow: none;}ul.flex-direction-nav { position: static;}ul.flex-direction-nav li { position: static;}.error { font-family: monospace, sans-serif;}@media (max-width: 600px) { .flex-caption { font-size: 20px; line-height: 20px; font-weight: 400; }}</style><script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/jquery.flexslider-min.js"></script><script type="text/javascript" src="http://shuvojitdas.com/script/jquery.bdslider.min.js"></script>

Note: If you had as of now included jQuery .js into your sites format then don't include it again as here and there different jQuery ruins everything. Here jQuery script tag is situated at the first of this code obstruct above.

STEP - 5: So now the slider motor scripts are introduced, you are prepared to include slider(s) anyplace in your blog including contraption, post or page. All things considered, simply duplicate the code underneath and glue 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 and Done! Entirely Simple and Dynamic.

CDF

Showing posts from October 30, 2016

The most effective method to include picture Slider For Blogger

Trending Post

The most effective method to include picture Slider For Blogger

Archive