-->
Cara Menciptakan Widget Recent Post By Label Ala Template Animag
4/ 5 stars - "Cara Menciptakan Widget Recent Post By Label Ala Template Animag" Pernah kah sahabat blogger melihat Template Animag? Dan tau kah sahabat bahwa template tersebut memakai Recent Post By Label yang ada di Ho...

Cara Menciptakan Widget Recent Post By Label Ala Template Animag




Pernah kah sahabat blogger melihat Template Animag? Dan tau kah sahabat bahwa template tersebut memakai Recent Post By Label yang ada di Home Page? Nah pada tutorial kali ini saya ingin menyebarkan 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 agar saja cara menciptakan recent post by label ala template animag ini merupakan satu - satu nya yang akan saya bagikan di tutorial kali ini.

Bila sahabat ingin mencoba nya sahabat dapat ikuti langkah - langkah sebagai berikut.

Cara Membuat Widget Recent Post By Label Ala Template Animag

Langkah pertama silahkan sahabat copy instruksi CSS di bawah ini kemudian letakan instruksi tersebut di atas instruksi </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:&#39;&#39;;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:&#39;Roboto Condensed&#39;,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:&#39;\f054&#39;;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 sahabat copy instruksi HTML di bawah ini kemudian letakan instruksi tersebut di atas instruksi <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 != &quot;&quot;'>         <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;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(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=mythumb1\&quot;&gt;&lt;\/script&gt;&quot;);                 </script>             </ul>         </div>     </div> </b:includable>   </b:widget> </b:section> </b:if> 

Pada instruksi HTML6 yang saya tandai itu (termasuk instruksi css #HTML6) jika di template sahabat sudah ada instruksi tersebut silahkan sahabat ganti instruksi HTML6 yang di atas itu menjadi HTML7 atau HTML8 yang niscaya rubah ke nomer yang belum ada pada template sobat. Dan untuk instruksi Tulisan Game Mod yang saya tandai itu silahkan sahabat rubah sesuai label yang sahabat ingin kan.

Bila sahabat ingin meletakan widget nya di atas banner2/banner yang ada di atas footer silahkan sahabat letakan instruksi nya di atas instruksi ibarat teladan di bawah ini.

 LETAKAN KODE NYA DISINI <b:section class='banner2 section' id='banner2' maxwidgets='1' showaddelement='yes'> 

Langkah terakhir silahkan sahabat copy instruksi di bawah ini kemudian letakan instruksi tersebut di atas instruksi </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 sahabat 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 sahabat 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 sahabat 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 sahabat 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 sahabat 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>&nbsp;'+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 sahabat 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 = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOkPZ2RiWq3WEiXmpjJN4heBSZ3zAZiyQv88wPoUCLApJMh_ggDVQt-9Qiz6yVCjN9E9oM1qrdQTKhPhSRuhKes5hyzDMa2LUaSlFXTnLtbMpzrmwUuFHWqV7S1kDvhkI3myUFt05OFa4A/w300-c-h140/no-image.png&#39; var no_thumb2 = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYzyJsQKv7UFY0BIxuwRyASWA8XArMV5HDM6y8TDmE_NIvsNtEZPz4CHw4VAiCydLdkNb-BIkl9Kaja2Q3IEtX-pX5u6t-IbwRfear3NkHAkIGVPWYaZhq8Zeawljmnxzrt_gIZpIQ-nRI/s60-c/no-image.png&#39; </script> 

Untuk instruksi di atas, jika di template sahabat sekira nya ada instruksi script recent post by label juga sebaik nya instruksi tersebut di hapus terlebih dahulu. Takut nya bentrok sob.
Dan juga pada CSS Recent Post By Label jika di template sahabat sudah ada instruksi css tersebut, silahkan di hapus terlebih dahulu.

Recent Post By Label ini akan menampilkan satu widget satu label. Bila sahabat ingin menambahkan label silahkan sahabat copy lagi instruksi HTML yang pada langkah ke dua kemudian letakan instruksi tersebut pas di bawah nya instruksi pada langkah ke dua. Dan ganti HTML6 menjadi instruksi HTML yang belum ada. Dan ganti juga instruksi ID animagbox-1 menjadi animagbox-2. Dan jika ingin menambahkan label nya lagi cara nya sama, tinggal di ganti Tag HTML dan ID dengan berurutan.

Saya sarankan jika sahabat ingin mencoba nya silahkan sahabat praktekan tutorial ini di blog gres atau blog demo yang sahabat miliki


Mungkin itu saja yang dapat saya bagikan pada kesempatan kali ini. agar artikel ini dapat bermanfaat buat sahabat yang sedang mencari Cara Membuat Widget Recent Post By Label Ala Template Animag. Selamat mencoba!