بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
RECENT POST widget didalam sebuah blog sangat diperlukan. Mengingat Recent Post adalah widget untuk memberitahu para pengunjung tentang artikel yang baru saja diterbitkan. Sehingga ketika visitor datang ke blog kita bisa langsung melihat artikel baru secara sekilas sebelum membaca keseluruhannya.
Widget ini dapat ditaruh di sidebar blog maupun di footer blog. Penempatannya pun tidak dipermasalahkan mau dimana suka saja. Ketika berada di sidebar maka pengunjung tinggal melihat ke sisi postingan. Dan bila berada di footer maka pengunjung bisa langsung melihat ke bawah dan digulir sampai bawah.
Bersanding dengan halaman Popular Post atau artikel populer maka letak yang berdekatan biasanya sering dilakukan oleh para blogger. Sehingga antara Popular Post dan Recent Post biasanya berada diantara atas bawah atau ke samping. Untuk memudahkan saja ketika melihat Recent kemudian ke Popular. Setelah itu barulah bisa masuk dan membaca artikel setelah kita mengkliknya.
Baca Juga :
Variasi yang ditampilkan dari Recent Post sangat variatif, tidak terpaku pada tampilan biasa tetapi juga bisa dimodifikasi dengan berbagai bentuk atau style dan warna background serta berbagai gaya penempatan gambar atau thumbnail dan caption. Menggunakan bahasa pemrograman CSS maka bentuk yang beraneka ragam bisa dibuat dengan bagus.
Punya blog ini juga tetapi sudah saya copot. Tidak ada niat buruk apapun tentang pencopotan ini. Hanya di blog saya sudah terdapat Popular Post, Random Post dan juga Trending Post. Maka untuk keberadaan widget Recent Post tidak saya adakan. Untuk membaca langsung ke halaman display depan dan klik langsung ke thumbnail dan nanti langsung menuju ke artikelnya langsung.
Nah untuk caranya saya berikan dibawah ini.
Cara Membuat Recent Post Keren Berwarna di Blog
1. Masuk ke Dashboard
2. Kemudian ke Tata Letak
3. Lalu pilih Tambah HTML/Javascript
4. Dan taruh kode dibawah ini di konten Tambah HTML/Javascript ini.
<style type="text/css">
img.recent-post-thumbnail{float:right;height:50px;width:50px;margin:5px -5px 0 0;-webkit-border-radius:25%;-moz-border-radius:25%;border-radius:25%;padding:3px;background:#fff;}
ul.recent-posts-wrap{background:#fff;list-style-type:none;margin:5px 0px 5px 0;padding:0;font:12px 'Ubuntu Condensed',sans-serif;}
ul.recent-posts-wrap li:nth-child(1n+0){background:#2574A9;width:100%;}
ul.recent-posts-wrap li:nth-child(2n+0){background:#1E8BC3;width:100%;}
ul.recent-posts-wrap li:nth-child(3n+0){background:#3498DB;width:100%;}
ul.recent-posts-wrap li:nth-child(4n+0){background:#52B3D9;width:100%;}
ul.recent-posts-wrap li:nth-child(5n+0){background:#94E0EE;width:100%;}
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 0;}
.recent-posts-details a{color:#222;}
.recent-posts-details{padding:5px 0 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/AVvXsEhUFqhOleOQ80N56rnw52LRic2I3uPxr91jxcf4HeF3Z1JqNV2FLFFyqag-JEO85DXv0zsshMGUHUllheBG_-KvtW0f-h5rNLPf2BBRY6RLdyKag8JjVqCsvil1rlkzQivuvf_gF6LmM4fw/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 = true;var post_summary = true;var summary_chars = 70;</script>
<script src="https://alifacode.com/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' />Catatan :
Untuk tulisan var posts_number = 5, angka 5 nya ganti jumlah artikel yang akan tampil sesuai selera kamu.
Untuk tulisan https://www.alifacode.com ganti dengan URL blog kamu.
Terakhir save dan lihat pasti sudah jadi. Jiwa muda adalah jiwa semangat. Bila kita tidak mempergunakan waktu muda kita dengan baik, maka penyesalan akan datang nanti di hari tua. So jalani hidup dengan semangattt. Salam.
Label Postingan :
Tips Blog
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Cara Membuat Recent Post Keren Berwarna di Blog . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
