Só 72 Bundas
Só 72 Bundas
(+18)
AS BARATINHAS #39
AS BARATINHAS #39...
...Conteúdo (+18)
superentretenimento
Cabeça, ombro,
joelho e pernas
Buião
37 decotes que vão deixar a
sua semana melhor



Galeria De Imagens Com Efeito CSS3


Nesta postagem venho compartilhar com vocês este novo tutorial. Mostrando como criar uma Box Galery Image. Blogs que tem pelo menos um dessas box é um site completo sem falar que deixa o design do blogger bem mais moderno e criativo. Você pode colocar onde você quiser no seu blog. 



Para colocar no seu blog... Entre em "Modelo" - "Editar HTML", dê um Ctrl + F e procure pela tag
]]></b:skin>
Ao encontrar a tag, cole ACIMA dela o Seguinte código
#UTimg_gallery {
border:3px solid #333;
position:relative;
padding:0;
margin:20px auto;
width:412px;
height:285px;
background:#ccc url(http://2.bp.blogspot.com/-mQk3Mo2aFWA/UnPWz3Vqg8I/AAAAAAAABZs/B8uI5ZeL3v0/s1600/DicasHot+Compartilhe.png) 6px 83% no-repeat;
background-size:400px 230px;
border-radius:3px;
border-bottom-left-radius:9px;
border-bottom-right-radius:9px;
box-shadow:0 0 6px #000;
}
#UTimg_gallery li{
margin:0; /* original code http://dicashot.blogspot.com */
float:left;
margin-left:1px;
text-align:center;
list-style: none; 
padding:0;
}
#UTimg_gallery li a{
display:inline-block;
padding:9px 0;
width:78px; /* original code http://dicashot.blogspot.com */
background:#666 url(https://lh5.googleusercontent.com/_p9wSuoxI5W4/TXDhI0b52NI/AAAAAAAAA20/Cd6iuNvZu2I/s800/nav_bg.png) 0 100%  repeat-x;
border:1px solid #666;
color:#33CCFF;
margin:2px 0 2px 1px;
font-size:11px;
font-family:Arial;
font-weight:700;
text-decoration:none;
}
#UTimg_gallery li a,#GUTimg_gallery li a img{
transition:1.8s ease;-o-transition:1.8s ease;-moz-transition:1.8s ease;-webkit-transition:1.8s ease;-ms-transition:1.8s ease;
}
#UTimg_gallery li a:hover {
background:#fff  url(https://lh5.googleusercontent.com/_p9wSuoxI5W4/TXDhI0b52NI/AAAAAAAAA20/Cd6iuNvZu2I/s800/nav_bg.png) 0 -40px  repeat-x;text-shadow:2px 2px 2px #888;
color:red;  /* original code http://ut2a-4down.blogspot.com */
border-bottom:5px solid red;
opacity:1.0;
filter:alpha(opacity=100);
padding:9px 0 4px;
}
li#UTimg_img a, li#UTimg_img a:hover {
background:#aaa;
color: #FF9900; 
}
#UTimg_gallery li a img{
position:absolute;
left:3px;
top:38px;
width:400px;
height:230px;
clear:left;
padding:2px;
border:1px solid #444; 
border-bottom:5px solid #444;
border-top:5px solid #222;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
opacity:0.0;
}
li#UTimg_img1 a img, #UTimg_gallery li a:hover img {
display:block; 
opacity:0.35;
filter:alpha(opacity=35);
}
li#UTimg_img1 a:hover img, li#UTimg_img2 a:hover img, li#UTimg_img3 a:hover img, li#UTimg_img4 a:hover img, li#UTimg_img5 a:hover img {
border-color:#888; 
opacity:1.0;
filter:alpha(opacity=100);
}
Tendo colado o código, salve.

Agora, entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código
<ul id="UTimg_gallery">
<li id="UTimg_img1"><a href="#">Image-1<img src="http://www.iaia.com.br/blog/wp-content/uploads/2009/11/bella-and-edward-new-moon.0.0.0x0.400x300.jpeg" /></a></li>
<li id="UTimg_img2"><a href="#">Image-2<img src="http://3.bp.blogspot.com/-cI1aqACV1Fw/UAzkjezemaI/AAAAAAAAC8Q/_YgRsZ81s7I/s400/Miley-Cyrus-Sexy-Wallpapers-2.jpg" /></a></li>
<li id="UTimg_img3"><a href="#">Image-3<img src="http://imgs.mi9.com/uploads/female-celebrities/567/hayden-panettiere-sexy-wallpaper_400x300_8610.jpg" /></a></li>
<li id="UTimg_img4"><a href="#">Image-4<img src="http://lh5.ggpht.com/_tyYaJ4QmZHQ/Sy6BofjVouI/AAAAAAAAE48/720z0iPTY3U/s400/Keri%20Russell%20Hot%20Sexy%20and%20Beautiful%20Wallpapers%202.jpg" /></a></li>
<li id="UTimg_img5"><a href="#">Image-5<img src="http://rainydays.com.br/wp-content/uploads/2011/03/Brittany-Snow-sexy-na-Maxim-400x350.jpg" /></a></li>
</ul>
Com certeza ficará pequeno para colocar na barra de widgets, mas você pode coloca-la acima das postagens ou em outro lugar que queira.

Tendo colado o código, basta salvar e pronto!!!

Deixe seu comentário. Seu comentário é muito importante!!!

Cursos Online com Certificado - Cursos 24 Horas
Galeria De Imagens Com Efeito CSS3 Galeria De Imagens Com Efeito CSS3 Reviewed by Muca on 11/01/2013 08:57:00 AM Rating: 5

Como Bill gates: " se você nasce pobre não é culpa sua mas se você morre pobre a culpa é toda sua." | "ver vídeo"
DicasHot
Widget by DicasHot