New Featured post widget pagina inicial blogger 2017

new format widget featured first page blogger 2017

Hoje vamos apresentar esse lindo widget sobre como instalar isso na primeira página do template do blogger é um widget diferenciado que busca mostrar as postagens em destaque ja na página inicial do blogger isso foi criado por cb siga os passos abaixo

Instalando o widget no template:

Faça login no blogger então va no menu layout procure por gadget acima da area da postagem clique em add new gadget  procure por JavaScript então selecione o seguinte código e cole na caixa


<div class="slider">
 <input type="radio" name="slide_switch" id="id1"/>
 <label for="id1">
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
 </label>
 <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
 <input type="radio" name="slide_switch" id="id2" checked="checked"/>
 <label for="id2">
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
 </label>
 <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
 <input type="radio" name="slide_switch" id="id3"/>
 <label for="id3">
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
 </label>
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
 <input type="radio" name="slide_switch" id="id4"/>
 <label for="id4">
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
 </label>
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
  <input type="radio" name="slide_switch" id="id5"/>
 <label for="id5">
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
 </label>
 <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
</div>
<script type="text/javascript">
// StyleFix 1.0.2 + PrefixFree 1.0.6 / Lea Verou / MIT license
(function(){function h(a,b){return[].slice.call((b||document).querySelectorAll(a))}if(window.addEventListener){var e=window.StyleFix={link:function(a){try{if("stylesheet"!==a.rel||a.hasAttribute("data-noprefix"))return}catch(b){return}var c=a.href||a.getAttribute("data-href"),f=c.replace(/[^/]+$/,""),i=a.parentNode,d=new XMLHttpRequest,g;d.onreadystatechange=function(){4===d.readyState&&g()};g=function(){var b=d.responseText;if(b&&a.parentNode&&(!d.status||400>d.status||600<d.status)){b=e.fix(b,
!0,a);f&&(b=b.replace(/url(s*?((?:"|')?)(.+?)1s*?)/gi,function(b,a,c){return!/^([a-z]{3,10}:|/|#)/i.test(c)?'url("'+f+c+'")':b}),b=b.replace(RegExp("\b(behavior:\s*?url\('?"?)"+f,"gi"),"$1"));var c=document.createElement("style");c.textContent=b;c.media=a.media;c.disabled=a.disabled;c.setAttribute("data-href",a.getAttribute("href"));i.insertBefore(c,a);i.removeChild(a)}};try{d.open("GET",c),d.send(null)}catch(k){"undefined"!=typeof XDomainRequest&&(d=new XDomainRequest,d.onerror=d.onprogress=
function(){},d.onload=g,d.open("GET",c),d.send(null))}a.setAttribute("data-inprogress","")},styleElement:function(a){var b=a.disabled;a.textContent=e.fix(a.textContent,!0,a);a.disabled=b},styleAttribute:function(a){var b=a.getAttribute("style"),b=e.fix(b,!1,a);a.setAttribute("style",b)},process:function(){h('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);h("style").forEach(StyleFix.styleElement);h("[style]").forEach(StyleFix.styleAttribute)},register:function(a,b){(e.fixers=
e.fixers||[]).splice(void 0===b?e.fixers.length:b,0,a)},fix:function(a,b){for(var c=0;c<e.fixers.length;c++)a=e.fixers[c](a,b)||a;return a},camelCase:function(a){return a.replace(/-([a-z])/g,function(b,a){return a.toUpperCase()}).replace("-","")},deCamelCase:function(a){return a.replace(/[A-Z]/g,function(a){return"-"+a.toLowerCase()})}};(function(){setTimeout(function(){h('link[rel="stylesheet"]').forEach(StyleFix.link)},10);document.addEventListener("DOMContentLoaded",StyleFix.process,!1)})()}})();
(function(h){function e(b,c,f,i,d){b=a[b];b.length&&(b=RegExp(c+"("+b.join("|")+")"+f,"gi"),d=d.replace(b,i));return d}if(window.StyleFix&&window.getComputedStyle){var a=window.PrefixFree={prefixCSS:function(b,c){var f=a.prefix,b=e("functions","(\s|:|,)","\s*\(","$1"+f+"$2(",b),b=e("keywords","(\s|:)","(\s|;|\}|$)","$1"+f+"$2$3",b),b=e("properties","(^|\{|\s|;)","\s*:","$1"+f+"$2:",b);if(a.properties.length)var i=RegExp("\b("+a.properties.join("|")+")(?!:)","gi"),b=e("valueProperties","\b",
":(.+?);",function(a){return a.replace(i,f+"$1")},b);c&&(b=e("selectors","","\b",a.prefixSelector,b),b=e("atrules","@","\b","@"+f+"$1",b));return b=b.replace(RegExp("-"+f,"g"),"-")},property:function(b){return(a.properties.indexOf(b)?a.prefix:"")+b},value:function(b){b=e("functions","(^|\s|,)","\s*\(","$1"+a.prefix+"$2(",b);return b=e("keywords","(^|\s)","(\s|$)","$1"+a.prefix+"$2$3",b)},prefixSelector:function(b){return b.replace(/^:{1,2}/,function(b){return b+a.prefix})},prefixProperty:function(b,
c){var f=a.prefix+b;return c?StyleFix.camelCase(f):f}};(function(){var b={},c=[],f=getComputedStyle(document.documentElement,null),i=document.createElement("div").style,d=function(a){if("-"===a.charAt(0)){c.push(a);var a=a.split("-"),d=a[1];for(b[d]=++b[d]||1;3<a.length;)a.pop(),d=a.join("-"),StyleFix.camelCase(d)in i&&-1===c.indexOf(d)&&c.push(d)}};if(0<f.length)for(var g=0;g<f.length;g++)d(f[g]);else for(var e in f)d(StyleFix.deCamelCase(e));var g=0,j,h;for(h in b)f=b[h],g<f&&(j=h,g=f);a.prefix=
"-"+j+"-";a.Prefix=StyleFix.camelCase(a.prefix);a.properties=[];for(g=0;g<c.length;g++)e=c[g],0===e.indexOf(a.prefix)&&(j=e.slice(a.prefix.length),StyleFix.camelCase(j)in i||a.properties.push(j));"Ms"==a.Prefix&&!("transform"in i)&&!("MsTransform"in i)&&"msTransform"in i&&a.properties.push("transform","transform-origin");a.properties.sort()})();(function(){function b(a,b){e[b]="";e[b]=a;return!!e[b]}var c={"linear-gradient":{property:"backgroundImage",params:"red, teal"},calc:{property:"width",params:"1px + 5%"},
element:{property:"backgroundImage",params:"#foo"},"cross-fade":{property:"backgroundImage",params:"url(a.png), url(b.png), 50%"}};c["repeating-linear-gradient"]=c["repeating-radial-gradient"]=c["radial-gradient"]=c["linear-gradient"];var f={initial:"color","zoom-in":"cursor","zoom-out":"cursor",box:"display",flexbox:"display","inline-flexbox":"display"};a.functions=[];a.keywords=[];var e=document.createElement("div").style,d;for(d in c){var g=c[d],h=g.property,g=d+"("+g.params+")";!b(g,h)&&b(a.prefix+
g,h)&&a.functions.push(d)}for(var j in f)h=f[j],!b(j,h)&&b(a.prefix+j,h)&&a.keywords.push(j)})();(function(){function b(a){e.textContent=a+"{}";return!!e.sheet.cssRules.length}var c={":read-only":null,":read-write":null,":any-link":null,"::selection":null},f={keyframes:"name",viewport:null,document:'regexp(".")'};a.selectors=[];a.atrules=[];var e=h.appendChild(document.createElement("style")),d;for(d in c){var g=d+(c[d]?"("+c[d]+")":"");!b(g)&&b(a.prefixSelector(g))&&a.selectors.push(d)}for(var k in f)g=
k+" "+(f[k]||""),!b("@"+g)&&b("@"+a.prefix+g)&&a.atrules.push(k);h.removeChild(e)})();a.valueProperties=["transition","transition-property"];h.className+=" "+a.prefix;StyleFix.register(a.prefixCSS)}})(document.documentElement);
</script>
<style>
.slider {
    width: 560px;
    position: relative;
    padding-top: 300px;
    margin: 10px 0;}
.slider>img{
 position: absolute;
 left: 0; top: 0;
 transition: all 0.5s;
}
.slider input[name='slide_switch'] {
 display: none;
}
.slider label {
    margin: 5px 10px 15px 0;
    border: 1px solid #999;
    float: left;
    cursor: pointer;
    transition: all 0.5s;
    opacity: 0.6;
}
.slider label img{
 display: block;
}
.slider input[name='slide_switch']:checked+label {
 border-color: #666;
 opacity: 1;
}
.slider input[name='slide_switch'] ~ img {
    opacity: 0;
    transform: scale(1.1);
    width: 100%;
    height: 300px;
}
.slider input[name='slide_switch']:checked+label+img {
 opacity: 1;
 transform: scale(1);
}
</style>


Obs voce pode trocar as fotos no atributo src modificando como desejar salve  e pronto


Click to comment