Labelled Posts Blogger Widget in Tab Styles
close
Labelled Posts Blogger Widget in Tab Styles

Labelled Posts Blogger Widget in Tab Styles

Labelled Posts Blogger Widget in Tab Styles

Once again I have another interesting and beautiful blogger widget for you and this is in tabs style.

If you don't know about the tabs then let me tell you what are tabs. This time I am not going to provide you the introduction of tabs instead I am going to show the preview of Tab as you can see below.

Labelled Posts Blogger Widget in Tab Styles

This is labelled posts blogger widget which means that this widget shows recent posts with specified labels or with specific label.

By using this widget you can create multiple tabs and add your posts in that tabs which looks very much beautiful as you can see it on the demo page by clicking the button below.
View Demo

For me it is giving me very best results according to its responsiveness but I don't know about you.

This is a pre tested widget which works fine for me not this one even all my widgets which I have shared on this blog are pre tested.

You can also include this widget inside your article or in your articles but the best place to add this widget is your homepage just above the main posts widget.

So below are some steps which you have to follow to add this widget into your blogger blog these steps are not too much difficult if you are my daily visitor then you may have seen these steps on my previous posts.

Here i am going to provide you the steps to add this widget into static page.

Steps to follow:

  1. Go to Blogger Dashboard
  2. Go to Page Section
  3. Click Add New Page
  4. Now Copy the code provided below and paste in on that page in HTML Tab.
  5. <!--DOCTYPE html-->
    <html lang="en" >
    <head>
    <meta charset="UTF-8">
    <title>Labeled Posts Blogger Widget in Tab Style</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <style>
    @import url(https://fonts.googleapis.com/css?family=Roboto:400, 700);
     body {
     margin:0;
     padding:0;
     background:#fff;
     font-family:'Roboto', sans-serif;
     }
    *, *:before, *:after {
     -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
     box-sizing:border-box;
     }
    ins {
     background:#fff;
     }
    #arlina {
     background:#fff;
     position:relative;
     margin:5% auto;
     width:100%;
     max-width:920px;
     overflow:hidden;
     box-shadow:0 0 0 20px rgba(0, 0, 0, 0.03);
     }
    a:link, a:visited:hover {
     color:#138be6;
     text-decoration:none;
     outline:none;
     transition:all 0.25s;
     }
    a:visited, a:link:hover {
     color:#333;
     text-decoration:none;
     }
    .recent-labpost {
     margin:20px;
     }
    .rctab-button>span {
     padding:15px 20px;
     cursor:pointer;
     position:relative;
     color:#222;
     display:inline-block;
     font-size:120%;
     font-weight:700;
     }
    .rctab-button>span.active {
     color:#222;
     background:rgba(0, 0, 0, 0.05)}
    .rctab-button>span.active:before {
     content:'';
     top:0;
     opacity:1}
    .rctab-content {
     padding:15px;
     background:rgba(0, 0, 0, 0.05);
     position:relative;
     min-height:100px;
     overflow:auto}
    .rctab-item {
     float:left;
     width:48%;
     margin:10px 1%;
     background:#fff;
     border:1px solid rgba(0, 0, 0, 0);
     transition:all .3s;
     }
    .rctab-item:hover {
     border:1px solid rgba(0, 0, 0, 0.1);
     }
    .rctab-item-inner {
     padding:10px}
    .rctab-item img {
     float:left;
     width:120px;
     height:auto;
     }
    .rctab-item h3 {
     float:right;
     width:calc(100% - 130px);
     height:20px;
     margin:10px 0;
     font-size:120%}
    .rctab-item h3 a {
     color:#222}
    .rctab-item h3 a:hover {
     color:#e74c3c}
    .loader {
     position:absolute;
     left:50%;
     top:50%;
     margin-left:-27.5px;
     margin-top:-27.5px;
     transition:all .3s linear}
    .hide-load .loader {
     opacity:0}
    .squarin {
     background:#374140;
     width:15px;
     height:15px;
     float:left;
     top:-10px;
     margin-right:5px;
     margin-top:5px;
     position:relative;
     opacity:0;
     -webkit-animation:enter 6s infinite;
     animation:enter 6s infinite}
    .enter {
     top:0;
     opacity:1}
    .squarin:nth-child(1) {
     -webkit-animation-delay:1.8s;
     -moz-animation-delay:1.8s;
     animation-delay:1.8s}
    .squarin:nth-child(2) {
     -webkit-animation-delay:2.1s;
     -moz-animation-delay:2.1s;
     animation-delay:2.1s}
    .squarin:nth-child(3) {
     -webkit-animation-delay:2.4s;
     -moz-animation-delay:2.4s;
     animation-delay:2.4s;
     background:#09c}
    .squarin:nth-child(4) {
     -webkit-animation-delay:0.9s;
     -moz-animation-delay:0.9s;
     animation-delay:0.9s}
    .squarin:nth-child(5) {
     -webkit-animation-delay:1.2s;
     -moz-animation-delay:1.2s;
     animation-delay:1.2s}
    .squarin:nth-child(6) {
     -webkit-animation-delay:1.5s;
     -moz-animation-delay:1.5s;
     animation-delay:1.5s}
    .squarin:nth-child(8) {
     -webkit-animation-delay:0.3s;
     -moz-animation-delay:0.3s;
     animation-delay:0.3s}
    .squarin:nth-child(9) {
     -webkit-animation-delay:0.6s;
     -moz-animation-delay:0.6s;
     animation-delay:0.6s}
    @media screen and (max-width:768px) {
     .rctab-item {
     float:left;
     width:100%;
     }
    .rctab-item {
     margin:10px auto;
     }
    }
    aside#bott {
     position:static;
     left:0;
     right:0;
     bottom:0;
     margin:5% auto 0 auto;
     flex:none;
     display:flex;
     align-items:center;
     justify-content:center;
     background:rgba(0, 0, 0, .08);
     color:#999;
     padding:1em}
    aside span.bott {
     color:inherit;
     text-decoration:none;
     font-weight:normal;
     display:inline-block;
     padding:.4em 1em}
    </style>
    </head>
    <body>
    <div id="arlina">
    <div class='recent-labpost' data-label='["html","css","seo","blogger","tutorial"]'>
    </div>
    </div>
    <aside id="bott">
    <div>
    <span class="bott">Read the tutorial on Softweb Tuts</span>
    </div>
    </aside>
    <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
    <script>
    //<![CDATA[
    function getMeImg(a) {
        var t = [a, a, !1];
        return void 0 !== a ? -1 !== a.url.indexOf("img.youtube") ? (t[0] = a.url.replace("default.jpg", "hqdefault.jpg"), t[1] = a.url.replace("default.jpg", "mqdefault.jpg"), t[2] = !0) : (t[0] = a.url.replace("s72-c", "w100-h75-c"), t[1] = a.url.replace("s72-c", "s500-c")) : (t[0] = "https://4.bp.blogspot.com/-THLip_5EXck/V4zK2o3lA6I/AAAAAAAAJfg/RG-Qo6D73z0zLAigWBEdfnFveop1IIa5gCLcB/s1600/thumb.png", t[1] = "https://4.bp.blogspot.com/-THLip_5EXck/V4zK2o3lA6I/AAAAAAAAJfg/RG-Qo6D73z0zLAigWBEdfnFveop1IIa5gCLcB/s1600/thumb.png"), t
    }
    
    function load_w_tab(a) {
        var t = a.find(".rctab-content>.active"),
            e = t.attr("data-load");
        $.ajax({
            type: "GET",
            url: "https://www.softwebtuts.com/feeds/posts/summary/-/" + e + "?max-results=20&alt=json-in-script",
            async: !1,
            contentType: "application/json",
            dataType: "jsonp",
            success: function(a) {
                if (a.feed.entry) {
                    t.append('<div class="wtab-inner"></div>');
                    for (var e = 0; e < a.feed.entry.length; e++) {
                        for (var i = a.feed.entry[e], d = 0; d < a.feed.entry[e].link.length; d++)
                            if ("alternate" == a.feed.entry[e].link[d].rel) {
                                var s = a.feed.entry[e].link[d].href;
                                break
                            }
                        var n = i.title.$t,
                            l = getMeImg(i.media$thumbnail),
                            r = '<div class="rctab-item"><div class="rctab-item-inner"><a href="' + s + '"><img src="' + l[0] + '"/></a><h3><a href="' + s + '">' + n + '</a></h3><div style="clear:both"></div></div></div>';
                        t.find(".wtab-inner").append(r)
                    }
                    t.addClass("hide-load")
                }
            }
        })
    }
    
    function getwtabs(e) {
        for (var labelArr = eval(e.attr("data-label")), html = '<div class="rctab-button">', i = 0; i < labelArr.length; i++) html += '<span data-target="' + labelArr[i] + '-genova">' + labelArr[i] + "</span>";
        html += '</div><div class="rctab-content">';
        for (var i = 0; i < labelArr.length; i++) html += '<div data-load="' + labelArr[i] + '" data-container="' + labelArr[i] + '-genova">' + loaderHTML + "</div>";
        html += "</div>", e.append(html), e.find(".rctab-button>span").first().addClass("active"), e.find(".rctab-content>div").hide(0), e.find(".rctab-content>div").first().show(0).addClass("active loaded"), setTimeout(function() {
            load_w_tab(e)
        }, 500), e.find(".rctab-button>span").click(function() {
            var a = $(this).attr("data-target"),
                t = $(this),
                i = "";
            e.find(".rctab-content>div").each(function() {
                $(this).attr("data-container") == a && (e.find(".rctab-button>span").removeClass("active"), t.addClass("active"), e.find(".rctab-content>div").removeClass("active").hide(0), $(this).fadeIn().addClass("active"), i = $(this))
            }), i.hasClass("loaded") || (i.addClass("loaded"), setTimeout(function() {
                load_w_tab(e)
            }, 500))
        })
    }
    var loaderHTML = '<div class="loader"> <div class="squarin" ></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin "></div> <div class="squarin last"></div> </div>';
    $(function() {
        getwtabs($(".recent-labpost"))
    });
    //]]>
    </script>
    </body>
    </html>
  6. Give your page a unique name and add description.
  7. Finally Publish your Page.
If you are wondering about the customization in the above code provided you simply have to replace these things which are listed in the table below and after that this widget will be working properly and fine for you.
TermDescription
https://www.softwebtuts.comReplace this URL with your website URL or remove it.
html, css, seo, blogger, tutorialReplace all these labels with your labels for which you want to show posts.


So after making all the customizations now I think this widget is looking pretty on your website or blog I hope you will like this widget.

Conclusion:

So this was the source code of labelled posts blogger widget in Tab style I think you will like this widget.
Disqus Codes

No comments

Comments System WIDGET PACK

Notifications

Disqus Logo