Home  ›  Desain Blog

November 3, 2017

Featured Post Responsive untuk Blog - Newswire Blogger Template Style

November 3, 2017

Baca Juga

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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVQwQLvwIZ8BLAw0buAtKuPMxfYT9EXRGbFrUYzjWnBSWSnluKanZn6oiQ-0hq801r15hKBSniokrQsrnr4wIKOcVzjNYAFRRFbspjf8mf2oHNuH6NJ8TnRQMT6zOB2YU-sMTwA5h740U/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>

Tags :
Previous
« Prev Post
Next
Next Post »
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

1 comment on Featured Post Responsive untuk Blog - Newswire Blogger Template Style

  1. Kang Yazid12/14/2017 10:01 PM

    tidak ada satupu tutorialnya yang work. apa aku yang salah naruh..

    ReplyDelete

Subscribe to: Post Comments (Atom)

Contact Form

Name

Email *

Message *

Copyright © Contoh Blog. All rights reserved.