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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWKWtSTy-saWcqgzrPtXDXLuGQPiHOyH3G0rsxS2ojNK6XWGfEs5ExBpl3v-cBm0W82sIOIZvDhnBQj38uQwMuc_Jd3MI7VC3JBtPzoGBr99sy74zPbdH8oCUYPPFOT7Jp8MBP5d4DkFU/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVHjUCSX5ftbkmR7owL4rJ1FJF7wthH3_UnCR-gHSyfcBNulDLxXLpdtL8CDQu95DFaVWQOHTkjFA4O5kNLO_MLB0aNmmnl5EugeeI5HRvNWSq-i6pVSsPxlG68fgA4GEjiSHG62rUSys_/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVHjUCSX5ftbkmR7owL4rJ1FJF7wthH3_UnCR-gHSyfcBNulDLxXLpdtL8CDQu95DFaVWQOHTkjFA4O5kNLO_MLB0aNmmnl5EugeeI5HRvNWSq-i6pVSsPxlG68fgA4GEjiSHG62rUSys_/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjghBytEYdMInlXyWP508wLNFbxRQdKqJg52JJJKzzf0yx322lRfBExsqnr33-VkThsVhfCY2VbxsYw3GXcjY3MMT-2tXZnh2mGTZRCfxROT14SRcvHjK-OU8arEXVTFQEFpVSGOA3dNQ/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!!!