Featured Post responsive by Cb free 2017

Featured Post responsive by Cb

Featured post responsive by Contoh isso é um widget bem interessante uma vez que pode ser colocado no template do blog na primeira pagina isso vai criar uma ar mais profissional alem de que também ajudar an questão de visualização de conteudo se deseja adicionar o widget no template siga os passos abaixo


Adicionando o Widget no template 

Faça login no blogger então va no menu tema editar HTML com as teclas combinadas CTRL+F busque por  ]]></b:skin>  e antes disso copie e cole o seguinte código:


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

Então salve o código abaixo sob o código  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>

Então salve o JS acima de </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>

salve e veja o resultado




Click to comment