6# Barra de imagens

Olá meninas!

Hoje eu fiz um tutorial que se chama Barra de imagens que fica no final da página do blog.

O código dele é muito grande e vocês vão precisar alterar muita coisa por causa disso.

Não pense que é difícil o tutorial, pois meus tutoriais vão ser sempre fáceis de se - usar no blog.

Vamos começar!

Resultado:

Clique aqui para ver como que fica no blog.

Atenção: O blog precisa de um pouco de mais largura que o normal, para a barra de imagens ficar do jeitinho que esta em cima, em fileira.

Primeiro vá em Design > Layout e adicione um gadget lá no final da página, veja um exemplo para entender melhor:

E em seguida > HTML/Java Script e cole esse código:

<section align="center" id="section1" style="background-color: blogmeustutoriais;" title=""><article id="article1"><span style="color: white;"><h1 style="color: inherit; font-family: inherit; font-size: 38.5px; line-height: 40px; margin: 10px 0px; text-rendering: optimizelegibility;">
<span class="icon-heart" style="-webkit-font-smoothing: antialiased; background-image: none; background-position: -96px 0px; background-repeat: no-repeat no-repeat; display: inline-block; font-family: FontAwesome; font-weight: normal; height: 14px; line-height: 14px; margin-top: 1px; text-decoration: inherit; vertical-align: text-top; width: 14px;" title="icon heart"></span>&nbsp; &nbsp;&nbsp;<span class="icon-heart" style="-webkit-font-smoothing: antialiased; background-image: none; background-position: -96px 0px; background-repeat: no-repeat no-repeat; display: inline-block; font-family: FontAwesome; font-weight: normal; height: 14px; line-height: 14px; margin-top: 1px; text-decoration: inherit; vertical-align: text-top; width: 14px;" title="icon heart"></span>&nbsp;</h1>
</span></article><ul class="thumbnails" style="list-style: none; margin: 0px 0px 10px -30px; padding: 0px;">
<li class="span3" style="background-color: white; float: left; margin-bottom: 20px; margin-left: 30px; min-height: 1px; width: 270px;"><div class="thumbnail" style="-webkit-box-shadow: rgba(0, 0, 0, 0.054902) 0px 1px 3px; -webkit-transition: all 0.2s ease-in-out; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.054902) 0px 1px 3px; padding: 4px; transition: all 0.2Fs ease-in-out;" title="Nome ao passar o mouse no titulo 1">
<span style="color: #ff6699;"></span><br />
<h2 style="color: inherit; font-family: inherit; font-size: 31.5px; line-height: 40px; margin: 10px 0px; text-rendering: optimizelegibility;">
<span style="color: Cor da letra do titulo 1;">
Título 1</span></h2>
<span style="color: ;">
<a href="" style="color: #0088cc; text-decoration: none;" target="_blank"><img alt="Tutoriais universe stickers image" src="URL da imagem 1" data-src="holder.js/300x200" style="border: 0px; height: auto; max-width: 100%; vertical-align: middle;" title="Nome ao passar o mouse na imagem 1" /></a></span><br />
<div style="margin-bottom: 10px;">
<span style="color: Cor da letra da descrição 1 ;">Escreva aqui 1 </span></div>
<span style="color: #ff6699;">
</span></div>
</li>
<li class="span3" style="background-color: white; float: left; margin-bottom: 20px; margin-left: 30px; min-height: 1px; width: 270px;"><div class="thumbnail" style="-webkit-box-shadow: rgba(0, 0, 0, 0.054902) 0px 1px 3px; -webkit-transition: all 0.2s ease-in-out; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.054902) 0px 1px 3px; padding: 4px; transition: all 0.2s ease-in-out;" title="Nome ao passar o mouse no título 2">
<span style="color: #ffcc33;"></span><br />
<h2 style="color: inherit; font-family: inherit; font-size: 31.5px; line-height: 40px; margin: 10px 0px; text-rendering: optimizelegibility;">
<span style="color: Cor do titulo 2;">
Título 2</span></h2>
<span style="color: ;">
<a href="" style="color: #0088cc; text-decoration: none;" target="_blank"><img alt="Nome ao passar o mouse na imagem" src="URL da imagem 2" data-src="holder.js/300x200" style="border: 0px; height: auto; max-width: 100%; vertical-align: middle;" title="Nome ao passar o mouse na imagem 2" /></a></span><br />
<div style="margin-bottom: 10px;">
<span style="color: Cor da letra da descrição 2;">Escreva aqui 2</span></div>
<span style="color: ;">
</span></div>
</li>
<li class="span3" style="background-color: white; float: left; margin-bottom: 20px; margin-left: 30px; min-height: 1px; width: 270px;"><div class="thumbnail" style="-webkit-box-shadow: rgba(0, 0, 0, 0.054902) 0px 1px 3px; -webkit-transition: all 0.2s ease-in-out; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.054902) 0px 1px 3px; padding: 4px; transition: all 0.2s ease-in-out;" title="Nome ao passar o mouse no titulo 3 ">
<span style="color: #33cccc;"></span><br />
<h2 style="color: inherit; font-family: inherit; font-size: 31.5px; line-height: 40px; margin: 10px 0px; text-rendering: optimizelegibility;">
<span style="color: Cor do título 3;">
Título 3</span></h2>
<span style="color: ;">
<a href="" style="color: #0088cc; text-decoration: none;" target="_parent"><img alt="Nome ao passar o mouse na imagem" src="URL da imagem 3" data-src="holder.js/300x200" style="border: 0px; height: auto; max-width: 100%; vertical-align: middle;" title="Nome ao passar o mouse na imagem 3 " /></a></span><br />
<div style="margin-bottom: 10px;">
<span style="color: Cor da letra da descrição 3;">Escreva aqui 3</span></div>
<span style="color: ;">
</span></div>
</li></ul></section>


Bom, vou explicar melhor o código para vocês entenderem.

Entendendo o código: 

Vocês sabem que na barrinha contém 3 espaços para por 3 imagens.
No final de cada código que está de amarelo, eu coloquei um número em cada  para vocês saberem de qual imagem que é. A primeira é o número 1, a segunda é o número 2 e a terceira é 3.
Exemplo:
Lá no código acima tem  um código amarelo que ta Cor do título 3 ,o número final  é o 3 que quer dizer que é a terceira imagem.
Agora vamos saber o significado desses códigos.

                                                           

Nome ao passar o mouse no titulo - Você tem que escrever alguma coisa porque quando a pessoa passar o mouse no titulo vai aparecer um balãozinho com as palavras que você escreveu.

Cor da letra do titulo  - É pra você colocar a cor do titulo, clique aqui para ir na tabela de cores.

Titulo - É pra você escrever o título.

URL da imagem   - É pra você colocar o URL da imagem.

Nome ao passar o mouse na imagem - Você tem que escrever alguma coisa porque quando a pessoa passar o mouse na imagem vai aparecer um balãozinho com as palavras que você escreveu.

Escreva aqui - Você tem que escrever a descrição da imagem, um pouco sobre a imagem.


Cor da letra da descrição - É a cor da letra que você vai por do escreva aqui ,clique aqui para ir na tabela de cores.

 Espero que tenham gostado!
Se postar o tutorial credite.

Bjs!