Cara Menciptakan Widget Recent Post By Label Ala Template Animag

Cara Menciptakan Widget Recent Post By Label Ala Template Animag

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 isyarat CSS di bawah ini kemudian letakan isyarat tersebut di atas isyarat </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 isyarat HTML di bawah ini kemudian letakan isyarat tersebut di atas isyarat <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 isyarat HTML6 yang saya tandai itu (termasuk isyarat css #HTML6) kalau di template sahabat sudah ada isyarat tersebut silahkan sahabat ganti isyarat HTML6 yang di atas itu menjadi HTML7 atau HTML8 yang niscaya rubah ke nomer yang belum ada pada template sobat. Dan untuk isyarat 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 isyarat nya di atas isyarat menyerupai teladan di bawah ini.

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

Langkah terakhir silahkan sahabat copy isyarat di bawah ini kemudian letakan isyarat tersebut di atas isyarat </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/AVvXsEiUIFjON1PbqfNQvF8gb3ip8OyZwBuiOnI7LRlV88WxkkbWSi0LYkVP6tqxDu86ogVxjOaBu959gUwsvi5ZNyiMsZYNv96SuS8Zzic91h6Acqhi1qHC7VtwAB-neiWKVbnIEUmhXhk_WsFl/w300-c-h140/no-image.png&#39; var no_thumb2 = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6BXE9MhU354mw9eZ4kV1qzyGdHMcV0N2LTUr0-835fJpE1SPYYlQwSj_vsbQsuEyWNwsiny8XNZl9giZCSexVm1OS0gp1q3YaBT_u0aT2wjEBcFXFIzSvoQ96oA9kAQWSqec9vqm3h3MH/s60-c/no-image.png&#39; </script> 

Untuk isyarat di atas, kalau di template sahabat sekira nya ada isyarat script recent post by label juga sebaik nya isyarat tersebut di hapus terlebih dahulu. Takut nya bentrok sob.
Dan juga pada CSS Recent Post By Label kalau di template sahabat sudah ada isyarat 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 isyarat HTML yang pada langkah ke dua kemudian letakan isyarat tersebut pas di bawah nya isyarat pada langkah ke dua. Dan ganti HTML6 menjadi isyarat HTML yang belum ada. Dan ganti juga isyarat 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 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!
Blogger
Disqus
Pilih Sistem Komentar

No comments

Advertiser