Recent Posts Slider For Blogger

Looking for a cool slider for your blog?


Slider


If you want an automatic slider for your recent posts with thumbnails then just follow these simple steps:-


  • Open Blogger.
  • Copy code and paste directly before

/head

in Edit HTML mode in template.



<style type='text/css'>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
@import url(https://1e5b955234c4218e19e4ac7cff398fd7422aff71.googledrive.com/host/0B0zTQtmW0Bz3NzlSSWd3T0k2TnM);

/* Preloader */

.flexslider.loading:after {
    content: &#39;&#39;;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Lq64s3gXRcpb3oP-4f2wUCDH3GSjas9RrpUKL-zajruVpkU1GykkMH1iB9YXQ50vhCgxZrJmKhKitn1KqgRcI49XOvBzz2nDgsNzRc6GSSdkqJHyML3TmC3GbOjd04BpyqBCOmDFzu6J/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: &#39;Open Sans&#39;, 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>
<!-- Include Dependency Script -->
<script src='https://code.jquery.com/jquery-1.12.0.min.js' type='text/javascript'/>
<script src='https://9305dc21e6ce8fd6e031b1ff23db6a582bad8a7c.googledrive.com/host/0B0zTQtmW0Bz3QTFoaFpQa0JoSUU' type='text/javascript'/>
<script src='https://47106a44f865ec14a2e0a7b3b414d139b412758d.googledrive.com/host/0B0zTQtmW0Bz3S1pDMUx4NW5VSHc' type='text/javascript'/>




  • Now, copy this code and paste in HTML/Javascript gadget.



<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>



I like blogging as much as I like coding and designing though not more than traveling.
If I'm not here publishing stuff then you will find me researching about SEO and marketing.
Love to meet new people and try to help every person.
Find me interesting or have any issue?
Shoot a message and I'll be with you.