Horizontal style recent posts blogger widget
close
Horizontal style recent posts blogger widget

Horizontal style recent posts blogger widget

Horizontal style recent posts blogger widget

Hello friends today I am having another recent posts widget for you and this widget is for blogger you can use this widget in your blogger blogs.


This horizontal style widget is in horizontal form as it it shows by its name and this widget shows up post title, publish date, number of comments and thumbnail and all the posts are listed inline.

So if we talk about the placement of this blogger widget then the best place to add this blogger widget into your blogger blog is the header section of your blogger blog or in the footer section because this is mainly made for that.

If want to check the responsiveness of this horizontal style recent posts blogger widget then you can go to the demo where you can see the demo or preview and also you can check the responsiveness of this blogger widget.

I have previously shares horizontal style recent post blogger widget but that was in the form of slider and this is slider independent.

Here are different ways to install this widget into your blogger blog but I always try to share with you the easiest way to install any blogger widget into your blogger blogs.

So you can add this widget into your blogger Blog by following the steps provided below.

Steps to follow:

  1. Go to Blogger Dashboard
  2. Go to Layout Section
  3. Click Add Gadget
  4. Select location by your choice but if you want my recommendations the place this widget in header or footer saction of your blogger blog.
  5. Select HTML/Javascript widget from the list
  6. Now copy and paste the code provided below in widget.
  7. <script>
    //<![CDATA[
    function labelthumbs(t) {
        document.write('<ul id="label_with_thumbs">');
        for (var e = 0; e < numposts; e++) {
            var r, n, i = t.feed.entry[e],
                l = i.title.$t;
            if (e == t.feed.entry.length) break;
            for (var u = 0; u < i.link.length; u++) {
                if ("replies" == i.link[u].rel && "text/html" == i.link[u].type) var o = i.link[u].title,
                    m = i.link[u].href;
                if ("alternate" == i.link[u].rel) {
                    r = i.link[u].href;
                    break
                }
            }
            try {
                n = i.media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/, "/s200-c200")
            } catch (t) {
                s = i.content.$t, a = s.indexOf("<img"), b = s.indexOf('src="', a), c = s.indexOf('"', b + 5), d = s.substr(b + 5, c - b - 5), n = -1 != a && -1 != b && -1 != c && "" != d ? d : "http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png"
            }
            var p = i.published.$t,
                h = (p.substring(0, 4), p.substring(5, 7), p.substring(8, 10), new Array);
            h[1] = "Jan", h[2] = "Feb", h[3] = "Mar", h[4] = "Apr", h[5] = "May", h[6] = "June", h[7] = "July", h[8] = "Aug", h[9] = "Sept", h[10] = "Oct", h[11] = "Nov", h[12] = "Dec", document.write('<li class="recent-box">'), 1 == showpostthumbnails && document.write('<div class="imageContainer"><a href="' + r + '" target ="_top"><img class="label_thumb" src="' + n + '" title="' + l + '" alt="' + l + '"/></a></div>'), document.write('<a class="label_title" href="' + r + '" target ="_top">' + l + "</a>");
            var g = 0;
            document.write("");
            for (var f = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], w = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"], v = (p = i.published.$t).split("-")[2].substring(0, 2), y = p.split("-")[1], _ = p.split("-")[0], A = 0; A < f.length; A++)
                if (parseInt(y) == f[A]) {
                    y = w[A];
                    break
                } var k = v + " " + y + " " + _;
            if (1 == showpostdate && document.write('<div class="toe"><a href="' + r + '" class="post-date">' + k + "</a>"), 1 == showcommentnum && (1 == g && " | ", "1 Comments" == o && (o = "1 Comment"), "0 Comments" == o && (o = "No Comments"), o, g = 1, document.write('<a class="recent-com" href="' + m + '" target ="_top">' + o + "</a></div>")), "content" in i) var $ = i.content.$t;
            else if ("summary" in i) $ = i.summary.$t;
            else $ = "";
            if ($ = $.replace(/<\S[^>]*>/g, ""), 1 == showpostsummary)
                if ($.length < numchars) document.write(""), document.write($), document.write("");
                else {
                    document.write("");
                    var x = ($ = $.substring(0, numchars)).lastIndexOf(" ");
                    $ = $.substring(0, x), document.write('<p class="post-summary">' + $ + "...</p>")
                } document.write("</li>"), e != numposts - 1 && document.write("")
        }
        document.write("</ul>")
    }
    $(document).ready(function() {
        $(".label_thumb").attr("src", function(t, e) {
            return e.replace("s72-c", "s1600")
        })
    }), $(document).ready(function() {
        $(".label_thumb").attr("src", function(t, e) {
            return e.replace("default.jpg", "mqdefault.jpg")
        })
    });
    //]]>
    </script>
    <div id='recent1'>
    <script type='text/javascript'>var numposts =4;var showpostthumbnails = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = false;var numchars = 180;</script>
    <script src='https://www.softwebtuts.com/feeds/posts/default/-/html?published&alt=json-in-script&callback=labelthumbs' type='text/javascript'></script>
    </div>
    <style>
    a{text-decoration:none}
      #recent1 .title {position:relative;overflow:hidden;font-size:18px;font-weight:400;padding:12px 12px;transition:all 0.5s ease-out;border-left: 5px solid;background: #fff;margin-left: 0;margin-top:0}
    #recent1 .title p {display: initial; font-size: 12px; margin: 0;}
    #recent1 .title a{color: #444;border-right: 1px solid #27ae60; padding-right: 10px;}
    #recent1 { width: 100%;overflow: hidden;}
    #recent1 .label_title {font-size: 15px; font-weight: 600; margin: 0 12px 8px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: #444; font-family: roboto;height:43px;}
    .ftimg {height: auto; width: 90px; display: block; overflow: hidden; position: absolute; margin:0 0 0 253px;}
    #recent1 .recent-box .imageContainer {width:100%;overflow: hidden;margin-right: 20px;margin-bottom: 10px;overflow:hidden;}
    #recent1 .recent-box .imageContainer { margin-left: 0; }
    .imageContainer {float: none;width: 100%;margin-bottom: 5px;transition: 0.9s; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;}
    img.label_thumb:hover{ opacity: 0.4; -webkit-transform: scale3d(1.1,1.1,1); transform: scale3d(1.1,1.1,1); }
    #recent1 .widget-content {padding:0}
    .label_thumb {margin-left:0;transform: scale(1.0); transition: 0.9s;}
    .label_title {display: block;font-size: 15px;line-height: 23px;color: #595757}
    .label_title:hover {color:}
    .post-date {font-size: 11px; color: #555; margin-right: 8px; font-weight: 500;}
    .post-date:before {content: "\f044";font-family: FontAwesome;display: inline-block;margin-right: 3px;}
    .recent-com {font-size: 11px; color: #555; margin-right: 8px; font-weight: 500;}
    .recent-com:before {content:"\f0e5";font-family: FontAwesome;display: inline-block;margin-right: 3px;}
    .post-summary {padding-top:0;text-align:justify}
    img.label_thumb {transition: 0.9s;-webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, transform 1s; -webkit-backface-visibility: hidden; backface-visibility: hidden;height: 150px!important;overflow: hidden; width: 100%;}
    img.recent_thumb {width:280px;height:200px;float:left;margin-bottom:5px;transition: 0.9s;    margin-right: 10px;}
    ul.recent_posts_with_thumbs {padding:0}
    .recent_posts_with_thumbs {float: left;width: 100%;min-height: 100%;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
    ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:80px;border-bottom: 1px solid rgba(192, 192, 192, 0.38); margin-bottom: 10px;}
    ul.recent_posts_with_thumbs li:last-child {border-bottom:none;}
    ul.recent_posts_with_thumbs li p {margin: 0.3em 0; font-size: 11px;}
    .recent_posts_with_thumbs a {text-decoration:none;font-size: 13px; font-weight:700; color: #333;}
    .recent_posts_with_thumbs strong {font-size:10px;}
    #label_with_thumbs li{background:#fff;padding: 20px; margin: 0;width:20%;height:230px; float: left; overflow: hidden; margin-right:14px;display: block;border:1px solid #eee;margin-bottom:10px;}
    #label_with_thumbs {margin:0;padding: 0;position: relative;}
    .label_thumb{position:relative;max-width:none;margin-left:0;transform:scale(1.0);transition:.9s}
    .label_title{display:block;font-size:15px;line-height:23px;color:#2D2D2D}
    .label_title:hover{color:#32aae1}
    .toe{overflow:hidden;display:block;margin-bottom:5px;}
    .post-summary{line-height:18px;margin: 0; font-size: 13px; color: #333;overflow: hidden; display: initial;}
    .ro{margin-bottom:15px;overflow:hidden}
    #label_with_thumbs li:last-child{margin-right:0}
      </style>
  8. Give Your Widget a title or leave it empty.
  9. Save Widget

Here are some configuration settings listed in the table which you can configure according to your requirements in the source code of this horizontal style recent posts blogger widget.

So you should configure up all these settings, without configuring them you cannot make this widget work properly.

You can read the configuration settings by their description in front of them and understand what it does.

ValiableDescription
https://www.softwebtuts.comReplace this URL with your site URL.
numposts =4Number of Posts
showpostthumbnails = true;Show thumbnails, Default true.
showcommentnum = trueShow comments count, Default true.
showpostdate = trueShow post publish date, Default true.
showpostsummary = falseShow post summary, Default true
numchars = 180Number of characters to show in post summary.

So after reading all the configuration settings, descriptions and after configuring this widget according to your requirements then you can see that this widget will be working properly on your blogger blog if it doesn't Then there would be any mistake that you have to configure but I think that after that time this widget will be working properly into your blogger blog.


If you want to the demo of this widget click button below.
View Demo

Ending:

I hope that you like this horizontal style recent posts blogger widget and if you like it please try to use it into your blogger blog and also leave your feedback in the comment section and suggest me new widgets for blogger which I should make for you.

so keep visiting this site for more of this kind of articles.
Disqus Codes

No comments

Notifications

Disqus Logo