Widget Daftar Posting Yang Telah Diperbaharui Oleh Admin

Widget yang menampilkan sebuah posting yang telah diupdate oleh administrator blog.

Demo

Untuk Pemasangannya pada Blogspot

1. Blogger, Dasboard dan pilih menu Tata Letak
2. Tambahkan HTML/Javascript
3. Copy code dibawah ini dan paste

<ol id="posts-diperbaharui"></ol>

Menambahkan CSS
4. Template, Edit HTML, Copy kode dibawah ini dan paste diatas kode ]]></b:skin>

li.perbaharui {
    list-style: none;
    height:60px;
    overflow:hidden;
    font-size:80%
}
.thumbnail-perbaharui {
    float:left;
    margin:5px 10px 0 5px
}
.tanggalnya {
    display:block;
    font-size:90%
}

Menambahkan Javascript
5. Cari kode </body>, copy Javascript dibawah ini dan paste diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
function updatedPosts(a) {
    if (document.getElementById("posts-diperbaharui")) {
        var e = a.feed.entry,
            title, img, link, date, content = "",
            ct = document.getElementById("posts-diperbaharui");
        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://isi_dengan-alamat-alamat-gambar-untuk-posting-yang-tidak-memiliki-gambar"
            }
            content += '<li class="perbaharui"><img src="' + img.replace(/\/s72-c/, "/s40-c") + '" class="thumbnail-perbaharui" alt="thumb" height="40px" width="40px"/>';
            content += '<strong><a href="' + link + '" target="_blank">' + title + '</a></strong><span class="tanggalnya"> 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("http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&orderby=updated&max-results=7&callback=updatedPosts"); 
//]]>
</script> 

6. Ganti alamat yang saya mark dengan alamat gambar anda, untuk memberi gambar pada posting yang tidak memiliki gambar
7. Ganti alamat blog yang saya beri garis bawah dengan alamat blog anda
8. Save Template dan lihat hasilnya

Tweet