Blog Personal tentang tips Blogging dan Internet

Membuat Widget Recent Posts Untuk Blog

Recent Posts
Widget Recent Posts adalah widget yang berisi artikel terbaru dari sebuah blog.  Widget ini bisa Anda jadikan untuk memberitahukan kepada pengunjung artikel terbaru dari blog Anda. Widget ini lebih simpel karena hanya menampilkan judul artikel saja, jadi tidak memberatkan terhadap blog.

Cara Memasang Widget Recent Posts Pada Blog

Silakan salin dan simpan kode dibawah ini pada widget blog Anda, pada HTML/JavaScript

<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://kang-mousir.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"><strong><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></strong></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>

Pengaturan

IconTeks
var homePageIsi dengan URL blog Anda
numPostsIsi dengan jumlah artikel yang ingin ditampilkan
Untuk mengatur jumlah artikel yang ingin ditampilkan silakan lihat keterangan diatas dan ganti kode yang Saya tandai ;)

Berlangganan : Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari Kang Mousir langsung di pesan kotak masuk.

feedburner

57 Komentar untuk "Membuat Widget Recent Posts Untuk Blog"

Adhy Suryadi

Scriptnya simple kang :) dan tidak harus memuat js seperti recent post kebanyakan.
Izin pakai kang sekalian izin untuk modifikasi tampilannya :-d

Fathoni Muhammad

Saya juga sudah memasang nya kang di blog saya. Agar pengunjung bisa tau postingan terbaru di blog kita :D

Kang Mousir

Iya Kang, yang ini lebih simpel, loadingya juga gak terlalu berat kayak recent posts yang lain.

Kang Mousir

Betul biar lebih mudah, jadi gak perlu harus kembali ke homepage

supar yono

trims kang....udah ane pasang diblog

shom al-bukhori

thanks kang mousir... it's work :) sudah saya pasang di blog saya

shom0601.blogspot.com

syamsul arifin

kalau saya mau buat post popular gimana ya kang

david tiopan

nice kang-mousir, berhasil di blog saya , sayang g bsa kunjungin balik wkwkwkwk

Eko Budiyanto

Terimakasih pelajarannya..Saya ikutan tempel ...!!! :-d

Piza laaa

terima kasih sangat laju loading!! This the best i ever see. :D

Comtel Cell

melihat demonya, sepertinya ini ada title nya yia, ijin pakai bos soalnya lagi nyari yang ada titlenya...

cunk berlabel

keren kang .dari tadi ane nyari script kayak gini ,kebanyakan kaga work ,makasih ijin nyoba kang

moch fadhil

mas kenapa di blog saya jadi alamatblog.com/undefinied

Muhammad Rasyiduddin

Wah,, akhirnya ketemu jg tutorial bikin widget recent posts... hasilnya bagus... cocok...

Thanks ya mas :D

Imam Muttaqin

Thanks mas, izin copas +modifikasi..

Imam Muttaqin

saya bingungnya Agar tulisan tidak bolt gimana ya mas?

Cilembu thea

nah nih...langsung di ceplok ah widget recent postnya kang, soalnya suhu saya juga mau pake...coba kita tunggu hasil modif nya deh. :-0

van emily

maaf gan tp klo blog yg memuat video dr youtube cara nampilin gambar video'a d'recent post g'mana?

abu azma

Langsung tak tak paraktekan kg mousirr...

Fachreza Muslim

kang klo mau di tambahin snippet bisa gk, klo bsa gmn ya caranya hehehhe


thanks before

Kang Mousir

ringan kok, silakan dicoba aja :)

Agus Purwantoro

teks nya biar gak tebal gimana gan ?

Kang Mousir

Tinggal dihapus kode untuk mempertebal teksnya, pakai kode ini
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://kang-mousir.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">'+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>

hendi surahman

nah ini dia yang dicari kang, makasih izin coba ya..

Dark Gamers

mas ini max result nya berapa maksimal..? 9999 gx mau muncul ya. mau ditaruh di sidebar nih,,

Sugiono Zugiek

simpel gak ribet dan pas di coba langsung berhasil..trims kang...

M. Reza Purnamajaya

wah makasih banyak infonya kang, berhasil! ari tadi kesana kemari buat bisa recent post, ternyata disini dengan gampang langsung jreengg!!! jadi deh... hatur nuhun

Putra Purnama

Oke gan, akan saya terapkan scriptnya di blog saya

Jajang Nurjaman

Saya pake widget nya ya kang...Trimakasih kang-mousir..

rudhy theart

recent post itu 'artikel terbaru' yah, setelah liat demo nya kayaknya sama dengan 'feed' bawaan blogspot? atau widget ini bisa dipasang bersamaan dengan 'feed' bawaan blogspot?

inggo ody

maaf, saya pasang di blog saya kok gak tampil ya mas, mohon penecerahan. Trims

Azzam Mujaddid

script nya joss gan (y) Thanks

kocu ogebz

wah keren kan, ijin pasang ya kang :D

M. Tafzul Syauky

ini yang saya cari mas, thanks kode nya

Merdeka Post

Kalau listnya tanpa Bulet gimana mas?

Koko K17

mantap kang tutorialnya simpel ga ribet

Cliff Gallant Satryo

Makasih ya mas, mau dicoba dulu nih. Semoga work di blog saya :D

Cliff Gallant Satryo

Wah, terima kasih banyak ya kang. :D
Udah nyari-nyari lama banget akhirnya ketemu juga, script-nya simpel lagi :-d

Agus Purwantoro

maaf gan, script nya di blog saya ada yang error, di bagian link menuju posting artikel blog undefined semua.

www*moderntekno*com

kira kira apa yang salah ?

Faried Nizal Abdulloh

Terimakasih gan, berhasil di pasang euy.

HKamil

Suwun Mas.....

berhasil di blog saya.

de eka Sas

langsung jos kang...
matur suwun..

Silakan berkomentar sesuai dengan topik. Jangan menyisipkan link pada komentar dan jangan sampai komentar Anda masuk komentar SPAM.

Jangan salahkan Saya bila komentar Anda dihapus !

Klik emoticon : :) :D :( :-o @@, :s :wow: 8) :x :P :| ;) :lol: :oops: :cry: :evil: :twisted: :roll: :!: :?: :idea: :arrow: :mrgreen: :-d