Olá queridos(as)! Tudo bem?
Viram essa lindeza que apareceu aí no topo do blog? Essas miniaturas recentes com efeito fade na imagem toda?
Para quem não sabe, o efeito fade é aquela transparência da foto quando passamos o mouse. Junto com essa transparência vem o nome do post.
Estava vendo muitas blogueiras com esse modelo e estava torcendo para alguém fazer um tutorial com ele õ/ hahah
Aí a Elaine Gaspareto veio e trouxe ele bonitinho assim pra gente. Portanto, o crédito do tuto de hoje vai pra ela! ♥
Então, estão a fim de aprender?
Tudo o que você tem que fazer é abrir o seu layout, adicionar um gadget e escolher a opção html / java script. Então você copia o código abaixo:
<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin-top:70px;
margin-left: -30px;
width:1120px; ==LARGURA DO SLIDE==
float:center; ==POSIÇÃO DO SLIDE==
clear:both;
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 0px 0px 0;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background:#fff; /*--cor de fundo das miniaturas ao passar o mouse --*/
display: block;
clear: left;
font-size: 16px;
font-family: arial;
text-transform: uppercase; /*--coloca o texto em capslock, apague se desejar --*/
line-height:1.3em;
height:320px;
height: 57.4%; /*--define a altura da legenda --*/
width:100%; /*--define a largura da legenda --*/
position: absolute;
bottom:0%;
text-align: center;
margin:0 0 0px 0px;
padding: 119px 0px 0px 0px;
color:#666; /*== COR DA FONTE DO TEXTO==*/
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}
.bsrp-gallery .bs-item .ptitle:hover {
-webkit-transition:All 0.7s ease-in-out; -moz-transition:All 0.7s ease-in-out; -o-transition:All 0.7s ease-in-out;
filter:alpha(opacity=90);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img {
}
/*FIM CSS FOTOS*/
</style>
<script>
//byjana
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Get this from poderondesign">'];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2bpTsGDI7ZCpXsSmjZwbUvBcSN3F-Td7i_iSfxJWSJp_44BNvF2jlgHI1Bqy5bnFQ3nvCYchKzY57KmTBD15GCUNlgh8lSlbF1xJ9BNNzd-QD4GPYX80adXozdCIXT2ayaIDNnchv-Jec/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
var links = post.link || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" title="' + '">' + imgTag + pTitle + '</a>';
html.push('<div class="bs-item">', item, '</div>');
}
html.push('</div>');
document.write(html.join(""));
}
hoje = new Date()
numposts = 1
var bsrpg_thumbSize = 280;
var bsrpg_showTitle = true;
document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>
Viram essa lindeza que apareceu aí no topo do blog? Essas miniaturas recentes com efeito fade na imagem toda?
Para quem não sabe, o efeito fade é aquela transparência da foto quando passamos o mouse. Junto com essa transparência vem o nome do post.
Estava vendo muitas blogueiras com esse modelo e estava torcendo para alguém fazer um tutorial com ele õ/ hahah
Aí a Elaine Gaspareto veio e trouxe ele bonitinho assim pra gente. Portanto, o crédito do tuto de hoje vai pra ela! ♥
 |
| O efeito que teremos será esse da segunda imagem. |
Tudo o que você tem que fazer é abrir o seu layout, adicionar um gadget e escolher a opção html / java script. Então você copia o código abaixo:
<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin-top:70px;
margin-left: -30px;
width:1120px; ==LARGURA DO SLIDE==
float:center; ==POSIÇÃO DO SLIDE==
clear:both;
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 0px 0px 0;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background:#fff; /*--cor de fundo das miniaturas ao passar o mouse --*/
display: block;
clear: left;
font-size: 16px;
font-family: arial;
text-transform: uppercase; /*--coloca o texto em capslock, apague se desejar --*/
line-height:1.3em;
height:320px;
height: 57.4%; /*--define a altura da legenda --*/
width:100%; /*--define a largura da legenda --*/
position: absolute;
bottom:0%;
text-align: center;
margin:0 0 0px 0px;
padding: 119px 0px 0px 0px;
color:#666; /*== COR DA FONTE DO TEXTO==*/
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}
.bsrp-gallery .bs-item .ptitle:hover {
-webkit-transition:All 0.7s ease-in-out; -moz-transition:All 0.7s ease-in-out; -o-transition:All 0.7s ease-in-out;
filter:alpha(opacity=90);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img {
}
/*FIM CSS FOTOS*/
</style>
<script>
//byjana
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Get this from poderondesign">'];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2bpTsGDI7ZCpXsSmjZwbUvBcSN3F-Td7i_iSfxJWSJp_44BNvF2jlgHI1Bqy5bnFQ3nvCYchKzY57KmTBD15GCUNlgh8lSlbF1xJ9BNNzd-QD4GPYX80adXozdCIXT2ayaIDNnchv-Jec/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
var links = post.link || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" title="' + '">' + imgTag + pTitle + '</a>';
html.push('<div class="bs-item">', item, '</div>');
}
html.push('</div>');
document.write(html.join(""));
}
hoje = new Date()
numposts = 1
var bsrpg_thumbSize = 280;
var bsrpg_showTitle = true;
document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>
Os lugares alteráveis já estão escritos no próprio código, e eu consegui alterar tranquilamente.
Das primeiras vezes que tentei usar esse código, por algum motivo não funcionou. Tirei, coloquei, e simplesmente não aparecia nada no blog, como se não tivesse gadget nenhum.
Pra mim, só funcionou quando eu posicionei o gadget no crosscol-overflow, ao invés do crosscol.
 |
| Bem aqui. |
Então, se tiverem o mesmo problema, tentem isso que deve dar certo. Comigo deu.
E aí, conseguiram? Gostaram? ♥
Beijocas da Thais
