Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

21 maio 2009

Usando o Widget de Imagem para destaques no blog


Vou ensinar como manipular os códigos do widget de imagem para transformá-lo em um campo de destaque para posts anteriores. Como acredito que uma imagem vale mais que mil palavras, vejam do que trata este tutorial em meu blog de testes. Notem abaixo do cabeçalho os quadrados com imagens acompanhadas de um título e legenda. Onde quer que se clique alí, seja na imagem, no título ou na legenda, você será levado ao post em questão. As vantagens de se usar o widget de imagem alterado desta maneira é a possibilidade de colocar em destaque posts antigos que não apareceriam em um widget de posts recentes por exemplo, atraindo o leitor para assuntos do seu blog que você não quer que 'desapareçam' com as novas publicações.

Como em todos os outros tutoriais, estou usando o Template Mínima do Blogger para a modificação.
Antes de iniciar a explicação:
1- A colocação dos destaques é 100% manual, ou seja, não implica no uso de nenhum script que faça uma troca automática dos assuntos apresentados. Você deverá escolher qual post destacar e qual imagem e legenda usará no destaque;
2-Apesar do uso deste widget ser muito simples, as alterações que vou explicar exigem atenção. Por isso, por favor, tentem primeiro em um blog de testes até que tudo saia perfeito, ok?

A primeira coisa que faremos é decidir onde os widgets aparecerão e no meu exemplo eu escolhi a div crosscol que existe no template Mínima mas não é visível (o que acho algo meio bizarro). Para que fique visível, procure por este trecho:
<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

Substitua o no (em negrito) por yes e salve. Note que no modo Layout e o retangulo correspondente a esta div (abaixo do cabeçalho) aparecerá.

Para que as medidas que passarei a seguir fiquem corretas no template, altere o width de #outer-wrapper para 900px;

Agora no CSS do código do template (antes de ]]></b:skin>), acrescente o seguinte código (meus comentários estão em vermelho):

#crosscol-wrapper{
margin: 0 auto;
padding: 15px;
float:left;
border:1px solid #2e2e2e; /* escolha aqui a cor e largura da borda */
background: #111} /* escolha aqui a cor do background */

.crosscol h2{
margin: 0px;
padding: 0px 0px 0px;
text-align:left; /* escolha aqui o alinhamento do título */
height: 25px; /*altura do espaço para o título */
color: #ccc; /* cor da fonte do título */
font-size: 18px; /*tamanho da fonte do título */
font-weight:bold;
text-transform:uppercase;
letter-spacing:-1px;}

.crosscol .widget{
margin: 0px 2px 0px; /*espaçamento entre os widgets*/
padding: 5px;
width: 200px; /*largura de cada widget */
height:260px; /* altura de cada widget */
float:left; /* importante que a flutuação seja à esquerda */
border: 1px solid #2e2e2e; /*cor da borda de cada widget*/
background: #212121 /*cor do background de cada widget */
}

.crosscol .widget img {
margin: 0px;
padding: 0px;
width: 200px; /* tamanho de cada imagem */
height:160px; /* altura de cada imagem */
float:left;
border:1px solid #2e2e2e; /* cor da borda de cada imagem */
}

.crosscol .widget img:hover{
border:1px solid #fa01e6; /* cor da borda de cada imagem no estado hover */
}

.crosscol .caption{
margin: 0px;
padding:3px 0 0; /* distância da legenda para a imagem */
color:#ccc; /* cor da fonte da legenda */
font-size: 97%; /* tamanho da fonte da legenda */
text-align:justify; /* alinhamento da legenda */
}

acrescente também o código abaixo para alinhar os widgets no modo layout:
body#layout #crosscol{
margin: 0 auto;
padding: 0 0 0;
width: 900px;
float:left;}

Salve a modificação, vá em Layout e no espaço correspondente a div crosscol (abaixo do cabeçalho) , insira 4 widgets de imagens:



Conforme a imagem, coloque o título (sendo interessante colocar o mesmo do post), em legenda uma breve descrição do assunto, em link a url do post (que se obtém clicando com o botão direito do mouse sobre o título -> copiar link) e suba uma imagem que ilustre o post (no caso usei a mesma que ilustra meu post fictício). Insira os quatro widgets linkando para 4 posts diferentes e salve.

Por padrão apenas a imagem torna-se um link para a url escolhida; o que vamos fazer agora é uma alteração para que todo o conteúdo do widget (título e legenda) se tornem um link também.

1- Em editar HTML, clique em Expandir Modelo de Widget e procure pelo seguinte trecho:

<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'>

<b:widget id='Image4' locked='true' title='Mauris Vitae' type='Image'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:link != &quot;&quot;'>
<a expr:href='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
<br/>
<b:if cond='data:caption != &quot;&quot;'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

O que está em vermelho é o código de um widget que foi acrescentado. Este código deve se repetir, um após o outro, por quatro vezes (já que você adicionou 4 widgets) . Você deve alterar cada um deles para que fiquem como a seguir (as alterações estão em negrito):

<b:widget id='Image4' locked='true' title='Mauris Vitae' type='Image'>
<b:includable id='main'>
<a expr:href='data:link'>
<h2><data:title/></h2>
</a>
<div class='widget-content'>
<b:if cond='data:link != &quot;&quot;'>
<a expr:href='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
<br/>
<a expr:href='data:link'>
<span class='caption'><data:caption/></span>
</a>
</div>
</b:includable>
</b:widget>

o trecho <b:include name='quickedit'/> é suprimido e com isto excluímos o ícone da ferramenta que aparece em cada widget quando estamos logados (pois com estas modificações ele toma as proporções que determinamos para cada imagem e ficam enormes, atrapalhando a visualização do template).

Procure fazer a modificação em todos os widgets e salve.
É isso. Quando quiser mudar o destaque, basta trocar a imagem escolhida e substituir as informações título, link e legenda.




Artigos Relacionados

69 comentários:

Fábio Carvalho disse...

Muito legal o efeito. Quando eu tiver um tempo coloco isso no meu blog. Valeu fessora por mais esse ensinamento. ;-)

Hamilton disse...

Olá!
Pode me ajudar numa coisa?
Quando cheguei na etapa de colocar as quatro imagens, elas foram ficando uma abaixo da outra e não no formato que deveria ficar. Ficou horrível! Onde foi que eu errei?

Ariane disse...

Hamilton, eu precisaria ver a página com o erro para perceber, mas vc copiou todos os códigos como apresentei? Por que quando as imagens ficam uma abaixo da outra é por que falta o float:left

Gem@ disse...

Fantástico Ariane, muy buena explicación y un efecto muy elegante :)

Ariane disse...

Fábio, eu também acho que é uma boa idéia para não deixar alguns assuntos 'morrerem' no blog.

Gem@, para mim é sempre uma honra um comentário seu. Muito obrigada, abraços!

Ligiane disse...

Olá!!
Muito boas as suas dicas. Eu estava doida por esse efeito ^^
Mas só uma dúvida: eu expandi os modelos de widgets e substitui todos os trechos, mas mesmo assim o ícone da ferramenta continua enorme lá no template.

Ariane disse...

Ligiane, é por que você não retirou aquele trecho que corresponde ao ícone: <b:include name='quickedit'/>

Hamilton disse...

Copiei o código do jeitinho que vc mandou. Não faltou o tal float:left, não!
E agora?
Alguma outra dica?

Ligiane disse...

Achei meu erro e agora deu certo!!
Muito obrigada de novo!!

Lá em algum lugar disse...

Genial! Você é demais Ariane! =)
Adorei a dica.

Abraço.

.::.Susy.::.

Ariane disse...

Hamilton, deixa no seu blog, mesmo com erro e coloca o link aqui para que eu possa ver

Hamilton disse...

Oi, Ariane!
Fiz como vc me pediu. Coloquei duas imagens lá para vc ver que fica uma abaixo da outra. Em um blog de testes, eu fiz e deu certo, mas no meu não dá! Por favor, me ajude.
http://hamiltont.blogspot.com/

Ariane disse...

Hamilton, vc só está colocando o código CSS no lugar errado. tira de onde está e coloca abaixo de #main-wrapper {} por exemplo. testei aqui e deu certo.

Hamilton disse...

Ariane, olha como ficou agora, please!!!

Ariane disse...

Hamilton, agora ficou certo. vc só tem que diminuir o tamanho das legendas (menos palavras) e o título da imagem. de resto, tá igual ao meu exemplo.

Hamilton disse...

Deu certo, mas aparece uma mancha. O que será?

Hamilton disse...

