Recent Post Thumbnail v2

Recent Post Thumbnail v2 - inilah yang akan saya bahas sekarang, Recent post ini saya dapatkan dari DT:],

seperti biasa Recent Post ini tidak menggunakan Hosting java script, tapi saya ambil isinya dan di gambungnkan bersama kode CSS-nya, sehingga loading lebih cepat.

DEMO

Untuk Pemasangan masuk ke Tata Letak > Tambah Gadget > HTML/JavaScript, kemudian salin kode berikut ini dan letakkan di dalamnya.

<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:transparent 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:0px;
background-color:white;
border-bottom:1px solid #ddd;
}

#dte_recent-post li a img {
float:left;
margin:0 0px 0 0;
padding:5px;
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://boyrohman.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    = 50, // 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'>
//<![CDATA[
// 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) {
            if ("media$thumbnail" in entry) {
                postImage = '<img style="width:' + rp_thumbWidth + 'px;height:' + rp_thumbWidth + 'px;" src="' + entry.media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "\/s" + rp_thumbWidth + "-c") + '" alt="Loading..." />';
            } else {
                postImage = '<img style="width:' + rp_thumbWidth + 'px;height:' + rp_thumbWidth + 'px;" src="' + rp_noImage + '" alt="Loading..."/>';
            }
        } else {
            postImage = "";
        }

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

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

        linkTarget = (rp_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 + ' ' + rp_monthNames[parseInt(dm, 10) - 1] + ' ' + dy + '</span> <span class="cm">(' + commentNum + ' ' + commentLabel + ')</span></span>';
        skeleton += '</li>';
        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/default/' + 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);
}
//]]>
</script>

Silahkan sobat kreasikan sendiri

Untuk tulisan yang berwarna hijau merupakan URL gambar, muncul apabila gambar postingan tidak ada atau tidak bisa di tampilkan, silahkan anda ganti dengan URL gambar Anda.