Recent Posts

Cara Membuat Recent Post di Blog Dengan Thumbnail

cara membuat recent post
Cara Membuat Recent Post ~ Recent post merupakan suatu tabel atau widget yang menampilkan postingan terbaru pada blog anda.


Recent post sering sekali digunakan para blogger.


Kok bisa mas?


Karena widget tersebut dapat memberi tahu pembaca atau pengunjung mengenai artikel terbaru yang kita upload.


Recent post juga dapat mempercantik tampilan blog kita lho.


Wah, asik dong jadi betah saya baca artikel anda.


Pada kesempatan kali ini saya akan membahas cara membuat recent post di blog dengan thumbnail kepada kalian semua.

Baca juga: Cara Mudah Membuat Blog Gratis di Blogger

Emang bagaimana sih caranya?


Simak caranya dibawah ini :


1. Login ke akun Blogger kalian.

2. Kemudian klik menu "Tata Letak".


cara membuat recent post di blog


3. Klik "Tambahkan Widget".


cara membuat recent post dengan thumbnail


4. Pilih "HTML/JavaScript".


cara membuat recent post keren


5. Setelah muncul widget "gadget HTML/JavaScript" klik "Edit".


cara membuat recent post responsive


6. Kemudian akan masuk ke halaman seperti dibawah ini :


cara membuat recent post keren dengan gambar


Penjelasan :

  • Judul : Isi dengan nama "Recent Post"

  • Konten : Isi dengan "code" dibawah ini

Copy Paste codenya.



<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://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==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="http://www.masloke.com/" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://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>


Simak keterangan dibawah ini :

  • Warna "Hijau" var posts_no = 5 : Jumlah artikel yang akan kalian tampilkan pada blog, cukup mengubah "angka" saja.

  • Warna "Biru" http://www.masloke.com : Ubah dengan URL situs blog kalian.


Mungkin itu saja informasi mengenai cara membuat recent post di blog dengan thumbnail. Semoga artikel yang saya bagikan kepada kalian semua dapat bermanfaat bagi semua orang. Selamat Mencoba dan Terima Kasih :)

1 Response to "Cara Membuat Recent Post di Blog Dengan Thumbnail"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel