Post Terbaru Berdasarkan Kategori

Artikel bagaimana membuat post terbaru atau recent posts berdasarkan kategori atau label tertentu. Ikuti langkah-langkah sederhana berikut...

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

<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 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 :)

COMMENTS

BLOGGER: 11
  1. Aduh ribet klo bgt Mas mohon di upload yang sebenarnya di http://aksitemplat-lzmodern.blogspot.com/ permasalhannya lagi tidak responsive kotak widget tidak ada di atas posting untuk menambahkan post terbaru berdasrka kategori seperti di blog lzmodern.blogspot.com

    ReplyDelete
  2. pak kalau lebih dari 1 kategori nulisnya "kategori1, kategori2" atau "kategori1", "kategori2" atau cuma hanya 1 kategori?

    ReplyDelete
  3. Kan dari judulnya untuk 1 kategori, klu mau di buat kategori yang lain tinggal di panggil aja kayak nya pakai javascriptnya,

    Menarik mas infonya, terus berkarya ya dan berbagi juga mas .. wkwkwk

    ReplyDelete
  4. kang gimana cara supaya hanya tampil di HOME saja?

    ReplyDelete
    Replies
    1. Apit kodenya menggunakan tag kondisional (b:if) seperti ini:
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      Letakkan kode di sini
      </b:if>


      Lebih lanjut tentang tag kondisional baca:
      http://jelasinblog.blogspot.com/2013/07/macam-macam-tag-kondisional-blogger.html

      Delete
    2. makasih kang. berhasil
      ada artikel susunan dan aturan dasar template blogger gak?

      Delete
    3. Ada, coba baca ini: http://jelasinblog.blogspot.com/2013/07/kode-html-dan-css-template-paling-dasar.html

      Delete
    4. ok, makasih kang. mau nanya satu lagi nih :D. gimana ya caranya agar per label ada halaman 1 2 3 . . . jadi gak cuma ada di HOME

      Delete

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Post Terbaru Berdasarkan Kategori
Post Terbaru Berdasarkan Kategori
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpVZEJVPFf5DM0-43cjusoVI-RG05gL4RR2LZawMNGZ8XCSDese7uP5hY8fHoP8U1vQVU5ibDTb2QCWaZrVxlhCFAIcQfsN-cIM4T-cn7X8l6kYnat-XaiSwZhkxwpzhp50a00u2CaK94/s1600/post_terbaru_berdasarkan_label.PNG
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpVZEJVPFf5DM0-43cjusoVI-RG05gL4RR2LZawMNGZ8XCSDese7uP5hY8fHoP8U1vQVU5ibDTb2QCWaZrVxlhCFAIcQfsN-cIM4T-cn7X8l6kYnat-XaiSwZhkxwpzhp50a00u2CaK94/s72-c/post_terbaru_berdasarkan_label.PNG
Jelas in Blog
https://jelasinblog.blogspot.com/2014/08/post-terbaru-berdasarkan-kategori.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2014/08/post-terbaru-berdasarkan-kategori.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content