Random Post By Label With Tooltip

Syahrul

Oyahou, disini admin akan memberi kalian tutorial bagaimana Cara Membuat Random Post Anime With Snippet seperti demo di atas. ok kita mulai langkah pertama cara membuatnya...

Pertama Buka Blogger > Tata Letak > Add Widget > HTML/JavaScript
Lalu Salin CSS Dibawah ini dan paste diwidget kalian tapi jangan di save dulu masih ada langkah keduanya
<style>
#random-wrap li{position:relative;float:left;margin-right:3px;margin-top:3px;width:135px;height:185px;margin:auto 2px;list-style:none}
.rp-images{float:left!important;width:160px;height:185px}
#random-wrap a{color:#fff}
#random-wrap li:hover .post-snip{visibility:visible;opacity:1}
.post-snip{position:absolute;background:rgba(0,0,0,0.7);padding:7px;width:300px;min-height:50px;color:#fff;left:160px;top:50%;font-size:12px;z-index:999;visibility:hidden;opacity:0.1;transition:opacity 0.5s}
.img-random{float:left;height:65px;width:60px;overflow:hidden;margin:0 5px 5px 0}
.img-random img{width:100%;height:100%}
.post-snip h2{margin:0;font-size:12px;background:rgba(24,16,16,0.95);padding:7px 5px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-post-link{font-size:12px;color:#fff;position:absolute;left:0;bottom:0;padding:0 5px;line-height:20px;width:135px;text-align: center;overflow:hidden;text-overflow:ellipsis;white-space:normal;background:rgba(0,0,0,0.36);transition:height 0.2s,line-height 0.2s}
#random-wrap li:hover .rp-post-link{line-height:30px;}
ul,li{padding:0;margin:0;list-style:none}
</style>

Baik kita langsung ke langkah ke 2 yaitu salin Javascript ini Paste di bawah CSS tadi
<div id="random-wrap">
<script type="text/javascript">/*<![CDATA[*/var randarray=new Array();var l=0;var flag;var lengthsummary=220;var numofpost=5;function randomposts(c){var g=parseInt(c.feed.openSearch$totalResults.$t,10);for(i=0;i<numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*g);for(j in randarray){if(l==randarray[j]){flag=1}}if(flag==0&&l!=0){randarray[i++]=l}}document.write("<div>");for(n in randarray){var h=randarray[n];var f=c.feed.entry[h-1];var e="<ul>";var e="<li>";var a=f.title.$t||"[Untitled]";"[Untitled]";for(k=f.link.length-1;k>=0;k--){if(f.link[k].rel=="alternate"){e+="<a class='rp-post-link' href='"+f.link[k].href+"'>"+a+"</a>";break}}if("media$thumbnail" in f){e+="<a href='"+f.link[k].href+"'><img class='rp-images' src='"+f.media$thumbnail.url+"'> </a>"}var b="";if("content" in f){b=f.content.$t}else{if("summary" in f){b=f.summary.$t}}var d=/<\S[^>]*>/g;b=b.replace(d,"");e+="<div class='post-snip'><div class='img-random'><img src='"+f.media$thumbnail.url+"'> </div><h2>"+a+"</h2>"+b.substring(0,lengthsummary)+" ...</div>";document.write(e)}var e="</li>";var e="</ul>";document.write("</div>")}/*]]>*/</script>
<script src="/feeds/posts/default/-/Summer%202016?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
<script>/*<![CDATA[*/function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");d[a].width=b;d[a].height=b}}resizeThumb("random-wrap",300);/*]]>*/</script>
</div>

Setting

TagKeterangan
numofpost=5; Silahkan Ganti No 5 untuk menampilkan Jumlah postnya
Summer%202016 Ganti Dengan Label Anime Atau apalah
Ok Sekian tutorial dari saya Terima kasih, semoga bermanfaat
Scipt by : arukaze.xyz
Related Posts
Disqus Comments