Cara Membuat Recent Post Blog Style Terlengkap

Mansyur 81
12 Aug, 2020
Recent Post adalah widget pada blog yang menampilkan artikel terbaru yang biasanya dipasang pada sidebar sisi kanan atau kiri blog.

Recent post atau biasa kita kenal sebagai Artikel Terbaru merupakan widget blogspot yang menurut admin cukup penting perannya. Apabila pengunjung blog ingin melihat isi postingan atau artikel terbaru dari sebuah blog, maka recent post menjadi pilihan utama dan terbaik.

Apalagi jika widget recent post yang kita buat adalah recent post dengan tampilan yang menarik.

Cara Paling Mudah Membuat Recent Post

Cara yang pertama dan menurut admin paling mudah membuat recent post berikut ini dengan menggunakan fasilitas dari blogger sendiri secara default untuk menampilkan recent post atau artikel terbaru. caranya cukup mudah, simak dan ikuti tutorial berikut ini:

Cara Membuat Recent Post Blogspot Terlengkap

1. Masuk dulu atau login akun blogger Sobat.
2. Silahkan pilih “Tata Letak / Layout” Lalu “Add a Gadget /Tambah Gadget” Pilih “Feed”
3. Masukkan URL feed Sobat, lalu klik “Lanjutkan / Continue”.
Untuk URL Feed, Sobat bisa gunakan 2 Contoh URL ini:
  •  https://mansyur81.blogspot.com/feeds/posts/default
  •  https://feeds.feedburner.com/mansyur81
Silahkan ganti url kedua contoh di atas dengan url blog atau akun feedburner Sobat sendiri.
4. Terakhir Jangan Lupa klik Simpan/Save.

Membuat Widget Recent Post Dengan berbagai Style Di Blog

Cara membuat widget recent post di blog yang otomatis menampilkan postingan terbaru atau artikel pada blog kita merupakan judul dari tutorial kali ini. Recent Post adalah widget pada blog yang akan memunculkan artikel terbaru secara otomatis yang lazimnya dipasang pada sidebar template blog. Dengan memasang Recent Post, maka pengunjung dapat mengatahui apa saja tampilan postingan terbaru pada blog kita, sehingga artikel terbaru akan semakin mudah dibaca oleh pengunjung blog.

Cara Membuat Recent Post Keren di Blogspot – Recent Post adalah widget pada blog yang menampilkan artikel terbaru yang biasanya dipasang pada sidebar blog. Dengan memasang Recent Post, maka pengunjung dapat mengatahui tampilan postingan terbaru, sehingga artikel terbaru dapat mudah dibaca oleh pengunjung blog.

Recent Post merupakan widget yang paling sering dipasang pada blog selain Popular Post, kedua widget ini menampilkan postingan yang paling sering dibaca dan postingan terbaru yang berfungsi sebagai informasi kepada visitor untuk membaca beberapa artikel menarik lainnya.

Setiap widget pada blog memiliki fungsi dan tugas yang berbeda. Contohnya widget "label" atau category yang berfungsi untuk menampilkan jenis menu kategori ataupun label yang ada pada blog kita.

Memasang Recent Post sebenarnya bukan hal yang sulit karena default blogger sudah ada, tinggal memasukkan URL blog maka artikel terbaru akan ditampilkan dengan bantuan feed blog. Kali ini admin akan memberikan turorial membuat recent post dengan 3 cara, yaitu  default blogger (sudah dibahas di atas), simple style, dan dengan tumbnail atau gambar.

Bagaimana Cara Memasang Widget Recent Post
  • Masuk Ke Blogger
  • Pilih Layout
  • Klik add Gadget
  • Pilih HTML/JavaScript
Pilih recent post dibawah ini sesuai dengan kebutuhan Sobat, utamakan jangan sampai mempengaruhi loading blog agar selalu fast loading. Untuk beberapa template yang menggunakan versi lama atau tertentu kemungkinan ada style yang tidak cocok. Silahkan dicoba dulu.

5 Style Recent Post Keren di Sidebar Blog

Dengan memasang Recent Post, maka pengunjung dapat mengatahui tampilan postingan terbaru, sehingga artikel terbaru dapat mudah dibaca oleh pengunjung blog.

Pada tutorial ini, saya akan membagikan 5 style postingan terbaru yang bisa dicoba langsung pada blogger. Yang tentunya tiap style memiliki tampilan berbeda pada tiap template blog masing2 blogger.

(1). Recent Post Fast Loading, Simple dan Responsive Tanpa Gambar

Recent Post Tanpa Gambar Style #1

