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
JavaScript
HTML
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
Semoga cukup jelas :)
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 :)
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
ReplyDeleteDibutuhkan kesabaran dalam menuntut ilmu :)
Deletepak kalau lebih dari 1 kategori nulisnya "kategori1, kategori2" atau "kategori1", "kategori2" atau cuma hanya 1 kategori?
ReplyDeleteBelum nyoba, tapi apa bisa lebih dari 1 kategori?
DeleteCoba dululah :)
DeleteKan dari judulnya untuk 1 kategori, klu mau di buat kategori yang lain tinggal di panggil aja kayak nya pakai javascriptnya,
ReplyDeleteMenarik mas infonya, terus berkarya ya dan berbagi juga mas .. wkwkwk
kang gimana cara supaya hanya tampil di HOME saja?
ReplyDeleteApit kodenya menggunakan tag kondisional (b:if) seperti ini:
Delete<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
makasih kang. berhasil
Deleteada artikel susunan dan aturan dasar template blogger gak?
Ada, coba baca ini: http://jelasinblog.blogspot.com/2013/07/kode-html-dan-css-template-paling-dasar.html
Deleteok, 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