Recent Post merupakan postingan terbaru pada sebuah blog, tujuannya untuk mempermudah pengunjung menemukan artikel terbaru pada blog tersebut. Biasanya recent post yang digunakan ada yang berupa teks saja namun ada juga yang menyertakan thumbnailnya. Pada kesempatan kali ini kita akan coba menerapkan cara membuat recent post thumbnail super cantik di blog. Untuk menerapkannya sangat mudah, berikut langkah-langkahnya.
<script type="text/javascript"
src="//cloud.github.com/downloads/jhwilson/Create-a-Blogger-archive-page/Make-Blogger-Archive-Page.js"></script>
<style type="text/css">
img.recent-post-thumbnail{float:right;height:50px;width:50px;margin:5px -5px
0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background:
#fff}
ul.recent-posts-wrap {background: #fff;list-style-type: none; margin: 5px 0px
5px 0px; padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;}
ul.recent-posts-wrap li:nth-child(1n+0) {background: #FCD092; width: 94%}
ul.recent-posts-wrap li:nth-child(2n+0) {background: #FFE0B4; width: 94%}
ul.recent-posts-wrap li:nth-child(3n+0) {background: #FFF59E; width: 94%;}
ul.recent-posts-wrap li:nth-child(4n+0) {background: #E1EFA0; width: 94%;}
ul.recent-posts-wrap li:nth-child(5n+0) {background: #B1DAEF; width: 94%;}
ul.recent-posts-wrap li {padding:5px 10px;list-style-type: none; margin: 0 0
-5px; color: #777;}
.recent-posts-wrap a { text-decoration:none; }
.recent-posts-wrap a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;font-weight: bold;color: #444;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>
<script type="text/javascript">
function showrpwiththumbs(t){document.write('<ul
class="recent-posts-wrap">');for(var
e=0;e<posts_number;e++){var
r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var
o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var
l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var
u;try{u=n.media$thumbnail.url}catch(h){s=n.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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvFvbUalbmlluUfcEIdUMbKWTs-W6kHj4QkPn94pOsyr6Dlcqn8n5jh9PSa9DuNaM1PYEFmD_roGcHuyLUA-ke5SSK5R0oczPwitYCYgQGhE2pl0qQB-Kkx4dWjf3ipNGD3161diEaLlsN/s1600/no-thumb.png"}var
p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new
Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li
class="recent-posts-list">'),1==showpostswiththumbs&&document.write('<a
href="'+r+'"><img class="recent-post-thumbnail"
src="'+u+'"/></a>'),document.write('<div
class="recent-post-title"><a href="'+r+'" target
="_top">'+i+"</a></div>"),"content"in
n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else
var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var
y=A.lastIndexOf("
");A=A.substring(0,y),document.write(A+"...")}var
_="",$=0;document.write('<br><div
class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+"
"+v+"
"+f,$=1),1==insidereadmorelink&&(1==$&&(_+=" |
"),_=_+'<a href="'+r+'" class="url" target
="_top">Read more</a>',$=1),1==showcomments&&(1==$&&(_+="
<br> "),"1 Comments"==l&&(l="1
Comment"),"0 Comments"==l&&(l="No Comments"),l='<a
href="'+m+'" target
="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_number = 5;
var showpostswiththumbs = true;
var insidereadmorelink = true;
var showcomments = false;
var posts_date = false;
var post_summary = true;
var summary_chars = 50;
</script>
<script
src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrpwiththumbs"></script>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed'
rel='stylesheet' type='text/css' />
0 Response to "Cara Membuat Recent Post Thumbnail Super Cantik Di Blog"
Post a Comment