Post Terbaru Berdasarkan Kategori

Artikel bagaimana membuat post terbaru atau recent posts berdasarkan kategori atau label tertentu. Ikuti langkah-langkah sederhana berikut untuk memasangnya di blog sobat.

Sobat membutuhkan hal berikut.

CSS

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103<style type='text/css' scoped='scoped' >
#simplesidepost{margin-bottom: 30px;
padding-bottom: 15px;
background: #FFF;
overflow: hidden;
}
.cbrnewponew a.imagethubnailwithtagin {
display: block;
border: 1px solid #E6E4E4;
padding: 4px;
width:60px;
height:60px;
float:left;
margin:0 5px 5px 0;
}
.cbttaglistco.h .a0 a.imagethubnailwithtagin, .cbttaglistco.v .a0 a.imagethubnailwithtagin, .cbttaglistco.s a.imagethubnailwithtagin {
float: none;
height: auto;
margin: 0 0 5px;
padding: 5px;
width: auto;
}
.cbttaglistco.s a.imagethubnailwithtagin {
height: 140px;
}
.cbrnewponew img {
width: 100%;
height: 100%;
}
ul.cbrnewponew, ul.cbrnewponew li {
padding: 0;
margin: 0;
list-style: none;
border: 0 none;
}
ul.cbrnewponew, ul.cbrnewponew li:hover {
margin: 0;
padding: 0;
}
ul.cbrnewponew strong {
display: block;
font-family: sans-serif;
font-weight: bold;
margin-bottom: 5px;
}
.cbttaglistco.v .a0 p, .cbttaglistco.h .a0 p {
display: none;
color:#333333;
}
.cbttaglistco.h ul {
overflow: hidden;
}
.cbttaglistco.h li {
width: 50%;
float: right;
}
.cbttaglistco.h li.a0 {
float: left;
}
.cbttaglistco.h .a0 strong, .cbttaglistco.v .a0 strong {
font-size: 130%;
}
.cbttaglistco.h .cbrnewponew strong {
font-family: sans-serif;
font-size: 12px;
font-weight: bold;
max-height: 36px;
overflow: hidden;
}
.cbttaglistco.h .cbrnewponew strong a{
color: #525252;
}
.cbttaglistco.s .date, .cbttaglistco.h .a0 .date, .cbttaglistco.v .a0 .date {
left: 0;
padding: 2px 7px;
}
ul.cbrnewponew .inner {
padding: 4px;
}
.cbrnewponew p {
margin: 8px 0;
display:none;
}
.cbrnewponew .infor {
font-size: 9px;
}
.infor > .comclass {
display: none;
}
.cbrnewponew .date, .cbrnewponew .comnum {
position: relative;
padding-left: 16px;
margin-right: 5px;
}
.cbrnewponew .comnum a {
color:#333;
}
.dayclass {
color: #95a5a6;
border-left: 3px solid;
padding: 2px 4px;
}
</style>

