Cara Membuat Recent Post Thumbnail Super Cantik Di Blog


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.


1. pertama anda login ke Blogger, lalu pilih Tata Letak


2. Selanjutnya tambahkan widget, lalu pilih HTML/JavaScript


Baca Juga :

3. Isi Judul dan masukkan kode pada konten seperti gambar dibawah ini, lalu simpan


4. Berikut ini kodenya

<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' />


Keterangan : Untuk tulisan berwarna merah bisa anda ganti sesuai keinginan.

5. Jangan lupa simpan dan lihat hasilnya.

Demikian cara membuat recent post thumbnail super cantik di blog, semoga bisa membantu dan bermanfaat.

LANGGANAN ARTIKEL GRATIS
Jika anda menyukai artikel-artikel yang ada di blog Kang AP, silahkan untuk berlangganan gratis via email. Anda akan mendapat kiriman setiap ada artikel baru yang terbit di blog Kang AP ini. Terimakasih.

0 Response to "Cara Membuat Recent Post Thumbnail Super Cantik Di Blog"

Post a Comment