Featured Random Responsive

Cara Membuat Featured Random Full Responsive kali ini dibuat berdasarkan request, jika ada kekurangan atau error silahkan beri komentar dibawah post ini.

Tutorial ini sama seperti Featured Post Random Dengan Label, namun artikel kali ini sudah diperbaharui dengan menambahkan fitur Responsive.

Demo

Cara Membuat Featured Random Responsive

1. Buka Blogger > Tema > Edit HTML
2. Simpan CSS berikut di atas </style>

/* Featured Random Post - Arlethdesign
   =================================== */
#_ft-arleth ul{padding:0;margin:auto;overflow:hidden;list-style:none}
#_ft-arleth ul li{float:left;margin:0 3px;width:24%;max-height:220px;overflow:inherit;position:relative}
#_ft-arleth span.show-itempost{padding:0;height:0;margin:0}
#_ft-arleth a.title-article{position:absolute;bottom:0;font-size:11px;line-height:12px;background:rgba(0,0,0,0.6);padding:5px;color:#fff;font-weight:600;max-width:150px;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
@media screen and (max-width:640px){#_ft-arleth ul li{float:none;width:100%;border-bottom:1px solid #1F1E1E;margin:0 2px;overflow:hidden;padding-bottom:5px;margin-bottom:5px}#_ft-arleth ul li img{width:80px;height:90px;float:left}#_ft-arleth a.title-article{position:relative;bottom:0;background:none;color:#333;display:block;max-width:100%;text-align:left;line-height:80px;font-size:14px}}



3. Simpan Javascript berikut ini diatas </body>.

<script type='text/javascript'>/*<![CDATA[*/
$(document).ready(function(){$('#_ft-arleth img').attr('src',function(i,src){return src.replace('s72-c','w160-h220-c');});});
/*]]>*/</script>



4. Jika sudah save tema.
5. Lalu buka Tata Letak > Tambahkan Widget > HTML/Javascript
6. Simpan Javascript berikut untuk menampilkannya diblog kamu

<script type='text/javascript'>/*<![CDATA[*/
var fiturzo=0,
fiturz=4,
numchars=0,titleinarticle=new Array,relurls=new Array,showpostbody=new Array,_featuredimage=new Array;
function _featuredpost(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function reading_article(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];titleinarticle[fiturzo]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),showpostbody[fiturzo]=_featuredpost(postcontent,numchars),"media$thumbnail"in e?postimg=e.media$thumbnail.url:postimg="https://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF",_featuredimage[fiturzo]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[fiturzo]=e.link[n].href;break}fiturzo++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function showarticle(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=titleinarticle[t],e.length+=1,e[e.length-1]=showpostbody[t],n.length+=1,n[n.length-1]=_featuredimage[t]);titleinarticle=l,relurls=r,showpostbody=e,_featuredimage=n;for(var t=0;t<titleinarticle.length;t++){var a=Math.floor((titleinarticle.length-1)*Math.random()),u=titleinarticle[t],i=relurls[t],o=showpostbody[t],s=_featuredimage[t];titleinarticle[t]=titleinarticle[a],relurls[t]=relurls[a],showpostbody[t]=showpostbody[a],_featuredimage[t]=_featuredimage[a],titleinarticle[a]=u,relurls[a]=i,showpostbody[a]=o,_featuredimage[a]=s}for(var g,m=0,d=Math.floor((titleinarticle.length-1)*Math.random()),c=d,h=document.URL;fiturz>m&&(relurls[d]==h||(g="<li>",g+="<a href='"+relurls[d]+"' rel='nofollow' title='"+titleinarticle[d]+"'><div class='_img'><img src='"+_featuredimage[d]+"' /></div></a>",g+="<a class='title-article' href='"+relurls[d]+"'>"+titleinarticle[d]+"</a>",g+="<span class='show-itempost'>"+showpostbody[d]+"</span>",g+="</li>",document.write(g),m++,m!=fiturz))&&(d<titleinarticle.length-1?d++:d=0,d!=c););}
/*]]>*/</script>
<script src='/feeds/posts/default?alt=json-in-script&amp;callback=reading_article&amp;max-results=50' type='text/javascript'></script>
<div id='_ft-arleth'><ul>
<script type='text/javascript'>showarticle();</script>
</ul></div>



7. Jika sudah simpan & lihat hasilnya.

Tag	Keterangan
4	Ganti Dengan Jumlah Post Yang ingin ditampilkan

Kamu juga bisa menambahkan Label post
Example:
/feeds/posts/default, menjadi
/feeds/posts/default/-/LABEL POST