How to Add Label Based Recent Post Sliders in Blogger Fetching some recent post and showing up in a list is not enough only but today sliders are much more in use. jQuery plugins for sliders com...
2018-07-31T07:44:57Z

How to Add Label Based Recent Post Sliders in Blogger

Fetching some recent post and showing up in a list is not enough only but today sliders are much more in use. jQuery plugins for sliders comes to the rescue here. All we have to do is to fetch the recent post (perhaps label based) and then trigger the plugin.

label based recent post sliders for Blogger

Go to Template > Edit HTML. First step to add recent post is to add jQuery, if jQuery already exist in your template then skip this step else follow this step.

1. Add the following line of code after <head> :
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
Don't add this if you are already using any jQuery.js file

2. Find <head> and add the following code above it.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/jquery.nivo.slider.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function () {
    $(".recent-slider").each(function () {
        $(this).append('<div id="slider"></div>');
        var e = $(this).attr("data-label"),
            n = "http://yourblog.blogspot.com/feeds/posts/summary/-/" + e + "?max-results=" + 5 + "&alt=json-in-script",
            l = $(this);
        $.ajax({
            type: "GET",
            url: n,
            async: true,
            contentType: "application/json",
            dataType: "jsonp",
            success: function (s) {
                for (var r = 0; r < s.feed.entry.length; r++) {
                    for (var n = s.feed.entry[r], i = 0; i < n.link.length; i++)
                    if ("alternate" == n.link[i].rel) {
                        var o = n.link[i].href;
                        break
                    }
                    try {
                        var c = n.media$thumbnail.url.replace("s72-c", "h300-w1200-no")
                    } catch (p) {
                        var c = "https://1.bp.blogspot.com/-WcK_MwbGkl4/V75lPlr5tAI/AAAAAAAAFQ8/p4Db__YpRIUwAJib_2rfetQ03bPjVRZvQCLcB/s1600/No%2Bimage.jpg"
                    }
                    var d = n.title.$t,
                        u = n.summary.$t.substr(0, 180),
                        h = '<a href="' + o + '"><img src="' + c + '" title="<a href=\'' + o + "'><h3>" + d + "</h3></a><p>" + u + '</p>"/></a>';
                    l.find("#slider").append(h)
                }
                $("#slider").nivoSlider({
                    effect: "random",
                    pauseTime: 5e3
                })
            }
        })
    })
});
//]]>
</script>

Replace the highlighted text with your site or blog. image link this is a backup for slides with no image.

3. Next step is to find ]]></b:skin> and paste the following code above it.

/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height:300px;
overflow: hidden;
text-align:Center;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
height:300px !important;
}
.top-l-slider .nivoSlider {
position:relative;
width:100%;
height:400px;
overflow: hidden;
text-align:Center;
}
.top-l-slider .nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
height:400px !important;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
background:white;
filter:alpha(opacity=0);
opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
/* Caption styles */
.nivo-caption {
position:absolute;
bottom:10px;
left:5%;
display:block;
width:90%;
text-align:center;
font:400 26px 'segoe ui',sans-serif;
z-index:8;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
color:#fff;
}
.nivo-caption p {
text-align: Center;
font: 400 13px 'segoe ui',sans-serif;
margin: 10px 20px;
padding: 10px;
display: inline-block;
border-radius: 4px;
background: #222;
line-height: 21px;
}
.nivo-caption a{
color:#ecf0f1;
}
.nivo-caption h3{
text-align: center;
padding: 5px;
display: inline-block;
border-radius: 5px;
margin: 0;
line-height: 37px !important;
background: #e74c3c;
font: 400 30px 'segoe ui',sans-serif;
}
.nivo-caption .sliderdata{
margin:10px;
text-align:Center;
color:#fff;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position: absolute;
top: 50%;
margin-top: -15px;
z-index: 9;
font-size: 0;
display: block;
width: 30px;
height: 30px;
border-radius: 5px;
line-height: 30px !important;
background-color: rgba(255,255,255,0.5);
cursor: pointer;
/* border: 3px solid #fff; */
box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}
.nivo-prevNav {
left:10px;
}
.nivo-prevNav:before{
content:'\2190';
position:Absolute;
left:0;
top:0;
display:block;
z-index:100;
font:400 20px sans-serif;
color:#fff;
height:30px;
width:30px;
line-height:30px !important;
text-align:center;
}
.nivo-nextNav:before{
content:'\2192';
position:Absolute;
left:0;
top:0;
display:block;
z-index:100;
font:400 20px sans-serif;
color:#fff;
height:30px;
width:30px;
line-height:30px !important;
text-align:center;
}
.nivo-nextNav {
right:10px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
z-index:100;
position:absolute;
top:10px;
right:10px;
font-size:0;
}
.nivo-controlNav a {
cursor:pointer;
display:block;
width:20px;
height:20px;
background:#222;
float:left;
  border-radius:10px;
margin-right:5px;
}
.nivo-controlNav a.active {
background:#e74c3c;
}

4. Now Save the template and go to Blogger > Layout > Add Widget > HTML/Javascript. Then add the following code in it.
<div class='recent-slider' data-label='LabelName'></div>

Just change the LabelName with your desired label and make sure you do not remove quotation ( '' ) mark.

That's All.
Share it:

Blogger

Blogging

How To

Tutorial

Post A Comment:

0 comments: