Com o JQuery, é possível criar vários efeitos no blog, inclusive em imagens.
Através deste tutorial, em apenas 3 passos você poderá criar uma galeria de Imagens com jQuery.
Nesta galeria, suas imagens se apresentam em tamanho menor, e ao passar o mouse em cima, elas ficarão maiores.
Você pode , por exemplo, instalar esta galeria acima da área de postagens, ou abaixo do cabeçalho (crosscol).
Vejamos como aplicar este efeito.
1. Aplicar estilos ao efeito:
1º passo - Vá em "Design" >> "Editar HTML" >> "Expandir modelos de widgets".
Copie o código na caixa abaixo e cole-o ACIMA de:
]]></b:skin>
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
-ms-interpolation-mode: bicubic;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTi2gI4qYdpqF8icQ_FMP0LccElgpKWoBlYpxfvqX89yuJNln8Rb6JGGTivIg7aQLqz7HlKiKpCOz5yekasb0VhPOF4XfUNPl1avjT0FbbEUSmYiFWm89p398naBokGcUXqdAWDKOVfXfC/) no-repeat center center;
border: none;
}
2. Aplicar o Javascript:
2º passo - Copie o código abaixo e coloque-o antes de
</head>
3. Adicionando a galeria das imagens ao gadget:
3º passo - Volte na aba "
Design" >>"
Elementos da página", no campo onde você quiser adicionar sua galeria, clique em "
Adicionar um Gadget" e Selecione a opção "HTML/JavaScript" e cole o seguinte código dentro dele:
<ul class="thumb">
<li><a href="LINK1"><img src="URL-IMAGEM1" alt="" /></a></li>
<li><a href="LINK2"><img src="URL-IMAGEM2" alt="" /></a></li>
<li><a href="LINK3"><img src="URL-IMAGEM3" alt="" /></a></li>
<li><a href="LINK4"><img src="URL-IMAGEM4" alt="" /></a></li>
</ul>
Para inserir mais imagens á galeria, repita a linha abaixo antes do código :
<li><a href="LINK"><img src="URL-IMAGEM" alt="" /></a></li>
Com o JQuery, é possível criar vários efeitos no blog, inclusive em imagens.
Através deste tutorial, em apenas 3 passos você poderá criar uma galeria de Imagens com jQuery.
Nesta galeria, suas imagens se apresentam em tamanho menor, e ao passar o mouse em cima, elas ficarão maiores.
Você pode , por exemplo, instalar esta galeria acima da área de postagens, ou abaixo do cabeçalho (crosscol).
Vejamos como aplicar este efeito.
1. Aplicar estilos ao efeito:
1º passo - Vá em "Design" >> "Editar HTML" >> "Expandir modelos de widgets".
Copie o código na caixa abaixo e cole-o ACIMA de:
]]></b:skin>
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
-ms-interpolation-mode: bicubic;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTi2gI4qYdpqF8icQ_FMP0LccElgpKWoBlYpxfvqX89yuJNln8Rb6JGGTivIg7aQLqz7HlKiKpCOz5yekasb0VhPOF4XfUNPl1avjT0FbbEUSmYiFWm89p398naBokGcUXqdAWDKOVfXfC/) no-repeat center center;
border: none;
}
2. Aplicar o Javascript:
2º passo - Copie o código abaixo e coloque-o antes de
</head>
3. Adicionando a galeria das imagens ao gadget:
3º passo - Volte na aba "
Design" >>"
Elementos da página", no campo onde você quiser adicionar sua galeria, clique em "
Adicionar um Gadget" e Selecione a opção "HTML/JavaScript" e cole o seguinte código dentro dele:
<ul class="thumb">
<li><a href="LINK1"><img src="URL-IMAGEM1" alt="" /></a></li>
<li><a href="LINK2"><img src="URL-IMAGEM2" alt="" /></a></li>
<li><a href="LINK3"><img src="URL-IMAGEM3" alt="" /></a></li>
<li><a href="LINK4"><img src="URL-IMAGEM4" alt="" /></a></li>
</ul>
Para inserir mais imagens á galeria, repita a linha abaixo antes do código :
<li><a href="LINK"><img src="URL-IMAGEM" alt="" /></a></li>
