Oie meus amores, sabe aqueles slides bonitinhos que as blogueiras costuma ter em cima das postagem, haha, hoje eu irei ensinar como colocar.
Eu vivia procurando um que pegasse no meu blog, porém não achava códigos que se encaixassem, até que acabei achando
LÁ VAI O CÓDIGO.
<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin-top:70px;
width:1300px; ==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 10px 15px 0;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background:#000; /*==COR AREA DE TITULO==*/
display: block;
clear: left;
font-family: 'georgia', cursive; ==FONTE DO SLIDE==
font-weight:200;
text-transform:uppercase; /*==TDS LETRAS MAIÚSCULAS==*/
font-size:13px; /*==TAMANHO DO TITULO==*/
line-height:1.3em;
height:50px;
position: absolute;
bottom:0%;
text-align: center; /*==POSIÇÃO DO TITULO==*/
color:#fff; /*== COR DO TITULO==*/
width:95%;
padding:6px;
word-wrap: break-word;
overflow:hidden;
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img {
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8;
}
/*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/AVvXsEge6auRN5AhOP0hdilVmsFx8f3rbEQ-r4l_nfc8SV_ZzzSXTlGxZl1uztjb22CGfRZNjnSPKXhw8NDiuqhRT24OZaedM0NI5gx6C9NLxpZsFo16ustuq84-FgqzUygKfqhI2SdmJtkUFad-/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="' + postTitle + '">' + imgTag + pTitle + '</a>';
html.push('<div class="bs-item">', item, '</div>');
}
html.push('</div>');
document.write(html.join(""));
}
hoje = new Date()
numposts =
3
var bsrpg_thumbSize =
220;
var bsrpg_showTitle = true;
document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=
3&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>
como instalar:
Vai ser super vai voce ira adicionar um Gadgets/Widget, html/javascript e copia o código acima e coloca.
Onde eu destaquei o número de
rosa, é um tanto de slides que vai ter n seu blog.
Onde eu destaquei o número de
azul, é o tamanho dos slides.
Aviso: Esse código não sei quem é o autor dele.
Então meus amores espero ter ajudado, se caso tiverem alguma duvida ou quiserem outro tutorial, só é deixa aqui nos comentários.