Cara Mudah Membuat Recent Post Ringan dan Responsive 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 Di Dalam Blog

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...

artikel terkait atau recent post ini sangat efektif untuk mengurangi nilai bounce rate yang terlalu besar karena dengan bounce rate yang terlalu besar maka kualitas blog akan turun di mata google.

maka dari itu 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...

Cara Membuat widget recent post di blog

pastikan sobat sudah login di blog masing-masing..
  • pilih tata letak dan tambah gadget
  • pilih html/java script

  • 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..
Baca : Cara mengetahui kecepatan tempalate blog
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

Reaksi:
Share this with short URL:

Artikel Terkait Lainnya:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser