Responsive Recent Post Widget for Blogger Horizontal Style

How do you do bloggers once again I am here to share with you an other exciting and beautiful responsive recent post widget for blogger in horizontal style.

Basically this is a recent post widget which show the recent posts from your blogger blog and fetch that posts from JSON feed by blogger JSON feed API.

I have already shared many other beautiful and interesting recent post widget on this blog you can see them by going to blogger widgets label

This is horizontal style recent posts widget which can be placed at the header of your blogger template for at the footer of your blogger template to get good results and make your site beautiful.

I will also provide the demo for this but before providing the demo you can see the preview of this widget in the thumbnail of this post.

This recent post widget shows up 3 to 4 posts on computer devices but if you are using this on mobile device then only one post is shown in this recent post widget.

This widget will not affect your website in any condition because the source code of this widget is not too much lengthy.

So now let's build it added to our blogger blog to do so you have the following steps which are provided below and do as it is sad without skipping any step.

Steps to follow:

Go to Blogger Dashboard
Go to Theme/Template Section
Click Edit HTML
Now Search for </body>

To search anything in blogger template section press Ctrl+F and then type term to search and press enter.

Copy the code provided below paste is just before the tag we have founded in step 4

<style>
body {
    font-family: 'Poppins',sans-serif;
    padding: 0;
    margin: 0;
    font-weight: normal;
}
/* Featured */
#gravityfeatured{margin:20px auto 0 auto}
.gravityfeatured{background:#fff;display:flex;margin:0 auto;width:100%;overflow:hidden;max-width:970px;padding:20px;}
.gravfeatureditem{background:rgba(0,0,0,0.02);display:block;position:relative;float:left;overflow:hidden;height:210px;width:25%;margin:0 1px}
.gravfeatureditem.first{margin:0 1px 0 0}.gravfeatureditem.fourth{margin:0 0 0 1px}
.gravfeatureditem .gracontent{background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.7) 100%);display:block;position:absolute;z-index:6;bottom:0;left:0;right:0;transform:translate(0,0);opacity:1;visibility:visible;transition:all .3s}
.gravfeatureditem:hover .gracontent{opacity:0;visibility:hidden;transform:translate(0,60px)}
.gravfeatureditem .gracontent h3{font-size:14px;color:#fff;padding:30px 10px 15px 10px;font-weight:400;margin:0;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.gravfeatureditem .feat-img{width:100%;height:100%;background-size:cover;background-position:50%;filter:blur(0px);transition:all .5s}
.gravfeatureditem:hover .feat-img{transform:translate(0,-5px) scale(1.1);filter:blur(2px);}
.gravfeatureditem a{display:block;color:#e2934e;position:relative;vertical-align:bottom;z-index:5;height:100%;transition:all .3s}
.gravfeatureditem a:before{content:'';background:rgba(255,255,255,0.92);width:100%;height:100%;position:absolute;z-index:3;top:0;opacity:0;transition:background 0.3s linear,opacity 0.3s linear}
.gravfeatureditem.first a:before,.gravfeatureditem.second a:before,.gravfeatureditem.third a:before,.gravfeatureditem.fourth a:before{background:rgba(0,0,0,.6)}
.gravfeatureditem a:hover:before{opacity:0.96;}
.gravfeatureditem a:after{content:'\f030';font-family:fontawesome;position:absolute;z-index:3;font-size:3rem;top:32%;left:0;right:0;bottom:0;color:rgba(255,255,255,.4);text-align:center;transform:translate(0,-60px);opacity:0;visibility:hidden;transition:all .3s}
.gravfeatureditem:hover a:after{opacity:1;visibility:visible;transform:translate(0,0);}
@media screen and (max-width:826px){
.gravfeatureditem{width:50%}
.gravfeatureditem.third,.gravfeatureditem.fourth{display:none}}
@media screen and (max-width:767px){
.post-thumbnail{margin:0 0 20px auto;float:none}}
@media screen and (max-width:640px){
.sosmed-author li {width:23%}
.gravfeatureditem{width:100%}
.gravfeatureditem.second,.gravfeatureditem.third,.gravfeatureditem.fourth{display:none}}
</style>
<script>
//<![CDATA[
// Recent Post
var website = "https://www.softwebtuts.com";
var post_thumb_size = 300;
var yt_thumb_size = "mqdefault.jpg";
function getPostUrl(a) {
    for (var b = 0; b < a.link.length; b++)
        if ("alternate" == a.link[b].rel) {
            var c = a.link[b].href;
            return c
        }
}
function getPostPublishDate(a) {
    var b = a.published.$t,
        c = b.split("-")[2].substring(0, 2),
        d = b.split("-")[1],
        e = b.split("-")[0],
        f = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "Octobor", "November", "December"],
        g = f[d - 1],
        h = g + " " + c + ", " + e;
    return b ? h : ""
}
function getPostCategory(a) {
    var b = a.category;
    b && (b = a.category[0].term);
    var c = '<div class="category-wrapper"><a class="category" href="/search/label/' + b + '?max-results=10">' + b + "</a></div>";
    return b ? c : ""
}
function Slider(a) {
    for (var c = (new Array, ""), d = a.feed.entry.length, e = 0; e < d; e++) {
        var f = a.feed.entry[e],
            g = f.title.$t,
            h = getPostUrl(f),
            l = (f.author[0].name.$t, getPostPublishDate(f), getPostCategory(f), f.category[0].term),
            m = a.feed.entry[e].content.$t,
            n = $("<div>").html(m);
        if (m.indexOf("//www.youtube.com/embed/") > -1) var o = a.feed.entry[e].media$thumbnail.url,
            p = o;
        else if (m.indexOf("<img") > -1) var q = n.find("img:first").attr("src"),
            p = q;
        else var p = no_image;
        0 == e && (c = c + '<div class="gravfeatureditem first"><div class="gracontent"><h3>' + g + '</h3></div><a href="' + h + '"><div class="feat-img" style="background-image:url(' + p + ');"></div></a></div>'), 1 == e && (c = c + '<div class="gravfeatureditem second"><div class="gracontent"><h3>' + g + '</h3></div><a href="' + h + '"><div class="feat-img" style="background-image:url(' + p + ');"></div></a></div>'), 2 == e && (c = c + '<div class="gravfeatureditem third"><div class="gracontent"><h3>' + g + '</h3></div><a href="' + h + '"><div class="feat-img" style="background-image:url(' + p + ');"></div></a></div>'), 3 == e && (c = c + '<div class="gravfeatureditem fourth"><div class="gracontent"><h3>' + g + '</h3></div><a href="' + h + '"><div class="feat-img" style="background-image:url(' + p + ');"></div></a></div>')
    }
    slider.html('<div class="gravityfeatured">' + c + "</div>"), $(".gravityfeatured").find(".feat-img").each(function() {
        $(this).attr("style", function(a, b) {
            return b.replace("/default.jpg", "/" + yt_thumb_size)
        }).attr("style", function(a, b) {
            return b.replace("/maxresdefault.jpg", "/" + yt_thumb_size)
        }).attr("style", function(a, b) {
            return b.replace("/mqdefault.jpg", "/" + yt_thumb_size)
        }).attr("style", function(a, b) {
            return b.replace("s72-c", "s" + post_thumb_size)
        }).attr("style", function(a, b) {
            return b.replace("s320", "s" + post_thumb_size)
        }).attr("style", function(a, b) {
            return b.replace("s400", "s" + post_thumb_size)
        }).attr("style", function(a, b) {
            return b.replace("s640", "s" + post_thumb_size)
        }).attr("style", function(a, b) {
            return b.replace("s1600", "s" + post_thumb_size)
        })
    })
}
var slider = $("#gravityfeatured"),
    sliderContent = slider.text().trim();
"no" !== sliderContent.toLowerCase().trim() && '"no"' !== sliderContent.toLowerCase() && "" !== sliderContent ? "[recent]" !== sliderContent ? $.ajax({
    url: website + "/feeds/posts/default/-/" + sliderContent + "?alt=json-in-script&max-results=4",
    type: "get",
    dataType: "jsonp",
    success: function(a) {
        Slider(a)
    }
}) : $.ajax({
    url: website + "/feeds/posts/default?alt=json-in-script&max-results=4",
    type: "get",
    dataType: "jsonp",
    success: function(a) {
        Slider(a)
    }
}) : $("#slider").remove();

//]]>
</script>

Save Theme/Template
Now go to Layout Section in blogger dashboard
Choose the place where you want to add this Make sure you choose header or footer where the width is 100%.
Click Add New Widget
Select HTML/Javascript Widget from widgets list
Now copy the code provided below and paste it as widget content.

<div class='site-contentpix' id='contentpix'>
<div class='gravityfeaturedz section' id='gravityfeatured'>
[recent]
</div>
  </div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'><-e30/script>

Save Widget

I have used JQuery code that's why i have added JQuery library. If you already have added in your blogger template don't add this one.

Replacements in the above code:

In the code provided above you have to make some replacements to make is code or widget completely yours.

To know these replacements you can see the table below replacement word and description is provided in this table.

Replacement	Description
https://www.softwebtuts.com	Replace this URL with your website URL.
var post_thumb_size = 300;	Replace 300 with the pixels of thumbnail. Higher the value best the quality or thumbnail but greater will be load time.
var yt_thumb_size = "mqdefault.jpg";	Replace mqdefault.jpg with the size of youtube thumbnail. Accepted values are mqdefault.jpg, maxresdefault.jpg, default.jpg, 0.jpg, 1.jpg, 2.jpg, hqdefault.jpg etc.

Searching for demo?

I think that you are searching for the demo. If you want to see the demo of this widget click the demo button below to see it now.
View Demo

Demo does not work properly every time try reloading page.

Final thoughts:

So now today we have build responsive recent post widget for blogger in horizontal style you can read all the steps Above and make this widget your.

I hope you will like this post. Go and try this and Good Luck keep visiting this site for this kind of interesting articles.

source:softwebtuts.com

A4F

Responsive Recent Post Widget for Blogger Horizontal Style