Cara Mudah Membuat Recent Post di Blogspot

Memiliki sebuah blog yang ciamik dan menarik kini menjadi keharusan di era digital.  Terutama bagi mereka yang memiliki bisnis atau sekadar berbagi pikiran tentang suatu topik.

Meskipun begitu, blog juga bisa digunakan untuk sekedar menumpahkan uneg-uneg. Bagi pebisnis, platform blog bisa menjadi etalase digital untuk memajang cerita tentang produk yang dijual, berikut dengan fotonya-fotonya.

Tak serumit membuat website, blog disediakan secara gratis oleh Blogger, platform milik Google yang beralamat di blogger.com. Anda hanya perlu menyesuaikan tata letaknya agar menarik di mata pengunjung.  Setelah itu, mengisi kontennya sesuai keinginan.

Salah satu elemen penting pada sebuah blog adalah menu ‘Recent Post’ atau ‘Postingan Terbaru.’ Tadinya, Blogger menyediakan menu ini secara otomatis.

Namun, kini menu itu tak  lagi tersedia. Walau demikian, jangan cemas,  ada banyak script widget gratisan di luaran sana.

Mengapa widget ‘Recent Post’ atau ‘Postingan Terbaru’ penting? Selain bisa mempercantik tampilan blog, keberadaan menu ‘Recent Rost’ di blog anda dapat memudahkan pengunjung mencari postingan terbaru.

Cara Membuat Recent Post di Blogspot

Untuk membuat ‘Recent Post’ di blogspot, cukup pasang script widget pengaturan tata letak blog anda. Berikut adalah cara membuat recent post di blogspot.

Masuk (login) ke akun blogger anda

1. Pada menu yang terdapat di bilah kiri, pilih ‘Layout’ atau ‘Tata Letak’
2. Lalu pilih ‘Add Gadget’ atau ‘Tambah Gadget’.
3. Kemudian pilih ‘HTML/JavaScript.
4. Lalu, muncul kotak kosong baru yang harus anda isi.
5. Pada kotak ‘Title’ isilah dengan ‘Recent Post’ atau ‘Postingan Terbaru’ atau ‘Artikel Terbaru’.
6. Lalu, pada bagian ‘content’, masukkan salah satu script yang tersedia di bawah ini.  Jangan lupa klik ‘save/simpan’ sesudahnya.
7. Cek tampilan blog terbaru anda. Kini, di sisi kanan sudah ada menu Recent Post atau ‘Postingan Terbaru.’

Di sini, kita akan mencoba dua jenis script. Yang pertama adalah script yang hanya menampilkan judul postingan terbaru saja. Kedua, script yang memperlihatkan judul dan foto thumbnail-nya. Pilih salah satu script di bawah ini  dan masukkan ke kotak ‘content’ pada menu ‘Configure HTML/JavaScript’.

Script ‘Recent Post’ yang Menampilkan Judul Tulisan

Di bawah ini adalah script yang dapat anda pakai untuk menampilkan menu recent post di blogspot anda.

<style scoped=” type=”text/css”>

ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}

li.recent-posts:last-child{border-bottom:0;}

li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#444;text-decoration:underline}

</style>

<ul id=”recent-posts”></ul>

<script>

//<![CDATA[

var homePage = “https://acehpolitik.blogspot.com/”,

numPosts = 10;

function recentPosts(a){if(document.getElementById(“recent-posts”)){var e=a.feed.entry,title,link,content=””,ct=document.getElementById(“recent-posts”);for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel==”alternate”){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class=”recent-posts”><a href=”‘+link+'” title=”‘+title+'” target=”_blank” rel=”nofollow”>’+title+'</a></li>’}ct.innerHTML=content}}var rcp=document.createElement(‘script’);rcp.src=homePage+’/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=’+numPosts+’&callback=recentPosts’;document.getElementsByTagName(‘head’)[0].appendChild(rcp);

//]]>

</script>

Catatan: Gantilah https://acehpolitik.blogspot.com/ dengan nama blog pribadi Anda.

Gotcha! Beginilah tampilan bentuk blog setelah dipasang widget ‘Recent Post’. Perhatikan, sudah ada menu ‘Kabar Terbaru’ di sisi kanan.

Script Recent Post yang Menampilkan Judul dan Foto Thumbnail

Ada pun untuk menu recent post yang menampilkan judul dan foto thumbnail, anda bisa menyalin script di bawah ini.

<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 id=’recent-posts’>

<script type=’text/javaScript’>

var rcp_numposts=7;

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=”http://lh3.ggpht.com/–Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png”};}};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=\”/feeds/posts/default?alt=json-in-script&max-results=’+rcp_numposts+’&callback=recent_posts\”><\/script>’);

</script>

</div>

Dan, beginilah hasilnya.  Terserah anda mau pakai script pertama atau yang kedua.

Demikianlah cara membuat recent post di blogspot Anda. Selamat mencoba dan happy blogging!