Today I'm going to share a tutorial for Stylish Particular Label Recent Posts Widget For Blogger. The function of this widget is not much different from the recent post widget, but in this widget, we can determine the recent posts to be displayed based on the specified Label.
Examples of the widget will display like this:
For those who want to install the recent post widget by label on your blog, please follow the following tutorial:
Go to Blogger > Open template editor > copy and paste the below code before </head>
<b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'><style type='text/css'>/* Recent Post by Label */.newsmartpiklabel1 ul,.newsmartpiklabel2 ul{list-style:none;margin:0;padding:0}.newsmartpiklabel1 li,.newsmartpiklabel2 li{margin:0;padding:0;}.newsmartpiklabel1 .widget,.newsmartpiklabel2 .widget{margin:0;padding:0}.newsmartpiklabel1 .widget-content,.newsmartpiklabel2 .widget-content{border:1px solid #e9e9e9;padding:20px;margin:0;word-wrap:break-word;overflow:hidden}.newsmartpiklabel1 h2,.newsmartpiklabel2 h2,.newsmartpiklabel3 h2{position:relative;margin:0;padding:15px 20px;font-size:16px;font-weight:700;text-transform:uppercase;color:#333;border:1px solid #e9e9e9;border-bottom:0}.newsmartpiklabel2 h2,.newsmartpiklabel3 h2{margin:20px 0 0 0;}.newsmartpiklabel1 h2:before,.newsmartpiklabel2 h2:before,.newsmartpiklabel3 h2:before{content:'\f108';right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;}.newsmartpiklabel2 h2:before{content:'\f10b';right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;}.newsmartpiklabel3 h2:before{content:'\f143';}.newsmartpiklabel1 .index,.newsmartpiklabel2 .index{font-size:10px;float:right;font-weight:400;}.newsmartpiklabel1 .index a,.newsmartpiklabel2 .index a{display:flex;color:#039be5;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6}.newsmartpiklabel2 .index a{color:#ef6c00;border-color:#ffa726}.newsmartpiklabel1 .index a:hover{background:#039be5;color:#fff;border-color:transparent}.newsmartpiklabel2 .index a:hover{background:#ef6c00;color:#fff;border-color:transparent}.newsmartpiklabel1 .index a:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}.newsmartpiklabel2 .index a:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}.newsmartpiklabel2 span.newsmartpik_meta_comment a:hover{color:#38761d!important}.newsmartpiklabel2 ul.newsmartpik_thumbs li a:hover,.newsmartpiklabel2 ul.newsmartpik_thumbs2 li a:hover{color:#ff675c;text-decoration:none}.newsmartpik_left{width:280px;width:45.7%;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #e9e9e9}.newsmartpik_right{width:250px;width:47.5%;float:right;margin:0;padding:0}ul.newsmartpik_thumbs{margin:0;padding:0}ul.newsmartpik_thumbs li,ul.newsmartpik_thumbs2{margin:0;padding:0}ul.newsmartpik_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px}ul.newsmartpik_thumbs .cat_thumb img{height:auto;width:100%;transition:all 0.2s}ul.newsmartpik_thumbs .cat_thumb img:hover{opacity:.9;}ul.newsmartpik_thumbs2 li{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9e9e9;min-height:110px;}ul.newsmartpik_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}ul.newsmartpik_thumbs2 .cat_thumb2{float:left;margin:0 10px 0 0;width:100px;height:100px;overflow:hidden}ul.newsmartpik_thumbs2 .cat_thumb2 img{height:auto;transition:all .2s}ul.newsmartpik_thumbs2 .cat_thumb2 img:hover{opacity:.9;}span.newsmartpik_title{font-family:'Roboto Condensed',sans-serif;font-size:20px;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none}span.newsmartpik_title2{font-size:16px;line-height:1.4em;margin:0 0 3px}span.newsmartpik_title a{color:#333}span.newsmartpik_title a:hover{color:#ff675c;text-decoration:none}span.newsmartpik_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0}span.newsmartpik_meta{display:block;font-family:'Roboto Condensed',sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}span.newsmartpik_meta a{color:#aaa;display:inline-block}span.newsmartpik_meta_date,span.newsmartpik_meta_comment,span.newsmartpik_meta_more{display:inline-block;margin-right:10px}span.newsmartpik_meta_comment a:before{content:"\f0e6";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}span.newsmartpik_meta_comment a:hover{color:#ff675c!important}span.newsmartpik_meta_date:before{content:"\f133";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}ul.newsmartpik_thumbs2 li a:hover,ul.newsmartpik_thumbs li a:hover{color:#ff675c;text-decoration:none}@media screen and (max-width:1024px) {.newsmartpiklabel1 .widget-content, .newsmartpiklabel2 .widget-content {padding:20px 25px;}.newsmartpik_left {width:50%;float:left;margin:0;padding:0;border-right:none}.newsmartpik_right {width:46%;float:right;margin:0;padding:0;}ul.newsmartpik_thumbs .cat_thumb {width:100%;height:auto;}ul.newsmartpik_thumbs .cat_thumb img {width:100%;height:auto;}ul.newsmartpik_thumbs li {margin:0;padding:0;}span.newsmartpik_title2 {font-size:20px;line-height:1.2em;}span.newsmartpik_summary {font-size:14px;}}@media only screen and (max-width:768px){.newsmartpiklabel1 .widget-content,.newsmartpiklabel2 .widget-content{padding:10px 20px}.newsmartpik_right{width:100%;float:left;margin:0;padding:0}ul.newsmartpik_thumbs2 li{border-bottom:0}span.newsmartpik_summary,.newsmartpik_left{display:none}span.newsmartpik_title{margin:0 0 5px}ul.newsmartpik_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}span.newsmartpik_title2{font-size:18px;line-height:1.2em}}@media only screen and (max-width:480px){#newsmartpiklabel1-wrapper,#newsmartpiklabel2-wrapper{display:none}}@media only screen and (max-width:320px){.newsmartpiklabel1 .widget-content,.newsmartpiklabel2 .widget-content{padding:10px 20px}.newsmartpiklabel1 h2,.newsmartpiklabel2 h2{padding:10px 20px 1px 20px}.newsmartpik_right{width:100%;float:left;margin:0;padding:0}ul.newsmartpik_thumbs li{margin:0 0 10px;padding:0 0 10px;}span.newsmartpik_title2{font-size:18px;line-height:1.2em}}@media screen and (max-width:260px) {.newsmartpiklabel1 .widget-content,.newsmartpiklabel2 .widget-content{padding:10px}.newsmartpiklabel1 h2,.newsmartpiklabel2 h2{padding:10px 10px 1px 10px}.newsmartpik_right{width:100%;float:left;margin:0;padding:0}ul.newsmartpik_thumbs li{margin:0 0 10px;padding:0 0 10px;}span.newsmartpik_title2{font-size:18px;line-height:1.2em}}</style></b:if></b:if>
Also, copy and paste the below code before </head>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var u;try{u=r.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10),g=new Array;g[1]="January",g[2]="February",g[3]="March",g[4]="April",g[5]="May",g[6]="June",g[7]="July",g[8]="August",g[9]="September",g[10]="October",g[11]="November",g[12]="December",document.write('<span class="newsmartpik_left">'),document.write('<ul class="newsmartpik_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="cat_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="newsmartpik_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="newsmartpik_meta">'),1==showpostdate&&(v=v+'<span class="newsmartpik_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="newsmartpik_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="newsmartpik_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="newsmartpik_summary">'),"content"in r)var y=r.content.$t;else if("summary"in r)var y=r.summary.$t;else var y="";var k=/<\S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write(""),document.write(y),document.write("");else{document.write(""),y=y.substring(0,numchars);var $=y.lastIndexOf(" ");y=y.substring(0,$),document.write(y+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>"),document.write("</span>")}document.write('<span class="newsmartpik_right">'),document.write('<ul class="newsmartpik_thumbs2">');for(var e=1;e<numposts2;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var x;try{x=r.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),x=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+n+'"><div class="cat_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="newsmartpik_title newsmartpik_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="newsmartpik_meta newsmartpik_meta2">'),1==showpostdate2&&(v=v+'<span class="newsmartpik_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="newsmartpik_meta_comment newsmartpik_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="newsmartpik_meta_more newsmartpik_meta_more2"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>"),document.write("</span>")}
//]]>
</script>
<script type='text/javascript'>
var numposts=1,numposts2=4,showpostthumbnails=!0,showpostthumbnails2=!0,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=75,thumb_width=280,thumb_height=200,thumb_width2=100,thumb_height2=100,no_thumb=" https://lh3.googleusercontent.com/-htHpxFoFKFU/VtfvuTf4DwI/AAAAAAAAEVM/nJicgrZGWlk/s340-Ic42/newsmartpik_thumb.png",no_thumb2=" https://lh3.googleusercontent.com/-v1FrVSrWAI4/VtfvuOMgx0I/AAAAAAAAEVI/dF8p7IUnk1k/s100-Ic42/newsmartpikthumb_small.png";
</script>
</b:if>
</b:if>
Next find the below code by using "Ctrl + F" key together from your keyboard.
<b:section class='main' id='main' showaddelement='no'>
Then, copy and paste the below code before the above code.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='newsmartpiklabel1-wrapper'>
<b:section class='newsmartpiklabel1' id='newsmartpiklabel1' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML80' locked='false' title='Gadgets' type='HTML'>
<b:includable id='main'>
<h2><span class='index'><a href='/search/label/<data:content/>?&max-results=8'>View All</a></span><data:content/></h2>
<div class='widget-content'>
<script>
document.write("<script src=\"/feeds/posts/default/-/Label?orderby=published&alt=json-in-script&callback=labelthumbs\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='newsmartpiklabel2-wrapper'>
<b:section class='newsmartpiklabel2' id='newsmartpiklabel2' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML81' locked='false' title='Mobile' type='HTML'>
<b:includable id='main'>
<h2><span class='index'><a href='/search/label/<data:content/>?&max-results=8'>View All</a></span><data:content/></h2>
<div class='widget-content'>
<script>
document.write("<script src=\"/feeds/posts/default/-/Label?orderby=published&alt=json-in-script&callback=labelthumbs\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>
Save the template, now go to Layout > Click edit widget that has been added earlier > Fill in it with the name of your blog label
Save the widgets and see the results.
That's it! I hope you like this Widget! Stay tuned for more Widgets and Tips!
0 comments:
Post a Comment