Latest Update Widget For Blogger

Latest Update Widget For Blogger dengan preloading - widget ini berfungsi untuk menampilkan postingan yang terakhir kita perbaharui. itu juga memudahkan pengunjung mengenai artikel mana yang baru saja diEdit. widget ini menggunakan preloading. sehingga blog tidak akan lambat karena pemasangannya karena widget akan tampil ketika seluruh halaman telah selesai termuat. "onload"

Akhir-akhir ini saya tertarik untuk memasang widget ini, dan bisa anda lihat sendiri widget artikel terbaru yang biasanya dibawah labelpun sudah saya singkirkan. Begitu juga dengan widget popular post.:D

Demo

Latest Update Widget For Blogger dengan preloading

Pada dasbor pilih Tata letak => add gadget => HTML/JavaScript dan masukkan kode berikut pada formulir yang tersedia.

<ul id='latest-post'></ul>

Simpan dulu templatemu. kemudian pilih template => Edit Html, cari kode ]]></b:skin> atau </style>, setelah ketemu, silahkan masukkan CSS berikut tepat diatas kode yang ditemukan.

#latest-post li {
  list-style:none;
  margin:0;
  padding:7px;
  border-bottom:1px solid #ddd;
}

#latest-post li a img {
  float:left;
  margin:0 10px 0 0;
  padding:0;
  border:none;
  background:none;
  outline:none;
}

#latest-post li a.title {
  display:block;
  font-size:12px;
}

#latest-post li a.title:hover {
  text-decoration:underline;
}

#latest-post li span.foot {
  clear:both;
  display:block;
  color:#ccc;
  margin-top:7px;
  font-size:10px;
}

Kemudian cari kode </body> lalu pasang script berikut tepat diatasnya.

<script type='text/javascript'>
//<![CDATA[
var homePage = "http://tipsblogbaru.blogspot.com", // url blogmu
    numPosts = 5, // jumlah post
    thumbWidth = 72, // ukuran gambar
    summary = 100, // jumlah ringkasan
    sortByLabel = false, // berdasarkan label
    noImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNmVLtQu0AfQy3zfafwdXmAeSvJEf54Ko_ryV4bmrri3kUZSXe92Qmz__uqOySds_3-f7QsN9jW_eveqgDr19EiQ5T8MvOdtgmFVwxQuQlMzmToWlDePhqT9wpe96pJLOqJRzpy5_OYGE/s1600/tips-blog-baru.jpg", // A 'no-image' image
    monthNames = [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink = true, // open new tab link
    loadTimer = "onload"; // "onload" || waktu dalam milidetik (e.g: 3000, 4000, dst...)

function latestUpdate(json) {

    for (var i = 0; i < numPosts; i++) {
        if (i == json.feed.entry.length) break;
        var entry = json.feed.entry[i],
            postTitle = entry.title.$t,
            postAuthor = entry.author[0].name.$t,
            postDate = entry.published.$t.substring(0, 10),
            postUrl,
            linkTarget,
            postContent,
            postImage,
            skeleton = "";

        var dy = postDate.substring(0, 4),
            dm = postDate.substring(5, 7),
            dd = postDate.substring(8, 10);

        for (var j = 0; j < entry.link.length; j++) {
            if (entry.link[j].rel == 'alternate') {
                postUrl = entry.link[j].href;
                break;
            }
        }

        for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                commentNum = entry.link[k].title.split(" ")[0];
                commentLabel = entry.link[k].title.split(" ")[1];
                break;
            }
        }

        if ("content" in entry) {
            postContent = entry.content.$t;
        } else if ("summary" in entry) {
            postContent = entry.summary.$t;
        } else {
            postContent = '';
        }

        if (thumbWidth !== 0 || thumbWidth !== false) {
            if ("media$thumbnail" in entry) {
                postImage = '<img style="width:' + thumbWidth + 'px;height:' + thumbWidth + 'px;" src="' + entry.media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "\/s" + thumbWidth + "-c") + '" alt="Loading..." />';
            } else {
                postImage = '<img style="width:' + thumbWidth + 'px;height:' + thumbWidth + 'px;" src="' + noImage + '" alt="Loading..."/>';
            }
        } else {
            postImage = "";
        }

        postContent = postContent.replace(/<br ?\/?>/ig, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "");

        if (postContent.length > summary || summary !== false) {
            if (summary !== 0) {
                postContent = postContent.substring(0, summary) + '&hellip;';
            } else {
                postContent = '';
            }
        } else {
            postContent = '';
        }

        linkTarget = (newTabLink) ? ' target="_blank"' : '';

        skeleton = '<li>';
        skeleton += '<a href="' + postUrl + '"' + linkTarget + '>' + postImage + '</a>';
        skeleton += '<a class="title" href="' + postUrl + '"' + linkTarget + '>' + postTitle + '</a>';
        skeleton += postContent;
        skeleton += '<br style="clear:both;"/><span class="foot"><span class="dt">' + dd + ' ' + monthNames[parseInt(dm, 10) - 1] + ' ' + dy + '</span> <span class="cm">(' + commentNum + ' ' + commentLabel + ')</span></span>';
        skeleton += '</li>';
        document.getElementById('latest-post').innerHTML += skeleton;
    }

}

var labelName = (sortByLabel !== false) ? '-/' + sortByLabel : "";
var a = document.createElement('script');
a.src = homePage + '/feeds/posts/summary/' + labelName + '?alt=json-in-script&orderby=updated&callback=latestUpdate';

// Preloading...
if (loadTimer === "onload") {
    window.onload = function() {
        document.getElementsByTagName('head')[0].appendChild(a);
    };
} else {
    setTimeout(function() {
        document.getElementsByTagName('head')[0].appendChild(a);
    }, loadTimer);
}
//]]>
</script>

Keterangan:

homePage = "http://tipsblogbaru.blogspot.com",
-Ganti dengan url blogmu.

sortByLabel = false,
-Ganti false dengan nama labelmu. jika kamu ingin menggunakan widget ini untuk menampilkan label tertentu saja.
-contoh: sortByLabel = "JQuery", untuk menampilkan artikel dengan label "JQuery"

loadTimer = "onload";
-Inilah sifatnya yang pre loader, seperti yang sudah dijelaskan diatas, bahwasannya widget ini akan tampil hanya jika setelah seluruh halaman telah selesai dimuat.
-Ganti "onload" dengan angka /waktu dalam milidetik (e.g: 3000, 4000, dst...)
-Contoh: loadTimer = 3000;

Simpan templatemu.

Kendala yang sering dihadapi ketika memasang suatu widget yang bersifat preloader adalah waktu memuat halaman, Jika loading blogmu berat maka secara otomatis widget ini juga akan membutuhkan waktu lama untuk tampil. itu bukan berarti widget ini berat. usahakanlah agar tidak memasang jQuery libary lebih dari satu, karena itu juga memberatkan loading blogmu.