Cara Menciptakan Widget Recent Post By Label Ala Template Animag
Pernah kah teman blogger melihat Template Animag? Dan tau kah teman bahwa template tersebut memakai Recent Post By Label yang ada di Home Page? Nah pada tutorial kali ini saya ingin membuatkan Cara Membuat Widget Recent Post By Label Ala Template Animag yang dimana recent post by label ini mungkin dapat untuk semua template.
Mungkin sudah banyak tutorial yang membahas cara menciptakan widget recent post by label di blog tapi supaya saja cara menciptakan recent post by label ala template animag ini merupakan satu - satu nya yang akan saya bagikan di tutorial kali ini.
Bila teman ingin mencoba nya teman dapat ikuti langkah - langkah sebagai berikut.
Cara Membuat Widget Recent Post By Label Ala Template Animag
Langkah pertama silahkan teman copy aba-aba CSS di bawah ini kemudian letakan aba-aba tersebut di atas aba-aba </style> pada template sobat. /* Recent Post By Label Ala Animag */ div#HTML6 {display:inline-block;width:100%;} #featured-post-section{max-height:400px;overflow:hidden;margin:20px auto} .recent-posts-title{margin:0 0 15px;padding:0 10px;position:relative;overflow:hidden} .recent-posts-title h2{} .special-heading h2 {font-size:20px;margin:6px 0 25px 0;} .recent-posts-title h2 a,.recent-posts-title h2 a:hover {color:#fff;} .recent-posts-title h2 span,.recent-posts-title h3 span{font-size:36px;line-height:44px;color:#D8261C;letter-spacing:-1px} .recent-posts-title .header-action-link{position:absolute;top:8px;right:10px} .recent-posts-title .header-action-link .action-link{display:inline-block;margin-left:5px} .recent-posts-title .header-action-link .action-link a{display:inline-block;padding:8px 16px;margin-left:5px;font-size:11px;font-weight:700;line-height:14px;color:#D8261C;text-align:center;text-transform:uppercase;white-space:pre;border-radius:16px;border:1px solid #D8261C;transition:all 0.2s} .recent-posts-title .header-action-link .action-link a:hover{background:#D8261C;color:#fff} .recent-posts-title .header-action-link .action-link a i{margin-left:8px;font-size:14px;line-height:14px} .animagbox{background:#fafafa;float:left;width:100%;margin:0;padding:10px} .animagbox ul {list-style-type:none;margin:0;padding:0;} .animagbox1 {float:left;margin:auto;} .animagbox1 .widget {padding:0 0px 15px 0;} .animagbox1 .widget-content {background:#fff;} .animagbox1 ul {list-style-type:none;margin:0;padding:0;} ul.animagids{position:relative;margin:0;float:left;width:25%;padding:10px} ul.animagids li{} ul.animagids .Idnthemethumb{position:relative;background:#fbfbfb;margin:3px 0 10px;width:100%;height:auto;overflow:hidden} ul.animagids .Idnthemethumb img {height:auto;width:100%;} ul.animagids1{margin:0;padding:0;width:25%;float:left} ul.animagids1 li{min-height:68px;padding:0;position:relative;overflow:hidden;margin:10px} ul.animagids1 .Idnthemethumb{position:relative;background:#fbfbfb;margin:3px 0 10px;width:100%;height:auto;max-height:150px;overflow:hidden} ul.animagids1 .Idnthemethumb:after{content:'';display:block;position:absolute;box-shadow:inset 0 0 20px rgba(0,0,0,0.2);z-index:2;top:0;right:0;bottom:0;left:0;transition:all 0.2s;} ul.animagids1 .Idnthemethumb:hover:after{box-shadow:inset 0 0 20px rgba(0,0,0,0);} ul.animagids1 .Idnthemethumb img {height:auto;width:100%;} ul.animagids2 {font-size:13px;} ul.animagids2 li {padding:00;font-size:11px;margin:10px 0;padding:0;min-height:80px;} ul.animagids2 .Idnthemethumb2 {background:#fbfbfb;float:left;margin:3px 8px 0 0;height:75px;width:75px;} ul.animagids2 .Idnthemethumb2 img {height:75px;width:75px;} span.Idnthemetitle{position:relative;display:block;margin:0 0 5px;font-style:normal;font-size:15px;font-weight:400;line-height:20px;color:#202020;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} span.Idnthemetitle2{font-size:16px} span.viesummary{display:none;margin:6px 0;color:#888;font-size:13px;font-weight:400;line-height:normal} span.vienmeta {background:transparent;display:block;font-size:11px;color:#aaa;} span.Idnthemetitle a,span.Idnthemetitle2 a{color:#202020;}span.Idnthemetitle a:hover,span.Idnthemetitle2 a:hover{color:#D8261C;} span.vienmeta a {display:inline-block;} span.vienmeta_comment,span.vienmeta_more{display:none} span.vienmeta_date{font-size:12px;line-height:16px;color:#999;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;} ul.animagids22 {font-size:13px;width:49%;float:right;} ul.animagids22 li{font-size:11px;margin:0 0 10px;padding:0;min-height:80px} ul.animagids22 .Idnthemethumb2 {background:#fbfbfb;float:left;margin:3px 8px 0 0;height:75px;width:75px;} ul.animagids22 .Idnthemethumb2 img {height:75px;width:75px;} ul.animagids22 li a:hover, ul.animagids li a:hover,ul.animagids2 li a:hover, ul.animagids li a:hover {color:#4db2ec;} .second-post .info {position:absolute;bottom:0;left:0;width:100%;height:140px;background:-moz-linear-gradient(to bottom,rgba(24,24,24,0)0%,rgba(24,24,24,1)95%,rgba(24,24,24,1)100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,.7)));background:-webkit-linear-gradient(to bottom,rgba(24,24,24,0)0%,rgba(24,24,24,1)95%,rgba(24,24,24,1)100%);background:-o-linear-gradient(to bottom,rgba(24,24,24,0)0%,rgba(24,24,24,1)95%,rgba(24,24,24,1)100%);background:-ms-linear-gradient(to bottom,rgba(24,24,24,0)0%,rgba(24,24,24,1)95%,rgba(24,24,24,1)100%);background:linear-gradient(to bottom,rgba(24,24,24,0)0%,rgba(24,24,24,1)95%,rgba(24,24,24,1)100%);padding:10px 10px 0;text-align:center;opacity:1;transition:all .3s} .second-post .info:hover {opacity:.9;} .second-post .info h3 span.box-label{background:rgba(236,29,38,0.75);color:#fff;padding:5px 6px 4px 6px;font-size:11px;font-weight:700;line-height:11px;margin:0 0 5px 0;display:inline-block;text-transform:uppercase;transition:all .3s} .second-post .info h3 span.box-label:hover{color:#fff;background-color:rgba(236,29,38,1)} .second-post .item .box-title {display:table-cell;padding:0 18px;width:100%;height:110px;vertical-align:middle;color:#fff;} .second-post .info h3{font-size:16px;line-height:normal;font-family:'Roboto Condensed',sans-serif;font-weight:400} .more-link{float:right;margin-right:10px;margin-top:12px;height:22px;line-height:22px; padding:0 10px;background-color:#00c0ef;font-size:13px;color:#fff!important;transition:background-color .3s ease-out;} .more-link:hover{background-color:#00acd6;} .more-link:after{content:'\f054';margin-left:5px;font-family:fontawesome;font-size:12px;vertical-align:middle} @media screen and (max-width:1024px) { ul.animagids1 li{min-height:215px}} @media screen and (max-width:768px) { ul.animagids1 li{min-height:180px}} @media screen and (max-width:667px) { .recent-posts-title h2 span,.recent-posts-title h3 span{font-size:24px}} @media screen and (max-width:640px) { ul.animagids1{width:50%} span.Idnthemetitle{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}} @media screen and (max-width:568px) { .animagbox1{float:none}} @media screen and (max-width:480px) { ul.animagids1 li{min-height:150px}} @media screen and (max-width:320px) { ul.animagids1{width:100%} .recent-posts-title h2 span,.recent-posts-title h3 span{font-size:20px}}
Langkah Ke Dua silahkan teman copy aba-aba HTML di bawah ini kemudian letakan aba-aba tersebut di atas aba-aba <div id='main-wrapper'>.
<b:if cond='data:blog.url == data:blog.homepageUrl'> <b:section class='animagbox1 section' id='animagbox-1' showaddelement='yes'> <b:widget id='HTML6' locked='false' title='GAME MOD' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'>GAME MOD</b:widget-setting> </b:widget-settings> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <div class='recent-posts-title'> <h2><span><data:title/></span></h2><ul class='header-action-link'> <li class='action-link hidden-480'> <a href='/search/label/Anime?&amp;max-results=8'>See all posts<i aria-hidden='true' class='fa fa-angle-right'/></a> </li> </ul></div> </b:if> <div class='widget-content'> <div class='news_pictures'> <ul class='news_pictures_list'> <script> document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=mythumb1\"><\/script>"); </script> </ul> </div> </div> </b:includable> </b:widget> </b:section> </b:if>
Pada aba-aba HTML6 yang saya tandai itu (termasuk aba-aba css #HTML6) kalau di template teman sudah ada aba-aba tersebut silahkan teman ganti aba-aba HTML6 yang di atas itu menjadi HTML7 atau HTML8 yang niscaya rubah ke nomer yang belum ada pada template sobat. Dan untuk aba-aba Tulisan Game Mod yang saya tandai itu silahkan teman rubah sesuai label yang teman ingin kan.
Bila teman ingin meletakan widget nya di atas banner2/banner yang ada di atas footer silahkan teman letakan aba-aba nya di atas aba-aba menyerupai teladan di bawah ini.
LETAKAN KODE NYA DISINI <b:section class='banner2 section' id='banner2' maxwidgets='1' showaddelement='yes'>
Langkah terakhir silahkan teman copy aba-aba di bawah ini kemudian letakan aba-aba tersebut di atas aba-aba </head> pada template sobat.
<script type='text/javascript'> //<![CDATA[ // Recent post by label function mythumb(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var m=0;m<r.link.length;m++){if("replies"==r.link[m].rel&&"text/html"==r.link[m].type)var l=r.link[m].title,o=r.link[m].href;if("alternate"==r.link[m].rel){n=r.link[m].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),f=p.substring(5,7),g=p.substring(8,10);document.write('<ul class="animagids">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="Idnthemethumb"><img width="'+thumb_width+'" height="'+thumb_height+'" alt=" Pernah kah teman blogger melihat Template Animag Cara Membuat Widget Recent Post By Label Ala Template Animag" src="'+u+'"/></div></a>'),document.write('<span class="Idnthemetitle"><a href="'+n+'" sasaran ="_top">'+i+"</a></span>");var v="";if(document.write('<span class="vienmeta">'),1==showpostdate&&(v=v+'<span class="vienmeta_date">'+g+"/"+f+"/"+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<span class="vienmeta_comment"><a href="'+o+'" sasaran ="_top">'+l+"</a></span>",v+=l),1==displaymore&&(v=v+'<span class="vienmeta_more"><a href="'+n+'" class="url" sasaran ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="viesummary">'),"content"in r)var _=r.content.$t;else if("summary"in r)var _=r.summary.$t;else var _="";var k=/<\S[^>]*>/g;if(_=_.replace(k,""),1==showpostsummary)if(_.length<numchars)document.write(""),document.write(_),document.write("");else{document.write(""),_=_.substring(0,numchars);var y=_.lastIndexOf(" ");_=_.substring(0,y),document.write(_+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>")}document.write('<ul class="animagids2">');for(var e=1;e<numposts2;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var m=1;m<r.link.length;m++){if("replies"==r.link[m].rel&&"text/html"==r.link[m].type)var l=r.link[m].title,o=r.link[m].href;if("alternate"==r.link[m].rel){n=r.link[m].href;break}}var $;try{$=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),$=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substring(0,4),f=p.substring(5,7),g=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+n+'"><div class="Idnthemethumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt=" Pernah kah teman blogger melihat Template Animag Cara Membuat Widget Recent Post By Label Ala Template Animag" src="'+$+'"/></div></a>'),document.write("<li>"),document.write('<span class="Idnthemetitle Idnthemetitle2"><a href="'+n+'" sasaran ="_top">'+i+"</a></span>");var v="";document.write('<span class="vienmeta vienmeta2">'),1==showpostdate2&&(v=v+'<span class="vienmeta_date vienmeta_date2">'+g+"/"+f+"/"+w+"</span>"),1==showcommentnum2&&("1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<span class="vienmeta_comment vienmeta_comment2"><a href="'+o+'" sasaran ="_top">'+l+"</a></span>",v+=l),1==displaymore2&&(v=v+'<span class="vienmeta_more vienmeta_more2"><a href="'+n+'" class="url" sasaran ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>")}function mythumb1(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var m=0;m<r.link.length;m++){if("replies"==r.link[m].rel&&"text/html"==r.link[m].type)var l=r.link[m].title,o=r.link[m].href;if("alternate"==r.link[m].rel){n=r.link[m].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),f=p.substring(5,7),g=p.substring(8,10);document.write('<ul class="animagids1">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="Idnthemethumb"><img width="'+thumb_width+'" height="'+thumb_height+'" alt=" Pernah kah teman blogger melihat Template Animag Cara Membuat Widget Recent Post By Label Ala Template Animag" src="'+u+'"/></div></a>'),document.write('<span class="Idnthemetitle"><a href="'+n+'" sasaran ="_top">'+i+"</a></span>");var v="";if(document.write('<span class="vienmeta">'),1==showpostdate&&(v=v+'<span class="vienmeta_date">'+g+"/"+f+"/"+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<span class="vienmeta_comment"><a href="'+o+'" sasaran ="_top">'+l+"</a></span>",v+=l),1==displaymore&&(v=v+'<span class="vienmeta_more"><a href="'+n+'" class="url" sasaran ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="viesummary">'),"content"in r)var _=r.content.$t;else if("summary"in r)var _=r.summary.$t;else var _="";var k=/<\S[^>]*>/g;if(_=_.replace(k,""),1==showpostsummary)if(_.length<numchars)document.write(""),document.write(_),document.write("");else{document.write(""),_=_.substring(0,numchars);var y=_.lastIndexOf(" ");_=_.substring(0,y),document.write(_+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>")}document.write('<ul class="animagids22">');for(var e=1;e<numposts3;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var m=1;m<r.link.length;m++){if("replies"==r.link[m].rel&&"text/html"==r.link[m].type)var l=r.link[m].title,o=r.link[m].href;if("alternate"==r.link[m].rel){n=r.link[m].href;break}}var $;try{$=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),$=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substring(0,4),f=p.substring(5,7),g=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+n+'"><div class="Idnthemethumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt=" Pernah kah teman blogger melihat Template Animag Cara Membuat Widget Recent Post By Label Ala Template Animag" src="'+$+'"/></div></a>'),document.write("<li>"),document.write('<span class="Idnthemetitle Idnthemetitle2"><a href="'+n+'" sasaran ="_top">'+i+"</a></span>");var v="";document.write('<span class="vienmeta vienmeta2">'),1==showpostdate2&&(v=v+'<span class="vienmeta_date vienmeta_date2">'+g+"/"+f+"/"+w+"</span>"),1==showcommentnum2&&("1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<span class="vienmeta_comment vienmeta_comment2"><a href="'+o+'" sasaran ="_top">'+l+"</a></span>",v+=l),1==displaymore2&&(v=v+'<span class="vienmeta_more vienmeta_more2"><a href="'+n+'" class="url" sasaran ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>")}function mythumb2(t){document.write('<div id="recent-posts">');for(var e=0;numpost>e;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var m=0;m<r.link.length;m++){if("replies"==r.link[m].rel&&"text/html"==r.link[m].type){r.link[m].title,r.link[m].href}if("alternate"==r.link[m].rel){n=r.link[m].href;break}}var l;try{l=r.media$thumbnail.url}catch(o){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),l=-1!=a&&-1!=b&&-1!=c&&""!=d?d:'" style="display: none;'}var u=r.published.$t,h=u.substring(0,4),p=u.substring(5,7),w=u.substring(8,10),f=new Array;f[1]="Jan",f[2]="Feb",f[3]="Mar",f[4]="Apr",f[5]="May",f[6]="Jun",f[7]="Jul",f[8]="Aug",f[9]="Sep",f[10]="Oct",f[11]="Nov",f[12]="Dec",document.write('<div class="post_wrapper1">'),document.write('<div class="post_thumb"><a href="'+n+'"><img src="'+l.replace("/s72-c/","/s120-c/")+'" alt=" Pernah kah teman blogger melihat Template Animag Cara Membuat Widget Recent Post By Label Ala Template Animag" height="90" width="90"></div>');var g="",v=0;if(document.write(""),1==showpostdate&&(g=g+w+"/"+p+"/"+h,v=1),document.write('<div class="post_desc"><a href="'+n+'"><h5>'+i+'</h5></a><span class="meta"><i class="fa fa-clock-o"></i> '+g+"</span><p>"),"content"in r)var _=r.content.$t;else if("summary"in r)var _=r.summary.$t;else var _="";var k=/<\S[^>]*>/g;if(_=_.replace(k,""),1==showpostsummary)if(_.length<numchars)document.write(""),document.write(_),document.write("");else{document.write(""),_=_.substring(0,numchars);var y=_.lastIndexOf(" ");_=_.substring(0,y),document.write(_+"..."),document.write("")}document.write("</p></div><div class='clear'></div></div>"),1==displayseparator&&e!=numposts-1&&document.write("")}document.write("</div>")}var numpost=3,displayseparator=!1,showpostdate=!0,showpostsummary=!0,numchars=50; function bp_thumbnail_resize(e,a){var t=300,i=200;return image_tag='<img width="'+t+'" height="'+i+'" src="'+e.replace("/s72-c/","/w"+t+"-h"+i+"-c/")+'" alt=" Pernah kah teman blogger melihat Template Animag Cara Membuat Widget Recent Post By Label Ala Template Animag"/g,"")+'" title="Cara Membuat Widget Recent Post By Label Ala Template Animag"/g,"")+'"/>',""!=a?image_tag:""} //]]> var numposts = 8; var numposts2 = 0; var numposts3 = 0; var showpostthumbnails = true; var showpostthumbnails2 = true; var displaymore = true; var displaymore2 = true; var showcommentnum = true; var showcommentnum2 = true; var showpostdate = true; var showpostdate2 = true; var showpostsummary = true; var numchars = 100; var thumb_width = 350; var thumb_height = 210; var thumb_width2 = 110; var thumb_height2 = 110; var no_thumb = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHXGdzRzzABgapAwZPO20tGcMgQdQcZD-bJ_B-Us5SHxmZSqiFZ4_LmpIlFrp0vkWstMRPIcTozCONaa2mN6ly8_8BLKkrb2tEPmYnWZpeBL9gXa4J1E3oDvtZ7D8GRIrvdQ1Mg4nH4gIZ/w300-c-h140/no-image.png' var no_thumb2 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitgHvtx4tswqbPdTLidl18UsfVT-1zK55VCnzbbUTdOaqvnImlhurRa5YxY6bNCVRkV_u93or_PvfTPDDjGuutWjWTbNlCvECPUGrZNRFq6cD8xitDmpnGhkjTatc-VFPaeTAq3-deArGx/s60-c/no-image.png' </script>
Untuk aba-aba di atas, kalau di template teman sekira nya ada aba-aba script recent post by label juga sebaik nya aba-aba tersebut di hapus terlebih dahulu. Takut nya bentrok sob.
Dan juga pada CSS Recent Post By Label kalau di template teman sudah ada aba-aba css tersebut, silahkan di hapus terlebih dahulu.
Recent Post By Label ini akan menampilkan satu widget satu label. Bila teman ingin menambahkan label silahkan teman copy lagi aba-aba HTML yang pada langkah ke dua kemudian letakan aba-aba tersebut pas di bawah nya aba-aba pada langkah ke dua. Dan ganti HTML6 menjadi aba-aba HTML yang belum ada. Dan ganti juga aba-aba ID animagbox-1 menjadi animagbox-2. Dan kalau ingin menambahkan label nya lagi cara nya sama, tinggal di ganti Tag HTML dan ID dengan berurutan.
Saya sarankan kalau teman ingin mencoba nya silahkan teman praktekan tutorial ini di blog gres atau blog demo yang teman miliki
Mungkin itu saja yang dapat saya bagikan pada kesempatan kali ini. supaya artikel ini dapat bermanfaat buat teman yang sedang mencari Cara Membuat Widget Recent Post By Label Ala Template Animag. Selamat mencoba!