Cara Mudah Membuat Recent Post di Blog

Cara Mudah Membuat Recent Post di Blog - Kali ini AJP ingin membagikan cara untuk membuat widget recent post di blog sobat semua. Hingga nanti di blognya bisa tampil seperti gadget yang AJP screen shoot seperti di atas. Oke berikut cara-caranya, mudah kok :

1. Login ke akun blogger
2. Buka dashbor blogger sobat.
3. Pilih "layout" atau "Tata Letak"
4. Didalam tampilan layout itu kemudian pilih "Tambahkan Gadget". Kamu bisa memilihnya dimana saja yang kamu suka. Namun AJP sarankan di samping kanan saja, seperti yang ada di blog ini. Terlihat lebih rapi, atau menyesuaikan theme milik sobat.
5. Pilihlah "HTML / Java Script"
Setelah muncul gadget yang diinginkan, lalu dibagian judul maka sobat bisa memberi judul "Recent Post" Bisa juga dengan kalimat-kalimat lain yang sobat suka, seperti : "Posting Terbaru"  atau "Artikel Terbaru"

Setelah itu di dalam isinya sobat copy saja kode di bawah ini :

<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/AVvXsEi9dWeMVKB0C3wHuqC8-xDmEWO2eModJWzDXB_-f2g_qdEwo8r8HlWfKm2JFuOv61_4b44zkQ_OCGPDjU5sP3cDkr8LaCxoP4Qmkztq-lSCXVsGPZNbNWym0zCaw6SdjJCdrreXqb-kZmaE/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.indravedia.com/2015/04/menambahkan-widget-recent-post-blogger-mantab.html" 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

Keterangan tambahan  untuk bagian yang AJP merahkan ini :

var posts_no = 5; adalah jumlah post yang ingin ditampilkan. Kalau di blog ini AJP ganti dengan 10.

var showpoststhumbs = true; adalah untuk menentukan apakah recent post disertai thumnail gambar atau tidak. "true" untuk menampilakan gambar, dan "false" untuk tidak menampilkan. Saran dari AJP, di tulis true saja agar lebih terlihat cantik.

var readmorelink = true; adalah untuk menampilkan link dengan tulisan readmore (baca selengkapnya). Ini terserah sobat saja.

var showcommentslink = true; adalah untuk menampilkan komentar dalam post,

var posts_date = true; adalah untuk menampilkan tanggal posting.

var post_summary = true; adalah untuk menampilkan kalimat-kalimat awal yang tampil dalam post.


Oke demikianlah cara mudah membuat recent post di blog sobat. Selamat mencoba dan semoga berhasil.

Tweet