Cara Memasang Recent Post Widget di Blog

8/08/2015
Cara Memasang Recent Post di Blog

Cara Memasang Recent Post Widget di Blog - Kali ini Arlina Design akan berbagi sebuah widget yang mungkin sudah tidak asing lagi buat sobat blogger.

Widget ini masih memiliki fungsi yang sama dengan recent post widget dengan navigasi yang pernah Saya bagikan sebelumnya, yaitu untuk memunculkan feed dari postingan terbaru di blog kita. Hanya bedanya widget ini tidak menampilkan thumbnail post dan tampilannya pun cukup sederhana, yang membuat widget ini ringan dan proses memuat halaman blog pun lebih cepat.

Baca juga : Recent Post Widget dengan Navigasi


Berikut langkah pemasangan widget ini pada blog :

1. Buka Blogger > Tata Letak > Tambahkan widget baru kemudian salin dan simpan semua kode di bawah ini di dalamnya

<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 = "http://www.URL_BLOG_ANDA.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>

Catatan : Ganti kode yang ditandai dengan URL blog sobat dan jumlah post yang akan ditampilkan.

2. Simpan widget dan lihat hasilnya.



Sekian mengenai Cara Memasang Recent Post Widget di Blog, semoga bermanfaat.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

32 comments

Pertamax embk, saya sudah terapkan di blog . . .
terima kasih :-)

Balas

Cepat sekali, sama2 mas

Balas

Keren recentpostsnya mbak

Balas

yeee miheulaan wae si bapak eta.
keduaaxxx deh
akhirnya dikabulkan juga :-d

Balas

kalau dipasang di vienna lite 2 harus pakai http ya mba? tadi pas saya pasang ga pakai http gajadi

Balas

Ada gak recent post yang pake thumnail (gambar) ?

Balas

ijin copas mba lina. makasih

Balas

Sangat sederhana sob

Balas

Nah ini yang kemarin request :D

Balas

Sebetulnya saya ga tau apa artinya, tapi apa aja boleh

Balas

Bukan hanya di template vienna, di template lain jg sama lebih baik pakai http biar terbaca

Balas

Di atas sudah saya cantumkan linknya

Balas

Ya boleh, sama2

Balas

tolong bantu mbak newbie. . recent post udd bisa kluar. . tp postingan yg ada didlm recent post gx kluar-keluar. .

Balas

Penerapan URL blognya sudah benar belum seperti yang di atas?

Balas

Sudah bisa? Kalau belum mungkin ada optimasi blog yang belum dilakukan, diantaranya :

- Menambahkan jump break di setiap postingan
- Mengganti setelan umpan situs / feed blog ke penuh

Balas

Bgaimana biar tampil dhlman postingan tdk tampil dhalaman dpan mba

Balas

Referensi http://www.arlinadzgn.com/2014/09/beberapa-fungsi-tag-kondisional-pada-widget.html

Balas

Oke....berhasil mba. thanks bgt...

Balas

thanks
iam arabic blog form iraq http://qalpy.blogspot.com/
i love your blog

Balas

mba, share juga widget thumbnail per label seperti di gambar ini ya :D
http://prntscr.com/82kl9a

Balas

Nanti saya cb share

Balas

Arlina Dapatkah Anda mengunjungi website saya dan memberi tanggapan :)

Balas

langsung di coba. . . makasih.

Balas

okee... di coba, trims infonya hheee

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.