Oi oi galeraa!!
Hoje eu trago um tutorial para colocar um lindo slide com três posts em seu blog!!
Hoje eu trago um tutorial para colocar um lindo slide com três posts em seu blog!!
Para
iniciar vá ao painel do blogger > Layout
Em
Layout você vai clicar em "adicionar
gadget"
Vai
abrir um pop-up, nele você vai procurar pela opção "HTML/Java Script", clique!
Agora
faça suas modificações depois de concluído, aperte em salvar.
Depois
de salvo, arraste seu slide para área que você quer deixar seu slide.
No
nosso blog teste eu vou deixá-lo na Crosscol mesmo.
Veja
como ficou:
Este
é o código:
<style type="text/css">
.gallery-es {
margin-top:50px;
width:900px;
float:absolute;
clear:both;
}
.gallery-es:after
{
display:table;
clear:both;
}
.gallery-es
.item-es a {
position:
relative;
float:left;
margin: 0 5px
10px 0;
text-decoration:none;
}
.gallery-es
.item-es .ptitle {
background:#E06666;
/* Cor do Background */
display: block; /* Está especificado que mesmo sem
conteúdo o nosso quadradinho aparecerá */
clear: left; /* Direção dos quadradinhos, aqui está
direcionado para a esquerda */
font-family: Sacramento; /* Fonte que eu quero */
font-weight:200;
text-transform: capitalize; /* Texto transformado =
primeira letra maiúscula e o resto minúscula */
font-size:14px; /* Tamanho da fonte */
line-height:1.3em; /* Espaçamento entre linhas */
height:30px; /* Altura da legenda da postagem */
position: center;
bottom:5%;
text-align: center; /* Alinhamento do texto, esse
está centralizado */
color:#F6CECE; /* Cor da letra que usaremos no
título do quadrinho */
width:95%;
padding:6px;
word-wrap:
break-word;
overflow:
hidden;
}
.gallery-es a
img {
background: #FFFFFF; /*Cor do plano de fundo da
nossa imagem, caso você use alguma imagem em .png o fundo dela será Branco
*/
float: left; /* Direção da imagen, aqui está
especificado que ela irá para a esquerda */
}
.gallery-es
a:hover img {
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7; /* Aqui diz que quando passarmos o
mouse em cima do slide, ele diminuirá a opacidade para a especificada */
}
</style>
<script>
function
GalleryEs(root) {
var entries =
root.feed.entry || [];
var html =
['<div class="gallery-es nopin" title="Feito por Elen
Silva">'];
for (var i =
0; i < entries.length; ++i) {
var post =
entries[i];
var TitlePost
= post.title.$t;
var OrgImgUrl
= post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVRSUB2n8rUREG__fNmJzvpL-g2-s4TDa4HBUyssxHCSfA58IarDrbzxWD9jU6A0_gDtKqRi_fQTU0-t3dkie9YLKbOBwcgZph33e-dblYUn8LLVpLo0xPkiaeMXv-d0BlLR0k0NQkpOk/s1600-r/sem_foto.jpg';
var NewImgUrl
= OrgImgUrl.replace('s72-c', 's' + thumbSize_es + '-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="' + thumbSize_es +
'" height="' + thumbSize_es + '"/>';
var pTitle =
showTitle_es ? '<span class="ptitle">' + TitlePost +
'</span>' : '';
var item =
'<a href="' + postUrl + '" title="' + TitlePost +
'">' + imgTag + pTitle + '</a>';
}
html.push('</div>');
document.write(html.join(""));
}
hoje = new
Date()
numposts =1
var
thumbSize_es = 255;
var
showTitle_es = true;
document.write("<script
src=\"/feeds/posts/default?start-index="+numposts+"&max-results=3&orderby=published&alt=json-in-script&callback=GalleryEs\"><\/script>");</script>
E esse foi o tuto de hoje!! Espero que
tenham gostado!!
XoXo
0 comentários:
Postar um comentário