Recent Posts Slider with Pagination Blogger Widget
close
Recent Posts Slider with Pagination Blogger Widget

Recent Posts Slider with Pagination Blogger Widget

Recent Posts Slider with Pagination Blogger Widget

Recently I have shared automatic post slider widget for blogger and this time this is another recent post slider with pagination.

The best thing of this recent post slider is that it contains pagination at its bottom with two buttons right and left.

What is pagination?

So if you don't know what is pagination or if you are hearing this word for the first time then let me tell you what actually this word means.

Pagination basically is a numbering which you usually see on different websites.

It is placed at the bottom of any websites homepage where you can switch between different pages of that website for example if you want to go to page number 3 you have to click the three button 3rd button in the pagination of that website.

If you are still not clear then you can Google it because Google is the best place where you will find or you can find your questions answer.

It uses CrossFade animation to move from one post to another.

It is fully customisable and responsive and looks beautiful when it is live.

Most of the people like to use post sliders on their websites but if you are a wordpress user then you will find tons of plugins for that but if you are a user of blogger CMS ( Content Management System ) then you need JavaScript snippets to add some functionalities into your blogger blog.

This recent post slider with pagination blogger widget consists many configuration settings that you can configure according to your requirements.

The maximum width of this slider is 300 pixels so the best place to add this slider into your blogger blog is your websites sidebar.

So if you want to add this recent post slider with pagination in your blogger blog then you have to follow some guidelines or steps that are provided below.

Simply do as it is said and don't miss any step read the steps clearly and carefully.