Ariane, você é espetacular!
Adorei esse negócio, viu? Só tu mesma!!!
Só não vou copiar esse post para o meu humilde bloguinho porque não saberia MESMO tirar dúvidas de ninguém!
Muito obrigado, garota!

Hamilton disse...

Tou tão feliz! KKKKKKKKKKKK
Se eu tivesse um rojão aqui, espocaria um monte de fogos pra tu!
KKKKKKKKKKKKKKKKKKKKKKKK
Tou doidinho fuçando teu blog atrás de mais coisas legais!

Ariane disse...

Hamilton, dá pra deixar mais legal ainda. no caso do seu blog, o ideal seria acrescentar em #crosscol a medida width: 940px; e depois, em .crosccol .widget, a margin:0 10px 0 0;testa lá e veja como fica mais alinhado.

Hamilton disse...

Mudei jah, mas a mudança foi tão mínima!
Ei, sabia que tu mantém certo contato com uma irmã minha? É a Leninha. Ela disse que participa de uns grupos dos quais vc também faz parte. O blog dela é o LT Scraps Animados.
Valeu pela atenção mais uma vez.

Anônimo disse...

Ariane,
Deu certo! Vc é o máximo!
Só tem um probleminha, depois que coloquei este efeito a imagem do meu cabeçalho não aparece mais! No modo layout ela está lá, mas não aparece... Me ajuda por favor!!!
Bjs

The Facepalm disse...

Excelente blog! Continuem assim, estão no caminho certo!

http://thefacepalm.blogspot.com/

Twisted disse...

Oi, estou seguindo muitas das tuas dicas..
e pra provar que tá saindo tudo muito bemm..
Esse é meu blog http://twistedi.blogspot.com/

As vezes qaundo tem erro eu procuro ele e concertoo.. bom trabalhooo

Hamilton disse...

Oi, Ariane, queria saber mais uma coisa. Como faço para que meus resumos de postagens na página inicial fiquem dentro de caixas como as suas? Assim, com bordas e pano de fundo que destacam?

hamiltont disse...

Ariane, obrigado por me dar atenção e me responder, mas não era bem isso que eu queria saber... Queria saber como colocar cada postagem da página principal dentro de uma caixa destacada, igualmente você faz aqui, entende? As suas caixas até ficam diferentes quando passamos o mouse em cima. Valeu!
Hamilton
PS> Estou usando o open ID.

Blog Natura disse...

fiz tudinho mas ele não aparece no layout pra inserir as fotos e tals!

Lá em algum lugar disse...

Ariane, como eu faço para que fique abaixo de cada postagem?

Bjo.

.::.Susy.::.

Lá em algum lugar disse...

...Mais precisamente abaixo da descrição "Marcadores" de cada postagem?

Dica de dica .com blogger disse...

Seu blog é maneiro mesmo!!! topa parceria?

Swuy disse...

Oi Ariane, tudo bem?
Vou fazer um comentário sobre uma adaptação feita no template abril, que vc disponibilizou no mês de.. Abril (dãrt!) rsrs

Adoro aquele template, e fiz um pequena modificação, mas deu um erro na barra lateral, q deslocou um pouco pro lado a parte superior dela...
Se puder olhar e me dar uma ideia de onde está o erro, ficarei muito feliz! =)

Eis o endereço do meu blog:

desabitado.blogspot.com

Creio q n seja difícil.. Já tentei nos elementos da página e n resolveu... :\
O q será, hein?
Olhando lá dá p vc ter uma noção.
Desde já te agradeço.

Swuy disse...

Será que é nessa parte q tenho q mexer?

#sidebar-wrapper {
width: 260px;

Help me, please! =T

ieqeldorado1 disse...

ariane querida.
me ajuda pq ficou uma imagem em cima da outra.
fiz em outro blog de teste tudo ok.
quando fui no original de pipino.
help,help,help

ieqeldorado1 disse...

Por favor Ariane me ajude!!!
preciso de um socorro esse blog e muito importante . e infelizmente as imagens ficara sobrepostas e nao consigo coloca-las lado a lado.

Ariane disse...

, sem ter acesso ao blog não tenho como ajudar.

Hamilton já ensinei como em Resumos na página inicial com cores diferentes

Blog Natura não vi o código em seu blog

Susy coloque o htm dentro de um elemento de página HTML/JavaScript e arraste (em Layout) para um retangulo que aparecerá sob a coluna do post

Dica de dica agradeço muito mas não faço parcerias

