expr:class='"loading" + data:blog.mobileClass'>

Slider automático com posts recentes


O tutorial de hoje é pra ensinar a colocar esse slides automáticos que tenho aqui no blog, com as postagens recentes. Acho que fica lindo e dá um toque bem pessoal e organizado pro seu blog. Vale a pena tentar!

Apesar de mexer com html, é super fácil! Eu nunca tinha mexido com nada disso, e achava que era super dificil, mas hoje consigo me virar bem. Então, vamos fazer? ♥



Os slides vão ficar mais ou menos assim (como no meu blog): 

No painel do Blogger, você abre a aba Modelo e em seguida Editar HTML. Vai aparecer uma aba mais ou menos assim:


Creditos à Follow Your Dreams.

Clique dentro da caixa de texto html, e aperte Crtl + F, que vai aparecer essa caixinha de pesquisa da foto acima.

Procure por ]]></b:skin> cole o seguinte código logo acima dele.

/*----- INÍCIO DO SLIDER  ----------------------------------------*/
.theme-default .nivoSlider {
position:relative;
background:#fff url(http://4.bp.blogspot.com/-ly7fzdRVYSw/Unaw16dpWOI/AAAAAAAAB98/Y-MCamn7gTg/s1600/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
(https://lh6.googleusercontent.com/-0EkJ0yn2heg/VFk-76AZAZI/AAAAAAAADjs/93B4rr-mLvA/s40/BolinhaCinza.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://2.bp.blogspot.com/-ZfMy0_axq9I/UnaxF7X_BgI/AAAAAAAAB-M/F4rPrDMd2Xo/s1600/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;
}
/* 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:
#888888;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
height:50px;
z-index:8;
}
.nivo-caption p {
padding:10px;
margin:0;
font-size:15px;
}
.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:600px; /*Largura do slide*/
height:300px; /*Altura do slide*/
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
margin-top:150px;
}
.clear {
clear:both;
}
/*----- FIM DO SLIDER ----------------------------------------*/
Faça as devidas alterações, se achar necessário. Ah, você pode alterar essas bolinhas cinzas do jeito que quiser, pode colocar corações.. É só mapear a imagem e colocar o link dela.

Agora, pesquise por </head> e acima dele cole este código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/><script src='http://yourjavascript.com/9634421461/nivo-slider-modified-min.js' type='text/javascript'/><script type='text/javascript'> $(window).load(function() { $(&#39;#slider&#39;).nivoSlider(); }); </script>
 Agora, abra a aba LAYOUT, adicione um gadget de html/Java Script. Nele, cole o código abaixo:

<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<script style="text/javascript" src="http://yourjavascript.com/9644611160/galleryslide.js"></script>
<script style="text/javascript">
var numposts_gal = 4;   // Número de posts que vão aparecer nos slides
var image_height = 300; // Altura do slide
var image_width = 600;  // Largura do slide
</script>
<script src="http://ENDEREÇO DO SEU BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>


Faça as devidas alterações e prontinho! Confira se deu certo, e salve. Seu blog já vai estar com um charme a mais! Divirta-se ♥

Ps: Observe que você deve definir a largura e altura dos slides tanto no html, quanto no gadget do layout, então os valores devem ser os mesmos para não dar erro.

O que mais querem saber?! ^^)

Não se esqueça de nos seguir aqui no blog e nas redes sociais,
Pra ficar por dentro de tudo que está rolando por aqui!
Curta nossa Fan Page   &  Vem nos seguir no instagram

Beijos da Thais! :*

12 comentários:

  1. Amei o tutorial, Thais! ♥
    Morro de saudades do blogger, no wordpress consigo fazer pouquíssimas coisas sozinha. :/
    Tá lindo seu blog, assim como você.
    Beijos cheios de luz! ♥
    www.normalidadeincomum.com.br
    www.youtube.com/normalidadeincomum

    ResponderExcluir
  2. Sua lindaaaaaaa! Adoro ver você por aqui ♥
    Eu estou gostando bastante do blogger, não consigo mexer em nadinha do wordpress rsrs. Obrigada linda, que ótimo ter gostado da aparência do blog! É importante pra mim ♥

    ResponderExcluir
  3. Amei o tutorial, só que não entendi nada....rsrsrsrsrs.....Bjsss
    Taí uma coisa que eu gostaria de aprender em!
    Quem sabe um dia rs
    http://katiamagaldivulgacoes.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ah Katia, quando comecei a mexer tbm não achava que conseguiria! Mas dps que vc começa a mexer, vicia! Hahah

      Excluir
  4. Amei o tutorial <3
    http://quasedelicadaa.blogspot.com.br/

    ResponderExcluir
  5. Parabéns, tutorial bem explicadinho, quando tiver com tempo vou tentar, valeeeeu <3
    diarioingenuo.blogspot.com

    ResponderExcluir
  6. tenho uma pergunta a respeito
    se eu colocar no meu blog a area de postagens automaticamente desce para dar espaço ao slider?
    acho bacana mas tenho medo do meu blog ficar lento e de estragar ja que sou uma negação pra qualqer travalho deste gênero kkkkkkkkkkkkk
    depois volto pra ver minha resposta

    www.meumuraldeideias.com

    ResponderExcluir
    Respostas
    1. Marcelle, nunca aconteceu comigo.. E eu acho dificil acontecer no seu também. Mas mesmo que bagunce lá, e tudo falhar, é só excluir o gadget depois rs. Acho que vale o risco! Fica tão lindo e organizado o blog *-* Qualquer dúvida, pode falar comigo :)

      Excluir
  7. Como faço pra deixar a imagem do post do tamanho do slide?

    ResponderExcluir
  8. Adorei o tutorial e fiz no meu, mas não ficou muito bonito... O slide fica bem largo, e a qualidade das imagens fica baixa, porque elas são praticamente esticadas para os lados no slide... Tentei deixar menor, mas não funcionou...

    ResponderExcluir