18/07/2017

Galeria/Slide de postagens recentes no topo do blog (Automático) [006]


Uma das coisas que sempre apreciei em layouts, são os designs limpos e ao mesmo tempo profissionais. Porém o blogger sempre foi muito limitado, muitas vezes dificultando termos um blog nesse nível profissional, claro a não ser procurar algum web desing profissional. Após a chegada do Tumblr, a interface do blogger deu uma grande melhora, e atualmente vem se mostrando mais maleável para nós que gostamos de brincar com códigos. 

E hoje venho trazer uma das coisas que acho lindo e muito profissional a um blog, slide de postagens recentes no topo do blog (automático). Esse slide é praticamente indispensável para um blog de texto, como resenha ou moda. E sua aplicação é bastante rápida e pratica para quem ainda não entende muito do assunto. Hoje venho trazer dois modelos de slide, vocês podem arrumar como desejarem. 

1. Vá em Layout em algum blog, qual queira aplicar o slide. Abra um novo gadget Java/Script e dentro o código de um dos modelos abaixo:

Códigos
<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin-top:20px;
margin-left:-30px;
width:1100px; ==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:rgba(0, 0, 0, 0.21);/*==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.4em;
height:20px;
position: absolute;
bottom:0%;
text-align: center;  /*==POSIÇÃO DO TITULO==*/
color:#f7f7f7; /*== COR DO TITULO==*/
width:93%;
padding:6px;
word-wrap: break-word;
overflow:hidden;
margin-bottom:30px;
margin-left:3px;
outline: 1px solid #8B8989;
outline-offset: 3px;
}
.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 : '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>

Códigos
<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 : '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>

Enfim é isso! Agora é só salvar personalizar. =)

6 comentários:

  1. Lindo e fácil de instalar o que o melhor de tudo pq slide e as vezes e bem chato! Eu quero um quase igual a esse só que quero efeito carrossel! Adorei!

    ResponderExcluir
    Respostas
    1. Venho a concordar, aplicar slide é sempre um pouco mais trabalhoso, porém os efeitos são divinos. Oh! Modelo carrossel em destaque de postagens ou slide? Acho lindo o estilo carrossel.

      Excluir
    2. No formato de slide! Acho que deixa tudo com uma cara profissional!
      Amei slide pela facilidade de instalar! Estou usando ele no meu blog de the sims que pretendo voltar a postar!Agora que tenho meu pc de volta! Ficou perfeito super combinou! Obrigada!
      https://blogminhavidasims4.blogspot.com.br/

      Excluir
    3. Hi! Obrigada por voltar Mari. Fico muito feliz lhe ver de novo aqui. Que bom que gostou e usou irei fazer uma visita. Lhe desejo um bom retorno! Amo jogar Sims

      Excluir
  2. Adoreei demais! Será que você teria como fazer um desse, porém com as postagens mais visitadas?

    ResponderExcluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345