Widget Posting Diperbaharui
Widget daftar posting diperbaharui yang dimaksud dalam posting kali ini adalah widget yang didalamnya berisi daftar posting yang telah diperbaharui/diupdate.Agar anda lebih memahami silahkan lihat demo di bawah.
Bagi yang tertarik silahkan simak dan ikuti langkah-langkah di bawah ini.
Cara Membuat Widget Daftar Posting Yang Telah Diperbaharui
1. Buka dasbor blogger anda2. Pilih Tata Letak klik add elemen/tambah gadget
3. Kemudian pilih HTML/JavaScript
4. Copy
code
HTML di bawah ini kemudian masukkan.
Menambahkan HTML
<ol id="updated-posts"></ol>
Menambahkan CSS
5. 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%
}
Menambahkan JavaScript
5. 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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEk418ifNAZgFpwDqYdGNgFZRTVU7_6J-ue-hSnSf9tSMXVXaUHbq-AtOLfQvuhSLwHeH9VyHpnY7zkoUEvwo85TT8gwdoakSanMMZQa47IVyXt7jy_gF0L1ectHoV64ItL0kJuARUKqc/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("https://info-kmu.blogspot.com/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.
6. Simpan