Este é um novo slide que eu encontrei , muito bonito e prático para post em destaque ....este é para a (sidebar) barra lateral do Blog.
É o mesmo que estou usando em meu Blog.
                                                              DEMONSTRAÇÃO
Faça login em seu Blog , vá em HTML Javascripit . Copie e cole o código que esta abaixo fazendo as mudanças onde esta marcado em rosa..URL de seu Blog...e a cor da borda se você assim desejar.


Os passos são Layout e adicionar um gadget ...


Na janela que abrir click na opção adicionar HTML/javascripit


E cole o código abaixo fazendo as devidas alterações onde esta destacado em rosa...Repito se quiser mudar a cor da borda também esta em destaque. E também pode alterar largura e comprimento logo no inicio onde esta 100% você pode diminuir para 90% ou menos de acordo com o que combine com seu template.... e onde esta em 500px você altera a largura para 400px,300px e assim sucessivamente .Cuidado para não apagar "aspas" e virgulas.



<style scoped="" type="text/css">
/*
Made by AllBloggerTricks.com with lot of hardwork please keep the comment intact
*/
ul.abt-sidebar-slider *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.abt-sidebar-slider{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.abt-sidebar-slider,ul.abt-sidebar-slider li{margin:0;padding:0;list-style:none;position:relative}
ul.abt-sidebar-slider{width:100%;height:500px}
ul.abt-sidebar-slider li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){display:block}
ul.abt-sidebar-slider img{border:0;width:100%;height:100%}
ul.abt-sidebar-slider li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%}
ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%}
ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}
ul.abt-sidebar-slider  .overlayx,ul.abt-sidebar-slider li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.abt-sidebar-slider .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{border:4px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.abt-sidebar-slider li:nth-child(1) .overlayx{background-position:50% 25%}
ul.abt-sidebar-slider .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
ul.abt-sidebar-slider h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{font-size:150%}
ul.abt-sidebar-slider .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
</style>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script type='text/javascript'>
//<![CDATA[
function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,
autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="abt-sidebar-slider"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s
[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"URL DE SEU BLOG",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>



Não é criação minha,CRÉDITOS: All Blogger Tricks

Tabela de cores aqui


20 comentários:

  1. Muito legal o slide do blogger,só não coloco lá no blog porque está muito cheio o meu blog tenho medo de ficar lento demais, mais adorei a dica Sol passando pra dizer que lá no blog tem post novo se quiser dar uma conferida fique a vontade, te desejo uma ótima semana fique com Deus beijos.
    Blog:Lucimar Estrela da Manhã

    Grupo:Divulgue seu blog no Facebook

    Fan Page

    Me encontre no Pinterest

    ResponderExcluir
    Respostas
    1. Ola Lucimar é muito bom slide , fico feliz em ver vc beijos.. uma ótima semana a você também, passarei sim.

      Excluir
  2. .


    Delícia de blog.
    Cada vez que eu
    aqui venho, eu
    aprendo e me di-
    virto.

    Um beijo,

    silvioafonso





    .

    ResponderExcluir
    Respostas
    1. Ola Silvio...Palhaço Poeta, interessante o nome que não se liga muito com o conteúdo, que é muito rico em seu Blog.
      Que bom que se diverte kkk , também me divirto .
      Gostei do delícia ....beijokas

      Excluir
  3. Oi Sol,
    boa tarde,
    a tabela de cores ... excelente!
    é muito útil.

    mas o slide automatizado ...
    mmm eu tenho medo,
    sempre que eu tocar alguma coisa, faço um desastre! kkkkk

    um beijo gigante para ti e outro para Renatinha

    ResponderExcluir
    Respostas
    1. Ariel meu querido amigo, onde se esconde? que não vejo seus movimentos a dias? UMH?
      Tabela realmente muito útil eu uso sempre, ahh o slide é facil, más fico feliz em rever você .....beijinhos e Renata manda um abraço virtual lol.

      Excluir
  4. Oi Sol,
    um abraço virtual ...
    que é isso? kkkkkkk

    Beijokas para vcs!!!
    agora vou ler o seu post mais recente =D

    ResponderExcluir
    Respostas
    1. lol Ariel um amigo me falar que um abraço virtual é assim MMMMMMMMMMM um beijo.

      Excluir
  5. Minha amiga fico alegre por ter aceite o meu convite,pois aqui há um bom conteúdo e boas dicas,adicionei o gadjet, e ficou lindo.
    Abraços.
    António.

    ResponderExcluir
  6. すべて、Everkiデジタル一眼レフカメラバッグすでにに製造と話すですべてを含む彼らのデザイン発見と安全レイアウト。サドルバッグ本当に必要なにプログラムごとに2何ヶ月を通して、週間。トート バッグ

    ResponderExcluir
  7. Oi de novo Sol! kkkk desculpa tá te incomodando de novo!
    Mas olha como ficou no meu blog:
    É assim mesmo?
    http://umlindosentimentodeumagarota.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ola Gótica eu vi que seu slide esta esticado, eu fazer algumas alterações onde você pode mudar a largura e o comprimento logo no inicio do Código ok...beijos e sempre bem vinda

      Excluir
  8. Olá, como faço para mudar o tamanho da fonte dos quadrados menores? Abraços!

    ResponderExcluir
    Respostas
    1. Ola João , acredito que possa ser feito , más realmente agora eu não posso te ajudar , pois leva tempo...tem que abrir o HTML e observar muito bem para modificar ....se eu conseguir, eu te aviso ok... Ele um slide para a sidebar , você pode aumentar como um todo para colocar no corpo do Blog, más dependendo de seu template, ele irá ficar com a imagem esticada, e você teria que por imagem padronizada em todas suas postagem ...Mesmo assim vale a pena tentar .abraços.

      Excluir
  9. Obrigado pela atenção, experimentei trocar o template do blog e dependendo do modelo, as letras dos quadradinhos ficam bem maiores ou no tamanho que é visualizado no seu modelo e screenshot, abraços!

    ResponderExcluir
    Respostas
    1. Ola João de nada , gosto de comunicação =)
      É verdade o modelo manda muito na configuração de javascript .... abraços bom te-lo aqui.

      Excluir
  10. Oi lindona!
    Ain, amei aqui. Só não consegui colocar aquele outro slide no topo que você ensinou. Mas esse já tá no meu blog. Seguindo, Amei *--*
    Obrigada pela ajuda.
    Beijos

    http://thaylorrany.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Seja sempre bem vinda Thaynara=)
      Que bom que você gostar do Blog ..afinal é feito com carinho para vocês. E pessoas assim como você o torna surpreendente .
      seguindo beijinhos e ótima semana.

      Excluir
  11. SOL TENTEI FAZER COMO VOCÊ ENSINA , MAS NÃO DA CERTO.
    GOSTARIA MUITO DE TER EM MEUS BLOGS.
    Slide automatizado para Blogger, SOL AMIGA DESEJO A VOCÊ MUITO SUCESSO, PAZ, AMOR, SAÚDE E HARMONIA NO ANO DE 2014.
    DEUS TE ABENÇOE E TE GUARDE EM TODOS OS DIAS DO ANO VINDOURO. PAZ EM TEU CORAÇÃO.

    ResponderExcluir

ŞØŁ ŦΔΜΔŁ¥Ň ЖØЖØ

༺♥༻ℒℴѵℯ༺♥༻

Só por hoje:

Não se zangue,
Não se preocupe,
Seja grato,
Trabalhe com diligência,
Seja gentil para as pessoas.

नमस्ते NAMASTÊ – O DEUS QUE HÁ EM MIM SAÚDA O DEUS QUE HÁ EM TI!

Renata Marciano

 
© Terapia Floral - 2012. Todos os direitos reservados.
Criado por: Renata Sol Tamalyn.
Tecnologia do Blogger.
imagem-logo