Membuat Widget Recent Posts Untuk Blog

Membuat Widget Recent Posts Untuk Blog

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 ;)

Tentang Penulis

Kang Mousir

Seorang blogger sejak tahun 2012 sampai sekarang. Saya hanyalah orang biasa yang senang dengan blog dan membagikan tulisan lewat media blog, karena itu saya membangun Blog Kang Mousir.

Facebook | Twitter | Instagram

  • 0 Artikel
  • 0 Komentar

Artikel Terkait

Komentar

Adhy Suryadi
Scriptnya simple kang :) dan tidak harus memuat js seperti recent post kebanyakan.
Izin pakai kang sekalian izin untuk modifikasi tampilannya :-d
Kang Mousir
Iya Kang, yang ini lebih simpel, loadingya juga gak terlalu berat kayak recent posts yang lain.
Fathoni Muhammad
Saya juga sudah memasang nya kang di blog saya. Agar pengunjung bisa tau postingan terbaru di blog kita :D
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
Anonim
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?
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
zone aceh
ringan gak mas script nya?
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..
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..
Anonim
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..
Maxmoer Blog
terimakasih, izin sedoot kang tutorialnya...

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 !

Batal