postsByLabel – Display Posts By Label in Blogger Blog jQuery Plugin

Few Days back Mohammad from MBT asked to answer “How to Display Posts By Label?” in his post. So I had created this jQuery Plugin and then answered his question, but it didn’t meet his requirements and he choosed another answer.

Then, I thought why not share this plugin with you guys and I hope you will like it.

postsByLabel

postsByLabel

View DemoDownload

Follow the Below Steps to Add this jQuery Plugin in your Blogger Blog:

Step #1: Login to  your Blogger Dashboard.

Step #2: Select your Blog from the given list.

Step #3: Click on Template from the Left Menu.

Step #4: Click on Edit HTML.

[moptin id="3100"]

Step #5: Backup your Template.

Step #6: Find </head> and Paste the Below Code Just above it.

<script async src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'></script>
Note: You can Skip this Code If you have already added jQuery Code.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
Note: You can also Skip this Step if you have already added Font Awesome CSS Library.
Step #7: Paste the following CSS code just above ]]></b:skin>

.postsByLabel{max-width:400px;display:block;font-family:sans-serif;margin:5px auto;color:#000;}.postsByLabel*{transition:0.5s all ease-in-out}.postByLabel-post{display:inline-block;width:100%;}.postByLabel-post-inner{display:inline-block;}.postByLabel-post-inner img{float:left;margin:0px 10px 5px 0px;}.postByLabel-post-extra{display:inline-block;}.postByLabel-post-extra ul{list-style:none;display:inline-block;width:100%;margin:5px 0px;line-height:22px;clear:both;border:1px solid#eee;padding:0px 4px;font-size:15px;height:22px;overflow:hidden;}.postByLabel-post-extra ul li{float:left;padding-right:10px;box-sizing:border-box;font-size:11px;text-align:left;max-width:25%;}.postsByLabel a{text-decoration:none;color:#000;}.postByLabel-post-excerpt{margin:5px;text-align:justify;color:rgba(0,0,0,0.71);font-size:13px;}.postByLabel-post-title{font-size:20px;line-height:20px;font-weight:bold;color:#FF5722!important;}.postByLabel-post-extra i{margin-right:5px;[email protected] screen and(max-width:480px){.postsByLabel a{color:#fff}.postByLabel-post{position:relative;color:#fff;max-height:150px;overflow:hidden;}.postByLabel-post-inner img{width:100%;height:auto;min-height:150px;margin:0px;}.postByLabel-post-excerpt{display:none;}.postByLabel-post-inner{padding:0px;width:100%;max-height:50%;margin:0px;}.postByLabel-post-title{box-sizing:border-box;position:absolute;bottom:0px;width:100%;left:0px;color:#FFF!important;text-shadow:5px 5px 5px rgba(0,0,0,0.5);padding:5px;}.postByLabel-post-title-shadow{height:50%;width:100%;position:absolute;bottom:0px;left:0px;}.postByLabel-post-title-shadow{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC41NiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background:-moz-linear-gradient(top,rgba(125,185,232,0)0%,rgba(0,0,0,0.56)100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(125,185,232,0)),color-stop(100%,rgba(0,0,0,0.56)));background:-webkit-linear-gradient(top,rgba(125,185,232,0)0%,rgba(0,0,0,0.56)100%);background:-o-linear-gradient(top,rgba(125,185,232,0)0%,rgba(0,0,0,0.56)100%);background:-ms-linear-gradient(top,rgba(125,185,232,0)0%,rgba(0,0,0,0.56)100%);background:linear-gradient(to bottom,rgba(125,185,232,0)0%,rgba(0,0,0,0.56)100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007db9e8',endColorstr='#8f000000',GradientType=0);}.postByLabel-post::hover.postByLabel-post-title-shadow{height:100%}.postByLabel-post-extra{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjU2Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background:-moz-linear-gradient(top,rgba(0,0,0,0.56)0%,rgba(125,185,232,0)100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0.56)),color-stop(100%,rgba(125,185,232,0)));background:-webkit-linear-gradient(top,rgba(0,0,0,0.56)0%,rgba(125,185,232,0)100%);background:-o-linear-gradient(top,rgba(0,0,0,0.56)0%,rgba(125,185,232,0)100%);background:-ms-linear-gradient(top,rgba(0,0,0,0.56)0%,rgba(125,185,232,0)100%);background:linear-gradient(to bottom,rgba(0,0,0,0.56)0%,rgba(125,185,232,0)100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8f000000',endColorstr='#007db9e8',GradientType=0);position:absolute;top:0px;left:0px;width:100%;height:25%;overflow:hidden;}.postByLabel-post-extra ul{position:absolute;top:5px;border:0px;margin:0px;text-shadow:5px 5px 5px rgba(0,0,0,0.5);}.postByLabel-post-extra ul li{margin-right:10px;max-width:none}.postByLabel-post-extra ul li:nth-of-type(n+4){display:none}}

Step #8: Paste the Below Code just above </head>

<script type="text/javascript">
//<![CDATA[
(function(a){a.fn.postsByLabel=function(b){var e=a.extend({url:null,label:null,orderby:"published",postCount:5,textLength:150,loading:"Loading...",defaultThumbnail:"http://4.bp.blogspot.com/-HALLtgFeep0/VfryhQ0C5oI/AAAAAAAAPcY/77mSGND4q84/s200/Icon.png"},b);if(e.url===null||e.label===null){console.log("Please Configure the Plugin Corretly");return this}return this.each(function(){var i=a(this),l=f();i.html("<div id='postsByLabel-"+l+"' class='postsByLabel'></div>");var j=a("#postsByLabel-"+l);j.html("<span class='postsByLabel-loading'>"+e.loading+"</span>");var k=e.url+"/feeds/posts/summary/-/"+e.label+"?orderby="+e.orderby+"&alt=json-in-script&max-results="+e.postCount+"&callback=?";a.getJSON(k,function(n){var m=n.feed.entry;j.html("");a.each(m,function(s,A){var z=A.title.$t,p=A.link[A.link.length-1].href,r=A.author[0].name.$t,u=A.author[0].uri.$t,y=c(A.published.$t),v=c(A.updated.$t),w=A.thr$total.$t,x=h(A.summary.$t,e.textLength),t=d(A.category);var o=g(A,e.defaultThumbnail);var q="<div class='postByLabel-post'><div class='postByLabel-post-inner'><a href='"+p+"'><img src='"+o+"' width='72px' height='72px'/></a><div class='postByLabel-post-title-shadow'></div><a class='postByLabel-post-title' href='"+p+"'>"+z+"</a><p class='postByLabel-post-excerpt'>"+x+"...</p></div><div class='postByLabel-post-extra'><ul><li><i class='fa fa-user'></i><a href='"+u+"' rel='author' target=_blank>"+r+"</a></li><li><i class='fa fa-tags'></i>"+t+"</li><li><a href='"+p+"/#comment-form' target=_blank><i class='fa fa-comments'></i>"+w+"</a></li><li><i class='fa fa-clock-o'></i>"+y.dd+"/"+y.mm+"/"+y.yyyy+"</li><li title='"+v.dd+"/"+v.mm+"/"+v.yyyy+" @ "+v.hour+":"+v.minute+":"+v.second+" "+v.ampm+"'><i class='fa fa-pencil-square'></i> Edited</li></ul></div></div>";j.append(q)})})});function d(j){var l=[];for(var k=0;k<((j.length>2)?2:j.length);k++){l.push("<a href='"+e.url+"/search/label/"+j[k].term+"' target=_blank>"+j[k].term+"</a>")}return l.join(", ")}function g(i,j){if(typeof(i.media$thumbnail)!=="undefined"){if(typeof(i.media$thumbnail.url)!=="undefined"&&i.media$thumbnail.url!=""){return i.media$thumbnail.url.replace("/s72-c/","/s400/")}}return j}function h(j,i){return j.replace(new RegExp("^(.{"+i+"}[^\\s]*).*"),"$1")}function c(p){var j=new Date(p);var r=j.getDate();var l=j.getMonth()+1;var n=j.getFullYear();var m=j.getHours();var k=j.getMinutes();var i=j.getSeconds();var q="AM";if(r<10){r="0"+r}if(l<10){l="0"+l}if(m>12){m-=12;q="PM"}var o={dd:r,mm:l,yyyy:n,hour:m,minute:k,second:i,ampm:q};return o}function f(){return Math.floor(Math.random()*100)+1}}})(jQuery);
//]]>
</script>

Step #9: Save your Template.

Step #10: Click on Layout from the Left Menu.

Step #11: Click on Add Widget and Select Add HTML/JavaScript Widget and paste the Below code.

<div id="postsByLabel"></div>
<script>
//<![CDATA[
    (function($){
        $("#postsByLabel").postsByLabel({
            url: "http://www.mycodingtricks.blogspot.com",
            label: "demo",
            postCount: 3
        });
    })(jQuery);
//]]>
</script>

Edit http://www.mycodingtricks.blogspot.com to your Blog URL, demo with your Label and change postCount value to 5 (If you want to display 5 Posts).

Step #12: Save the Widget.

postsByLabel Responsive

postsByLabel Responsive

That’s all.

Shubham Kumar

Hey, I am Shubham and i love Blogging, Coding and exploring new things and obviously sharing my experience with you.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *