Cara Membuat Widget Recent Post By Label Ala Template Animag

Pernah kah sobat blogger melihat Template Animag? Dan tau kah sobat bahwa template tersebut menggunakan Recent Post By Label yang ada di Home Page? Nah pada tutorial kali ini saya ingin berbagi Cara Membuat Widget Recent Post By Label Ala Template Animag yang dimana recent post by label ini mungkin bisa untuk semua template.

Mungkin sudah banyak tutorial yang membahas cara membuat widget recent post by label di blog tapi semoga saja cara membuat recent post by label ala template animag ini merupakan satu - satu nya yang akan saya bagikan di tutorial kali ini.

Bila sobat ingin mencoba nya sobat bisa ikuti langkah - langkah sebagai berikut.

Cara Membuat Widget Recent Post By Label Ala Template Animag

Langkah pertama silahkan sobat copy kode CSS di bawah ini lalu letakan kode tersebut di atas kode </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 sobat copy kode HTML di bawah ini lalu letakan kode tersebut di atas kode <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 kode HTML6 yang saya tandai itu (termasuk kode css #HTML6) bila di template sobat sudah ada kode tersebut silahkan sobat ganti kode HTML6 yang di atas itu menjadi HTML7 atau HTML8 yang pasti rubah ke nomer yang belum ada pada template sobat. Dan untuk kode Tulisan Game Mod yang saya tandai itu silahkan sobat rubah sesuai label yang sobat ingin kan.

Bila sobat ingin meletakan widget nya di atas banner2/banner yang ada di atas footer silahkan sobat letakan kode nya di atas kode seperti contoh di bawah ini.

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

Langkah terakhir silahkan sobat copy kode di bawah ini lalu letakan kode tersebut di atas kode </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="'+i+'" src="'+u+'"/></div></a>'),document.write('<span class="Idnthemetitle"><a href="'+n+'" target ="_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+'" target ="_top">'+l+"</a></span>",v+=l),1==displaymore&&(v=v+'<span class="vienmeta_more"><a href="'+n+'" class="url" target ="_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="'+i+'" src="'+$+'"/></div></a>'),document.write("<li>"),document.write('<span class="Idnthemetitle Idnthemetitle2"><a href="'+n+'" target ="_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+'" target ="_top">'+l+"</a></span>",v+=l),1==displaymore2&&(v=v+'<span class="vienmeta_more vienmeta_more2"><a href="'+n+'" class="url" target ="_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="'+i+'" src="'+u+'"/></div></a>'),document.write('<span class="Idnthemetitle"><a href="'+n+'" target ="_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+'" target ="_top">'+l+"</a></span>",v+=l),1==displaymore&&(v=v+'<span class="vienmeta_more"><a href="'+n+'" class="url" target ="_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="'+i+'" src="'+$+'"/></div></a>'),document.write("<li>"),document.write('<span class="Idnthemetitle Idnthemetitle2"><a href="'+n+'" target ="_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+'" target ="_top">'+l+"</a></span>",v+=l),1==displaymore2&&(v=v+'<span class="vienmeta_more vienmeta_more2"><a href="'+n+'" class="url" target ="_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="'+i+'" 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="'+a.replace(/"/g,"")+'" title="'+a.replace(/"/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/AVvXsEjTEG0QUm9QLjcucYTe72sSVus-ccWDQ493naQ511dgJQOI7gUCRUOkrxkZKxPbJEqeYVl6lmIuHAMDj59G5jlG5b1kyoQVthWD2HOOX2THMtYnayAYS53Kqjw1nvPgKFcbnM3wmKAPglw7/w300-c-h140/no-image.png&#39;
var no_thumb2 = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOA2s6lpAfXI5WuxDzqZOiffTCT-SR8-gydKww4F51xBSSE3QMPBPIMzf9CNaVLOUjxzm5OJ5xzmbHFSwduGzhVk2dSEyOgZPNqgcGb7u3TLjlAXsYc6KxNXeVnrquUWQkItyNpMZBTryG/s60-c/no-image.png&#39;
</script>

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

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

Saya sarankan bila sobat ingin mencoba nya silahkan sobat praktekan tutorial ini di blog baru atau blog demo yang sobat miliki

• Demo

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

Share this post