Column Style Specific Label Posts Blogger Widget
close
Column Style Specific Label Posts Blogger Widget

Column Style Specific Label Posts Blogger Widget

Column Style Specific Label Posts Blogger Widget

Yesterday I was visiting blogger template sharing websites and I founded very beautiful templates on different template sharing websites and one of the blogger template which was listed as feature template on one of the website was called magma.

I love the style of that template but one thing that I mostly like was the widgets that were created and used in that blogger template I decided to get that widgets from that template. It was not an easy task because the code for that widget was obfuscated and it was highly obfuscated.

But as you know that I am a person who never accept defeat. I have recently created tool to highly deobfuscate any obfuscated JavaScript course you can see that tool here.

So I copied the obfuscated JavaScript code from there and then deobfuscated using JavaScript deobfuscator or JavaScript and packer tool which you can find on my website.

So now let's talk about this column style widget.

First of all let me tell you that this is specific label posts widget which means that you can only show up the posts with specific label in this blogger widget.

This widget is in column style it consists of two columns one is at the left and one is at the right.

First post in this widget is in bigger form and the rest of the posts are in the form of list.

If you want to talk about the responsiveness of this specific label posts widget for blogger in column style then I am going to give it A+ grade because this blogger widget is responsive to all devices it automatically adjusts it's Height and weight according to the device height and width where this widget is visible.

If you want to see the demo of this column style blogger widget you can see the demo by simply clicking the demo button provided below and you will be redirected to the demo page where you can see the demo of this blogger widget as well as you can check its responsiveness.

You will also find the source code of this widget on that demo page.
View Demo

Where to position this widget?

If you are thinking about the positioning of this column style widget for blogger then according to my opinion and my recommendation is to place this widget in the main section of your blogger blog where your posts or articles are listed on homepage.

you can also place this widget anywhere else where-ever you want because it is responsive and will automatically adjust its settings or style to view-port.

So now if you want to add this column style specific label post widget into your blogger blog then you have to follow the steps which are listed below.

Read the steps clearly and carefully and do as it is said without leaving for skipping any step.

