Site and learn your application

2/23/2017

Cara Menambahkan Recent Post Blogger Tanpa Thumbnail Reponsive

Recent Post atau Artikel Terbaru adalah daftar artikel yang baru diposting di platform blogger.com. Anda dapat mengatur jumlah artikel baru yang akan ditampilkan di sidebar dan atau footer blog. Dengan memasang recent post ini harapannya supaya pengunjung yang membuka blog dapat menelusuri artikel dengan mudah.

Sayangnya menambahkan recent post pada platform blogger sedikir rumit, yaitu dengan memasukan kode HTML pada widget blog. Dulu recent post tersedia di Gadget blogger, namun kini telah dihapus. Sebagai gantinya Anda bisa menggunakan Feed Blogger tapi artikel yang ditampilkan sebatas 5.

Tampilan recent post yang disukai blogger adalah sederhana, tanpa gambar thumbnail, dan tentunya responsive dibuka di semua perangkat. Kenapa harus sederhana? ya karena bagi publisher jangan sampai tampilan recent post lebih mencolok dari gambar iklan sehingga pengunjung tetap fokus pada artikel dan gambar.

Baiklah berikut ini menambahkan Recent Post Blogger tanpa Thumbnail Responsive:
1. Login ke akun blogger.com, pilih Tata Letak kemudian Tambahkan Gadget
2. Pilih HTML/ JavaScript
3. Copas kode di bawah ini dan taruh di widget HTML/ JavaScript
<script>var numposts =5; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://YOURBLOGNAME.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>
4. Ganti yang berwarna merah dengan url blog Anda
5. Simpan dan lihat hasilnya

Note:
Bila recent post tidak muncul tambahkan kode berikut ini dan copas di atas kode </head>
<script type='text/javascript'>
//<![CDATA[

function rp(json){document.write('<ul>');for(var i=0;i<numposts;i++){document.write('<li>');var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}posttitle=posttitle.link(posturl);var readmorelink="(more)";readmorelink=readmorelink.link(posturl);var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");document.write(posttitle);if(showpostdate==true)document.write(' - '+monthnames[parseInt(cdmonth,10)]+' '+cdday);if(showpostsummary==true){if(postcontent.length<numchars){document.write(postcontent)}else{postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...'+readmorelink)}}document.write('</li>')}document.write('</ul>')}

//]]>
</script>
Sumber: newbloggerthemes
Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : Cara Menambahkan Recent Post Blogger Tanpa Thumbnail Reponsive

0 comments:

Post a Comment