17 de out de 2016

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 : 

<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: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>
<script>
//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 : 'http://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/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:

<center><style type="text/css">
.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>
<script>
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 : 'http://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/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>



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!



12 comentários:

  1. Que maravilhoso, é sempre bom dar uma renovada no blog para facilitar nós mesmos.
    Beijos, Jardim de primavera

    ResponderExcluir
  2. Que tudo!!!
    Simplesmente amo esses tutorias de HTML, quebram um galhão rs
    Bjus
    Taty
    Na Casa dos Abrantes
    Canal

    ResponderExcluir
  3. Adorei!
    Esse slide é muito bonito e delicado <3

    Garota do 330

    ResponderExcluir
  4. Caramba, que demais! Uma pena que seja para blogger :(

    Beijão, mariasabetudo

    ResponderExcluir

Eu fiz esta postagem com muito amor e carinho, e gostaria muito que dividisse sua opinião, mas tenha bom senso! pelo menos leia o post. Clique na opção "Notifique-me" para saber quanto te responder! ♥