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