20 de jan de 2016

Como colocar slide de novas postagens

Ola galera, hoje venho mostrar pra vocês como coloquei o meu slide de postagens recentes no blog.


Aqui temos o código usado:

..............................................................................................................................................................

<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:none; /*==TDS LETRAS MAIÚSCULAS - altere se quiser==*/
font-size:10px; /*==TAMANHO DO TITULO==*/
line-height:1.3em;
height:50px;
position: absolute;
bottom:5%;
text-align: center;  /*==POSIÇÃO DO TITULO==*/
color:#fff; /*== COR DO TITULO==*/
width:90%;
padding:6px;
word-wrap: break-word;
overflow:hidden;
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img { 
filter:alpha(opacity=90);
-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=\"AQUI O ENDEREÇO DO SEU BLOG/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>

.................................................................................................................................................................

❥ Vá em Layout > adicionar um Gadget > HTML/ Java Script e cole o código acima dentro dele ( lembre-se de deixar o gadget sem título ). Só altere partes com as especificações em letras maiúsculas ao lado ok ? Depois disso salve as alterações e visualize o blog para ver como ficou. Os slides ficaram como os daqui do blog.Tudo que estiver em azul pode ser alterado. Não mexa no restante do código.

Este código foi encontrado em pesquisas pela net.

Para mostrar direitinho como eu fiz, assista o vídeo! Ah se gostar se inscreva no canal ok?


Se não souber fazer ou não tiver paciência para isso me chama certo? Beijos! S2

9 comentários:

  1. Não percebo muito do assunto!
    Mas vou experimentar... Bj

    ResponderExcluir
  2. Não percebo muito do assunto!
    Mas vou experimentar... Bj

    ResponderExcluir
  3. Que 10, Sol! Adorei.
    Abraço.
    http://artedaelda.blogspot.com.br/

    ResponderExcluir
  4. Olá!
    Sol, me dá um help...o meu deu certo em partes, kkkk, ficou muito gde e passa....então fica meio esquisito...
    Um super bjo!
    Top Comentarista de Janeiro/16
    Alê - Bordados e Crochê
    Facebook
    Twitter
    Instagram

    ResponderExcluir
  5. Acho muito Bonito esses slides!
    Bjúús

    ResponderExcluir
  6. Oi Sol, vi seu vídeo e adorei, deu certo porém as imagens ficam paradas não passando como slides. como faço isso? Outra dúvida é como altero a cor preta que ficou de fundo na descrição? Desde já agradeço sua ajuda!!! Bjosss
    http://www.sahtanci.com.br/

    ResponderExcluir
    Respostas
    1. Oi Sah! Ele fica parado mesmo, só atualiza quando você posta. Altere o fundo no código html em background e deve estar com um código assim: #000000. Beleza!!! Beijos e obrigada!

      Excluir
  7. Oiee... Td bem? Super ADOREI sua dica, achei somente vc que fala sobre. Mas infelizmente não estou conseguindo, no meu caso não está aparecendo nada, verifiquei o q vc comentou quanto ao modelo e colocar o gadget no campo certo mas nada aparece. :( Eu preciso editar o código, ou colocar os links dos posts? Espero MUITO q vc possa me ajudar. Obg bjus...

    ResponderExcluir
  8. Oi Querida! Você só precisa escrever o endereço do seu blog, certinho na área do feeds do blog. Observe no código onde diz:

    document.write... Já no final do código. { coloque o endereço do seu blog depois das aspas e não apague mais nada}

    Faz aí e se funcionar, eu quero ver ok?

    ResponderExcluir

♥♥♥♥♥Tenha uma vida abençoada !!!♥♥♥♥♥
-----------/♥♥♥♥♥♥♥\-----Amizade--(-♥-(-\♥/-)-♥-)
---------/♥♥♥♥♥♥♥♥♥ \----------------------(--♥-\/-♥-)
-------/♥♥♥♥♥♥♥♥♥♥♥♥\-----Saúde------||-----
----@--l---D----------D---l---@----- ---------||
--\\l//l_____l__l_____l-\\l//-\\l//- ╠╬╬╬╬╬╬╬╬╬╣
================================
Obrigada por sua visita!
Para que eu retribua seu comentário, favor deixar o link do seu Blog. Para troca de seguidores, deixe seu nome de seguidor do Blog e o link. Para troca de comentários, deixe o link do post que quer que eu comente. Sua presença enriquece meu Blog. Sua companhia alegra minha alma. Sinta-se Abraçado(a)! Volte sempre!
================================