Steps to follow:

  1. Go to Blogger Dashboard
  2. Go to Layout Section
  3. Click Add Gadget
  4. Click Add Gadget button in that section where you want to place this widget in your blogger blog section.
  5. Now select or choose HTML/Javascript widget from the list of widgets.
  6. Now copy the code provided below and paste it as a widget content.
  7. <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <div class='ty-column-wrap'>
    <div id='loader'></div>
    <div class='tyleft-wrapper'>
    <div class='column-left preload section' id='leftcolumn'><div class='widget HTML' data-version='1' id='HTML292'>
    <h2 class='title'>HTML</h2>
    <div class='widget-content'>
    <span data-type="tyleft" data-label="html"></span>
    </div>
    </div></div>
    </div><div class='tyright-wrapper'>
    <div class='column-right preload section' id='rightcolumn'><div class='widget HTML' data-version='1' id='HTML294'>
    <h2 class='title'>Blogger Widgets</h2>
    <div class='widget-content'>
    <span data-type="tyright" data-label="blogger widgets"></span>
    </div>
    </div></div>
    </div>
    </div>
    <script type="text/javascript">
    //<![CDATA[
    function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
    function loadJS(e, t, n) { "use strict"; var i = window.document.createElement("script"); var o = t || window.document.getElementsByTagName("script")[0]; i.type = "text/javascript"; i.src = e; o.parentNode.insertBefore(i, o); setTimeout(function () { i.type = n || "text/javascript" }) }
    loadCSS("https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
    //]]>
    </script>
    <script>
    //<![CDATA[
    $(document).ready(function() {
    var perPage = 6;
    var no_image = "http://3.bp.blogspot.com/-Yw8BIuvwoSQ/VsjkCIMoltI/AAAAAAAAC4c/s55PW6xEKn0/s1600-r/nth.png";
    var month_format = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
    var more_text = "View More";
    $(".column-left .HTML .widget-content").each(function () {
        var TitleText = $(this).prev("h2").text(),
            labelName = $(this).find("span").attr("data-label"),
            ParentElementID = $(this).parent().attr("id"),
            DataType = $(this).find("span").attr("data-type");
        if (DataType != undefined && DataType.match("tyleft")) {
            $.ajax({
                url: "https://www.softwebtuts.com/feeds/posts/default/-/" + labelName + "?alt=json-in-script&max-results=5",
                type: "get",
                dataType: "jsonp",
                success: function (_0x7868x1) {
                    var u = "";
                    var _0x7868x13 = "<div class=\"ty-feat\">";
                    for (var _0x7868xd = 0; _0x7868xd < _0x7868x1.feed.entry.length; _0x7868xd++) {
                        for (var _0x7868xe = 0; _0x7868xe < _0x7868x1.feed.entry[_0x7868xd].link.length; _0x7868xe++) {
                            if (_0x7868x1.feed.entry[_0x7868xd].link[_0x7868xe].rel == "alternate") {
                                u = _0x7868x1.feed.entry[_0x7868xd].link[_0x7868xe].href;
                                break
                            }
                        };
                        var _0x7868x1c;
                        for (var _0x7868x3 = 0; _0x7868x3 < _0x7868x1.feed.entry[_0x7868xd].link.length; _0x7868x3++) {
                            if ((_0x7868x1.feed.entry[_0x7868xd].link[_0x7868x3].rel === "replies") && (_0x7868x1.feed.entry[_0x7868xd].link[_0x7868x3].type === "text/html")) {
                                _0x7868x1c = _0x7868x1.feed.entry[_0x7868xd].link[_0x7868x3].title;
                                break
                            }
                        };
                        _0x7868x1c = parseInt(_0x7868x1c, 10);
                        if ("content" in _0x7868x1.feed.entry[_0x7868xd]) {
                            var _0x7868x1d = _0x7868x1.feed.entry[_0x7868xd].content["$t"]
                        } else {
                            if ("summary" in b_rc) {
                                var _0x7868x1d = _0x7868x1.feed.entry[_0x7868xd].summary["$t"]
                            } else {
                                var _0x7868x1d = ""
                            }
                        };
                        var _0x7868x1e = /<\S[^>]*>/g;
                        _0x7868x1d = _0x7868x1d.replace(_0x7868x1e, ""), _0x7868x1d.length > 170 && (_0x7868x1d = "" + _0x7868x1d.substring(0, 150) + "...");
                        var _0x7868x14 = _0x7868x1.feed.entry[_0x7868xd].title["$t"];
                        var s = _0x7868x1.feed.entry[_0x7868xd].category[0].term;
                        var _0x7868x1f = _0x7868x1.feed.entry[_0x7868xd].author[0].name["$t"];
                        var _0x7868x20 = _0x7868x1.feed.entry[_0x7868xd].author[0]["gd$image"].src;
                        var _0x7868x21 = _0x7868x1.feed.entry[_0x7868xd].published["$t"],
                            _0x7868xa = _0x7868x21.substring(0, 4),
                            _0x7868x22 = _0x7868x21.substring(5, 7),
                            _0x7868x23 = _0x7868x21.substring(8, 10),
                            _0x7868x24 = month_format[parseInt(_0x7868x22, 10)] + " " + _0x7868x23 + ", " + _0x7868xa;
                        var _0x7868x16 = _0x7868x1.feed.entry[_0x7868xd].content["$t"];
                        var _0x7868x17 = $("<div>").html(_0x7868x16);
                        if (_0x7868x16.indexOf("//www.youtube.com/embed/") > -1) {
                            var _0x7868x5 = _0x7868x1.feed.entry[_0x7868xd]["media$thumbnail"].url;
                            var _0x7868x3 = _0x7868x5
                        } else {
                            if (_0x7868x16.indexOf("<img") > -1) {
                                var _0x7868x18 = _0x7868x17.find("img:first").attr("src");
                                var _0x7868x3 = _0x7868x18
                            } else {
                                var _0x7868x3 = no_image
                            }
                        };
                        if (_0x7868xd == 0) {
                            _0x7868x13 += "<div class=\"col-left-first\"><div class=\"col-left-feat-image\"><div class=\"tyard-thumb\"><a class=\"col-left-img\" href=\"" + u + "\" style=\"background:url(" + _0x7868x3 + ") no-repeat center center;background-size: cover\"><span class=\"tyimg-lay\"/></a><div class=\"category-gallery\"><a class=\"icon " + s + "\" href=\"/search/label/" + s + "?&max-result=" + perPage + "\"></a></div><div class=\"yard-label\"><a class=\"icon " + s + "\" href=\"/search/label/" + s + "?&max-result=" + perPage + "\">" + s + "</a></div><div class=\"col-left-con-yard\"><h3 class=\"tyard-title\"><a href=\"" + u + "\">" + _0x7868x14 + "</a></h3><span class=\"yard-auth-ty\">" + _0x7868x1f + "</span><span class=\"col-left-time\">" + _0x7868x24 + "</span></div></div></div></div>"
                        } else {
                            _0x7868x13 += "<div class=\"col-left-rest\"><div class=\"tyard-thumb\"><a class=\"yard-img\" href=\"" + u + "\" style=\"background:url(" + _0x7868x3 + ") no-repeat center center;background-size: cover\"><span class=\"tyimg-lay\"/></a><div class=\"category-gallery\"><a class=\"icon " + s + "\" href=\"/search/label/" + s + "?&max-result=" + perPage + "\"></a></div></div><div class=\"yard-tent-ty\"><h3 class=\"tyard-title\"><a href=\"" + u + "\">" + _0x7868x14 + "</a></h3><span class=\"yard-auth-ty\">" + _0x7868x1f + "</span><span class=\"col-left-time\">" + _0x7868x24 + "</span></div></div>"
                        }
                    };
                    _0x7868x13 += "</div>";
                    $(".column-left .HTML .widget-content").each(function () {
                        var _0x7868x6 = $(this).parent().attr("id");
                        if (_0x7868x6 == ParentElementID) {
                            $(this).html(_0x7868x13);
                            $(this).parent().addClass("tyleft");
                            $(this).parent().addClass("templatesyard");
                            $(this).prev("h2").wrapInner("<a href=\"/search/label/" + s + "?&max-result=" + perPage + "\"></a>");
                            $(this).prev("h2").wrap("<div class=\"tyheading-head\"></div>");
                            $(this).prev(".tyheading-head").append("<a class=\"tymore\" href=\"/search/label/" + s + "?&max-result=" + perPage + "\">" + more_text + "</a>");
                            $(".column-left").addClass("comload").removeClass("preload");
                            $(this).find(".yard-img,.ty-img").each(function () {
                                $(this).attr("style", function (_0x7868xd, _0x7868x25) {
                                    return _0x7868x25.replace("/default.jpg", "/mqdefault.jpg")
                                }).attr("style", function (_0x7868xd, _0x7868x25) {
                                    return _0x7868x25.replace("s72-c", "s1600")
                                })
                            })
                        }
                    })
                }
            })
        } else {
            $(".tyleft-wrapper").remove()
        }
    });
    $(".column-right .HTML .widget-content").each(function () {
        var TitleText = $(this).prev("h2").text(),
            labelName = $(this).find("span").attr("data-label"),
            _0x7868x2a = $(this).parent().attr("id"),
            DataType = $(this).find("span").attr("data-type");
        if (DataType != undefined && DataType.match("tyright")) {
            $.ajax({
                url: "https://www.softwebtuts.com/feeds/posts/default/-/" + labelName + "?alt=json-in-script&max-results=5",
                type: "get",
                dataType: "jsonp",
                success: function (_0x7868x1) {
                    var u = "";
                    var _0x7868x13 = "<div class=\"ty-feat\">";
                    for (var _0x7868xd = 0; _0x7868xd < _0x7868x1.feed.entry.length; _0x7868xd++) {
                        for (var _0x7868xe = 0; _0x7868xe < _0x7868x1.feed.entry[_0x7868xd].link.length; _0x7868xe++) {
                            if (_0x7868x1.feed.entry[_0x7868xd].link[_0x7868xe].rel == "alternate") {
                                u = _0x7868x1.feed.entry[_0x7868xd].link[_0x7868xe].href;
                                break
                            }
                        };
                        var _0x7868x1c;
                        for (var _0x7868x3 = 0; _0x7868x3 < _0x7868x1.feed.entry[_0x7868xd].link.length; _0x7868x3++) {
                            if ((_0x7868x1.feed.entry[_0x7868xd].link[_0x7868x3].rel === "replies") && (_0x7868x1.feed.entry[_0x7868xd].link[_0x7868x3].type === "text/html")) {
                                _0x7868x1c = _0x7868x1.feed.entry[_0x7868xd].link[_0x7868x3].title;
                                break
                            }
                        };
                        _0x7868x1c = parseInt(_0x7868x1c, 10);
                        if ("content" in _0x7868x1.feed.entry[_0x7868xd]) {
                            var _0x7868x1d = _0x7868x1.feed.entry[_0x7868xd].content["$t"]
                        } else {
                            if ("summary" in b_rc) {
                                var _0x7868x1d = _0x7868x1.feed.entry[_0x7868xd].summary["$t"]
                            } else {
                                var _0x7868x1d = ""
                            }
                        };
                        var _0x7868x1e = /<\S[^>]*>/g;
                        _0x7868x1d = _0x7868x1d.replace(_0x7868x1e, ""), _0x7868x1d.length > 170 && (_0x7868x1d = "" + _0x7868x1d.substring(0, 150) + "...");
                        var _0x7868x14 = _0x7868x1.feed.entry[_0x7868xd].title["$t"];
                        var s = _0x7868x1.feed.entry[_0x7868xd].category[0].term;
                        var _0x7868x1f = _0x7868x1.feed.entry[_0x7868xd].author[0].name["$t"];
                        var _0x7868x20 = _0x7868x1.feed.entry[_0x7868xd].author[0]["gd$image"].src;
                        var _0x7868x21 = _0x7868x1.feed.entry[_0x7868xd].published["$t"],
                            _0x7868xa = _0x7868x21.substring(0, 4),
                            _0x7868x22 = _0x7868x21.substring(5, 7),
                            _0x7868x23 = _0x7868x21.substring(8, 10),
                            _0x7868x24 = month_format[parseInt(_0x7868x22, 10)] + " " + _0x7868x23 + ", " + _0x7868xa;
                        var _0x7868x16 = _0x7868x1.feed.entry[_0x7868xd].content["$t"];
                        var _0x7868x17 = $("<div>").html(_0x7868x16);
                        if (_0x7868x16.indexOf("//www.youtube.com/embed/") > -1) {
                            var _0x7868x5 = _0x7868x1.feed.entry[_0x7868xd]["media$thumbnail"].url;
                            var _0x7868x3 = _0x7868x5
                        } else {
                            if (_0x7868x16.indexOf("<img") > -1) {
                                var _0x7868x18 = _0x7868x17.find("img:first").attr("src");
                                var _0x7868x3 = _0x7868x18
                            } else {
                                var _0x7868x3 = no_image
                            }
                        };
                        if (_0x7868xd == 0) {
                            _0x7868x13 += "<div class=\"col-right-first\"><div class=\"col-right-feat-image\"><div class=\"tyard-thumb\"><a class=\"col-right-img\" href=\"" + u + "\" style=\"background:url(" + _0x7868x3 + ") no-repeat center center;background-size: cover\"><span class=\"tyimg-lay\"/></a><div class=\"category-gallery\"><a class=\"icon " + s + "\" href=\"/search/label/" + s + "?&max-result=" + perPage + "\"></a></div><div class=\"yard-label\"><a class=\"icon " + s + "\" href=\"/search/label/" + s + "?&max-result=" + perPage + "\">" + s + "</a></div><div class=\"col-right-con-yard\"><h3 class=\"tyard-title\"><a href=\"" + u + "\">" + _0x7868x14 + "</a></h3><span class=\"yard-auth-ty\">" + _0x7868x1f + "</span><span class=\"col-right-time\">" + _0x7868x24 + "</span></div></div></div></div>"
                        } else {
                            _0x7868x13 += "<div class=\"col-right-rest\"><div class=\"tyard-thumb\"><a class=\"yard-img\" href=\"" + u + "\" style=\"background:url(" + _0x7868x3 + ") no-repeat center center;background-size: cover\"><span class=\"tyimg-lay\"/></a><div class=\"category-gallery\"><a class=\"icon " + s + "\" href=\"/search/label/" + s + "?&max-result=" + perPage + "\"></a></div></div><div class=\"yard-tent-ty\"><h3 class=\"tyard-title\"><a href=\"" + u + "\">" + _0x7868x14 + "</a></h3><span class=\"yard-auth-ty\">" + _0x7868x1f + "</span><span class=\"col-right-time\">" + _0x7868x24 + "</span></div></div>"
                        }
                    };
                    _0x7868x13 += "</div>";
                    $(".column-right .HTML .widget-content").each(function () {
                        var _0x7868x6 = $(this).parent().attr("id");
                        if (_0x7868x6 == _0x7868x2a) {
                            $(this).html(_0x7868x13);
                            $(this).parent().addClass("tyright");
                            $(this).parent().addClass("templatesyard");
                            $(this).prev("h2").wrapInner("<a href=\"/search/label/" + s + "?&max-result=" + perPage + "\"></a>");
                            $(this).prev("h2").wrap("<div class=\"tyheading-head\"></div>");
                            $(this).prev(".tyheading-head").append("<a class=\"tymore\" href=\"/search/label/" + s + "?&max-result=" + perPage + "\">" + more_text + "</a>");
                            $(".ty-column-wrap #loader").remove();
                            $(".column-right").addClass("comload").removeClass("preload");
                            $(this).find(".yard-img,.ty-img").each(function () {
                                $(this).attr("style", function (_0x7868xd, _0x7868x25) {
                                    return _0x7868x25.replace("/default.jpg", "/mqdefault.jpg")
                                }).attr("style", function (_0x7868xd, _0x7868x25) {
                                    return _0x7868x25.replace("s72-c", "s1600")
                                })
                            })
                        }
                    })
                }
            })
        } else {
            $(".tyright-wrapper").remove()
        }
    });
      });
    //]]>
      </script><style>
      *{font-family:roboto;}a{text-decoration:none;}
    .ty-column-wrap {overflow: hidden;margin: 10px 0;}.ty-column-wrap #loader {height: 625px;}.tygridbox-wrapper #loader {height: 447px;}#loader:before {content: '\f110';font-family: FontAwesome;width: 40px;height: 40px;font-size: 40px;text-align: center;line-height: 40px;display: block;position: absolute;top: 50%;right: 50%;margin-right: -20px;margin-top: -20px;z-index: 1;-webkit-animation: fa-spin 2s infinite linear;animation: fa-spin 2s infinite linear;}
      /*TYLEFT*/
    .tyleft-wrapper {float: left;width: 50%;padding-right: 5px;box-sizing: border-box;}.tyleft .col-left-first {width: 100%;position: relative;clear: both;margin-bottom: 1.4%;box-sizing: border-box;overflow: hidden;}.tyleft .col-left-feat-image {width: 100%;position: relative;overflow: hidden;box-sizing:border-box;}.tyleft .col-left-first .tyard-thumb, .tyleft .col-left-img {height: 225px !important;}.templatesyard .col-left-first .tyard-thumb {position: relative;width: 100%;height: 225px;}.templatesyard .col-left-img {width: 100%;height: 200px;position: relative;display: block;}.col-left-first .tyard-thumb .yard-label {position: absolute;top: 10px;left: 10px;z-index: 2;}.col-left-first .tyard-thumb .yard-label a {background: #ff0036;color: #fff;text-transform: uppercase;height: 20px;line-height: 20px;display: inline-block;padding: 0 6px;font-size: 11px;font-weight: 400;border-radius: 2px;}.tyleft .col-left-con-yard {position: absolute;bottom: 0;width: 100%;z-index: 2;padding: 15px;box-sizing: border-box;}.tyleft .col-left-first .col-left-con-yard .tyard-title a {display: block;font-size: 19px;color: #fff;font-weight: 400;line-height: 1.4em;margin-bottom: 5px;margin-top: 5px;}.tyleft .col-left-first .recent-summary {color: #fff;font-size: 14px;font-weight: normal;}.tyleft .ty-feat .col-left-rest {overflow: hidden;padding: 10px 0;border-bottom: 1px solid #f2f2f2;}.templatesyard .ty-feat .col-left-rest .tyard-thumb {position: relative;float: left;width: 90px;height: 65px;overflow: hidden;display: block;vertical-align: middle;margin: 0 !important;}.tyleft .ty-feat .col-left-rest:last-child {border: 0;padding: 10px 0 0;}.templatesyard .ty-feat .col-left-rest .yard-img {position: relative;width: 90px;height: 65px;display: block;}.tyleft .tyimg-lay {position: absolute;left: 0;top: 0;z-index: 1;width: 100%;height: 100%;opacity:0.5;background-color: #2c2f30;}.tyleft .yard-tent-ty {padding-left: 15px;display: table-cell;}.tyleft .yard-tent-ty .tyard-title {overflow: hidden;font-weight: 400;font-size: 14px;line-height: 1.4em;margin: 0 0 4px;padding: 0;}.tyleft .yard-tent-ty .tyard-title a {color: #333333;transition: color .3s;}.col-left-time {color: #bdbdbd;font-size: 12px;font-weight: 400;}.col-left-time:before {content: '\f133';font-family: fontawesome;color: #bbb;margin-right: 5px;}.tyleft .tyard-thumb .item-cmm {position: absolute;top: 0;left: 10px;z-index: 2;color: #fff;text-transform: uppercase;height: 20px;line-height: 20px;display: inline-block;padding: 5px 6px 0;font-size: 12px;font-weight: bold;background: #ff0036;border-radius: 0 0 2px 2px;}.tyleft .tyard-thumb .item-cmm:before {content: "\f086";margin-right: 5px;font-family: FontAwesome;font-style: normal;font-weight: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.tyleft .category-gallery {position: absolute;top: 10px;right: 10px;z-index: 3;overflow: hidden;}.tyleft .col-left-rest .category-gallery {top:0;right:0;}.tyleft .category-gallery a:before {display: block;background-color: #e74c3c;opacity: .5;color: #fff;height: 18px;line-height: 18px;padding: 0 5px;font-size: 10px;font-weight: 400;text-transform: uppercase;border-radius: 2px;transition: all .3s ease;}
      
      .tyheading-head {
        margin-bottom: 15px;
        border-bottom: 2px solid #ff0036!important;
        background: #373e59;
    }.tyheading-head h2 {
        font-size: 15px;
        background-color: #ff0036!important;
        display: inline-block;
        padding: 12px 16px;
        margin: 0;
        position: relative;
    }.tyheading-head h2 a {
        color: #fff;
        text-transform: uppercase;
        font-weight: 500;
    }.tyheading-head h2:after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        bottom: -6px;
        left: 0;
        border-left: 0;
        border-right: 9px solid transparent;
        border-top: 9px solid #ff0036;
    }.tyheading-head .tymore {
        float: right;
        margin-right: 10px;
        margin-top: 12px;
        height: 22px;
        line-height: 22px;
        padding: 0 10px;
        background-color: #ff0036;
        font-size: 13px;
        color: #fff!important;
        transition: background-color .3s ease-out;
    }
    .yard-auth-ty, .ty-time {
        color: #bdbdbd;
        font-size: 12px;
        font-weight: 400;
     margin-right: 10px;
    }
      .tyleft .category-gallery a:before {
        display: block;
        background-color: #e74c3c;
        opacity: .5;
        color: #fff;
        height: 18px;
        line-height: 18px;
        padding: 0 5px;
        font-size: 10px;
        font-weight: 400;
        text-transform: uppercase;
        border-radius: 2px;
        transition: all .3s ease;
    }a.News:before {
        content: "\f1ea";
    }.icon:before {
        font-family: FontAwesome;
        font-weight: 400;
        font-style: normal;
        line-height: 1;
        padding-right: 4px;
    }
    /*TYRIght*/
    .tyright-wrapper {
        float: right;
        width: 50%;
        padding-left: 5px;
        box-sizing: border-box;
    }
      .tyright .col-right-first {width: 100%;position: relative;clear: both;margin-bottom: 1.4%;box-sizing: border-box;overflow: hidden;}.tyright .col-right-feat-image {width: 100%;position: relative;overflow: hidden;box-sizing:border-box;}.tyright .col-right-first .tyard-thumb, .tyright .col-right-img {height: 225px !important;}.templatesyard .col-right-first .tyard-thumb {position: relative;width: 100%;height: 225px;}.templatesyard .col-right-img {width: 100%;height: 200px;position: relative;display: block;}.col-right-first .tyard-thumb .yard-label {position: absolute;top: 10px;left: 10px;z-index: 2;}.col-right-first .tyard-thumb .yard-label a {background: #ff0036;color: #fff;text-transform: uppercase;height: 20px;line-height: 20px;display: inline-block;padding: 0 6px;font-size: 11px;font-weight: 400;border-radius: 2px;}.tyright .col-right-con-yard {position: absolute;bottom: 0;width: 100%;z-index: 2;padding: 15px;box-sizing: border-box;}.tyright .col-right-first .col-right-con-yard .tyard-title a {display: block;font-size: 19px;color: #fff;font-weight: 400;line-height: 1.4em;margin-bottom: 5px;margin-top: 5px;}.tyright .col-right-first .recent-summary {color: #fff;font-size: 14px;font-weight: normal;}.tyright .ty-feat .col-right-rest {overflow: hidden;padding: 10px 0;border-bottom: 1px solid #f2f2f2;}.templatesyard .ty-feat .col-right-rest .tyard-thumb {position: relative;float: left;width: 90px;height: 65px;overflow: hidden;display: block;vertical-align: middle;margin: 0 !important;}.tyright .ty-feat .col-right-rest:last-child {border: 0;padding: 10px 0 0;}.templatesyard .ty-feat .col-right-rest .yard-img {position: relative;width: 90px;height: 65px;display: block;}.tyright .tyimg-lay {position: absolute;left: 0;top: 0;z-index: 1;width: 100%;height: 100%;opacity:0.5;background-color: #2c2f30;}.tyright .yard-tent-ty {padding-left: 15px;display: table-cell;}.tyright .yard-tent-ty .tyard-title {overflow: hidden;font-weight: 400;font-size: 14px;line-height: 1.4em;margin: 0 0 4px;padding: 0;}.tyright .yard-tent-ty .tyard-title a {color: #333333;transition: color .3s;}.col-right-time {color: #bdbdbd;font-size: 12px;font-weight: 400;}.col-right-time:before {content: '\f133';font-family: fontawesome;color: #bbb;margin-right: 5px;}.tyright .tyard-thumb .item-cmm {position: absolute;top: 0;left: 10px;z-index: 2;color: #fff;text-transform: uppercase;height: 20px;line-height: 20px;display: inline-block;padding: 5px 6px 0;font-size: 12px;font-weight: bold;background: #ff0036;border-radius: 0 0 2px 2px;}.tyright .tyard-thumb .item-cmm:before {content: "\f086";margin-right: 5px;font-family: FontAwesome;font-style: normal;font-weight: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.tyright .category-gallery {position: absolute;top: 10px;right: 10px;z-index: 3;overflow: hidden;}.tyright .col-right-rest .category-gallery {top:0;right:0;}.tyright .category-gallery a:before {display: block;background-color: #e74c3c;opacity: .5;color: #fff;height: 18px;line-height: 18px;padding: 0 5px;font-size: 10px;font-weight: 400;text-transform: uppercase;border-radius: 2px;transition: all .3s ease;}
      
      @media only screen and (max-width: 620px) {.tyleft-wrapper, .tyright-wrapper {width: 100%;padding-right: 0;float: none;margin-bottom: 10px;clear: both;}.tyright-wrapper {padding-left: 0;}}
    </style>
  8. Save Theme/Template

So after following all the guidelines or steps provided above now that you have successfully added this widget into your blogger blog now it's time to make customization's or to configure this column style specific label posts widget for blogger

For your ease and to make it easy to understand for you I have listed up all the configuration settings in table with their descriptions in front of them.

ConfigDesc
data-labelThis attribute value should be your label of which you want to show posts.
<h2 class='title'>Blogger Widgets</h2>
Here "Blogger Widgets" is the heading that you have to change or modify accordingly.
var perPage = 6;Here you have to replace 6 with the number of posts that you want to show if user clicks view more button.
var no_image = "image..1.png";Here you have to replace image URL with the URL of image which you want to show if your posts has no thumbnail.
var month_format = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];Here i have used abbrivation's for month name you can make the full.
var more_text = "View More";This will be text of View More Button.
https://www.softwebtuts.comReplace this URL with your website URL or leave it blank to auto detect your site URL.

You can read the configuration settings accordingly and configure this widget according to your requirements.

Ending:

So just right here I am going to wind up this article by simply saying that if you like this column style specific label blogger widget then please share it with your friends and try to use it on your blogger blog.

I hope you will like this blogger widget if you did make sure to subscribe to the newsletters of this blog and get notifications of new posts daily.
Disqus Codes

No comments

Notifications

Disqus Logo