Cara Membuat Recent Post
Recent Post / Artikel terbaru yang pertama ini simple, fast loading tidak mempengaruhi loading blog Sobat (rekomendasi).

1. Login akun blogger Sobat.
2. Silahkan Pilih “Tata Letak” lalu pilih “Tambah Gadget/Add Gadget” kemudian pilih “HTML/JavaScript“.
3. Copy dan Pastekan kode berikut pada kolom yang sudah tersedia.

<script type='text/javascript'>
 //<![CDATA[
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 0; i < json.feed.entry.length; i++)
 {
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_top">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
//]]>
</script>
<script src="/feeds/posts/summary?max-results=10&alt=json-in-script&callback=recentpostslist"></script>

4. Terakhir klik “Save/Simpan”

Keterangan:
Untuk jumlah postingan Silahkan Ganti dengan keinginan Sobat, jelasnya lihat di:
numPosts = 10; Jumlah recent post yang ditampilkan.

Recent Post Tanpa Gambar style #2

Cara Membuat Recent Post Blog
Artikel terbaru / Recent Post style pilihan kedua ini juga cukup simple, fast loading sehingga tidak mempengaruhi juga loading blog Sobat karena tidak menggunakan thumbnail saat dimuat (sangat direkomendasikan).

<div class="recentpoststyle"><script type="text/javascript">function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}
</script>
<script type="text/javascript">
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="https://mansyur81.blogspot.com/2020/08/cara-membuat-recent-post-blog-style.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {
counter-reset: countposts;
list-style-type: none;
}
.recentpoststyle a {
text-decoration: none;
color: #49A8D1;
}
.recentpoststyle a:hover {
color: #000;
}
.recentpoststyle li:before {
content: counter(countposts,decimal);
counter-increment: countposts;
float: left;z-index: 1;
position:relative;
font-size: 15px;
font-weight: bold;color:#fff;
background:#B45357; 
margin:13px 5px 0px 0px;
line-height:30px;
width:30px;
height:30px;
text-align:center;
-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;
}
li.recent-post-title {
margin-bottom: 5px;
padding: 0;
}
.recent-post-title a {
color: #444;
text-decoration: none;
font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
}
.post-date {
font-size: 11px;color: #999;margin:5px 0px 15px 32px;
}
.recent-post-summ {
border-left:1px solid #69B7E2; 
color: #777; 
padding: 0px 5px 0px 20px;
margin-left: 10px; 
font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;
}
    </style></div>

(2). Cara Membuat Recent Post dengan Thumbnail

Widget recent post yang kedua ini dilengkapi dengan Thumbnail atau gambar, tentu akan menambah perhatian mata pengunjung blog.
Cara Membuat Recent Post Blog

Recent Post dengan Thumbnail #1

1. Login akun blogger Sobat.
2. Silahkan Pilih “Tata Letak” lalu pilih “Tambah Gadget/Add Gadget”
3. kemudian pilih “HTML/JavaScript”. Maukkan kode berikut pada kolom yang tersedia.

<style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:12px}
#recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}
#recent-posts ul{margin:0;padding:0}
#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#recent-posts ul li:last-child{border-bottom:0}
#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}
</style><div id='recent-posts'><script type='text/javaScript'>
var rcp_numposts=7;
var rcp_snippet_length=150;
var rcp_info='yes';
var rcp_comment='Comments';
var rcp_disable='T?t Nh?n xét';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheYpK9t3NZk8RWxRzrR5aOLlyjwpsE_QBFpJFUO-dDVtutaouFaCQPj4Ks8WoVjIG7ZeDgdGY2dgbgZZhajbXQjnBXcACCnQq3Zh_HZF1-ccQls6hQjDnwDloTaQRiLv_j4TzbRcUl50Si/"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');</script></div>

4. Jangan Lupa klik Simpan/Save.

Keterangan:
var rcp_numposts=7: Jumlah tampilan recent post

Recent Post dengan Thumbnail #2

