 |
| Slide ao passar mouse por cima do título (aparece a data e o nome do autor) |
 |
| Slide normal |
Bom este slide aplicava-se em 2 processos, no caso em HTML e CSS (separados) então eu juntei os 2 códigos e agora ele pode ser instalado somente em HTML/Javascript veja o como:
Caso você não saiba como adicionar um gadget/widget no blogger click aqui
<style type="text/css">
ul.featured-widget-list,ul.featured-widget-list li{ margin:0; padding:0;
list-style:none; position:relative } ul.featured-widget-list li{display:none}
ul.featured-widget-list li:nth-child(1){ display:block; line-height:0}
ul.featured-widget-list img{ border:0; width:100%; height:auto}
ul.featured-widget-list .featuredbg{ width:100%;
height:100%; position:absolute; z-index:2; left:0; top:0; opacity:.6; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitzy109v1uOz3S_W8mhJLUgJrVs_WPGgL3B9Zps7_1EtlY_NjtlK5xXmLtwJpU7uUtrhX8uTV7B51heXDEQ93DhwGNNFTwFl9z35xL5O1TNg76IkqjshIqkRh-cCXjD6k-0KG0Ivps4jw/s400/overlay-bg.png); background-position:0% 100%; background-repeat:repeat-x}
ul.featured-widget-list .featuredbg:hover{opacity:.1}
ul.featured-widget-list h5{
position:absolute;
left:0;right:0;
text-align:center;
bottom:10px;
z-index:2;
color:#fff; /* COR DA FONTE */
margin:0;
text-transform: none;
padding:10px 20px;
line-height:1.9em;
letter-spacing:0.3px;
font: 16px 'Roboto', sans-serif; /* TIPO E TAMANHO DA FONTE DO TÍTULO */
overflow:hidden}
ul.featured-widget-list li:hover h5{bottom:30px}
ul.featured-widget-list .featured-meta{
font: 13px 'Roboto', sans-serif; /* TIPO E TAMANHO DA FONTE DA DATA E AUTOR */
letter-spacing:0.3px;
position:absolute;
bottom:0;left:0;
right:0;
text-align:center;
z-index:2;
color:#fff; /* COR DO TEXTO */
opacity:0}
ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;transition: all 0.3s;}
ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}
.feat-buttons{position:absolute;top:50%;z-index:5;width:100%}
.feat-buttons a{
text-indent:-9999px;
margin:0 7px;
margin-right: 30px;
width:15px;
height:15px;
padding:5px;
background:#transparent; /* COR DE FUNDO DOS BOTÕES */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter:
alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity:0.6;
opacity:0.6;
position:relative;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;}
.feat-prev{float:left;}
.feat-next{float:right;}
.feat-buttons a.feat-prev::before, .feat-buttons
a.feat-next::before{content:"";
width:0;
height:0;
border-width:6px 7px;
border-style:solid;
border-color:transparent transparent transparent transparent;
position:absolute;
top:50%;
margin-top:-6px;
margin-left:-11px;
left:50%}
.feat-buttons a.feat-next::before{
border-color:transparent transparent transparent transparent; /* COR DA FONTE
DOS BOTÕES */
margin-left:-3px}
</style>
<div id="featuredbwidget"></div>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'
type='text/css'/>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"
type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
featuredbwidget({
listURL:"URL DO BLOG/SITE",
featuredNum:20,
listbyLabel:false,
feathumbSize:350,
interval:3000,
autoplay:true,
featuredID:"#featuredbwidget"
});
function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixsl3w06j4odsC2Ck4702kvJKGP941le-RIZmVJ3V8SykN60ugQEKHLHzXhAvxytzDaAEdId2iTM7V-cMv1qsVERWkn1FNB1q2PWxSlapoPjEgbBWeEIyNi3sIip3QazOJ-aU9d5xEm0o/s500/no-image.png",byMonth:["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"],listbyLabel:false};h=e.extend({},h,a);var
g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div
class="featslider"><ul class="featured-widget-list"></ul><div
class="feat-buttons"><a href="#"
class="feat-prev">Prev</a><a href="#"
class="feat-next">Next</a></div></div>');var
f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var
o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"
in
s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='<li><a
href="'+q+'"><div
class="featuredbg"></div><img class="featuredthumb"
src="'+u+'"/><h5>'+k+'</h5></a><div
class="featured-meta"><span class="fdate"><span
class="fday">'+t+'</span> <span
class="fmonth">'+v+'</span> <span
class="fyear">'+x+'</span></span> - <span
class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var
c=function(){e(h.featuredID+" .feat-next").click()};var
b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+"
.feat-prev").click(function(){e(h.featuredID+" .featslider
li:first").before(e(h.featuredID+" .featslider li:last"));return
false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+"
.featslider li:last").after(e(h.featuredID+" .featslider
li:first"));return false});if(h.autoplay){var i=h.interval;var
j=setInterval(c,i);e(h.featuredID+" .featslider
li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+"
.featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script>
O próximo passo é colocar a url do blog no espaço (URL DO BLOG/SITE)Salve, visualize e veja se deu tudo certo.
Boa sorte e espero que funcione. Até a próxima se Deus permitir.
0 Comments:
Postar um comentário