Swuy qual foi a modificação que vc fez? Se vc reverter a modificação, resolveou continua o problema?

ieqeldorado seu código está errado, acrescente o que está em negrito:
.crosscol .widget{
margin: 0px 2px 0px;
padding: 5px;
width: 200px;
height:260px;
float:left;

ieqeldorado1 disse...

Ola moça oia eu õutra vez...
tentei aki mas nao mudou nada.
coloquei
float:left;
mas continuam uma sobre outra

ieqeldorado1 disse...

outro detalhe e que eu quero que as caixas fiquem abaixo do menu horizontal.
pra ficar esteticamente bonito e mais facil para os meus leitores.
obrigado Deus te abençoe.
Desculpe o encomodo

Ariane disse...

ieqeldorado vc só colocou o css e não criou a div crosscol-wrapper como mostra o tutorial. Você colocou dentro da div header, aí não funciona.

ieqeldorado1 disse...

Deus te abençoe.
que menina esperta e atenciosa.
vc devia estar em 1°no ranking...
na verdade logo,logo estará
ate mais ver nos proximos comentarios.
fui...

ieqeldorado1 disse...

Estava pensando em colocar ao inves de 4 colocar 8 .
ficando so imagens como esta em meu blog?
sera que seria possivel?

Robson Barbieri disse...

ArianeO Ariane, será que vc pode ver o que está errado?
As imagens estão no tamanho que quero, mas a letras estão enormes e eu gostaria de centralizar esse menu e deixar um espaço entre o cabeçalho e esse menu!
Será que poderia me ajudar?
Se for mais comodo para vc, pode acessar meu blog mesmo, só falar que lhe envio os dados!
Beijos!

Michelly Reis disse...

Como fazer nuvem de tags?Essa ai debaixo
||
||
\/

imotocas.com disse...

Ariane,

Há um detalhe na utilização desse recurso, pois passa impressão ao usuário que o link não funcionou, já que será necessário descer a barra lateral para encontrar o texto desejado/clicado.

O ideal é que a ferramenta "Widget de Imagem" desaparecesse ao ser clicado sobre o link para que a postagem ficasse mais visível de imediato. E retornar (aparecer) ao ser acessada a página inicial novamente.

Será que é possível otimizar e implementar essa funcionalidade para que a navegação fique mais intuitiva?

Abraços,
Diler

Maycon Alves disse...

Nossa, muito obrigado mesmo.
Queria a tempos inovar meu blog. Muito obrigado.

Jorge Luis Prazeres disse...

Prof. Não acho o trecho

no meu thml pode me ajudar?

meu blog: http://nossaconfraternizacao.blogspot.com

Jorge Luis Prazeres disse...

o meu nao tem o trecho
< div id = ' crosscol - wrapper ' >
pode me ajudar?

Dani Avila disse...

Oi, Ariane
Estou colocar esse crosscol na sidebar. Por acaso vc ja fez isso? Será que tem jeito? :D
Como até hoje quase nao mexi em CSS, estou apanhando um pouquinho (digo, muito).
Obrigada, seu blog é maravilhoso!
Beijos

meuladocontido disse...

Menina adorei esse tuto...
Mas...
Gostaria de fazer isso abaixo do post, como vejo me muitos blogs.

Beijos

Bleffe disse...

olá, Ariane..

eu não encontrei o comando crosscol no meu html...como faço?

http://bleffepoprock.blogspot.com/

Marcos disse...

oi..
n deu certo aqui,,

qnd eu coloquei o codigo ele mudou td o alinhamento dos widgets laterais.. eles ficaram muito mais pra baixo.. e apareceu um quadrado preto do lado esquerdo do espaço pra posts;;

salvei aqui uns screens shots.. sera q vc poderia dar uma olhada? [por favor?]
=]

Ariane disse...

Para quem não tem no código do template a div crosscol, basta criá-la:

<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

coloque o trecho abaixo do cabeçalho (header) ou onde quer que apareça no blog e salve. Depois em Layout, coloque as imagens.

Ariane disse...

Marcos fico aguardando os links das imagens

http://achediscipulos.blogspot.com disse...

Caramnba! Há quanto tempo procurava esse negoço. E quando estou buscando outra coisa... Valeu! Como disse um dos amigos nos comentários, vou achar um tempinho pra inserir essa dica.

Gustavo T.S. disse...

