Setelah lama tidak update, di artikel kali ini saya akan membagigan cara Membuat Recent Posts By Label Di Blog. ya meski pastinya sudah banyak yang membahas tentang widget ini. Tapi apa salahnya juga kalau saya ikut membagikan.
Widget Recent Posts By Label Di Blog sebenarnya sangat berpengaruh bagi Speed loading blog, apalagi blognya menggunakan Google Adsense pastinya menambah loading blog semakin berat.
Bagi kalian yang ingin memasang widget Recent Posts By Label Di Blog silahkan simak caranya berikut
- Buka Dasboard Blogger > Templat Editor, Letakkan kode di bawah ini tepat di atas kode </head>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
/* Recent Post by Label mahesa.id*/
.mahesalabel1 ul,.mahesalabel2 ul{list-style:none;margin:0;padding:0}
.mahesalabel1,.mahesalabel2 li{margin:0;padding:0;}
.mahesalabel1 .widget,.mahesalabel2 .widget{margin:0;padding:0}
.mahesalabel1 .widget-content,.mahesalabel2 .widget-content{border:1px solid #e9e9e9;padding:20px;margin:0;word-wrap:break-word;overflow:hidden}
.mahesalabel1 h2,.mahesalabel2 h2,.mahesalabel3 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}
.mahesalabel2 h2,.mahesalabel3 h2{margin:20px 0 0 0;}
.mahesalabel1 h2:before,.mahesalabel2 h2:before,.mahesalabel3 h2:before{content:'f108';right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;}
.mahesalabel2 h2:before{content:'f0c3';}.mahesalabel3 h2:before{content:'f143';}
.mahesalabel1 .index,.mahesalabel2 .index{font-size:10px;float:right;font-weight:400;}
.mahesalabel1 .index a,.mahesalabel2 .index a{display:flex;color:#039be5;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6}
.mahesalabel2 .index a{color:#ef6c00;border-color:#ffa726}
.mahesalabel1 .index a:hover{background:#039be5;color:#fff;border-color:transparent}
.mahesalabel2 .index a:hover{background:#ef6c00;color:#fff;border-color:transparent}
.mahesalabel1 .index a:after{content:"f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}
.mahesalabel2 .index a:after{content:"f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}
.mahesalabel2 span.mahesa_meta_comment a:hover{color:#38761d!important}
.mahesalabel2 ul.mahesa_thumbs li a:hover,.mahesalabel2 ul.mahesa_thumbs2 li a:hover{color:#ff675c;text-decoration:none}
.mahesa_left{width:280px;width:45.7%;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #e9e9e9}
.mahesa_right{width:250px;width:47.5%;float:right;margin:0;padding:0}
ul.mahesa_thumbs{margin:0;padding:0}
ul.mahesa_thumbs li,ul.newarlina_thumbs2{margin:0;padding:0}
ul.mahesa_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px}
ul.mahesa_thumbs .cat_thumb img{height:auto;width:100%;transition:all 0.2s}
ul.mahesa_thumbs .cat_thumb img:hover{opacity:.9;}
ul.mahesa_thumbs2 li{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9e9e9}
ul.mahesa_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}
ul.mahesa_thumbs2 .cat_thumb2{float:left;margin:0 10px 0 0;width:62px;height:72px;overflow:hidden}
ul.mahesa_thumbs2 .cat_thumb2 img{height:auto;transition:all .2s}
ul.newarlina_thumbs2 .cat_thumb2 img:hover{opacity:.9;}
span.mahesa_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.mahesa_title2{font-size:16px;line-height:1.4em;margin:0 0 3px}
span.mahesa_title a{color:#333}
span.mahesa_title a:hover{color:#ff675c;text-decoration:none}
span.mahesa_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0}
span.mahesa_meta{display:block;font-family:'Roboto Condensed',sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}
span.mahesa_meta a{color:#aaa;display:inline-block}
span.mahesa_meta_date,span.mahesa_meta_comment,span.newarlina_meta_more{display:inline-block;margin-right:10px}
span.mahesa_meta_comment a:before{content:"f0e6";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
span.mahesa_meta_comment a:hover{color:#ff675c!important}
span.mahesa_meta_date:before{content:"f133";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
ul.mahesa_thumbs2 li a:hover,ul.mahesa_thumbs li a:hover{color:#ff675c;text-decoration:none}
@media screen and (max-width:1024px) {
.mahesalabel1 .widget-content, .mahesalabel2 .widget-content {padding:20px 25px;}
.mahesa_left {width:50%;float:left;margin:0;padding:0;border-right:none}
.mahesa_right {width:46%;float:right;margin:0;padding:0;}
ul.mahesa_thumbs .cat_thumb {width:100%;height:auto;}
ul.mahesa_thumbs .cat_thumb img {width:100%;height:auto;}
ul.mahesa_thumbs li {margin:0;padding:0;}
span.mahesa_title2 {font-size:20px;line-height:1.2em;}
span.mahesa_summary {font-size:14px;}}
@media only screen and (max-width:768px){
.mahesalabel1 .widget-content,.mahesalabel2 .widget-content{padding:10px 20px}
.mahesa_right{width:100%;float:left;margin:0;padding:0}
ul.mahesa_thumbs2 li{border-bottom:0}
span.mahesa_summary,.newarlina_left{display:none}
span.mahesa_title{margin:0 0 5px}
ul.mahesa_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}
span.mahesa_title2{font-size:18px;line-height:1.2em}}
@media only screen and (max-width:480px){
#mahesalabel1-wrapper,#mahesalabel2-wrapper{display:none}}
@media only screen and (max-width:320px){
.mahesalabel1 .widget-content,.mahesalabel2 .widget-content{padding:10px 20px}
.mahesalabel1 h2,.mahesalabel2 h2{padding:10px 20px 1px 20px}
.mahesa_right{width:100%;float:left;margin:0;padding:0}
ul.mahesa_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.mahesa_title2{font-size:18px;line-height:1.2em}}
@media screen and (max-width:260px) {
.mahesalabel1 .widget-content,.mahesalabel2 .widget-content{padding:10px}
.mahesalabel1 h2,.mahesalabel2 h2{padding:10px 10px 1px 10px}
.mahesa_right{width:100%;float:left;margin:0;padding:0}
ul.mahesa_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.mahesa_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>- Simpan juga kode di bawah ini di atas kode </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="newarlina_left">'),document.write('<ul class="newarlina_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="newarlina_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="newarlina_meta">'),1==showpostdate&&(v=v+'<span class="newarlina_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="newarlina_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="newarlina_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="newarlina_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="newarlina_right">'),document.write('<ul class="newarlina_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="newarlina_title newarlina_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="newarlina_meta newarlina_meta2">'),1==showpostdate2&&(v=v+'<span class="newarlina_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="newarlina_meta_comment newarlina_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="newarlina_meta_more newarlina_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=6,showpostthumbnails=!0,showpostthumbnails2=!1,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=280,thumb_height=200,thumb_width2=62,thumb_height2=62,no_thumb="http://3.bp.blogspot.com/-PHzN2A92GHE/Vmim2TTkAII/AAAAAAAADZU/X42ioeFiyBo/s1600/newarlina_thumb.png",no_thumb2="https://3.bp.blogspot.com/-Fiqh8bWdsXs/XA9eL__jqyI/AAAAAAAAIHY/DEXBO8WC598gw_De7UqrIVNmVWTAmDMwACLcBGAs/s1600/mahesathumb_small.png";
</script>
</b:if>
</b:if>
- Tambahkan markup widget dibawah ini sebelum markup Blog1
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='mahesalabel1-wrapper'>
<b:section class='mahesalabel1' id='mahesalabel1' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML80' locked='false' title='Template' 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/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs"></script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='mahesalabel2-wrapper'>
<b:section class='mahesalabel2' id='mahesalabel2' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML81' locked='false' title='Tips Blogger' 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/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs"></script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>
- Simpan template dan silahkan masuk di tata letak, klik edit pada widget yang di tambah tadi dan isi nama label sesuai yang kalian inginkan.
Jika setelah kamu menambahkan widget tersebut dan blog kamu semakin berat, kamu bisa baca Meringankan Loading Blog Dengan Lazy Load Adsense. tentunya bagi pengguna Adsense ya..
sekian terimaksih semoga bermanfaat..
Leave a Reply