Automatic Posts Slider widget for Blogger
close
Automatic Posts Slider widget for Blogger

Automatic Posts Slider widget for Blogger

Automatic post slider widget for blogger

Today most of the blogger templates are coming with built-in sliders and these sliders are usually post slider.

If you have too old blogger template and you want to customise it then you are on the right place. On this website you can find tons of responsive and beautiful blogger widgets which can make your website look attractive and beautiful.

And today like before I am going to share with you and other exciting and beautiful blogger widget with you this widget is responsive and is customisable and the main good thing of this widget is that it is in classic version.

This is automatic post slider widget for blogger which will fetch of the posts from your blogger feed API and shows up.

By default this widget shows recent posts but if you want to convert this widget into any other kind of blogger widget you can comment that in the comments section I will try to convert it for you.

This automatic post slider automatically slides posts and also consists of two buttons by which you can manually slider your post.

So if you want to add this automatic post slider widget into your blogger blog you can easily do that by following the steps provided below.

The best place to add this widget into your blogger blog is at the header section or the footer section of your blogger blog or inside the article.

So these are some steps that you have to follow to install this widget into your blogger blog.

Steps to Follow:

  1. Go to Blogger Dashboard
  2. Go to Layout Section
  3. Click Add New Widget
  4. Select HTML/Javascript widget from widgets list
  5. Choose the place where you want to add this widget and then click add new widget button in that section.
  6. Now copy the code provided below and paste it as a widget content.
  7. <style>
    a {
      color: #fff;
      text-decoration: none
    }
    
    #featured-wrap {
      border-bottom: 1px solid #000;
      box-shadow: 0 1px 0 0 #333;
      background: #111;
      position: relative;
      height: 175px;
      margin: 0 auto
    }
    
    #featured {
      border: 2px solid #444;
      outline: 1px solid #000;
      position: relative;
      width: 88%;
      height: 150px;
      overflow: hidden;
      top: 10px;
      margin: 0 auto
    }
    
    #featured ul {
      width: 9999px
    }
    
    #featured ul,
    #featured li {
      list-style: none;
      padding: 0;
      margin: 0;
      overflow: hidden
    }
    
    #featured li {
      width: 150px;
      display: inline-block;
      float: left;
      height: 150px;
      background: #222;
      border-left: 1px solid #111;
      border-right: 1px solid #333;
    }
    
    .thumb-featured {
      width: 140px;
      height: 100px;
      margin: 5px auto;
      overflow: hidden;
      border: 1px solid #000
    }
    
    .thumb-featured img {
      display: block;
      width: 134px;
      height: 94px;
      border: 3px solid #444;
    }
    
    .title-featured {
      text-align: center;
      position: relative;
      margin-top: -20px
    }
    
    .title-featured h4 {
      font-size: 90%;
      max-height: 45px;
      overflow: hidden
    }
    
    .arrow {
      position: absolute;
      display: block;
      width: 35px;
      height: 60px;
      text-align:center;
    vwericle-align:center;
      top: 50px;
      border: 1px solid #000;
      color:#000;
      background:#fff;
      box-shadow: 0 0 0 1px rgba(51, 51, 51, 1)inset
    }
    
    .arrow.back {
      left: 10px
    }
    
    .arrow.forward {
      right: 10px
    }
    
    span.slideloading {
      background-image: url(https://lh5.googleusercontent.com/-lMCTbMrvSCM/Uo-ClIXhv4I/AAAAAAAAGoY/5JDUhG_-HYA/h42/loading.gif);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      text-indent: -9999px;
      margin: 50px auto
    }
    .empty{display:none}
    </style>
    <div id='featured-wrap'>
      <div id='featured'>
        <span class='slideloading'>Loading...</span>
      </div>
    </div>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script>
    //<![CDATA[
    var domain = "https://www.softwebtuts.com", // Change this URL to your website URL if you will leave it blank it will automatically detect your site URL.
        numpostx = 12, // Change this 12 to the number of posts you want to see in this slider.
        thumbSize = 110, //This is the thumbnail size i recommend don't change it ( recommendation ).
        contjumlah = 0,  //This is post summery word count 0 don't show.
        cmtext = "Comments", //This is label or heading for comments count.
        pBlank = "https://lh5.googleusercontent.com/-mSufUJ214bg/Uo94DjMjnbI/AAAAAAAAGoA/1q7su-tZBkc/h120/no-image.jpg",  // This image will be shown if your post doesent have any image or thumb.
        pkBlank = "https://lh6.googleusercontent.com/-UZxZHJ71o1A/Uo95CAOG-7I/AAAAAAAAGoI/8hk05V-amCo/h120/no-avatar.jpg",  // This image will be shown if the author has no image or avatar.
        numcomment = 5,
        thumbcsize = 70,
        cmsumm = 100;
    $(document).ready(function() {
        $.ajax({
            url: domain + "/feeds/posts/default?alt=json-in-script&max-results=" + numpostx + "",
            type: "get",
            dataType: "jsonp",
            success: function(g) {
                var k, n, b, m, h, d = "",
                    o = g.feed.entry;
                if (o !== undefined) {
                    d = "<ul>";
                    for (var f = 0; f < o.length; f++) {
                        for (var e = 0; e < o[f].link.length; e++) {
                            if (o[f].link[e].rel == "alternate") {
                                k = o[f].link[e].href;
                                break
                            }
                        }
                        for (var c = 0; c < o[f].link.length; c++) {
                            if (o[f].link[c].rel == "replies" && o[f].link[c].type == "text/html") {
                                h = o[f].link[c].title.split(" ")[0];
                                break
                            }
                        }
                        if ("content" in o[f]) {
                            n = o[f].content.$t
                        } else {
                            if ("summary" in o[f]) {
                                n = o[f].summary.$t
                            } else {
                                n = ""
                            }
                        }
                        if ("media$thumbnail" in o[f]) {
                            postimg = o[f].media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/s" + thumbSize + "-c")
                        } else {
                            postimg = pBlank
                        }
                        var p = /<\S[^>]*>/g;
                        n = n.replace(p, "");
                        if (n.length > contjumlah) {
                            n = n.substring(0, contjumlah)
                        }
                        b = o[f].title.$t;
                        m = o[f].published.$t.substring(0, 10), m = m.replace(/-/g, "/");
                        d += '<li><div class="thumb-featured"><a href="' + k + '" target="_blank"><span><img alt="' + b + '"src="' + postimg + '"title="' + b + '" /></span></a></div><div class="title-featured"><h4><a href="' + k + '" title="' + b + '" target="_blank">' + b + '</a></h4><div class="datex"><span class="dt">' + m + '</span><span class="cm">' + h + " " + cmtext + '</span></div></div><div class="contxisi">' + n + "</div></li>"
                    }
                    d += "</ul>";
                    $("#featured").html(d);
                    (function() {
                        $.fn.infiniteCarousel = function() {
                            function i(j, l) {
                                return new Array(l + 1).join(j)
                            }
                            return this.each(function() {
                                var q = $("> div", this).css("overflow", "hidden"),
                                    r = q.find("> ul").width(9999),
                                    s = r.find("> li"),
                                    j = s.filter(":first");
                                singleWidth = j.outerWidth(), visible = Math.ceil(q.innerWidth() / singleWidth), currentPage = 1, pages = Math.ceil(s.length / visible);
                                if (s.length % visible != 0) {
                                    r.append(i('', visible - (s.length % visible)));
                                    s = r.find("> li")
                                }
                                s.filter(":first").before(s.slice(-visible).clone().addClass("cloned"));
                                s.filter(":last").after(s.slice(0, visible).clone().addClass("cloned"));
                                s = r.find("> li");
                                q.scrollLeft(singleWidth * visible);
    
                                function l(u) {
                                    var t = u < currentPage ? -1 : 1,
                                        w = Math.abs(currentPage - u),
                                        v = singleWidth * t * visible * w;
                                    q.filter(":not(:animated)").animate({
                                        scrollLeft: "+=" + v
                                    }, 3000, function() {
                                        if (u > pages) {
                                            q.scrollLeft(singleWidth * visible);
                                            u = 1
                                        } else {
                                            if (u == 0) {
                                                u = pages;
                                                q.scrollLeft(singleWidth * visible * pages)
                                            }
                                        }
                                        currentPage = u
                                    })
                                }
                                q.after('<a href="#" class="arrow back"><</a><a href="#" class="arrow forward">></a>');
                                $("a.back", this).click(function() {
                                    l(currentPage - 1);
                                    return false
                                });
                                $("a.forward", this).click(function() {
                                    l(currentPage + 1);
                                    return false
                                });
                                $(this).bind("goto", function(t, u) {
                                    l(u)
                                });
                                $(this).bind("next", function() {
                                    l(currentPage + 1)
                                })
                            })
                        }
                    })(jQuery);
                    var a = true;
                    $("#featured-wrap").infiniteCarousel().mouseover(function() {
                        a = false
                    }).mouseout(function() {
                        a = true
                    });
                    setInterval(function() {
                        if (a) {
                            $("#featured-wrap").trigger("next")
                        }
                    }, 8000)
                } else {
                    $("#featured").html("<span>No result!</span>")
                }
            },
            error: function() {
                $("#featured").html("<strong>Error Loading Feed!</strong>")
            }
        });
        $.ajax({
            url: domain+"/feeds/comments/default?alt=json-in-script&max-results=" + numcomment + "",
            type: "get",
            dataType: "jsonp",
            success: function(n) {
                var f, a, c, m, g, h, b = "",
                    j = n.feed.entry;
                if (j !== undefined) {
                    b = "<ul>";
                    for (var e = 0; e < j.length; e++) {
                        for (var d = 0; d < j[e].link.length; d++) {
                            if (j[e].link[d].rel == "alternate") {
                                m = j[e].link[d].href;
                                break
                            }
                        }
                        if ("content" in j[e]) {
                            f = j[e].content.$t
                        } else {
                            if ("summary" in j[e]) {
                                f = j[e].summary.$t
                            } else {
                                f = ""
                            }
                        }
                        if (j[e].author[0].gd$image.src == "http://img1.blogblog.com/img/blank.gif") {
                            a = pkBlank
                        } else {
                            a = j[e].author[0].gd$image.src.replace(/\/s[0-9]+(\-c|\/)/, "/s" + thumbcsize + "$1")
                        }
                        var l = /<\S[^>]*>/g;
                        c = (j[e].author[0].uri) ? j[e].author[0].uri.$t : "#nope";
                        g = j[e].author[0].name.$t;
                        f = f.replace(l, "");
                        if (f.length > cmsumm) {
                            f = f.substring(0, cmsumm) + "..."
                        }
                        h = j[e].gd$extendedProperty[1].value;
                        b += '<li><div class="kmtimg"><a rel="nofollow" href="' + m + '"><span><img src="' + a + '" title="' + g + '" alt="' + g + '"/></span></a></div><div class="ketkomt"><a rel="nofollow" href="' + m + '" title="' + g + '" class="tooltip">' + g + "</a><span>" + h + '</span></div><div class="komtsum">' + f + "</div></li>"
                    }
                    b += "</ul>";
                    $("#rcentcomnets").html(b)
                } else {
                    $("#rcentcomnets").html("<span>No result!</span>")
                }
            },
            error: function() {
                $("#rcentcomnets").html("<strong>Error Loading Feed!</strong>")
            }
        })
    });
    //]]>
    </script>
  8. Save Theme/Template

After installing this widget into your blogger blog you have to make some customizations to make this blogger widget work properly in your blogger blog.

Every time one of the big customisation in every blogger widget is your website URL.

You have to change the URL to your website URL so that this widget access data from your blog and shows up the articles of your website.

So as usual in the previously shared blogger widgets this time you have to to replace this URL which is highlighted in the code to your website URL or you can leave it empty to auto-detect your website URL.

Highlighted lines in the above code are configuration lines which you can change according to your requirements description of each line is provided after that line in javascript comments you can see that.

So after making all the customisation this blogger widget will work pretty fine for you and I hope you will like it.

You can also play with the settings of the slider like it transition duration etc.

If you want to see the demo of this widget here is the demo for you. Click the button below to see the demo of this automatic post slider blogger widget.
View Demo

Conclusion:

I hope that you will like this automatic post slider blogger widget and it may help you in in customising your website and making it beautiful.

One thing that I always say is if your website is beautiful it will force your visitors to come back again.

I hope that It helped you and have solved your very big issue so keep visiting this site and subscribe to the newsletters to get notifications.
Disqus Codes

No comments

Notifications

Disqus Logo