Widget Featured Latest Post with Image Otomatis Magazine Style

Widget Featured Latest Post with Image Otomatis Magazine Style

CSS:

.featured{width:612px;overflow:hidden; border-top:0px solid #E0E0E0; margin:4px 0 20px; padding:10px 0; border-bottom:3px solid #008800;}
.featured-wide img{display:block; height:175px; width:300px;}
.featured-wide{width:300px}
.postTitle{font-size: 22px; font-weight: bold; line-height: 25px; margin-bottom: 10px;}
.postTitle a{color:#333333;}
.featured .right{float:right;padding:10px 5px}
.featured-vn{width:290px; border-bottom: 1px solid #E6E6E6; margin:0 0 10px 0; padding-bottom: 10px;}
.featured-vn .featuredTitle{font:bold 12px Arial; margin-bottom: 5px;}
.featured h1{font:bold 14px Arial;text-transform:uppercase;color:#026ab5;line-height:1.2em;letter-spacing:.01em; border-bottom:2px solid #026ab5;margin:0 auto;padding:10px 10px 10px 35px}
.featured h1 a:hover{color:#000}
.featured .left{float:left;padding:10px 5px}
.featured-wide .thumb{padding-bottom:5px}
.featured-vn .thumb{float:left;margin:3px 10px 0 1px}
.featured-wide .featuredPostMeta{float:right}
.featured h1 a,.featured h1 a:visited{color:#0169b5}
.featuredPost{padding:0 0 10px 10px; font-size:13px}
.featured-vn .featuredTitle a{color:#333333; font-size: 14px;}
.postTitle a:hover, .featured-vn .featuredTitle a:hover{color:#008800;}
@media (min-width:768px) {
.featured{width:100%}
.featured-wide,.featured-vn,.featured-wide img{width:386px;}
}
@media (min-width:1024px) {
.featured-wide,.featured-vn,.featured-wide img{width:290px;}
}
@media (min-width:1280px) {
.featured-wide,.featured-vn,.featured-wide img{width:304px;height:100%;max-height:175px;}
}

JS:
<script type='text/javascript'>
    //<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv6O7sq7KXPOgjhl94BvD5vYEDKzE0MOIBItaCTYbV1cEHULQJgLa-yNFlZzcdxq8nxM9zUASxzQUpJvQaF4xaOPXTYLSkYDO8lSSb3fl-NjReaFP4TFccdH82RolnUmPg8RPXrLz5yVg/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 125;
summaryPost1 = 55;
summaryTitle = 25;
numposts1 = 4;
numposts4 = 4;
numposts6 = 6;
;
function removeHtmlTag(_17, _18) {
var _8 = _17["split"]("<");
for (var _0 = 0; _0 < _8["length"]; _0++) {
if (_8[_0]["indexOf"](">") != -1) {
_8[_0] = _8[_0]["substring"](_8[_0]["indexOf"](">") + 1, _8[_0]["length"])
}
};
_8 = _8["join"]("");
_8 = _8["substring"](0, _18 - 1);
return _8
};
function showrecentposts2(_6) {
j = (showRandomImg) ? Math["floor"]((imgr["length"] + 1) * Math["random"]()) : 0;
img = new Array();
if (numposts1 <= _6["feed"]["entry"]["length"]) {
maxpost = numposts1
} else {
maxpost = _6["feed"]["entry"]["length"]
};
for (var _0 = 0; _0 < maxpost; _0++) {
var _1 = _6["feed"]["entry"][_0];
var _12 = _1["title"]["$t"];
var _10;
var _3;
if (_0 == _6["feed"]["entry"]["length"]) {
break
};
for (var _2 = 0; _2 < _1["link"]["length"]; _2++) {
if (_1["link"][_2]["rel"] == "alternate") {
_3 = _1["link"][_2]["href"];
break
}
};
for (var _2 = 0; _2 < _1["link"]["length"]; _2++) {
if (_1["link"][_2]["rel"] == "replies" && _1["link"][_2]["type"] == "text/html") {
_10 = _1["link"][_2]["title"]["split"](" ")[0];
break
}
};
if ("content" in _1) {
var _4 = _1["content"]["$t"]
} else {
if ("summary" in _1) {
var _4 = _1["summary"]["$t"]
} else {
var _4 = ""
}
};
postdate = _1["published"]["$t"];
if (j > imgr["length"] - 1) {
j = 0
};
img[_0] = "";
s = _4;
a = s["indexOf"]("<img");
b = s["indexOf"]("src=\"", a);
c = s["indexOf"]("\"", b + 5);
d = s["substr"](b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
if (_0 == 0) {
img[_0] = "<img width=\"300\" height=\"225\" class=\"alignone\" src=\"" + d + "\"/>"
} else {
img[_0] = "<img class=\"alignright\" height=\"80\" src=\"" + d + "\" width=\"90\"/>"
}
};
var _11 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var _14 = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var _16 = postdate["split"]("-")[2]["substring"](0, 2);
var _9 = postdate["split"]("-")[1];
var _15 = postdate["split"]("-")[0];
for (var _5 = 0; _5 < _11["length"]; _5++) {
if (parseInt(_9) == _11[_5]) {
_9 = _14[_5];
break
}
};
var _13 = _16 + " " + _9 + " " + _15;
if (_0 == 0) {
var _7 = "<div class=\"featured-wide left\"><div class=\"thumb\"><a href=\"" + _3 + "\">" + img[_0] + "</a></div><div class=\"featuredPost1 lastPost\"><h2 class=\"postTitle\"><a href=\"" + _3 + "\">" + _12 + "</a></h2><div class=\"entry-meta\"><span class=\"meta-date\">" + _13 + " </span></div>\x09<p>" + removeHtmlTag(_4, summaryPost) + "...</p><div class=\"clear\"></div></div></div><div class=\"featured_1 right\">";
document["write"](_7)
};
if ((_0 > 0) && (_0 < maxpost)) {
var _7 = "<div class=\"featured-vn\"><div class=\"thumb\"><a href=\"" + _3 + "\">" + img[_0] + "</a></div><div class=\"featuredTitle\"><a href=\"" + _3 + "\">" + _12 + "</a></div><div class=\"entry-meta\"><span class=\"meta-date\">" + _13 + " </span></div>" + removeHtmlTag(_4, summaryPost1) + "...<div class=\"clear\"></div></div>";
document["write"](_7)
};
j++
};
document["write"]("</div>")
};
//]]>
</script>

HTML

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='featured'>
<b:section class='feat' id='featured-post' preferred='yes'>
  <b:widget id='HTML20' locked='false' title='Featured-Posts' type='HTML' visible='true'>
    <b:includable id='main'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</b:includable>
  </b:widget>
</b:section>
</div>
<div class='clear'/>
</b:if>