Cara Buat Postingan Terbaru Berdasarkan Kategori/Label Blog

Author : UnknownTidak ada komentar

kalongganteng.com - Kali ini saya akan berbagi bagaimana cara membuat post terbaru atau recent posts berdasarkan kategori atau label tertentu pada Blogger. Sekian banyak cara yang bertebaran di Internet memakai cara edit HTML pada blogger. Tapi kali ini saya memeri solusinya agar tidak ribet dalam pamasangannya, jadi sobat cukup menambahkan sebuah widget HTML/JavaScript (Layout > Add a Gadget > temukan HTML/JavaScript klik tanda + untuk menambahkan), setelah widget terbuka kosongkan saja judulnya sebab sudah tertulis di kode HTML-nya.

Jadi cukup mudah bukan? untuk lebih jelasnya lihat screenshot Postingan terbaru yang telah berhasil saya buat berikut.

Cara Buat Postingan Terbaru Berdasarkan Kategori/Label

Widget ini biasanya dipasang di bagian atas atau bawah deretan postingan pada bagian Home. Jadi sobat dapat menambahkan beberapa kategori untuk postingan terbarunya. Tentu hal ini akan memudahkan penggunjung untuk membuka postingan/artikel di blog sobat.

Silahkan copy beberapa Script berikut untuk konfigurasinya.

CSS

<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

<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

<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 pasangnya cukup mudah, sobat tambahkan sebuah widget HTML/JavaScript (Layout => Add a Gadget => Plilih HTML/JavaScript, setelah widgetnya terbuka kosongkan saja judulnya, karena sudah tercantum di code HTML. Lalu copy-paste semua kode yang saya berikan (gabungkan semua code CSS, JavaScript, dan HTML diatas).

Cara Konfigurasi

blogURL: "http://blog-anda.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>