segunda-feira, 18 de abril de 2016

Featured post imagem user friendly Blogger



Hoje vamos compartilhar esse lindo widget post em destaque com imagem e uma interface amigavel para blogger onde isso fica mais criativo e também mais profissional ao ser adicionado no Blogger então para adicionar siga os passos abaixo.


Como adicionar featured post imagem user friendly Blogger

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

.blodblogpost .widget {
    padding: 20px 0 0px 0px;
}
#modblofpostset .cbttaglistco.h li.a0 {
    float: left;
    height: 400px;
    padding: 0;
 overflow: hidden;
    width: 60%;
}
#modblofpostset .cbttaglistco.h li {
    border: 0 none;
    float: right;
    height: 200px;
    overflow: hidden;
    padding: 0;
    width: 40%;
}
#modblofpostset .cbttaglistco.h li a {
    overflow: hidden;
}
#modblofpostset .cbttaglistco.h li img {
 -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
}
#modblofpostset .cbttaglistco.h li:hover img {
     -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
opacity: 1;
}
.cbtthenepor:hover .thumbx img {
     -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
opacity: 1;
}
#modblofpostset ul.cbrnewponew .inner{
padding: 0;
}
#modblofpostset .cbrnewponew a.imagethubnailwithtagin {
    border: 0 none;
    height: 200px;
position: absolute;
    padding: 0;
    width: 290px;
}
#modblofpostset .cbttaglistco .cbrnewponew .a0 img {
    height: 515px;
    width: 515px;
}
#modblofpostset .cbttaglistco.h li.a0 .info {
    margin-top: -115px;
}
#modblofpostset .cbrnewponew .a1 p, #modblofpostset .cbrnewponew .a2 p {
    color: #FFFFFF;
    display: block;
    height: 70px;
    margin: 120px 0 0;
    overflow: hidden;
    padding: 15px;
    position: absolute;
    width: 282px;
}
#modblofpostset #dayclass {
    display: none;
}
#modblofpostset .cbttaglistco.h .a0 a.imagethubnailwithtagin {
    border: 0 none;
    height: 516px;
    padding: 0;
    width: 545px;
}
#modblofpostset .cbttaglistco.h .cbrnewponew strong {
    color: #FFFFFF;
    font-size: 22px;
    line-height: 36px;
    overflow: hidden;
    padding: 69px 15px;
    position: absolute;
    text-transform: uppercase;
    width: 290px;
}
#modblofpostset .cbttaglistco.h .cbrnewponew .a1 strong {
    background: url("http://3.bp.blogspot.com/-HHV2CKW13uU/UrsXEJecWrI/AAAAAAAADTg/avvruk9MZeg/s1600/ovlay.png") repeat-x scroll 0 39px rgba(0, 0, 0, 0);
    margin-top: -5px;
}
#modblofpostset .cbttaglistco.h .cbrnewponew .a2 strong {
    background: url("http://3.bp.blogspot.com/-HHV2CKW13uU/UrsXEJecWrI/AAAAAAAADTg/avvruk9MZeg/s1600/ovlay.png") repeat-x scroll 0 10px rgba(0, 0, 0, 0);
    margin-top: 26px;
}
#modblofpostset .cbttaglistco.h .cbrnewponew strong a{
color: #FFFFFF;
}
#modblofpostset {
    overflow: hidden;
    position: relative;
}
#modblofpostset .cbttaglistco.h li.a0 strong {
    background: url("http://3.bp.blogspot.com/-HHV2CKW13uU/UrsXEJecWrI/AAAAAAAADTg/avvruk9MZeg/s1600/ovlay.png") repeat-x scroll 0 234px rgba(0, 0, 0, 0);
    font-size: 47px;
    height: 400px;
    line-height: 60px;
    padding: 210px 20px 0;
    position: absolute;
    top: 0;
    width: 432px;
}
#modblofpostset .cbttaglistco.h li.a0 strong a{
color:#fff;
}
#modblofpostset .cbttaglistco.v .a0 p, .cbttaglistco.h .a0 p {
    color: #FFFFFF;
    display: block;
    margin-top: -10px;
    padding: 5px 20px;
    position: relative;
}

HTML
Procure pelo código <div id='main-wraper> ou  <div class='main-wraper> e na parte superior adicione o código.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='blodblogpost'>
<b:section class='sidebar' id='blodblogpostset' showaddelement='yes'>
</b:section>
</div>
</b:if>

JavaScript para ser adicionado.

Agora busque pelo código </head> ou </body> copie o seguinte código e cole antes

<script type='text/javascript'>
//<![CDATA[
(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="info">' + (d.options.ShowDate === true ? '<span id="dayclass">' + y + " " + F + ", " + q + "</span>": "") + (d.options.ShowComment === true ? '<span id="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: 4
      });
      d.$el.removeClass(d.options.loadingClass)
     } else {
      if (d.options.tagName != false) {
       d.$el.append('<div class="morepostag"><a title="View All About ' + d.options.tagName + '" href="/search/label/' + encodeURIComponent(d.options.tagName) + '"><span>View All</span></a></div>').removeClass(d.options.loadingClass)
      }
     }
     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: "",
  MaxPost: 6,
  FirstImageSize: "s360-p",
  ImageSize: "s100-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>


Se preferir usar o código emcripted use esse.

<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(T(a){a.Y=T(c,b){l d=1j;d.$K=a(c);d.1G=T(){d.i=a.2E({},a.Y.1C,b);d.$K.1h(\'<J O="1B \'+d.i.19+\'"><1g O="1H"></1g></J>\').2D(d.i.11);a.2B((d.i.1d===""?V.1D.2o+"//"+V.1D.2n:d.i.1d)+"/2m/2l/1l"+(d.i.M===U?"":"/-/"+d.i.M)+"?2k-2j="+d.i.1v+"&2f=1y&2c=28-15-14",T(B){l E,h,D,r,H,t,G,s,q,w,F,y,C,n="",f=B.22.21;j(f!==20){1b(l z=0,p=f.X;z<p;z++){1b(l x=0,v=f[z].P.X;x<v;x++){j(f[z].P[x].1m=="1Z"){E=f[z].P[x].Q;1p}}1b(l u=0,A=f[z].P.X;u<A;u++){j(f[z].P[u].1m=="1X"&&f[z].P[u].1U=="1S/1h"){H=f[z].P[u].16.1R(" ")[0];1p}}D=("1w"15 f[z])?f[z].1w.$t:("1x"15 f[z])?f[z].1x.$t:"";l e=/<14\\b[^<]*(?:(?!<\\/14>)<[^<]*)*<\\/14>/1Q;t=a("<J></J>").1c(D.W(e,""));G=t.1P("1e");j("12$Z"15 f[z]){s=f[z].12$Z.18.W(/\\/s[0-9]+\\-c/g,"/"+d.i.1E);j(f[z]===f[0]&&d.i.19!=="s"){s=f[z].12$Z.18.W(/\\/s[0-9]+\\-c/g,"/"+d.i.1F)}N{j(f[z].12$Z.18.1O("1e.1N.1J")!=-1){s=f[z].12$Z.18.W("1l","0")}}}N{j(G.X!=0){s=G[0].1L}N{s=d.i.1o}}D=D.W(/<\\S[^>]*>/g,"");j(D.X>d.i.1i){D=D.13(0,d.i.1i)+"..."}h=f[z].16.$t;C=f[z].1y.$t.13(0,10);q=C.13(0,4);w=C.13(5,7);F=C.13(8,10);y=d.i.1t[1T(w,10)-1];n+=\'<1a O="a\'+z+\'"><J O="1V" ><a 16="\'+h+\'" O="1W" Q="\'+E+\'"><1e 1L="\'+s+\'"/></a><1r><a Q="\'+E+\'">\'+h+\'</a></1r><J O="1Y">\'+(d.i.1n===R?\'<L 1z="23">\'+y+" "+F+", "+q+"</L>":"")+(d.i.1I===R?\'<L 1z="24"><a Q="\'+E+\'#25-26">\'+H+"</a> 27(s)</L>":"")+"</J><p "+(d.i.1A===U?"":\'29="2a:2b"\')+">"+D+"</p></J></1a>"}a("1g",d.$K).1c(n);j(d.i.19==="s"){l o=a(c).2d(".2e");l I=o.2g("2h");j(d.i.M!=U){I.2i(\'<a Q="/1u/1s/\'+1k(d.i.M)+\'"/>\')}l m,g;l k=d.$K.17();j(a(V).17()<2p){g=1;m=k/g}N{j(a(V).17()<2q){g=2;m=k/g}N{j(a(V).17()<2r){g=3;m=k/g}N{g=4;m=k/g}}}a(".1B",d.$K).2s({2t:"2u",1M:".1H > 1a",2v:R,2w:m,2x:1,2y:g,2z:R,2A:4});d.$K.1f(d.i.11)}N{j(d.i.M!=U){d.$K.1c(\'<J O="2C"><a 16="1K 1q 2F \'+d.i.M+\'" Q="/1u/1s/\'+1k(d.i.M)+\'"><L>1K 1q</L></a></J>\').1f(d.i.11)}}d.$K.1f(d.i.11)}N{d.$K.1h("<L>2G 2H! 2I 2J 2K 2L</L>")}},"2M")};d.1G()};a.Y.1C={1d:"",1v:6,1F:"2N-p",1E:"2O-p",1A:U,1n:R,1I:R,1i:2P,19:"v",11:"2Q",1o:"2R://1.2S.2T.1J/-2U/2V/2W/2X/2Y-c/2Z.30",1t:["31","32","33","34","35","36","37","38","39","3a","3b","3c"],M:U};a.3d.Y=T(b){3e 1j.3f(T(){(3g a.Y(1j,b))})}})(3h);',62,204,'||||||||||||||||||options|if||var||||||||||||||||||||||||div|el|span|tagName|else|class|link|href|true||function|false|window|replace|length|cbrnewpost|thumbnail||loadingClass|media|substring|script|in|title|width|url|postType|li|for|append|blogURL|img|removeClass|ul|html|Summarylength|this|encodeURIComponent|default|rel|ShowDate|pBlank|break|All|strong|label|MonthNames|search|MaxPost|content|summary|published|id|ShowDesc|cbttaglistco|defaultOptions|location|ImageSize|FirstImageSize|init|cbrnewponew|ShowComment|com|View|src|selector|youtube|indexOf|find|gi|split|text|parseInt|type|inner|imagethubnailwithtagin|replies|info|alternate|undefined|entry|feed|dayclass|comclass|comment|form|Comment|json|style|display|block|alt|parents|widget|orderby|children|h2|wrapInner|results|max|posts|feeds|host|protocol|479|979|1025|flexslider|animation|slide|animationLoop|itemWidth|minItems|move|mousewheel|maxItems|get|morepostag|addClass|extend|About|No|result|Or|Error|Loading|Feed|jsonp|s360|s100|170|loadingxxnewcontent|http|bp|blogspot|htG7vy9vIAA|Tp0KrMUdoWI|AAAAAAAABAU|e7XkFtErqsU|s72|grey|gif|Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec|fn|return|each|new|jQuery'.split('|'),0,{}))
//]]>
</script>

salve o seu modelo então vamos ao próximo passo.

Então agora vá no menu layout procure por adicionar novo gadget HTML/JavaScript então copie e cole o seguinte código.

<div id="modblofpostset"></div>
<script type='text/javascript'>
$('#modblofpostset').cbrnewpost({
postType:"h",
MaxPost:3,
FirstImageSize: "s660-p",
Summarylength: 150,
ImageSize: "s500-p",
tagName:"Label"
});
</script>

Nota onde esta destacado em amarelo substitua pelo label que deseja

Certifique se também que o código Jquery ja esta em seu Blog

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Se não estiver cole isso antes de de </head>

Créditos: contoh