Pada style berikut, masing-masing widget recent post dilengkapi dengan thumbnail atau gambar, menjadikan tampilan template blog jadi lebih menarik.

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;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/AVvXsEjPbuiaFPaV5EZSlFHzCVWBmcuYe_SbSDSN8FByseKrQ4yw_h98mYSItT0RNyXaV8bcvQFYyZO9ki4REyMmKb6EpRTl_gJY4TdIg-VlENznyyJvp4n-coQEw2Zv_YTiI4ShVgwjjc-pWcjf/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==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" 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==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(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_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 40;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="https://mansyur81.blogspot.com/2020/08/cara-membuat-recent-post-blog-style.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' 
type='text/css'/>
<style type="text/css">
img.recent-post-thumb{
padding:2px;
width:65px;
height:65px;
float:left;
margin:0px 10px 10px;
border: 1px solid #69B7E2;
}
.recent-posts-container {
font-family:'Oswald', sans-serif;
font-size:12px;
}
ul.recent-posts-container li{
list-style-type: none;
margin-bottom: 10px;
font-size:12px;
float:left;
width:100%
}
ul.recent-posts-container {
counter-reset: countposts;
list-style-type:none;
padding:0;
}
ul.recent-posts-container li:before {
content: counter(countposts,decimal);
counter-increment: countposts;z-index: 1;
position:absolute;
left: 0px;
font-size: 13px;
font-weight: bold;color: #fff;
background: #6A5D87;
line-height:25px;
height:25px;
width:25px;
text-align:center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.recent-posts-container a{
text-decoration:none;
}
.recent-post-title {
margin-bottom:5px;
}
.recent-post-title a {
font-size:12px;
text-transform: uppercase;
color: #2aace3;
}
.recent-posts-details {
margin: 5px 0px 0px 92px;
font-size:11px;
}
.recent-posts-details a{
color: #777;
}
</style>

(3). Recent Post Keren di Sidebar Blog

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;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/AVvXsEjPbuiaFPaV5EZSlFHzCVWBmcuYe_SbSDSN8FByseKrQ4yw_h98mYSItT0RNyXaV8bcvQFYyZO9ki4REyMmKb6EpRTl_gJY4TdIg-VlENznyyJvp4n-coQEw2Zv_YTiI4ShVgwjjc-pWcjf/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==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" 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==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(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_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="https://mansyur81.blogspot.com/2020/08/cara-membuat-recent-post-blog-style.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='https://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' /><style type="text/css">
img.recent-post-thumb{width:50px;height:50px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 0px;}
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>

(4). Recent Post Keren Modifikasi di Sidebar Blog

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;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(p){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/AVvXsEjPbuiaFPaV5EZSlFHzCVWBmcuYe_SbSDSN8FByseKrQ4yw_h98mYSItT0RNyXaV8bcvQFYyZO9ki4REyMmKb6EpRTl_gJY4TdIg-VlENznyyJvp4n-coQEw2Zv_YTiI4ShVgwjjc-pWcjf/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin-top: 5px;" href="https://mansyur81.blogspot.com/2020/08/cara-membuat-recent-post-blog-style.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='https://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' /><style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
.recent-posts-container {font-family: 'Gloria Hallelujah', cursive;  float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}
ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px;  border-top: 2px solid #FCD6CB;}
ul.recent-posts-container {border: 2px solid #FCD6CB; }
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #616662;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #888;}
.recent-posts-details {padding-bottom: 5px;}
a.readmorelink {color: #4DACE3;}
</style>

(5). Recent Post Keren dan Elegan di Sidebar Blog

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;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/AVvXsEjPbuiaFPaV5EZSlFHzCVWBmcuYe_SbSDSN8FByseKrQ4yw_h98mYSItT0RNyXaV8bcvQFYyZO9ki4REyMmKb6EpRTl_gJY4TdIg-VlENznyyJvp4n-coQEw2Zv_YTiI4ShVgwjjc-pWcjf/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==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" 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==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(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_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 40;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="https://mansyur81.blogspot.com/2020/08/cara-membuat-recent-post-blog-style.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}
.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}
ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}
ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.recent-posts-container a{text-decoration:none;}
.recent-post-title {margin-bottom:5px;}
.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}
.recent-posts-details a{color: #777;}
</style>


Tiap style diatas terdapat kode var posts_no = 5; yang merupakan jumlah recent post yang ditampilkan, silakan ganti angka tersebut untuk menampilkan jumlah tertentu sesuai keinginan para sobat blogger.

Demikianlah tutorial kali ini tentang Cara Membuat Widget Recent Post Di Blog Dengan 5 Style Berbeda dengan Mudah.

Sekali lagi untuk pembuatan Recent Post Keren di Blogspot agar menampilkan artikel terbaru untuk menarik minat dibaca oleh pengunjung blog.

Dipersilahkan untuk Mengcopy artikel ini ke blog sobat dengan mencantumkan link pada artikel ini, dan untuk kode html atau script sobat semua harus memparsenya dulu biar bisa di posting di menu html (bukan di menu compose).

Semoga dapat bermanfaat dan selamat mencoba. Silahkan bertanya dikolom komentar jika ada yang kurang jelas, Salam !!!
Next Post Previous Post