Recent Posts Widget Blogger With Effect Preloader

Widget ini diperkenalkan pada Juli 2012 oleh Taufik Nurrohman melalui situs websitenya dte.web.id. Sebuah konsep pre-loader diterapkan ke widget ini untuk mensiasati pemuatan halaman blog yang berat. Jadi secara teknis widget akan mulai aktif melakukan pemuatan konten jika sudah mencapai batas penghitung waktu yang telah di setting ke dalam script.

Recent Posts Widget With Effect Preloader

Selain efek pre-loader widget ini juga menggunakan thumbnail yang diambil dari halaman artikel dengan tujuan untuk mempercantik tampilan, jika kebetulan artikel tidak disertai dengan gambar maka widget ini akan menggunakan thumbnail default  yang telah disertakan ke dalam kode JavaScriptnya. Sangat menarik, untuk halaman demonya silahkan klik di sini.

Untuk langkah installasi, Anda bisa mengikuti tutorial di bawah ini.

Menambahkan Widget

Masuk ke Blogger.com » Tata Letak » klik Tambahkan Gadget  » HTML JavaScript. Salin dan tempel kode berikut ini.

<style type="text/css">
#dte_recent-post {
  margin:0 0;
  padding:0 0;
  font:normal 11px Arial,Sans-Serif;
  color:#333;
  margin:0 auto;
  min-height:100px;
  background:white url('http://reader-download.googlecode.com/svn/trunk/images/nivo-loading.gif') no-repeat 50% 50%;
}

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

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

#dte_recent-post li a.title {
  display:block;
  font-size:12px;
  text-decoration:none;
  color:#1155CC;
}

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

#dte_recent-post li span.foot {
  clear:both;
  display:block;
  color:#ccc;
  margin-top:7px;
  font-size:10px;
}
</style>
<ul id="dte_recent-post"></ul>
<script type="text/javascript">
//<![CDATA[
var rp_homePage    = "http://nama_blog.blogspot.com", // Your blog homepage
    rp_numPosts    = 5, // How many posts?
    rp_thumbWidth  = 72, // Thumbnail width. Change to 0 if you want to disable the post thumbnail
    rp_numChars    = 100, // Number of posts summary
    rp_sortByLabel = false, // Replace false with your specific label name to display posts by specific label
                            // Example: rp_sortByLabel = "JQuery", to sort posts by label "JQuery"
    rp_noImage     = "http://reader-download.googlecode.com/svn/trunk/images/meee-44x44.png", // A 'no-image' image
    rp_monthNames  = [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    rp_newTabLink  = true, // If true, then all the widget links will automatically opens in new window/new tab
    rp_loadTimer   = "onload"; // "onload" || time in milliseconds (e.g: 3000, 4000, ...)
//]]>
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/blogger-recent-post-with-preloader.js"></script>

Mengkonfigurasi Widget

Variabel	Keterangan
rp_homePage	Ganti dengan URL (alamat) blog Anda
rp_numPosts	Digunakan untuk menentukan jumlah artikel yang ingin ditampilkan
rp_thumbWidth	Digunakan untuk menentukan lebar thumbnail. Ubah lebarnya menjadi 0 untuk menghilangkan thumbnail
rp_numChars	Digunakan untuk menentukan jumlah karakter pada ringkasan artikel widget
rp_sortByLabel	Ganti nilai false menjadi nama label untuk menampilkan posting berdasarkan label yang spesifik. Contoh: rp_sortByLabel = "JQuery" akan menampilkan semua posting dengan label JQuery
rp_noImage	Thumbnail cadangan jika artikel yang ditampilkan pada widget tidak memiliki gambar
rp_monthNames	Tentukan nama-nama bulan sesuai dengan sistem penanggalan di negara Anda
rp_newTabLink	Jika bernilai true, maka semua tautan dalam widget akan terbuka di tab/jendela baru saat diklik
rp_loadTimer	Digunakan untuk menentukan berapa lama widget akan menunda proses pemuatan sebelum akhirnya mulai memuat. Secara normal bernilai "onload". Artinya bahwa widget akan mulai melakukan pemuatan konten setelah semua elemen halaman telah berhasil termuat. Anda juga bisa mengganti nilainya dengan satuan waktu milidetik untuk menunda waktu pemuatan selama beberapa detik ke depan. Contoh: rp_loadTimer = 3000 akan menunda pemuatan JSON selama 3 detik.

Bagi Anda yang ingin menyimpan kode JavaScript widget ini di hosting pribadi Anda, berikut source kodenya

// Recent Post widget for Blogger with Preloader
// Author: Taufik Nurrohman
// https://plus.google.com/108949996304093815163/about
// Licence: Free for change, keep the original attribution, non commercial

function showRecentPosts(json) {

    for (var i = 0; i < rp_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 (rp_thumbWidth !== 0 || rp_thumbWidth !== false) {
            if ("media$thumbnail" in entry) {
                postImage = '';
            } else {
                postImage = '';
            }
        } else {
            postImage = "";
        }

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

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

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

        skeleton = '
';
        skeleton += '' + postImage + '';
        skeleton += '' + postTitle + '';
        skeleton += postContent;
        skeleton += '
' + dd + ' ' + rp_monthNames[parseInt(dm, 10) - 1] + ' ' + dy + ' (' + commentNum + ' ' + commentLabel + ')';
        skeleton += '
';
        document.getElementById('dte_recent-post').innerHTML += skeleton;
    }

}

var labelName = (rp_sortByLabel !== false) ? '-/' + rp_sortByLabel : "";
var rp_script = document.createElement('script');
rp_script.src = rp_homePage + '/feeds/posts/summary/' + labelName + '?alt=json-in-script&callback=showRecentPosts';

// Preloading...
if (rp_loadTimer === "onload") {
    window.onload = function() {
        document.getElementsByTagName('head')[0].appendChild(rp_script);
    };
} else {
    setTimeout(function() {
        document.getElementsByTagName('head')[0].appendChild(rp_script);
    }, rp_loadTimer);
}

Tweet

Postingan terkait:

Ditulis EM — Tuesday 7 May 2013 — 4 Comments — Blogger Widgets