Go Back to Tutorial: http://postsliderwidgetforblogger.blogspot.com.ng/2017/04/post-slider-widget-for-blogger-with-new-features-2017.html
copy the below code
<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>
Thursday, 20 April 2017
Post Slider Widget for Blogger Tutorial
Go Back to Tutorial: http://postsliderwidgetforblogger.blogspot.com.ng/2017/04/post-slider-widget-for-blogger-with-new-features-2017.html
copy the below code
<!-- BloggerDynamicSlider Basic CSS --> <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/AVvXsEge1GkpW-vWG-VBsaDBX22_rvwhcnEohP-cez2GZrOFj6U7nB4E-WVRomWaW_97Oqfu5ODF3Ej7tRsfTk4VepEu3tqDs9f89hyphenhyphenrIBqyDwA7OYAprFs9hFieYbpKCZ7CfcUSm15EKl-NIcar/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 ; padding: 0 ; line-height: initial ; } .flexslider ul.flex-direction-nav li { margin: 0; padding: 0; line-height: initial; } .flexslider ul li { margin-bottom: 0 ; } .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> <!-- Include Dependency Script --> <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>
Post Slider Widget for Blogger With New Features 2017
"Post Slider Widget for Blogger" with new features 2017 is a simple yet powerful automatic slider for blogger. The slider content generates from blog's feed dynamically, based upon users settings via jQuery Ajax Call. It has responsive functions. As it is a Dynamic Slider, the slider content updates whenever a new post comes or new content (if it fits with user settings criteria).
Subscribe to:
Posts (Atom)