Maret 25, 2016

Membuat Recent Post Dengan Tanggal dan Komentar



Widget recent post merupakan widget yang sangat vital jika sebuah blog tidak memiliki widget ini tentunya pengunjung akan kebingungan akan kemana setelah membaca salah satu artikel anda bisa-bisa pengunjung akan langsung menutup blog anda dan mencari blog lainnya, dan tentunya widget ini menjadi pengarah agar pengunjung tidak menjadi kebingungan apa lagi jika anda memiliki banyak pengunjung sangat di sayangkan jika anda tidak memiliki widget ini.

Baca juga Cara membuat widget recent post sederhana tanpa mengurangi page loading
Untuk penampilan widgetnya bisa dilihat di bawah ini atau di sebelah kanan sidebar blog ini


Langsung saja langkah-langkah yang harus di lakukan 
  1. Masuk blogger 
  2. Pilih Tata letak
  3. Html/JavaScript 
  4. Copy dan pastekan kode di bawah ini 


  5.  <style scoped='' type='text/css'>
    #recent-posts{color:#999;font-size:12px}
    #recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}
    #recent-posts ul{margin:0;padding:0}
    #recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
    #recent-posts ul li:last-child{border-bottom:0}
    #recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}
    </style>
    <div class="container">
      <div id='recent-posts'>
    <script type='text/javaScript'>
    var rcp_numposts=5;
    var rcp_snippet_length=150;
    var rcp_info='yes';
    var rcp_comment='Comments';
    var rcp_disable='T?t Nh?n xét';
    function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCZZkB3xonTxFfark3O3aj7e8Dx3ECT9QdhifosfccgEw0DSFZKT5Ru_ZDkLLKG8xDeQHxfv4NMneO24uzTFhMw6wqfgAT1kzy_Rd6wD-UCrZTrZGJIQg2xcBgopBb9yYG4UAIbU9dyklk/"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"https://kecoa-indo.blogspot.co.id/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
    </script>
    </div>
    </div> 


  6. Lalu Simpan dan lihat blog anda
Penting :
rcp_numposts=5; = Ganti angkan 5 dengan jumlah postingan yang akan ditampilkan.
var rcp_snippet_length=150; = Jumlah karakter isi artikel yang akan ditampilkan
rcp_info='yes'; = Ketik no untuk menyembunyikan keterangan tanggal dan jumlah komentar.
rcp_comment='Comments'; = Nama judul tulisan dari jumlah komentar.

Untuk membuatnya melayang silahkan baca artikel ini : Membuat widget melayang Seperti di Blog ini

7 komentar

  1. kayaknya keren nih gan recentpostnyaa,ijin nyoba ya gan buat blog ane siapa tahu aja nanti cocok huehue 8-)

    BalasHapus
  2. Bisa nih gan tak coba nanti di blog saya , keren gan recent post nya

    BalasHapus
  3. Nice post gan, saya coba di blog saya dan bikin blog saya tambah kece

    BalasHapus
  4. Bagus bagus, bisa buat blog saya yg satunya nih

    BalasHapus
  5. waahh.... ini nih yang saya carii...

    udah ubeg2 google sampe tekor tapi gak ktemeu, ehh skali bw langsung ketemu juga widget recent post yg kyk gini...

    mksi.. dah saya pasang om di blog saya. ahmadnazziruddin.blogspot.com

    BalasHapus
  6. hmm.. bagus nih untuk mempercantik blog

    BalasHapus

Semua bisa berkomentar di blog ini termasuk anonim, jadi gunakan kolom komentar di bawah dengan bijak, segala bentuk komentar yang bersifat merugikan akan di hapus oleh admin. Link error ataupun link rusak bisa menghibungi melalui Contact Us atau langsung berkomentar .

Blogger yang baik selalu menyempatkan berkomentar.


EmoticonEmoticon