06/05/2014

Tutorial: Slide com postagens recentes

Oi gente, hoje eu trouxe um tutorial para vocês, lembra que eu disse que ia começar a postar tutoriais aqui no blog, para ajudar vocês? Bom então, como eu falei né o primeiro tutorial que vim trazendo hoje é de um slide muito legal. Porque você encontra muitos slides por aí, mas só que tem um problema, esses slides assim que você faz uma postagem nova, se você quiser que ela apareça no slide você tem que ir lá e trocar. E é muito chato porque você tem que pegar a imagem colocar no slide trocar o título. E o slide que eu trouxe pra vocês ele é automático então quer aprender a como instalar ele no se blog? Clique em leia mais e vem comigo.



 Bom gente, como disse ele é um slide automático. Então ele funciona assim, assim que você fizer uma postagem no seu blog ele já vai direto para o slide. Se quiserem ver como que fica é só ver o blog da minha amiga leticia: http://leticiaeoutrascoisass.blogspot.com.br/. Porque ela também usa esse slide e ela AMA. Lembrando que qualquer dúvida deixem nos comentários.


1º Vá em Designer > Editar HTML e procure pela seguinte tag ]]></b:skin>

Acima dela coloque o seguinte código.

/*----- INÍCIO DO SLIDE  ----------------------------------------*/
.theme-default .nivoSlider {
position:relative;
background:#fff url(http://i1043.photobucket.com/albums/b436/JBollton/loading.gif) no-repeat 50% 50%;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
 box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
 position:absolute;top:0px;left:0px;display:none;
}
.theme-default .nivoSlider a {
 border:0;display:block;
}
.theme-default .nivo-controlNav {
 position:absolute;left:50%;bottom:-42px;
 margin-left:-40px; /* Tweak this to center bullets */
}
.theme-default .nivo-controlNav a {
 display:block;width:22px;height:22px;
 background:url(http://i1043.photobucket.com/albums/b436/JBollton/bullets.png) no-repeat;
 text-indent:-9999px;border:0;margin-right:3px;float:left;
}
.theme-default .nivo-controlNav a.active {
 background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
 display:block;width:30px;height:30px;
 background:url(http://i1043.photobucket.com/albums/b436/JBollton/arrows.png) no-repeat;
 text-indent:-9999px;border:0;
}
.theme-default a.nivo-nextNav {
 background-position:-30px 0;right:15px;
}
.theme-default a.nivo-prevNav {
 left:15px;
}
.theme-default .nivo-caption {
 font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
 color:#fff;
 border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
 color:#fff;
}
/*----- END Default Theme ----------------------------------------*/
/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.nivoSlider img {
 position:absolute;top:0px;left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;
 padding:0;margin:0;z-index:6;display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:5;
 height:100%;
}
.nivo-box {
 display:block;
 position:absolute;
 z-index:5;
}
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000;
 color:#fff;
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%;
 z-index:8;
}
.nivo-caption p {
 padding:5px;
 margin:0;
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
 display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:9;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
 position:relative;
 z-index:9;
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}
.theme-default #slider {
margin:10px -20px 60px 10px; /* Aqui você define a posição do slide */
width:610px; /* Certifique-se de suas imagens são do mesmo tamanho */
height:300px; /* Certifique-se de suas imagens são do mesmo tamanho */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
 margin-top:150px;
}
.clear {
 clear:both;
}

3º Depois procure por </body> e acima dele coloque o código abaixo.
<!-- jQuery --><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/> <script src='https://sites.google.com/site/jbollton/arquivo/nivo-slider-modified.min.js' type='text/javascript'/> <script type='text/javascript'> $(window).load(function() { $(&#39;#slider&#39;).nivoSlider(); }); </script>
4º  Em seguida salve.

5º  Agora vá em Designer e adiciona um novo "Html/Javascript" e cole o seguinte código.
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
 <script style="text/javascript" src="https://sites.google.com/site/jbollton/arquivo/GallerySlide.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;   //number of posts
 var image_height = 300; //image height
 var image_width = 610;  //image width
</script>
<script src="http://www.ecleticus.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>

6º  O código destacado de vermelho se refere a quantidade de posts que você deseja mostrar no slide, o meu eu coloquei 6.

 O código destacado de azul, se refere a largura (width) e altura (height) do slide, caso não esteja ao seu gosto, só mudar os número para o tamanho desejado.

8º O código destacado de laranja se refere ao endereço do seu blog, que no caso você colocará o seu. 

     Atenção, só troque a parte destacada de laranja, nada de passar dai, isso é, caso você não tenha conhecimento em HTML. Então gostaram do tutorial? Espero que sim, agora é só comentar, e se usar só creditar.

Créditos: http://www.ecleticus.com/

Então pessol foi isso espero que tenham gostado e ah se ficaram com alguma dúvida deixem aqui nos comentários que tentarei ajudar. Beijo Beijos e até a próxima.

25 comentários:

  1. Nossa que bacana, ótima dica!
    bjcas
    http://estou-crescendo.blogspot.com.br/

    ResponderExcluir
  2. amei muito o post :D
    http://dicados15.wordpress.com

    ResponderExcluir
  3. Adorei o post, está bem explicadinho.
    Vou tentar colocar no meu blog.
    Bjus
    Jaque
    www.quebreiaregra.com.br

    ResponderExcluir
    Respostas
    1. Obrigada.
      Tenta sim, e me conta o resultado ok?
      Beijos e volte sempre rs.

      Excluir
  4. Excelente dica, acho que vou fazer um teste, bjs

    http://dicascoisasdemulher.blogspot.com

    ResponderExcluir
    Respostas
    1. Oi Rose, faça e depois conta o resultado.
      Beijos e volte sempre.

      Excluir
  5. Olá, seu blog é lindo e tem ótimas dicas! Se você tiver um tempinho venha conhecer meu blog e se gostar curta a minha fan page! Beijão ♥

    www.todacharmosa.com
    www.facebook.com/blogtodacharmosa

    ResponderExcluir
    Respostas
    1. Oi Pathy, obrigada linda.
      Já dei uma passadinha por lá :D
      Obrigada, beijos e volte sempre.

      Excluir
  6. Esse tutorial foi muito útil, parabéns pelo blog!! Beijos

    http://utopiasdemaria.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada Maria.
      Espero ter ajudado você e conseguir ajudar também outras pessoas né.
      Beijos e volte sempre

      Excluir
  7. Gostaria de um slide igual o seu.
    Onde posso arrumar
    http://estilovipnet.blogspot.com.br/

    ResponderExcluir
  8. Gostaria de entar em contato com sua amiga , ele tem facebook ?

    ResponderExcluir
    Respostas
    1. Oi Camila tem sim
      Segue o link: https://www.facebook.com/Leticiavitoria99
      Beijos e volte sempre.

      Excluir
  9. Não foi este que eu utilizei para fazer isto. Mas, este tutorial foi bem inspirador para o meu blog. Eu estava procurando num mecanismo de pesquisa de sites, e encontrei vários tutoriais, entre eles este. Utilizei um de outro site, mas este me ajudou bastante à entender o código. Obrigado!
    ASS: Angelo Rodrigues

    ResponderExcluir
  10. Também tenho um blog
    http://modaematernidade.blogspot.com.br/
    obrigada pela dica :)

    ResponderExcluir
  11. oi tentei colocar no meu blog mas não rolou

    ResponderExcluir
  12. o meu sidebar cai, fica lá embaixo do meu blog

    ResponderExcluir
  13. Não funcionou

    http://blogandomrlivro.blogspot.com.br/

    ResponderExcluir