Steps to Follow:

  1. Go to Blogger Dashboard
  2. Go to Layout Section
  3. Click Add Gadget
  4. Click Add Gadget Button in your blogger blogs sidebar section to get better results.
  5. Now Select HTML/JavaScript widget from the widgets list.
  6. Now copy the code provided below and paste it as a widget content.
  7. <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script type="text/javascript">
    //<![CDATA[
    function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
    function loadJS(e, t, n) { "use strict"; var i = window.document.createElement("script"); var o = t || window.document.getElementsByTagName("script")[0]; i.type = "text/javascript"; i.src = e; o.parentNode.insertBefore(i, o); setTimeout(function () { i.type = n || "text/javascript" }) }
    loadCSS("https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
    //]]>
    </script>
    <div id="slider-rotator" class="slider-rotator loading">
    </div>
    <script>
    //<![CDATA[
    (function (a) {
        a.fn.customRotator = function (c) {
            c = a.extend({
                interval: 6000,
                speed: 1000,
                hoverPause: true,
                autoHeight: false,
                crossFade: false,
                autoSlide: true,
                hide: function (d) {},
                show: function (d) {}
            }, c);
            var b = true;
            return this.each(function () {
                var k = a(this),
                    e = k.children().hide(),
                    d = k.next(),
                    g = null,
                    j = 0,
                    f = 0;
                function h() {
                    c.hide(f);
                    d.find(".current").removeClass("current");
                    b = false;
                    if (e.eq(f).next().length) {
                        if (!c.crossFade) {
                            e.eq(f).fadeOut(c.speed, function () {
                                a(this).next().fadeIn(c.speed, function () {
                                    c.show(f);
                                    b = true
                                });
                                if (c.autoHeight) {
                                    k.stop().animate({
                                        height: e.eq(f + 1).height()
                                    }, c.speed / 2)
                                }
                                f++
                            })
                        } else {
                            e.eq(f).fadeOut(c.speed);
                            e.eq(f).next().fadeIn(c.speed, function () {
                                c.show(f);
                                b = true;
                                f++
                            });
                            if (c.autoHeight) {
                                k.stop().animate({
                                    height: e.eq(f + 1).height()
                                }, c.speed / 2)
                            }
                        }
                        d.find(".rotator-num a").eq(f + 1).addClass("current")
                    } else {
                        if (!c.crossFade) {
                            e.eq(f).fadeOut(c.speed, function () {
                                f = 0;
                                e.first().fadeIn(c.speed, function () {
                                    c.show(f);
                                    b = true
                                });
                                if (c.autoHeight) {
                                    k.stop().animate({
                                        height: e.eq(f).height()
                                    }, c.speed / 2)
                                }
                            })
                        } else {
                            e.eq(f).fadeOut(c.speed);
                            e.first().fadeIn(c.speed, function () {
                                c.show(0);
                                b = true;
                                f = 0
                            });
                            if (c.autoHeight) {
                                k.stop().animate({
                                    height: e.eq(0).height()
                                }, c.speed / 2)
                            }
                        }
                        d.find(".rotator-num a").first().addClass("current")
                    }
                    if (j == 0 && c.autoSlide) {
                        g = setTimeout(h, c.interval)
                    }
                }
                if (e.length > 1) {
                    c.hide(f);
                    e.first().fadeIn(c.speed, function () {
                        c.show(f);
                        b = true
                    });
                    if (c.autoHeight) {
                        k.stop().animate({
                            height: e.eq(0).height()
                        }, c.speed / 2)
                    }
                    if (c.hoverPause && c.autoSlide) {
                        k.mouseenter(function () {
                            clearTimeout(g);
                            j = 1
                        }).mouseleave(function () {
                            g = setTimeout(h, c.interval);
                            j = 0
                        }).trigger("mouseleave")
                    } else {
                        g = (c.autoSlide) ? setTimeout(h, c.interval) : null
                    }
                    d.find(".rotator-num a").click(function () {
                        if (b) {
                            b = false;
                            if (c.autoSlide) {
                                clearTimeout(g);
                                g = setTimeout(h, c.interval)
                            }
                            f = a(this).index();
                            a(this).parent().find(".current").removeClass("current");
                            a(this).addClass("current");
                            c.hide(f);
                            e.fadeOut(c.speed).eq(f).fadeIn(c.speed, function () {
                                c.show(f);
                                b = true
                            });
                            if (c.autoHeight) {
                                k.stop().animate({
                                    height: e.eq(f).height()
                                }, c.speed / 2)
                            }
                        }
                        return false
                    });
                    d.find(".rotator-advancer a").click(function () {
                        if (b) {
                            b = false;
                            var l = this.hash.replace("#", ""),
                                i = e.length;
                            if (c.autoSlide) {
                                clearTimeout(g);
                                g = setTimeout(h, c.interval)
                            }
                            if (l == "next") {
                                f = (f < i - 1) ? f + 1 : 0
                            } else {
                                f = (f > 0) ? f - 1 : i - 1
                            }
                            d.find(".current").removeClass("current");
                            d.find(".rotator-num a").eq(f).addClass("current");
                            c.hide(f);
                            e.fadeOut(c.speed).eq(f).fadeIn(c.speed, function () {
                                c.show(f);
                                b = true
                            });
                            if (c.autoHeight) {
                                k.stop().animate({
                                    height: e.eq(f).height()
                                }, c.speed / 2)
                            }
                        }
                        return false
                    })
                }
            })
        }
    })(jQuery);
    function makeSlider(a) {
        var c = {
            url: "https://www.softwebtuts.com",
            numPost: 5,
            newTabLink: false,
            labelName: null,
            showDetail: true,
            summaryLength: 60,
            titleLength: "auto",
            showThumb: true,
            thumbWidth: 320,
            squareThumb: false,
            noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png",
            showNav: true,
            navText: {
                prev: "<i class='fa fa-arrow-left'></i>",
                next: "<i class='fa fa-arrow-right'></i>"
            },
            containerId: "slider-rotator",
            interval: 6000,
            speed: 1000,
            hoverPause: true,
            crossFade: true,
            autoHeight: false,
            autoSlide: true,
            onInit: function () {},
            onHide: function (d) {},
            onShow: function (d) {}
        };
        for (var b in c) {
            c[b] = (typeof (a[b]) !== "undefined") ? a[b] : c[b]
        }
        $.get(c.url + "/feeds/posts/summary/" + (c.labelName === null ? "" : "-/" + c.labelName.replace(/\,(\s+)?/g, "/")) + "?alt=json-in-script&max-results=" + c.numPost, {}, function (s) {
            if (s.feed.entry !== undefined) {
                var r = s.feed.entry,
                    q, p, e, o, h = "",
                    d = "";
                for (var m = 0, n = r.length; m < n; m++) {
                    if (m == r.length) {
                        break
                    }
                    q = r[m].title.$t;
                    e = ("media$thumbnail" in r[m]) ? '<img alt="' + q + '" src="' + r[m].media$thumbnail.url.replace(/\/s72\-c/, "/s" + c.thumbWidth + (c.squareThumb ? "-c" : "")) + '" style="width:' + c.thumbWidth + "px;height:" + (c.squareThumb ? c.thumbWidth + "px" : "auto") + '">' : '<img src="' + c.noThumb + '" style="width:' + c.thumbWidth + "px;height:" + (c.squareThumb ? c.thumbWidth + "px" : "auto") + '">';
                    o = ("summary" in r[m] && c.summaryLength > 0) ? r[m].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<(.*?)>/g, "").replace(/[<>]/g, "") : "";
                    o = (c.summaryLength < o.length) ? o.substring(0, c.summaryLength) + "…" : o;
                    for (var l = 0, f = r[m].link.length; l < f; l++) {
                        p = (r[m].link[l].rel == "alternate") ? r[m].link[l].href : "#"
                    }
                    h += '<div class="slider-item">';
                    h += (c.showThumb && c.showDetail) ? '<div class="image-wrapper">' + e + "</div>" : (c.showThumb && !c.showDetail) ? '<div class="image-wrapper"><a href="' + p + '" title="' + q + '"' + (c.newTabLink ? ' target="_blank"' : "") + ">" + e + "</a></div>" : "";
                    h += (c.showDetail) ? '<div class="detail-wrapper"><h4><a title="' + q + '" href="' + p + '"' + (c.newTabLink ? ' target="_blank"' : "") + ">" + ((c.titleLength == "auto") ? q : q.substring(0, c.titleLength) + (q.length > c.titleLength ? "…" : "")) + "</a></h4><p>" + o + "</p></div>" : "";
                    h += "</div>";
                    $("#" + c.containerId).css({
                        width: (c.showThumb) ? c.thumbWidth + "px" : $("#" + c.containerId).css("width"),
                        height: (!c.showDetail && c.squareThumb) ? c.thumbWidth + "px" : $("#" + c.containerId).css("height")
                    })
                }
                d = '<div class="slider-rotator-nav"' + (c.showNav === false ? ' style="display:none;"' : "") + ">";
                d += (c.showNav === true || c.showNav == "next/prev") ? '<span class="rotator-advancer"><a href="#prev">' + c.navText.prev + "</a></span>" : "";
                if (c.showNav === true || c.showNav == "number") {
                    d += '<span class="rotator-num">';
                    for (var g = 0; g < c.numPost; g++) {
                        d += '<a href="#slide-' + g + '" class="' + (g === 0 ? "current" : "") + '">' + (g + 1) + "</a>"
                    }
                    d += "</span>"
                }
                d += (c.showNav === true || c.showNav == "next/prev") ? '<span class="rotator-advancer"><a href="#next">' + c.navText.next + "</a></span>" : "";
                d += "</div>";
                $("#" + c.containerId).html(h).after(d);
                c.onInit();
                $("#" + c.containerId).removeClass("loading").customRotator({
                    interval: c.interval,
                    speed: c.speed,
                    autoHeight: c.autoHeight,
                    hoverPause: c.hoverPause,
                    crossFade: c.crossFade,
                    autoSlide: c.autoSlide,
                    hide: function (i) {
                        c.onHide(i)
                    },
                    show: function (i) {
                        c.onShow(i)
                    }
                })
            } else {
                $("#" + c.containerId).removeClass("loading").css({
                    width: "auto",
                    height: "auto"
                }).html("Error or not found!")
            }
        }, "jsonp")
    };
    //]]>
    </script>
    <script type="text/javascript">
    //<![CDATA[
    makeSlider({
        url: "https://www.softwebtuts.com" // Change to your blog URL
    });
    //]]>
    </script><style>
    .slider-rotator{background:#fff;font-family:roboto;width:300px!important;min-height:200px;height:auto !important;padding:10px;color:#fff;margin:0 auto;position:relative;overflow:hidden;text-align:left}.slider-rotator.loading{display:none;background-position:50% 50%;background-repeat:no-repeat}.slider-rotator .slider-item{position:absolute;padding:0;background-color:transparent;top:0;right:0;bottom:auto;left:0;display:none}.slider-rotator img{display:block;border:none;outline:none;padding:0 0;margin:0 auto;box-shadow:none;}.slider-rotator h4{font-size:16px;text-transform:none;margin:0;padding:15px 0;color:#242424;text-align:center}.slider-rotator h4 a{color:#242424!important;line-height:1.5;text-decoration:none}.slider-rotator h4 a:hover{color:#e79c5a;text-decoration:none}.slider-rotator p{margin:10px}.slider-rotator-nav{text-align:center;margin:10px auto}.slider-rotator-nav a{font-size:13px;display:inline;background-color:#fff;color:#222;border:0;padding:5px 10px;line-height:2.6em;border:1px solid rgba(0,0,0,0.08);margin:0 2px;text-decoration:none}.slider-rotator-nav a:hover{background-color:#fff;color:#ec407a;border-color:#ec407a}.slider-rotator-nav a.current{background-color:#ec407a;color:#fff}
    </style>
  8. Save Theme/Template

Here in the above code i have used 2 libraries one is Jquery library which is needed to render jquery code and second library is font-awesome that is used to add icons in your webpages.

As I have told you that this recent post slider with pagination consists of many configuration settings that you can configure and for your ease I have listed up all the configuration settings that you can change.

Here these are some configuration settings listed below that are changeable. You can read the description accordingly and respective to them.


ConfigurationDescription
https://www.softwebtuts.comChange this URL with your domain name.
interval: 6000Interval after which post will be shuffled. 6000 = 6 seconds
speed: 1000Speed of animation. 1000 = 1 second
hoverPause: trueSpecify whether you want to pause animation on mouseover or not.
autoSlide: trueSpecify whether you want to autoplay the animation or not.
numPost: 5Number of posts you want to show in this slider. 5 is Default.
newTabLink: falseSpecify whether you want to open link in new tab or not when user clicks on any post.
labelName: nullPut label name here instead of null to show posts with specific label. eg: "html"
showDetail: trueSpecify whether you want to show post title or not.
summaryLength: 60Set the number of letters which you want to show in post summary.
titleLength: "auto"Specify Length of title. Set numeric value to show number of letters in title.
showThumb: trueSpecify whether you want to show thumbnails or not.
thumbWidth: 320Specify the width of thumbnail.
squareThumb: falseSpecify whether you want to show thumbnail in equal dimention or square form.
noThumb: "...grey.png"Replace this URL with the url of image you want to show if your post has no thumb.
showNav: trueSet this if you want to show next & previous button true or false.
containerId: "slider-rotator"Here Replace "slider-rotator" with the id of element in which you want to show this slider.

The configuration settings in the above code are all configured correctly but one thing that you have to change or configure is your website URL if you will not replace your website URL then you will see the posts of my website instead of your website.

So don't forget to replace my website with your websites URL.

Most of the people like to see the demo for preview of different blogger widgets so that's why I have created and other separate blog where I always provide preview of different blogger widgets that I create and share on this blog.

Most of the people want to see the demo of this recent post slider with pagination blogger widget simply click the button provided below and you will be redirected to the demo page where you can clearly see the demo of this recent post slider with pagination.

You can also copy the source code from there but that is mainly made to show you the preview or demo of any blogger widget that I create and share on this website.

Conclusion:

So this was responsive and beautiful recent post slider with pagination I think you will like it and love it this is in recent post more if you want to convert it into any other kind of blogger widget like if you want to make a random post widget with this style of this slider you can come at that I will be very e glad to hear from you and I will try to help you and make another widget for you.

So I hope you will like this recent post slider with pagination blogger widget. Share it with your friends and subscribe to the newsletters of this blog and keep visiting it daily.
Disqus Codes

No comments

Comments System WIDGET PACK

Notifications

Disqus Logo