Olá Ariane
Eu gostei muito deste post
Eu usei no meu blog mas não tava adequado a largura dele, daí eu tive que editar o código para que os gadgets ficassem um pouco menores, mas nada que atrapalhe.

CARLÃO disse...

Oii,bom dia!navegando de blog em blog,acabei conhecendo o seu,me interessei pelas dicas muiiiiiiiiiito legal!sou novato no ramo,não tenho experiencia, tudo que eu sei é que aprendi sózinho,deixo aqui um obg,pelas dicas,abçs.

VISUALIçAO CRIATIVA disse...

Ariane!
Primeiro amei o modelo de blog que tu criou para minha loja.
Amei!
Amei!
Amei!
E segundo que nem sei como agradece-la quanto as dicas aqui expostas.
Consegui!
Li e reli direitinho todo o tutorial e consegui mudar ,toda a largura do meu template.
Valeu mesmo!

Gabys disse...

Ariane, adorei seu site, adorei a dica, estava a muuuito tempo procurando por algo desse tipo, mas não consegui implantá-la.

No meu blog de teste (http://gabriellaop.blogspot.com/) as imagens ficaram uma embaixo da outra, um monte de cógido html acima do banner do blog, um horror!

No meu blog oficial (http://misindependente.blogspot.com/) não houve alteração alguma, por isso, até já voltei ao modelo anterior!
O q eu faço???

Ariane disse...

Gabys, pelo que vi no blog de testes você colocou um estilo dentro do outro. Faz assim, apaga aqueles <style> e </styles> que aparecem antes e depois de um código que você está usando lá (#FeedGadget) e visualiza. Acredito que seja esse o problema.

Ludmila Monteiro disse...

Ariane, estou com o mesmo problema do Marcos.
(http://bloggestando.blogspot.com/)
As widgets laterais ficam desalinhadas.
nesse blog de testes, quis combinar o seu template coluna simples com esse de imagens, e ficou os widgets laterais lá embaixo..e um dos posts também lá embaixo...

banhosdoamor disse...

estou fazendo um novo blog,e quero deixar imagens em destaque e consegui gra;as as suas explica;oes e ja coloquei um link seu no novo blog,ainda nao quero que seja publicado o novo blog mas jaja estara nas paradas

myleide disse...

oi mas uma vez pedindo sua ajudar eu encontrei crosscol-wrapper e coloquei yes
mas eu estou em duvidas eu coloco o codico vermelhor ou o preto

Studio Intercult disse...

Ariane,

queria saber se há como - estou pesquisando e até agora não achei uma solução - colocar um link nas fotos em light box, após elas serem ampliadas elas se tornarem um link.

tentei de várias maneiras - menos alterando o código em Java, pois conheço bem pouco desta linguagem - você acha que existe uma forma?

milton lorena disse...

Olá, Ariane!
Fiquei muito contente com esse tutorial, até consegui colocar 5 widgets, funcionando, com efeito hover, tudo uma beleza. Mas tem uns pequenos detalhes em que eu preciso de sua ajuda: 1) Não há o que faça mudar a cor da fonte da legenda, pode por o código que quiser ali que permanece sempre o mesmo azulão 2) adicionei o letter-spacing e o texto se ajustou melhor no espaço da legenda, mas a distância entre as linhas permanece enorme. Como faço para ficar tudo bonitinho, como o seu?

.crosscol .widget-content {
margin: 0px;
padding:3px 0 0; /* distância da legenda para a imagem */
color: #cccccc; /* cor da fonte da legenda */
font-size: 75%; /* tamanho da fonte da legenda */
text-align:justify; /* alinhamento da legenda */
letter-spacing:-1px;
}


desde sempre obrigado

Ariane disse...

Milton, que bom que perguntou, pois me fez ver um erro no tuto que já vou arrumar! Onde está #crosscol .widget-content, substitui por #crosscol .caption e fica tudo certo. Para diminuir o espaço entre as linhas usa line-height:1.0em (o valor é só um exemplo). Desculpe pelo transtorno, abraços!

milton lorena disse...

Oi, Ariane!
Fiz as correções e agora a mudança de cor da fonte da legenda está ok! Entretanto, precisei incluir o efeito hover que desapareceu depois da correção. Só não deu certo o line-height:1.0em - quando altero o valor para (2.0em) o espaço entre as linhas aumenta ainda mais, quando altero para (0.5em) ou outro abaixo de 1.0, nada acontece e continuo na mesma. Desculpe, mas minha experiência com html é abaixo de sofrível e não sei onde estou errando.

.crosscol .caption {
margin: 0px;
padding:3px 0 0; /* distância da legenda para a imagem */
color: #99aadd; /* cor da fonte da legenda */
font-size: 75%; /* tamanho da fonte da legenda */
text-align:justify; /* alinhamento da legenda */
line-height:1.0em;
letter-spacing:-1px;
}
.crosscol .caption:hover {color:#fa01e6;}

Ariane disse...

milton coloca o line-height em #crosscol-wrapper

Pablo disse...

Oi Ariane tudo bem?
Antes de mais nada quero lhe parabenizar pelos vários esclarecimentos postados aqui em seu maravilhoso blog.Sou leigo nesta coisa de html - ainda - mas através do seu blog já consegui colocar imagem de fundo, outra coluna, mas agora nesta dica eu não entendi.Não consegui passar desta parte:
"Agora no CSS do código do template (antes - de tive que apagar o resto porque na hora de enviar o comentário o código atrapalhou), acrescente o seguinte código (meus comentários estão em vermelho):..."

onde fica esse CSS?rsrs.Você pode me informar?
desde já muito obrigado, pois para informar os leigos assim como eu, você é nota 1000000.

Rosy disse...

Oiii...Estou tentando colocar acima do post. Mudei os valores de altura e largura e em vez de crosscol mudei para main....até aí tudo bem....mas isso fez com que a área d post sumisse....ñ dá pra visualizar os posts. Consigo visualizar o elemento(área de postagem)em tamanho reduzido...Onde eu errei? Please

milton lorena disse...

Oi, Ariane!
Aí vão as alterações que fiz nos Destaques. Incluí o efeito Hover também para os Títulos e as Legendas. Como isso não consta no seu tutorial, gostaria de sugerir a inclusão. Estou aprendendo muito aqui e se tiver um tempinho dê uma espiada no meu trabalho, tudo muito básico, mas tudo ensinado por você. Muito obrigado!

abraços

Milton

http://oslorenas.blogspot.com


OBS: não vejo necessidade de publicar o meu comentário, você decide...rss
____________________________________________________________________________

#crosscol-wrapper{

line-height:0.8em;
margin-left: 25px;
margin-bottom:10px;
padding: 15px;
float:left;
border:1px solid #ddcc99; /* escolha aqui a cor e largura da borda */
background: #0c0900;} /* escolha aqui a cor do background */

.crosscol h2{
margin: 0px;
padding: 0px 0px 0px;
text-align:center; /* escolha aqui o alinhamento do título */
height: 25px; /*altura do espaço para o título */
color: #ddcc99; /* cor da fonte do título */
font-size: 12px; /*tamanho da fonte do título */
font-weight:bold;
text-transform:uppercase;
letter-spacing:-1px;
}

.crosscol h2:hover{color:#fa01e6;} /* estado hover para o título */


.crosscol .widget{
margin: 0px 2px 0px; /*espaçamento entre os widgets*/
padding: 5px;
width: 160px; /*largura de cada widget */
height: 230px; /* altura de cada widget */
float:left; /* importante que a flutuação seja à esquerda */
border: 1px solid #ddcc99; /*cor da borda de cada widget*/
background: #333333; /*cor do background de cada widget */
}

.crosscol .widget img {
margin-bottom: 10px;
margin-left: 5px;
padding: 0 0 0px;
width: 120px; /* tamanho de cada imagem */
height:125px; /* altura de cada imagem */
float:center;
border:1px solid #ddcc99; /* cor da borda de cada imagem */
}

.crosscol .widget img:hover{
border:1px solid #fa01e6; /* estado hover para a cor da borda de cada imagem*/
}

.crosscol .caption {
margin: 0px;
padding: 3px 0 0; /* distância da legenda para a imagem */
color: #ddcc99; /* cor da fonte da legenda */
font-size: 75%; /* tamanho da fonte da legenda */
text-align: justify; /* alinhamento da legenda */
letter-spacing:
}
.crosscol .caption:hover {color:#fa01e6;} /* estado hover para a legenda */


body#layout #crosscol{
margin: 0 auto;
padding: 0 0 0;
width: 840px;
float:left;}

blog do wagner fotógrafo de eventos disse...

estou aprendendo muinto com os tutorias

Postar um comentário

Os comentários são moderados.