Galerias e slides são elementos nos quais dão um aspecto de
profissionalismo no seu blog, e você que procura uma galeria simples,
mas elegante, está lendo o tutorial certo! Neste artigo estarei
ensinando como colocar uma galeria de imagens simples em seu blog de uma
maneira bem fácil que pode ser acrescentada em qualquer lugar do blog.
1. Entre no Editor HTML do seu blog e procure por <head>
2. Acima dessa tag cole o seguinte código:
<script src="http://codigosblogger.webs.com/Cblogger/simplegallery.js" type="text/javascript"></script>3. Agora procure por ]]></b:skin>
4. Acima dela cole o código abaixo:
ul.galleryimages, ul.galleryimages li, ul.galleryimagelist, ul.galleryimagelist li {5. Salve o modelo e clique na guia “Layout”.
margin: 0;
padding: 0;
list-style-type: none;
padding-top: 10px;
}
ul.galleryimages li, ul.galleryimages img {
display: block;
width: 94%;
box-shadow: 0.8px -0.3px 19px -3px #999;
margin-bottom: 15px;
}
ul.galleryimagelist {
margin-bottom: 0.6em;
margin-top: 17px;
}
ul.galleryimagelist li {
display: inline;
}
ul.galleryimagelist a {
margin: 0 0.2em;
padding: 8px;
text-decoration: none;
color: white;
background: #555;
border-radius: 17px;
}
ul.galleryimagelist a:hover, ul.galleryimagelist li.activeimage a {
color: black;
background: gainsboro;ul.galleryimagelist a {
}
6. Clique em “Adicionar um Gadget”, escolha a opção “HTML/javascript” e cole o código abaixo:
<ul class="galleryimages">7. Faça as modificações necessárias conforme destacado no código, inserindo o endereço da imagem e um nome ou descrição para a imagem.
<li><img src="ENDEREÇO DA IMAGEM" alt=""/>Nome da Imagem</li>
<li><img src="ENDEREÇO DA IMAGEM" alt=""/>Nome da Imagem</li>
<li><img src="ENDEREÇO DA IMAGEM" alt=""/>Nome da Imagem</li>
</ul>
Para acrescentar uma nova imagem, apenas copie a parte destacada de negrito e cole abaixo dela mesma.
8. Salve. arraste a galeria para qualquer lugar do seu blog e em seguida veja como ficou.
0 comentários:
Postar um comentário