Featured Post Responsive untuk Blog - Newswire Blogger Template Style

Featured Post Responsive untuk Blog - Newswire Blogger Template Style

Featured Post News Wire Blogger Template Style. Menampilkan posting unggulan di halaman depan blog. Gaya majalah (Magazine Style).

Demonya bisa dilihat di blog demo template Newswire Blogger Template. Ini penampakannya.

Featured Post News Wire Blogger Template Style

Featured Post Responsive - Newswire Blogger Template Style.

Kode dan Cara Pasang

Kode CSS
Simpan di atas kode ]]></b:skin>

.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;}
}

Kode HTML
Simpan di bawah kode main-wrapper

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


Kode JavaScript
Simpan di atas kode </head>

<script type='text/javascript'>
    //<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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>")
};
function showrecentposts5(_6) {
 j = (showRandomImg) ? Math["floor"]((imgr["length"] + 1) * Math["random"]()) : 0;
 img = new Array();
 if (numposts4 <= _6["feed"]["entry"]["length"]) {
  maxpost = numposts4
 } 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] = imgr[j];
  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 != "")) {
   img[_0] = d
  };
  var _11 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
  var _14 = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  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;
  _10 = "<a href="" + _3 + "">" + _10 + " comments</a>";
  if (_0 == 0) {
   var _7 = "<li class="first"><h2 class="entry-title"><a href="" + _3 + "">" + _12 + "</a></h2><div class="entry-meta"><span class="meta-date">" + _13 + " - <a href="" + _3 + "">" + _10 + "</a></span></div><div class="entry-thumb"><a href="" + _3 + ""><img width="110" height="80" src="" + img[_0] + ""/> </a></div><div class="entry-excerpt"><p>" + removeHtmlTag(_4, summaryPost) + "...   <div class="meta-more"><a href="" + _3 + "x22x20x3Ex6Dx6Fx72x65x20xBBx3Cx73x70x61x6Ex20x63x6Cx61x73x73x3Dx22x6Dx65x74x61x2Dx6Ex61x76x22x3Ex3Cx2Fx73x70x61x6Ex3Ex3Cx2Fx61x3Ex3Cx2Fx64x69x76x3Ex3Cx2Fx70x3Ex3Cx2Fx64x69x76x3Ex3Cx2Fx6Cx69x3E";
   document["write"](_7)
  };
  if ((_0 > 0) && (_0 < maxpost)) {
   var _7 = "<li class="catlist"><a href="" + _3 + "">" + _12 + "</a></li>";
   document["write"](_7)
  };
  j++
 }
};
function showrecentposts7(_6) {
 j = (showRandomImg) ? Math["floor"]((imgr["length"] + 1) * Math["random"]()) : 0;
 img = new Array();
 if (numposts6 <= _6["feed"]["entry"]["length"]) {
  maxpost = numposts6
 } 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] = imgr[j];
  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 != "")) {
   img[_0] = d
  };
  var _11 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
  var _14 = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  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;
  _10 = "<a href="" + _3 + "">" + _10 + " comments</a>";
  if (_0 == 0) {
   var _7 = "<div class="zech-wide left"><div class="thumb"><a href="" + _3 + ""><img width="190" height="140" src="" + img[_0] + ""/></a></div><div class="featuredPost lastPost"><h2 class="zeech-title"><a href="" + _3 + "">" + _12 + "</a></h2>x09<p>" + removeHtmlTag(_4, summaryPost1) + "... <div class="meta-more"><a href="" + _3 + "x22x20x3Ex6Dx6Fx72x65x20xBBx3Cx2Fx61x3Ex3Cx2Fx64x69x76x3Ex3Cx2Fx70x3Ex3Cx64x69x76x20x63x6Cx61x73x73x3Dx22x63x6Cx65x61x72x22x3Ex3Cx2Fx64x69x76x3Ex3Cx2Fx64x69x76x3Ex3Cx2Fx64x69x76x3Ex3Cx75x6Cx3Ex3Cx64x69x76x20x63x6Cx61x73x73x3Dx22x7Ax65x63x68x2Dx6Ex76x20x72x69x67x68x74x22x3E";
   document["write"](_7)
  };
  if ((_0 > 0) && (_0 < maxpost)) {
   var _7 = "<li><a href="" + _3 + "">" + _12 + " </a></li>";
   document["write"](_7)
  };
  j++
 };
 document["write"]("</ul></div>")
};
//]]>
</script>

Labels: Desain Blog

Related Posts

0 Komentar untuk "Featured Post Responsive untuk Blog - Newswire Blogger Template Style"

1. Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *