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



NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner