Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Recent Posts (Postingan Terbaru) Dengan Tumbail Gambar Menarik

Setiap Blogger pastinya akan mengedit sebaik mungkin tampilan blog mereka masing-masing agar lebih diminati oleh para pengunjung.

Mulai dari atas hingga bawah dipikirkan secara matang-matang oleh para blogger agar hasil yang lebih maksimal.

Salah satu yang paling penting adalah widget postingan terbaru atau recent posts agar para pengunjung mengetahui artikel terbaru pada blog kita.

Tampilan recent posts beragam-ragam tergantung dengan code yang diberikan. Disini, saya akan berikan totorial cara membuat recent post dengan tumbail gambar yang menarik.

Untuk langkah-langkah selanjutnya, silahkan simak artikel ini baik-baik!

Baca juga: Cara membuat foto jadi seo friendly

Langkah-langkah

<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:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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' />

Silahkan untuk langkah pertama anda salin kode diatas, pastikan tidak ada kode yang tertinggal.

Cara Membuat Recent Posts (Postingan Terbaru) Dengan Tumbail Gambar Menarik

Setelah itu anda masuk ke blogger dan pilih menu tata letak. 

Lalu, anda dapat klik tambahkan widget pada menu tata letak seperti di atas.

Cara Membuat Recent Posts (Postingan Terbaru) Dengan Tumbail Gambar Menarik

Langkah selanjutnya, anda dapat klik HTML/JavaScript dan klik tambahkan berwarna biru seperti foto diatas.

Cara Membuat Recent Posts (Postingan Terbaru) Dengan Tumbail Gambar Menarik

Jika sudah, silahkan anda tempelkan kode yang sudah di salin tadi di menu HTML/JavaScript. 


Catatan: untuk tulisan berwarna pink diatas, anda dapat ganti atau sesuaikan dengan keinginan anda. Jumlah post, tampilkan thumbail, tanggal atau waktu postingan, untuk angka silahkan anda ganti sesuai keinginan. Dan untuk false itu tidak aktif dan jika ingin mengaktifkankannya silahkan ganti dengan True.

Jangan lupa, berikan judul untuk tampilannya. Anda dapat berikan judul "Postingan Terbaru" atau "Recent Posts" sesuai dengan gaya bahasa kalian.

Untuk menemukan informasi lainnya, silahkan baca artikel lainnya di mangido.xyz.