Cara Mudah Membuat Recent Post Ringan dan Responsive di Blog

Membuat Recent Post di Blog

Cara Membuat Recent Post Ringan dan Responsive di Blog : recent post merupakan widget yang berada di sisi kiri atau kana blog yang menampilkan beberapa list artikel terbaru sobat..

Fungsi Recent Post

Recent post berfungsi untuk meningkatkan page view dari sebuah blog, kita membutuhkan sesuatu yang menarik agar pengunjung blog meng-klik yang kita buat...


dalam meningkatkan page view artikel yang kita buat maka kita tidak bisa lepas dengan yang namanya recent post atan yang bisa desebut artikel terbaru sobat...

kita di tuntut mampu menyediakan list recent post artikel yang di mana tujuannya agar memudahkan pengunjung melihat artikel terbaru kita dan diharapkan akan membuka artikel tersebut...

jadi disini saya harapkan sobat mampu untuk membuat sesuatu yang unik dan judul yang menggoda..

nah untuk membuat recent post tersebut kita memerlukan yang namannya widget sidebar yang biasa berada di kiri atau kanan blog...

setiap blog yang ada akan menampilkan bermacam-macam widget agar tampilan blog terlihat enak dan pastinya tidak membingungkan pengunjung...

namun dalam tutorial ini saya lebih spesifik akan membahas cara membuat widget recent post...

untuk membuat recent post cukup mudah saja karna di dalam tutorial ini saya akan jelaskan lengkap cara memasang widget recent post di blog...

Membuat widget recent post di blog

pastikan sobat sudah login di blog masing-masing..
  • pilih tata letak dan tambah gadget
  • pilih html/java script
Cara Mudah Membuat Recent Post Ringan dan Responsive di Blog

  • silahkan isi nama dan copy script di bawa ini masukan ke dalam html/javascript dan simpan
<div class="recentpoststyle">
<!--<script src="https://cdn.rawgit.com/Brando07/share/newbe/recent-post-seocips-1.js"></script>-->
<script type='text/javascript'>
 function showlatestposts(a){for(var b=0;b<posts_no;b++){var e,c=a.feed.entry[b],d=c.title.$t;if(b==a.feed.entry.length)break;for(var f=0;f<c.link.length;f++)if("alternate"==c.link[f].rel){e=c.link[f].href;break}d=d.link(e);var g="... read more";g=g.link(e);var h=c.published.$t,i=h.substring(0,4),j=h.substring(5,7),k=h.substring(8,10),l=new Array;if(l[1]="Jan",l[2]="Feb",l[3]="Mar",l[4]="Apr",l[5]="May",l[6]="Jun",l[7]="Jul",l[8]="Aug",l[9]="Sep",l[10]="Oct",l[11]="Nov",l[12]="Dec","content"in c)var m=c.content.$t;else if("summary"in c)var m=c.summary.$t;else var m="";var n=/<\S[^>]*>/g;if(m=m.replace(n,""),document.write('<li class="recent-post-title">'),document.write(d),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(m.length<summary_chars)document.write(m);else{m=m.substring(0,summary_chars);var o=m.lastIndexOf(" ");m=m.substring(0,o),document.write(m+" "+g)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+l[parseInt(j,10)]+" "+k+" "+i+"</div>")}}
</script>
<script>
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>
<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: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}
li.recent-post-title { padding: 5px 0px;}
.recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}
.post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
</style></div>

dari script di atas, bagian yang saya beri warna merah tersebut adalah bagian yang harus sobat sesuaikan dengan kebutuhan...

bagian tersebut adalah jumlah artikel yang ingin di tampilkan di bagian sidebar...

menu recent post ini menggunakan script yang tidak terlalu berat dan dan tidak terlalu memakan waktu untuk meng load nya..

jadi kecepatan blog sobat tidak terganggu...ini cara mudah dan simple mengetahui kecepatan blog sendiri

oke demkian tutorial tentang Cara Mudah Membuat Recent Post Ringan dan Responsive di Blog hari ini..

jika terdapat kesalahan dan pertanyaan silahkan jangan ragu untuk bertanya di kolom komentar..

semoga berhasil dan happy blogging

Share this

Subscribe to receive free email updates:

3 Responses to "Cara Mudah Membuat Recent Post Ringan dan Responsive di Blog"