Widget Daftar Posting Diperbaharui / Yang Telah Diupdate
Juli 02, 2016
24 Comments

Widget daftar posting diperbaharui yang dimaksud dalam posting kali ini adalah widget yang didalamnya berisi daftar posting yang telah diperbaharui/diupdate oleh admin blog.
Cara Membuat Widget Daftar Posting Yang Telah Diperbaharui
- Buka dasbor blogger anda
- Pilih Tata Letak klik add elemen/tambah gadget
- Kemudian pilih HTML/JavaScript
- Copy
code
HTML di bawah ini kemudian masukkan. - Selanjutnya masuk ke menu edit template/template. Kemudian tambahkan CSS di bawah ini tepat di atas
]]></b:skin>
li.update { list-style: none; height:60px; overflow:hidden } .imgupdate { float:left; margin:5px 10px 0 5px } .tgl-com { display:block; font-size:90% }
- Terakhir masukkan kode di bawah ini tepat di atas
</body>
dengan format penulisan<script> code disini </script>
// Pengembangan dari http://www.dte.web.id/2012/01/basic-json-feeds-for-blogger.html // Widget Daftar Posting Diperbaharui // Nodified : yOu w4hyOu // https://plus.google.com/106933633716411881896/about // http://info-kmu.blogspot.com/ function updatedPosts(a) { if (document.getElementById("updated-posts")) { var e = a.feed.entry, title, img, link, date, content = "", ct = document.getElementById("updated-posts"); for (var i = 0; i < 7; i++) { for (var j = 0; j < 7; j++) { if (e[i].link[j].rel == "alternate") { link = e[i].link[j].href; break } } var title = e[i].title.$t, pd = e[i].published.$t.substring(0, 10), date = pd.replace(/-/g, "/"); if ("media$thumbnail" in e[i]) { img = e[i].media$thumbnail.url } else { img = "http://2.bp.blogspot.com/-LQV025ltHWI/UnZSnJQN_GI/AAAAAAAAGes/gbXNGWA21LY/s40/logon.png" } content += '<li class="update"><img src="' + img.replace(/\/s72-c/, "/s40-c") + '" class="imgupdate" alt="thumb" height="40px" width="40px"/>'; content += '<strong><a href="' + link + '" target="_blank">' + title + '</a></strong><span class="tgl-com"> diposkan pada ' + date + "</span></li>"; } ct.innerHTML = content } } function getScript(url) { var s = document.createElement("script"); s.type = "text/javascript"; s.src = url; document.body.appendChild(s) } getScript("//info-kmu.blogspot.co.id/feeds/posts/summary?alt=json-in-script&orderby=updated&max-results=7&callback=updatedPosts");
Jangan lupa untuk mengganti alamat blog yang ditandai dengan alamat blog kamu. - Simpan
Menambahkan HTML
<ol id="updated-posts"></ol>
nah, ini yang saya tunggu-tunggu. :D
BalasHapushebat banget niru codenya \o/
tapi , ko gak work yah...???
HapusKomentar ini telah dihapus oleh pengarang.
Hapusoke mantab, sudah work
Hapuscara mengurangi jumlah postnya bagaimana...?
setiap kali saya coba mengganti angka 7 di script tersebut widgetnya malahan jadi error (undefenied)
Pastikan memakai script diatas (sudah diupdate).cari code ini kmudian ubah nilai 7document.getElementById("updated-posts");
Hapusfor (var i = 0; i < 7; i++) {
for (var j = 0; j < 7; j++) {
if (e[i].link[j].rel == "alternate")
lalu coba pada script pemanggilan feed ganti nilai max-result=7
Check http://jsfiddle.net/JJBZv/3/
Hapussaya sudah mencoba merubahnya dari situ mas ,
Hapushasilnya jadi undefenied
Saya chek yang http://jsfiddle.net/JJBZv/3/ bisa sob...
HapusKalo masih gagal, coba pake yang ini saja var homePage = "http://www.infokmu.com/", // Ganti dengan alamat blog anda
numPosts = 10; // Konfigurasi untuk mengatur jumlah posting
// feed
function updatedPosts(a) {
if (document.getElementById("updated-posts")) {
var e = a.feed.entry,
title, img, link, date, content = "",
ct = document.getElementById("updated-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,
pd = e[i].published.$t.substring(0, 10),
date = pd.replace(/-/g, "/");
if ("media$thumbnail" in e[i]) {
img = e[i].media$thumbnail.url
} else {
img = "http://2.bp.blogspot.com/-LQV025ltHWI/UnZSnJQN_GI/AAAAAAAAGes/gbXNGWA21LY/s40/logon.png"
}
content += '<li class="update"><img src="' + img.replace(/\/s72-c/, "/s40-c") + '" class="imgupdate" alt="thumb" height="40px" width="40px"/>';
content += '<strong><a href="' + link + '" target="_blank">' + title + '</a></strong><span class="tgl-com"> diposkan pada ' + date + "</span></li>";
}
ct.innerHTML = content
}
}
var you_script = document.createElement('script');
you_script.src = homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&max-results=' + numPosts + '&callback=updatedPosts';
document.getElementsByTagName('head')[0].appendChild(you_script);
Demo http://jsfiddle.net/w4hyou/JJBZv/21/
entah mengapa,masih undefenied juga.
Hapusiya nih no work cenah kang !!!
BalasHapusKomentar ini telah dihapus oleh pengarang.
Hapussaya cek udah work kang ... saya coba izin acak-acak lagi
Hapusko pas di klik judul'y malah eror kang ...
Hapusiya ternyata masih belum fix.. sekarang insyaalloh sudah.. silahkan cek kang... http://jsfiddle.net/JJBZv/1/
Hapusiya sekarang work dan nanti saya akan bikin postingan nya karena dibalut menggunakan blogazine kang .. sekalian izin reshare saja hehe
Hapussilahkan kang.. bebas2 saja..
Hapusmas, cara membuat back to top kayak blog ini gimana?
BalasHapusIni nihh yang saya cari cari :D :)
BalasHapushasil dari pemasangan widget di atass udah work, cuman ada kendala dikit mas, pada tulisan tanggal tampilan nya seperti ini seperti ini 2014/01/17
BalasHapusbisa ga mas tampilan tanggal nya seperti ini 17 januari 2014
Terima kasih...
Untuk mengubahnya kita perlu mengedit Javascript sebelumnya, kurang lebihnya seperti ini.
HapusCopy code ini o = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"],
ct = document.getElementById("updated-posts");
for (var i = 0; i < 7; i++) {
for (var j = 0; j < 7; j++) {
if (e[i].link[j].rel == "alternate") {
link = e[i].link[j].href;
break
}
}
var title = e[i].title.$t,
pd = e[i].published.$t.substring(0, 10).split("-");
if ("media$thumbnail" in e[i]) {
img = e[i].media$thumbnail.url
} else {
img = "http://2.bp.blogspot.com/-LQV025ltHWI/UnZSnJQN_GI/AAAAAAAAGes/gbXNGWA21LY/s40/logon.png"
}
content += '<li class="update"><img src="' + img.replace(/\/s72-c/, "/s40-c") + '" class="imgupdate" alt="thumb" height="40px" width="40px"/>';
content += '<strong><a href="' + link + '" target="_blank">' + title + '</a></strong><time class="tgl-com" datetime="' + pd.join("-") + '"> ' + (pd[2] + " " + o[(parseInt(pd[1], 10) - 1)] + " " + pd[0]) + '</time></li>';
}
Kemudian tempatkan seperti pada instruksi di bawah ini function updatedPosts(a) {
if (document.getElementById("updated-posts")) {
var e = a.feed.entry,
title, img, link, date, content = "",
//Kode Tadi Simpan Disini diantara title, img, link, date, content = "",disini ct.innerHTML = content}
ct.innerHTML = content
}
}
terima kasih sudah mau membantu...
HapusOk....
Hapusterima kasih mas wahyu, Widget daftar posting diperbaharui dipasang di blog saya dan langsung work, tapi kalau saya rubah format tanggal seperti pertanyaanya mas taufik karim masih gagal, harus pakai jquery versi berapa mas?
HapusIni pakai javascript murni jadi ga pakai Jquery juga bisa.
HapusUntuk merubah tanggal, ini demonya coba lihat demo di http://jsfiddle.net/JJBZv/29
Semoga membantu