HTML: 2 Slides de Postagens Automáticas.

Oii gente! Saudades dos meus tutoriais de HTML aqui para o blog? finalmente eu voltei!

Hoje eu vou ensinar você a criar slides que se atualizam sozinhos! isto mesmo: só inserir e eles vão colocar a foto da sua postagem acima e ao clicarem irão para o post.

Chega de enrolar, bora lá aprender?

O primeiro modelo ficará assim :

Quando passamos o mouse fica assim :

Modelo 1 :

/*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:transparent; /*==COR AREA DE TITULO==*/

display: block;

clear: left;

font-family: 'Pacifico'; ==FONTE DO SLIDE==

font-weight:200;

text-transform:lowercase; /*==TDS LETRAS MAIÚSCULAS==*/

font-size:18px; /*==TAMANHO DO TITULO==*/

line-height:1.3em;

height:50px;

position: absolute;

bottom:5%;

text-align: center; /*==POSIÇÃO DO TITULO==*/

color:transparent; /*== 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=60);

-moz-opacity:0.6;

-khtml-opacity:0.3;

opacity: 0.6;

}

/*FIM CSS FOTOS*/

</style>

//thayline

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/AVvXsEimPe8sqhLSySHu69B88uNgQ-ysRpo7kFWe5YPlFcp7IvJQH_DlqGfEmuIfJ-apqwAybEfDqzQzFoG70LdW-NJbwgsGTQDeejMeJW63RR0v-4jYP0zGrbzzAn_cDyuQytDVOIztYF7uQ2C3/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 =1

var bsrpg_thumbSize = 255;

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>

Modelo 2:

Quando clicamos:

.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: 25px;

font-family: 'Amatic SC', cursive;

text-transform: uppercase; /*--coloca o texto em capslock --*/

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:#000; /*== COR DA FONTE DO TEXTO==*/

-moz-opacity:0;

-khtml-opacity:0;

opacity:0;

}

.bsrp-gallery .bs-item .ptitle:hover {

-webkit-transition:All 0.9s ease-in-out; -moz-transition:All 0.7s ease-in-out; -o-transition:All 0.8s ease-in-out;

filter:alpha(opacity=90);

-moz-opacity:0.9;

-khtml-opacity:0.9;

opacity:0.9;

}

.bsrp-gallery a img {

background: #fff;

float: left;

}

.bsrp-gallery a:hover img {

}

/*FIM CSS FOTOS*/

</style>

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 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>

Aviso:

No 4 determina quantos slides irão aparecer, altere caso quiser;

No segundo menu a fonte utilizada foi a minha, se caso não tiver, aplique a instalação (a fonte é do google fonts) ou substitua pelo nome de fonte que você utiliza;

Como eu instalo?

*Entre no blogger e clique em Layout;

*Clique em criar um gadget, depois em html e preencha com o texto do modelo desejado;

*Salvar;

*Mova o gadget para a coluna escrito Cross-Column 2;

E terminamos! gostaram? espero que sim :)

Enfim, Beijãoo gente linda!