JavaScript

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126<script type='text/javascript'>
(function (a) {
    a.cbrnewpost = function (c, b) {
        var d = this;
        d.$el = a(c);
        d.init = function () {
            d.options = a.extend({}, a.cbrnewpost.defaultOptions, b);
            d.$el.html('<div class="cbttaglistco ' + d.options.postType + '"><ul class="cbrnewponew"></ul></div>').addClass(d.options.loadingClass);
            a.get((d.options.blogURL === "" ? window.location.protocol + "//" + window.location.host : d.options.blogURL) + "/feeds/posts/default" + (d.options.tagName === false ? "" : "/-/" + d.options.tagName) + "?max-results=" + d.options.MaxPost + "&orderby=published&alt=json-in-script", function (B) {
                var E, h, D, r, H, t, G, s, q, w, F, y, C, n = "",
                    f = B.feed.entry;
                if (f !== undefined) {
                    for (var z = 0, p = f.length; z < p; z++) {
                        for (var x = 0, v = f[z].link.length; x < v; x++) {
                            if (f[z].link[x].rel == "alternate") {
                                E = f[z].link[x].href;
                                break
                            }
                        }
                        for (var u = 0, A = f[z].link.length; u < A; u++) {
                            if (f[z].link[u].rel == "replies" && f[z].link[u].type == "text/html") {
                                H = f[z].link[u].title.split(" ")[0];
                                break
                            }
                        }
                        D = ("content" in f[z]) ? f[z].content.$t : ("summary" in f[z]) ? f[z].summary.$t : "";
                        var e = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
                        t = a("<div></div>").append(D.replace(e, ""));
                        G = t.find("img");
                        if ("media$thumbnail" in f[z]) {
                            s = f[z].media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/" + d.options.ImageSize);
                            if (f[z] === f[0] && d.options.postType !== "s") {
                                s = f[z].media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/" + d.options.FirstImageSize)
                            } else {
                                if (f[z].media$thumbnail.url.indexOf("img.youtube.com") != -1) {
                                    s = f[z].media$thumbnail.url.replace("default", "0")
                                }
                            }
                        } else {
                            if (G.length != 0) {
                                s = G[0].src
                            } else {
                                s = d.options.pBlank
                            }
                        }
                        D = D.replace(/<\S[^>]*>/g, "");
                        if (D.length > d.options.Summarylength) {
                            D = D.substring(0, d.options.Summarylength) + "..."
                        }
                        h = f[z].title.$t;
                        C = f[z].published.$t.substring(0, 10);
                        q = C.substring(0, 4);
                        w = C.substring(5, 7);
                        F = C.substring(8, 10);
                        y = d.options.MonthNames[parseInt(w, 10) - 1];
                        n += '<li class="a' + z + '"><div class="inner" ><a title="' + h + '" class="imagethubnailwithtagin" href="' + E + '"><img src="' + s + '"/></a><strong><a href="' + E + '">' + h + '</a></strong><div class="infor">' + (d.options.ShowDate === true ? '<span class="dayclass">' + y + " " + F + ", " + q + "</span>" : "") + (d.options.ShowComment === true ? '<span class="comclass"><a href="' + E + '#comment-form">' + H + "</a> Comment(s)</span>" : "") + "</div><p " + (d.options.ShowDesc === false ? "" : 'style="display:block"') + ">" + D + "</p></div></li>"
                    }
                    a("ul", d.$el).append(n);
                    if (d.options.postType === "s") {
                        var o = a(c).parents(".widget");
                        var I = o.children("h2");
                        if (d.options.tagName != false) {
                            I.wrapInner('<a href="/search/label/' + encodeURIComponent(d.options.tagName) + '"/>')
                        }
                        var m, g;
                        var k = d.$el.width();
                        if (a(window).width() < 479) {
                            g = 1;
                            m = k / g
                        } else {
                            if (a(window).width() < 979) {
                                g = 2;
                                m = k / g
                            } else {
                                if (a(window).width() < 1025) {
                                    g = 3;
                                    m = k / g
                                } else {
                                    g = 4;
                                    m = k / g
                                }
                            }
                        }
                        a(".cbttaglistco", d.$el).flexslider({
                            animation: "slide",
                            selector: ".cbrnewponew > li",
                            animationLoop: true,
                            itemWidth: m,
                            minItems: 1,
                            move: g,
                            mousewheel: true,
                            maxItems: 3
                        });
                        d.$el.removeClass(d.options.loadingClass)
                    } else {                        
                    }
                    d.$el.removeClass(d.options.loadingClass)
                } else {
                    d.$el.html("<span>No result! Or Error Loading Feed</span>")
                }
            }, "jsonp")
        };
        d.init()
    };
    a.cbrnewpost.defaultOptions = {
        blogURL: "http://jelasinblog.blogspot.com",
        MaxPost: 1,
        FirstImageSize: "s360-p",
        ImageSize: "s200-p",
        ShowDesc: false,
        ShowDate: true,
        ShowComment: true,
        Summarylength: 170,
        postType: "v",
        loadingClass: "loadingxxnewcontent",
        pBlank: "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif",
        MonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        tagName: false
    };
    a.fn.cbrnewpost = function (b) {
        return this.each(function () {
            (new a.cbrnewpost(this, b))
        })
    }
})(jQuery);
</script>

HTML

12345678<h2 style="padding: 8px 0 8px;background: #1abc9c;margin: 0 0 10px;"><span style="background: rgba(0, 0, 0, 0.12);padding: 5px 20px;color: #FFF;font-size: 22px;">Tips dan Info Terbaru</span></h2>
<div id="simplesidepost"></div>
<script type='text/javascript'>
$('#simplesidepost').cbrnewpost({
postType:"h",
tagName:"JavaScript"
});
</script>

Cara Pasang 

Cara memasangnya mudah, tambahkan sebuah widget HTML/JavaScript (Layout > Add a Gadget > temukan HTML/JavaScript klik tanda + untuk menambahkan), setelah widget terbuka kosongkan judulnya, pada kolom isian copy-paste semua kode yang saya berikan (gabungkan semua CSS, JavaScript, dan HTML itu).

Konfigurasi

blogURL: "http://jelasinblog.blogspot.com",/*ganti dengan alamat blog Anda*/
MaxPost: 1,/*angka satu adalah jumlah artikel yang tampil, sebagai contoh ganti menjadi 5*/

<script type='text/javascript'>
$('#simplesidepost').cbrnewpost({
postType:"h",
tagName:"JavaScript"/*ganti tulisan JavaScript dengan label atau kategori artikel yang ingin ditampilkan*/
});
</script>

Semoga cukup jelas :)