Cara Membuat Widget Postingan Terbaru / Recent Post

Cara Membuat Widget Postingan Terbaru / Recent Post

Halo sobat jalankutu, kali ni saya akan berbagi tutorial seputar blogspot, yaitu cara membuat widget postingan terbaru/recent post. Menurut saya widget itu fungsinya untuk mempercantik tampilan blog, namun yang paling utama adalah untuk menawarkan isi blog kepada visitor, bahwasannya "di blog saya ada postingan terbaru lo, atau di blog saya ada postingan terpopuler lo".

widget sendiri ada bermacam macam, dari wigget post terpopuler, widget label, widget postingan yang di unggulkan dan lain-lain, masih banyak fitur yang di berikan oleh blogger, sedangkan untuk membuat widget post terbaru ini tidak di sediakan oleh blogger. Eh, sebenarnya ada tapi pakai feed artikel, kalau menurut saya ini gak bagus di tampilan blog selain itu bikin berat loading.
Cara Membuat Widget Postingan Terbaru / Recent Post

"Udah mas sekarang di mulai saja tutorialnya, saya sudah gak sabar". baiklah berikut ini langkah-langkah yang dapat kamu ikuti dan praktikan

1. Silahkan login ke dasbor blogger
2. Pilih Tata Letak
3. Tambahkan Gadget ( HTML/ Java Script )
4. Kemudian tempelkan script di bawah ini :
<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:#0033CC;}li.recent-posts a:hover{color:#000;text-decoration:underline}
</style>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "https://wahyudele3.blogspot.com/",
numPosts = 5;
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>
Keterangan :

  • Silahkan ganti link https://wahyudele3.blogspot.com/ dengan alamat link blog sobat ( oh iya perlu kalian ketahui blog wahyudele adalah blog kedua saya, jika berkenan silahkan berkunjung, terimakasih).
  • numPosts = 5 , tampilkan jumlah postingan pada widget, disana ada lima postingan, jika sobat ingin lebih bayak lagi post yang di tampilkan silahkan ganti angka tersebut sesuai dengan keinginan sobat, tapi saran saya lima saja karna menurut saya lebih enak di lihat.

5. Jika sudah selesai, silahkan Simpan perubahan, dan lihat blog sobat, maka hasilnya akan seperti ini


Bagaimana sob, tutorialnya cukup mudah kan? kurang lebihny demikian jika ada pertanyaan silahkan bertanya pada kolom komentar, terimakasih sudah berkunjung, sampai jumpa di postingan berikutnya.

Advertisement

Baca juga:

Blogger
Disqus
Pilih Sistem Komentar