Daisy Lea na propaganda
da 138 Water (+18) - FireLink
Candidata a 'Musa do MMA' é vascaína
e foi vencedora em lutas
Bella da Semana
Beatriz Fida
Sites que vocês adultos
Vão Gostar - Link Fixo

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