Templates Novo Blogger

Sobre moderação nos comentários

2009-07-03T23:15:00.002-03:00

Quando você comenta em um blog, está deixando o seu cartão de visitas, está causando sua primeira impressão. As pessoas irão te procurar ou não, levar à sério ou não, dependendo do que exibe o seu cartão. Quando um leitor usa o formulário de comentários aqui no TNB para choramingar, eu não dou mais atenção. Por que gente que choraminga não tenta, não batalha, não se esforça.

Ultimamente é tão raro ler um comentário interessante, que eu acabo publicando todos, muitas vezes sem ler mais do que as tres primeiras palavras. Estou deixando para que um leitor ajude o outro e fico assistindo.

Eu vou explicar novamente para vocês: eu sou uma dona de casa de 36 anos que um belo dia descobriu o que eram os blogs (e poucos dias antes nem sabia ligar um computador) e passou a criar dezenas deles, só para ver como funcionavam, só para entender como se consegue alterar uma fonte, uma cor, uma imagem. Sem fazer uma única pergunta, a quem quer que seja, li (e continuo lendo) dezenas de tutoriais, mensagens em fóruns, apostilas e afins. Quando quero saber algo, pergunto ao Todo Poderoso e ele nunca, mas nunca mesmo, me deixa na mão.

Eu não fiz nenhum curso nesta vida que possa ser de alguma utilidade na hora de customizar um template. Nem inglês eu falo! Se quero aprender algo uso tradutor, a lógica, a tentativa e erro. E quando descubro algo, por mais simples que seja, venho aqui contar para vocês. Às vezes me empolgo, ensino algo e depois vejo que existe maneira mais fácil, volto aqui, edito o texto, tiro ele do ar, o que for. Mas eu não guardo para mim informação nenhuma e não tenho medo de admitir que errei, me equivoquei, o que seja. Eu não tenho 'uma imagem a zelar', eu não quero alcançar nada, eu não desejo nada além de dividir informação. Repito: sou apenas uma dona de casa, mãe de uma garotinha de 3 anos, que adora passar horas na internet e fuçar códigos. Só. Mais nada.

Se eu consigo mudar a cor de uma fonte, qualquer um consegue. De olhos fechados, se bobear. Então, quando alguém vem aqui aos berros gritando pelo amor de deus me salva, eu não vejo com bons olhos. Por que eu também não sabia mas descobri...estudando.
Se houvesse uma escassez de informação sobre html e css na internet, eu compreenderia o desespero. Mas com a quantidade absurda de informação que existe, como posso ficar solidária com este desespero infundado?
Tudo é para ontem, é desesperado, é pelo amor de deus. Se fulano não consegue descobrir, com tanto tutorial que existe, como mudar a imagem do cabeçalho ou como alterar um link, melhor não ter blog. É sério. Por que para ter um blog - com um template personalizado, como todo mundo quer - sem colocar a mão no bolso, é necessário ter no mínimo vontade de aprender. Tem que estudar. Aqui eu já coloco tanta informação mastigada, ilustrada, com flechinha apontando: é aqui ó! Mas se a pessoa não tem nem a pachorra de usar o formulário de busca, eu é que tenho que ir lá no blog dela, fazer por ela?
Não, claro que não. Se eu fosse atender todos os pedidos que chegam diariamente, eu nem dormia mais! Quer dizer que além de fazer os tutoriais, além de disponibilizar os templates gratuitamente, tenho também que ver o blog de cada um que comenta aqui e apontar (ou fazer pela pessoa que é o que a maioria dos 'desesperados' querem) onde deve modificar, apagar, incluir? Não tem nem cabimento...

Coisas do tipo 'me ajuda, por favor, não sei mais o que fazer!' já cansaram. Todas às vezes que fui conferir o problemão do sujeito era alguma coisa muito simples que o próprio tutorial respondia. A pessoa não lê o texto, passa os olhos por cima e pensa 'putz, que trabalheira!' e aí deixa um comentário pedinte esperando que eu faça por ela. Se fosse minha intenção fazer consertos pra todo mundo, nem criava os tutoriais.

Outra coisa que não respondo mais: a pessoa baixa aqui um template gratuito e depois quer que eu ensine ela a modificar ele ao seu gosto. Se eu fizer isso com cada um que baixa o template, no fim das contas eu terei feito uns 3000 templates gratuitos, não? Por que um adorou mas quer mudar a imagem, outro achou lindo, mas quer o menu mais pro lado...assim não dá, né? Quer mudar o template, pode mudar! Leia aqui e nos blogs que recomendo os tutoriais que ensinam passo-a-passo como modificar seu template e seja feliz!

Por isso, à partir de hoje a moderação vai ser séria. Não publicarei mais comentários sobre questões específicas de cada blog (como eu mudo a fonte do meu template? como altero a cor do meu menu?). Para isso leiam os tutoriais. Só publicarei questões mais abrangentes, que podem interessar vários usuários (por exemplo: como posso modificar o gadget de lista de blog? como posso aumentar o slide do Blogger? etc). Também não publicarei mais pedidos de alteração em templates nem perguntas inúteis, que já estão respondidas no tutorial. Comentários completamente vazios idem, como 'num entendi', 'naum consegui'. Como alguém pode realmente pensar que um comentário assim é útil para alguma coisa?

Óbvio que comentários que visam fazer propagandas de blogs e pedidos de parceria, correntes e besteiras do tipo, jamais serão publicados.

Ajudar, eu sempre continuarei ajudando: com os tutoriais detalhados, os templates customizados, as indicações de links úteis e interessantes. Com todas as horas que dedico por dia testando, fuçando, lendo, errando e acertando, para vir aqui dividir a informação com vocês. Mais que isso, sinceramente não dá.

E se você quer mesmo um template customizado com 'a sua cara' mas não quer mexer com códigos, simples: contrate alguém para lhe ajudar. Pelo que sei, a Mamanunes, o Paulo, a Elke , o Compulsivo e outros, aceitam pedidos de encomendas. Só não vale por preço no trabalho alheio: cada qual sabe quanto vale seu tempo e seus esforços.

É isso.

Links para o final de semana

2009-07-03T21:44:00.000-03:00

Problema com os ícones de edição rápida

2009-06-25T16:17:00.000-03:00

A Juliana do Dicas Blogger tocou no assunto e então percebi que havia algo errado quando recebi emails do Blogger, como se eu tivesse solicitado uma nova senha. Imediatamente fiz algumas mudanças para me proteger e depois de ler o post da Juliana decidi retirar todos os ícones de edição rápida dos meus blogs. O que está acontecendo é que o ícone da ferramenta que aparece junto a cada widget que se coloca no blog, e que deve ser visível apenas para o administrador, está aparecendo para os leitores e pelo visto alguns tiveram a idéia de clicar neles e tentar entrar em minha conta. Acredito que seja isso, ou o Blogger não iria me enviar emails como se eu tivesse perdido minha senha.

Pelo que ando lendo no Twitter, não são todos os blogs que estão sendo afetados por este erro mas, de qualquer maneira, é melhor previnir do que remediar. Por isso, deixo aqui a sugestão de duas maneiras para tornar invisível o ícone de edição rápida.

Primeira sugestão:

Clique em Expandir Modelo de Widget, procure pelo seguinte trecho de código e o apague:

<b:include name='quickedit'/>

Este código deve se repetir tantos forem os widgets que você tenha na página. Use o Ctrl+F para encontrar com maior facilidade.

Segunda sugestão:

Acrescente no CSS , antes de body{ o seguinte trecho:

.item-control a, .item-action a {display:none;}

Ao acrescentar esta linha, todos os ícones ficam invisíveis mas o ícone de enviar postagem por email também (aquele envelope no final do post), como bem observou o @luanfr no Twitter. Então, para que o ícone de enviar postagem fique visível, clique em Expandir Modelo de Widget e procure este trecho:

<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>

Apaguem o que está em vermelho.Feito isso o ícone de enviar post por email ficará visível ao leitor, normalmente.

Como expliquei acima, não são todos os blogs que estão apresentando este problema, pelo menos por enquanto. Também desconheço o motivo pelo qual os ícones ficaram visíveis, tanto no meu blog quanto no da Juliana (e em outros). De qualquer maneira, enquanto não descobrimos mais sobre o assunto, fica a dica.

Recomendo que leiam o post da Juliana sobre o assunto

Sobre problema nos comentários

2009-06-22T16:58:00.001-03:00

Aviso para quem baixou os templates Pet Shop, Astra e Beauty!

Tanto aqui no TNB quanto nos templates em que instalei o hack para emoticons nos comentários, surgiu um problema em que o formulário de comentários não aparece, ou aparece apenas depois de recarregar a página. Muito provavelmente o problema está relacionado à este hack. Acredito que instalei de maneira errada, pois ele funciona perfeitamente no blog onde o encontrei (Vagabundia). Estou aqui quebrando a cabeça tentando encontrar a solução e assim que souber onde errei, passarei para vocês a correção. Até lá, retirei o hack deste blog e dos templates Pet Shop, Beauty e Astra e coloquei novos links para download do código sem os emoticons. Quem já baixou este templates, por favor, pelo menos por enquanto, retirem o hack dos emoticons.

No final do código do template, antes da tag </body> há um script que deve ser apagado, semelhante a este:

<b:if cond='data:blog.pageType == "item"'>
<script src='url do js' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>

Apaguem este código todo, depois cliquem em expandir modelo de widget e encontrem o seguinte trecho, que também deve ser apagado:

<p style="margin: 0pt auto; padding: 0pt; width: 485px;">
<img src="url da imagem"/>
</p>

Para todos os que seguiram o tutorial para instalar o hack dos emoticons nos comentários, peço que o retirem por enquanto, também.

Peço desculpas pelo transtorno.Assim que encontrar uma solução, publicarei aqui para vocês.

Customizar o gadget Slide

2009-06-21T01:24:00.000-03:00

Quando vi a primeira vez o gadget de slide do Blogger, fiquei toda animada achando que exibiria alguns dos meus albuns de maneira decente mas o que acabou aparecendo na minha sidebar foi isso:

Isso é um slide. Minúsculo. Decepcionante. Tirei do blog.

Mas como sou teimosa, tornei a colocar e comecei a tentar maneiras de transformar aquilo que o Blogger me apresentava, nestes slides que estão em meu blog de testes.

O primeiro é gigante e foi inserido dentro da div crosscol. O segundo tem a largura de main-wrapper e foi inserido acima desta coluna. O terceiro está na sidebar, muito maior que o padrão do Blogger.

Não é possível fazer muita coisa para customizar o slide, além de redimensioná-lo e colocar uma borda para destacá-lo. Pelo menos até agora, não descobri o que mais é possível fazer.

Para redimensionar o slide, acrescente este código no CSS (clique em Editar HTML e acrescente o código em qualquer local antes da tag ]]></b:skin> ):

#Slideshow1 .slideshow-container {
width: 980px;
height:480px;
margin: 10px auto 10px;
padding:0 0 0;
border: 10px solid #000;background: #000}

.slideshow-container a img{position:absolute;top:0;left:0;width:100%; height:100%}

Em width você deve determinar a largura do seu slide, em height a altura. Margin como se apresenta aqui, centraliza o widget e dá uma distância de 10px para cima e para baixo. Em border você determina a largura e cor da borda. Em .slideshow-container a img width e height devem ser 100% ou a imagem não ocupará toda a largura e altura que você determinou para o slide.

Se você pretende acrescentar mais de um slide, repita o código, mudando apenas #Slideshow1 para #Slideshow2.

Mas Ariane, eu não quero um slide enorme em todas as páginas do meu blog, só na home, comofas?

Depois de inserir o slide e fazer as modificações, clique em Expandir Modelo de Widget e encontre este trecho, acrescentando o que está em vermelho:

<b:widget id='Slideshow1' locked='false' title='Apresentação de slides' type='Slideshow'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div class='slideshow-container' expr:id='data:widget.instanceId + "_slideshow"'>
<span class='slideshow-status'>Loading...</span>
</div>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Pronto, o slide vai aparecer apenas na primeira página.

Personalizando o gadget Perfil

2009-06-20T15:46:00.000-03:00

Nos templates do Blogger o gadget Perfil se apresenta da seguinte maneira:

Se clicarmos na imagem escolhida ou no link Visualizar meu perfil completo, somos levados à página padrão do Blogger para o perfil do usuário:

Podemos alterar o gadget do Perfil não só em sua aparência, mudando fontes, cores e colocando uma imagem diferente da que está gravada no perfil, como podemos ainda criar uma nova direção para ele, por exemplo, para uma página do próprio blog, onde podemos apresentar um perfil mais completo.

Perfil único autor - trocando a imagem

É possível exibir no blog uma imagem diferente da imagem escolhida para a página Perfil e isto se torna bastante interessante quando se tem vários blogs e se deseja empregar uma imagem diferente para cada um deles.
Hospede a imagem escolhida no site de sua preferência (eu uso o TinyPic) copie a url fornecida (Direct Link for Layouts), depois vá em Editar HTML e clique em Expandir Modelo de Widget. Óbviamente você já deve ter acrescentado em sua página o gadget Perfil. Procure por este trecho do código (tecle Ctrl + F para encontrar com maior facilidade):

<b:if cond='data:photo.url != ""'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
</b:if>

Apague o que está em vermelho e no lugar de data:photo.url cole a url da imagem que você hospedou. Visualize e se estiver aparecendo a nova imagem, salve.

Para alterar o destino do link e imagem do gadget Perfil

A página do perfil do Blogger não é lá muito charmosa, por isso, você pode criar um post bem caprichado falando de você, seu trabalho, o que for, e fazer com que o gadget Perfil leve o leitor até este post. Primeiro crie o texto falando sobre você e antes de publicar, clique no link Opções de Postagens e programe uma data no passado, para que o post não apareça na primeira página do blog, como mostra a imagem abaixo:

Publique seu post, vá até a página Editar Postagens e você verá uma lista com todos os seus posts publicados. Ao lado de cada post existem dois links: Editar e Visualizar. Clique com o botão direito do mouse sobre Visualizar ao lado do post que corresponde ao seu perfil e copie a url do mesmo (isto seve inclusive para colocar o link de um post no menu horizontal - muita gente me pergunta isso!), como mostra a imagem abaixo:

Volta a página Editar HTML, clique em Expandir Modelo de Widget e torne a encontrar aquele trecho do código:

<b:if cond='data:photo.url != ""'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
</b:if>

Apague o que está em vermelho e no lugar de data:userUrl cole o link do seu post, que você copiou na página Editar Postagens. Isso fará com que a imagem leve ao texto.

Para que o link Visualizar meu Perfil Completo leve ao post que você criou, procure mais abaixo o trecho:

<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if>

Novamente apague o que está em vermelho e no lugar de data:userUrl coloque o link do seu post. Para mudar a mensagem Visualizar meu perfil completo por qualquer outra chamada, apague o que está em verde e coloque no lugar outra frase/palavra.

Para alterar o estilo do gadget Perfil

Agora que alteramos a imagem e a direção do link do Perfil, podemos alterar também o estilo que ele apresenta. Para isso, procure no código o seguinte trecho do CSS:

/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $bordercolor;
}

.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}

.profile-datablock {
margin:.5em 0 .5em;
}

.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}

.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}

Em .profile-img podemos fazer todas as alterações na imagem do gadget, inclusive alterar o tamanho e a largura do mesmo. Antes de alterar o tamanho da imagem, certifique-se da largura da sua sidebar e de qualquer alteração em .sidebar .widget (se o seu template conter esta especificação). Como estou usando um template Mínima para meu exemplo, o que fiz foi alterar a largura de #outer-wrapper para 960px e a largura da sidebar para 280px, possibilitando os valores para a imagem, que coloquei como segue abaixo:

.profile-img {
float: $startSide;
margin: 13px;
padding: 2px;
width: 240px;
height: 220px;
border: 5px solid #9EAF65}

Em .profile-data eu posso fazer alterações no estilo para o meu nome e a localização informada no gadget (São Paulo, Brazil). Aqui você pode altarar o estilo e cor da fonte.

Em .profile-datablock está contida a imagem e o texto que a acompanha. Você pode determinar aqui uma cor ou imagem para o background, ou borda, por exemplo.

Em .profile-textblock acrescente os estilos para o texto que se apresenta, alterando a cor da fonte, tamanho, etc.

Em .profile-link você acrescenta os estilos para o link Visualizar meu perfil completo. Para ter mais liberdade de modificar os estilos para este link (como posicionar ao centro ou dentro de .profile-textblock, volte ao trecho que modificamos anteriormente:

<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if>

substitua todo este trecho por:

<div class="profile-link">
<a href="url do post com o perfil">Meu Perfil Completo</a></div>

Para colocar o link dentro da área de .profile block (pois se você acrescentar um background o link ficará fora dele), recorte este trecho e cole onde se apresenta:

<b:if cond='data:aboutme != ""'><dd class='profile-textblock'> <data:aboutme/></dd></b:if>

<div class='profile-link'><a href='http://templatebasic.blogspot.com/2009/06/quem-sou.html'>Meu Perfil Completo</a></div>

</dl>
</b:if>

No meu exemplo eu alterei todo o código desta maneira:

/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin: 13px;
padding: 2px;
width: 240px;
height: 220px;
border: 5px solid #DEDCC5}

.profile-data {
margin:0;
text-transform:capitalize;
letter-spacing:0;
font-size:13px;
color: #262B15;
font-weight: bold;
line-height: 1.6em;
text-align:center;
}

.profile-datablock {
margin:10px auto 10px;
background: #84875a;
border: 5px solid #DEDCC5

}

.profile-textblock {
margin: 0 0 0;
padding: 6px 10px;
line-height: 1.4em;
color: #F4F3EC
}

.profile-link {
font-size: 13px;
text-transform: capitalize;
text-align:center;
padding: 4px 0px;
letter-spacing: 0;
color: #fff;
}

.profile link a:link, .profile-link a:visited{color: #fff}
.profile link a:hover{color: #820000; text-decoration:none}

E o resultado foi este :

Uma outra idéia, usando um background fixo:

Agora é com a criatividade de cada um :)

No próximo tutorial explicarei como dar estilo ao gadget quando há mais de um autor no blog.

Links para o final de semana

2009-06-19T13:34:00.000-03:00

Todas as sextas-feiras o Links para o Fim de Semana trará indicações de textos, tutoriais, vídeos e sites interessantes, sobre diversos assuntos. Se você quiser colaborar com a lista, basta enviar sua sugestão através do formulário de contato.

Como criar uma pagina de abertura para o Blogger

2009-06-18T15:22:00.002-03:00

Muitas pessoas me perguntam como dar um estilo diferente para a primeira página do blog ou mesmo para fazer com que uma determinada postagem seja sempre a primeira a ser vista, como um texto fixo de apresentação e boas-vindas. Para fazer com que um texto fique fixo na primeira página do blog, publique-o normalmente, depois entre na página de edição do texto e programe uma data para o futuro, como mostra a a imagem abaixo:

Jogue a data para 2019 por exemplo e este sempre será o primeiro post visível em seu blog, encabeçando todos os outros que publicar. Para que apareça apenas este post na primeira página, vá em Configurações ->Formatação e programe para aparecer apenas uma postagem:

Para dar a primeira página um estilo diferente das páginas internas do blog, acrescente após a tag ]]></b:skin>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>

aqui os estilos para a primeira página

</style>
</b:if>

O que faço aqui é o uso de uma condicional (em negrito) que determina que o estilo se aplique apenas à Home do blog.

Vamos tomar por exemplo um Template Mínima do Blogger (faça sempre experiências com um blog de testes, nada de ir direto modificando seu blog oficial, ok?) que está neste blog de testes; note que a primeira página está com as cores modificadas, a largura de outer-wrapper é maior e eu inverti o posicionamento das colunas: passei a sidebar para a esquerda e a coluna do post para a direita. Clique no título do post para ver a página interna, onde aparece o template Mínima sem modificações.

Para isso eu acrescentei os seguintes códigos:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>

body{background: #111;}
#header-wrapper{width: 100%;height:120px; background: #303030; border:none;}
#header{border:none}
#outer-wrapper{width: 900px}
#main-wrapper{float: right; width: 600px;background: #f5f5f5}
#sidebar-wrapper{float: left; width: 280px; background: #303030}

body#layout #header-wrapper, body#layout #sidebar-wrapper, body#layout #main-wrapper{background: none}

</style>
</b:if>

o que está em negrito é o estilo para o painel Layout, pois se não especificarmos que não há background, as cores ou imagens escolhidas para a primeira página aparecerão alí também.

Este é apenas um exemplo bastante simples para que entendam como diferenciar a home das outras páginas do blog. Existem muitas possibilidades e aí é que entra a criatividade de cada um :)

É possível criar outros estilos para as diferentes páginas do seu blog e eu recomendo que leiam este post do Bloggersphera, onde tenho aprendido muito sobre o assunto.

15 sites com fontes gratuitas

2009-06-17T11:52:00.002-03:00

1- DaFont.com

2- UrbanFonts

3- AbstractFonts

4- 1001 Free Fonts

5- BetterFonts

6- SearchFreeFonts

7-FontCubes

8- Fonts500

9- Fontstock

10-2200 Free Fonts

11- Hight Fonts

12- Simply the Best Fonts

13- Fontica

14- Fontex

15- Font Squirrel

Outras 45 indicações de sites para baixar fontes gratuitas você encontra em Dottony

Patterns Photoshop

2009-06-16T16:21:00.002-03:00

O Twitter me serve muito bem para encontrar rapidamente links sobre assuntos que me interessam e foi através dele que cheguei ao site Web Design Ledge que mostra uma coletânea de patterns muito bonitas garimpadas no Deviantart

Retro Grunge (10 patterns)

ETC Grunge Stripes (12 patterns)

Grungy Floral Patterns (10 patterns)

Para ver mais, visite 100 New and Beautiful Seamless Patterns

Abaixo outras patterns que encontrei no Deviantart e que podem interessar:

Cutie Patterns

Metal Mesh Patterns - Pack 1

Ultimate Carbon Patterns Pack

Wood-01 Patterns

Floral Scrapbooking Patterns

Voltando...

2009-06-14T19:39:00.000-03:00

Andei sumida por uns dias e retorno com o blog de roupa nova, além de seis novos templates: Pet Shop, Astra, Isabela, Photografia, Beauty e Clinic. De quebra ainda aparei umas arestas dos templates Blue e Abril. Como podem ver, eu não estava de férias...

O template novo conta agora com espaço para publicidade além do Adsense. Se você tem interesse em anunciar aqui no blog, por favor entre em contato através do link... Contato :)

Peço desculpas por não ter respondido os comentários e emails nos últimos dias, me concentrei totalmente nas mudanças e na criação dos novos temas. Aos poucos responderei à todos.

Notei também que o formulário de comentários nem sempre aparece (coisas do Blogger), mas basta carregar novamente a página que ele retorna.

Espero que gostem das novidades.

Template Pet Shop

2009-06-14T19:13:00.004-03:00

Demo | Download

Menu horizontal: Para editar os links do menu basta clicar em editar no widget correspondente abaixo do cabeçalho, em Layout.
Colunas: Post e sidebar
Sidebar: dividida em 4 colunas: topo largo, colunas paralelas estreitas e coluna de base, também larga, mais destaques.
Destaques são widgets de imagens fixas que podem ser usadas para adicionar anúncios, chamadas para posts anteriores, etc. Basta clicar em editar no widget correspondente, trocar a imagem, legenda e título. As cores podem ser customizadas através do painel Fontes e Cores do Blogger.
Resumo automático de postagens com miniaturas das imagens utilizadas.
Emoticons (Smiles) nos comentários.

Template Clinic

2009-06-14T19:13:00.000-03:00

Demo | Download

Header: cabeçalho dividido em duas partes;
Colunas: Post mais sidebar dividida em 4 partes (topo largo, colunas paralelas estreitas, coluna de base larga);
Menu 1: Menu vertical que se apresenta apenas na página inicial;
Menu 2: Menu Horizontal que se apresenta apenas nas páginas internas;
Obs: Os links dos menus 1 e 2 não precisam ser necessariamente os mesmos!
Slide: slide de imagens com legendas;
Coluna denominada 'Perfil', para apresentação do autor/profissional (ou para a colocação de qualquer outro widget de preferência;
Coluna Adsense abaixo do cabeçalho;
Posts: resumos automáticos na página inicial com miniaturas das imagens utilizadas;
Artigos relacionados nas páginas internas.

Abaixo um mapa de como os widgets se apresentam na página 'Layout'.

No widget denominado Slide (ver imagem) clique em Editar e cole o seguinte código:

<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="url da imagem"/>
<span>texto-a-ser-exibido</span>
</li>

<li class="s3sliderImage">
<img src="url da imagem"/>
<span>texto-a-ser-exibido</span>
</li>

<li class="s3sliderImage">
<img src="url da imagem"/>
<span>texto-a-ser-exibido</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>

Tantas forem as imagens utilizadas no slide, o trecho entre <li class="s3sliderImage"> e </li> deve ser repetido.

Template Photografia

2009-06-14T19:12:00.001-03:00

Demo | Download

Diferente dos templates convencionais, o Template Photografia é próprio para blogs que priorizam a exibição de imagens. Sua página inicial, com altura definida, exibe um slide que toma toda a area do post, uma sidebar e um menu horizontal, fixo. As imagens do menu compoem o plano de fundo, por isso não podem ser eliminadas ou seu número diminuido: mesmo que você não edite 5 links, os 5 botões aparecerão.

Nas páginas internas o slide dá lugar ao post, com fundo claro:

Em uma página específica, denominada Portfolio, é possível adicionar miniaturas de imagens que se expandem com um clique, através do uso do Lightbox. Aqui o fundo da página é preto, para valorizar as imagens:

Por favor, leia as explicações antes de instalar o template:

Para adicionar os links no menu, clique em Editar no widget correspondente na página Layout:

Depois clique em editar em cada linha e faça as mudanças necessárias para cada link:

Para adicionar as imagens no slide, procure o seguinte trecho no código do template:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage'>
<img src='coloque aqui o url da imagem'/>
<span>texto-a-ser-exibido</span>
</li>

<li class='s3sliderImage'>
<img src='coloque aqui o url da imagem'/>
<span>texto-a-ser-exibido</span>
</li>

<li class='s3sliderImage'>
<img src='coloque aqui o url da imagem'/>
<span>texto-a-ser-exibido</span>
</li>

<li class='s3sliderImage'>
<img src='coloque aqui o url da imagem'/>
<span>texto-a-ser-exibido</span>
</li>

<li class='s3sliderImage'>
<img src='coloque aqui o url da imagem'/>
<span>texto-a-ser-exibido</span>
</li>

<div class='clear s3sliderImage'/>
</ul>
</div>
</b:if>

Para utilizar a página com o fundo escuro (para as imagens com Lightbox) crie um post com este exato título 'Portfolio' ou altere o título no seguinte código do template:

<b:if cond='data:blog.pageName == "Portfolio"'>

Substitua o que está em negrito pelo título que pretende dar ao post onde exibirá as miniaturas das imagens.

Para ativar o efeito Lightbox, hospede sua imagem fora do Blogger (se conseguirem através do Blogger tanto melhor, eu não consegui), copiem a url fornecida e coloquem neste código:

<a href="url da imagem" rel="lightbox"><img border="0" src="url da imagem" style="height: 110px; width: 110px;" /></a>

O efeito funcionará em qualquer página uma das páginas internas e de arquivos, bastando utilizar o código acima para inserir a imagem.

Para criar uma 'chamada' para os posts do blog, coloque no menu um link para um determinado post ou marcador, como fiz no meu exemplo (Demo).

Como a página inicial tem altura fixa, o ideal é apresentar apenas uma ou duas widgets na sidebar. Para apresentar um número maior de widgets na sidebar que apareçam apenas nas páginas internas, inclua o widget normalmente, depois vá em Editar HTML e clique em Expandir Modelo de Widget. Procure o widget pelo título (por exemplo "Marcadores') e acrescente o código em negrito:

<b:widget id='Label1' locked='false' title='Marcadores' type='Label'>
<b:includable id='main'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>

....código do widget......

<b:include name='quickedit'/>
</div>
</b:if>
</b:includable>
</b:widget>

O template utiliza diversos códigos javascripts que estão incluídos na pasta compactada, junto com as imagens e o código do template. Guarde todos os scripts e procure hospedá-los em algum site de confiança, evitando problemas futuros.

Template Beauty Blog

2009-06-14T19:11:00.006-03:00

Demo | Download

Contém:

Menu Horizontal
Posts automaticamente resumidos na página inicial com miniaturas das imagens utilizadas.
Coluna 'destaques' com widgets de imagens fixas: para editar, basta clicar em Editar no widget correspondente na página Layout, substituir a imagem, legenda e título, acrescentando a url de destino. No caso do meu exemplo, utilizei os destaques para chamadas de posts que não aparecem na primeira página.
Sidebar dividida em 4: coluna do topo larga, duas colunas paralelas estreitas e coluna de base larga.
Emoticons (Smiles) nos comentários

Template Astra

2009-06-14T19:11:00.005-03:00

Demo | Download

Template com duas colunas, menu horizontal e posts resumidos automaticamente na página inicial, com miniaturas das imagens utilizadas. Conta ainda com Emoticons (smiles) nos comentários.

Template Isabela

2009-06-14T19:11:00.000-03:00

Demo | Download

Template 3 colunas, menu horizontal e footer dividido em 3 colunas.

Menu com imagens e efeito hover

2009-05-29T15:20:00.001-03:00

Procurando uma maneira de criar um menu com imagens individuais (um ícone para cada item da lista) com efeito hover, lembrei de um menu vertical que vi no blog Vagabundia que apresenta este bonito efeito. O que fiz foi estudar o código fonte, entender seu funcionamento e pedir ao JMiur (muito obrigada, de novo!) permissão para publicar este tutorial, que me foi solicitado tantas vezes.

Para que vocês entendem do que se trata, antes de continuar lendo, visitem este blog de testes e passem o cursor do mouse sobre cada item do menu (vertical e horizontal). Quebrei muito a cabeça tentando encontrar uma maneira limpa e eficaz de criar este efeito (e tudo o que conseguia era uma gambiarra feia e confusa) até me deparar com algo tão simples e, por que não dizer, óbvio! A idéia é criar uma imagem só, com o ícone para o estado inicial do link e outro para o estado hover e usar a propriedade background-position para definir quando um e outro deve aparecer.

As medidas a seguir se baseiam no exemplo em meu blog de testes:

1-Crie imagens .gif com fundo transparent de tamanho 64px x 106px e posicione os ícones da maneira que se segue:

2-Faça uma imagem neste modelo para cada item do menu;
3-Hospede as imagens, copie a url de cada um e no CSS do código do template (acima de ]]></b:skin>) coloque este código que corresponde à cada link do menu:

a#m1, a#m1:link, a#m1:visited, a#m1:active {
background: transparent url(url da primeira imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m1:hover {background-position: left bottom;}

a#m2, a#m2:link, a#m2:visited, a#m2:active {
background: transparent url(url da segunda imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m2:hover {background-position: left bottom;}

a#m3, a#m3:link, a#m3:visited, a#m3:active {
background: transparent url(url da terceira imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m3:hover {background-position: left bottom;}

a#m4, a#m4:link, a#m4:visited, a#m4:active {
background: transparent url(url da quarta imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m4:hover {background-position: left bottom;}

a#m5, a#m5:link, a#m5:visited, a#m5:active {
background: transparent url(url da quinta imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m5:hover {background-position: left bottom;}

a#m6, a#m6:link, a#m6:visited, a#m6:active {
background: transparent url(url da sexta imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m6:hover {background-position: left bottom;}

Para tantos forem os itens do menu, acrescente o trecho:

a#m6, a#m6:link, a#m6:visited, a#m6:active {
background: transparent url(link da sexta imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m6:hover {background-position: left bottom;}

Note que atribuímos uma ID para os links que compõem o menu e que, nas palavras do mestre Maujor: id deve ser única, isto é, um e somente um elemento ou seletor deve estar identificado com determinada id. Por isso, ao acrescentar novos links à sua lista, você deve criar uma nova ID (nome), ou seja, à partir de #m6 deve se seguir #m7 ou qualquer outro nome que seja único e exclusivo.

Para que você entenda o que está fazendo (e não simplesmente copie e cole sem conseguir criar variações ao seu gosto), vejamos:

a#m1, a#m1:link, a#m1:visited, a#m1:active {
background: transparent url(link da primeira imagem) no-repeat left top;

display: block;

height: 54px;

width: 64px;

}
a#m1:hover {background-position: left bottom;}

em vermelho atribuimos um identificador ID para o elemento a (link), no caso #m1;
em background definimos que nos estados a:link, a:visited e a:active a imagem apareça no topo à esquerda. Como definimos uma altura e largura para a área 'clicável' (com height e width) impedimos que o restante da imagem apareça (lembre que a imagem original tem height:106px). Ou seja, o que excede a altura de 54px não aparecerá. Veja na imagem abaixo:

Para o estado hover a posição do background muda para left bottom (em laranja) e agora o que fica escondido é a parte superior da imagem, novamente limitada pela altura estabelecida para a área do link. Veja:

Um truque simples e genial que não sofre incompatibilidade de navegadores e não causa nenhuma dor de cabeça. Enfim, algo que não fui capaz de pensar :)

Agora, para criar um menu horizontal onde os links aparecerão, acrescente também no CSS:

#navigation{
height:50px; /*altura do menu*/
width: 600px; /*área total ocupada pelo menu*/
margin:0px auto; /*margin que centraliza o menu na tela*/
background: url(http://i41.tinypic.com/690sux.jpg) no-repeat top left; /*imagem de fundo do menu*/
}

#navigation ul{
width: 400px; /*largura da área ocupada pelos ícones*/
margin: 0px auto 0; /*centralizando os ícones*/
padding: 0 0 0;
}

#navigation li{
float:left;/*flutuação à esquerda garante que os ícones fiquem na horizontal*/
margin-top:4px; /*margens dos ícones*/
list-style-type:none;
}

Salve as modificações. Agora no HTML do código, e aqui você escolhe onde aparecerá seu menu, acrescente:

<div id='navigation'>
<ul>
<li><a href='Link do Blog/' id='m1' title='Home'> </a></li>

<li><a href='Link 01/' id='m2' target='_blank' title='Download'> </a></li>

<li><a href='Link 02/' id='m3' target='_blank' title='Vídeos'> </a></li>

<li><a href='Link 03/' id='m4' target='_blank' title='MP3'>
</a></li>

<li><a href='Link 04/' id='m5' target='_blank' title='Feed'>
</a></li>

<li><a href='Link 05/' id='m6' rel='nofollow' target='_blank' title='Contato'> </a></li>

</ul>
</div>

No caso do meu exemplo eu acrescentei o código dentro do cabeçalho, assim:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Menu Hover (Cabeçalho)' type='Header'/>
</b:section>

Aqui o código do menu

</div>

Mas você pode colocar acima ou abaixo de header,como queira. Para colocar verticalmente na sidebar, basta copiar o HTML à partir de <ul> até </ul> ,abrir um elemento de página HTML/JavaScript e colar o código.

Recapitulando:

crie uma ID para cada link da lista;
crie uma imagem com o dobro da altura determinada para a área de cada link, contendo as imagens para o estador inicial e hover do link.
acrescente os links em um menu

Espero que gostem e principalmente, que tenham compreendido o procedimento. Sei que muitas pessoas que entendem de CSS e HTML podem achar que me estendo demais nas explicações - pois para eles basta bater os olhos no código para perceber o funcionamento - mas este blog foi criado para ajudar o usuário comum do blogger que deseja apenas dar uma incrementada no visual de sua página, não sendo portanto, profundo conhecedor de CSS e HTML. Minha intenção também não é apenas distribuir códigos que podem facilmente ser copiados e colados. Quero mesmo que entendam o que estão fazendo para que possam criar livremente. E como também não sou profunda conhecedora de nada e me defino sempre apenas como alguém muito xereta :) agradeceria muito qualquer correção que possa ser feita à minha explicação.

Evite punições do Google criando conteúdo duplicado: não copiei este tutorial, indique!

Usando o Widget de Imagem para destaques no blog

2009-05-21T23:14:00.003-03:00

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 .widget-content{
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 != ""'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<b:if cond='data:link != ""'>

<a expr:href='data:link'>

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' 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 + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>

</b:if>

<br/>

<b:if cond='data:caption != ""'>

<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 != ""'>
<a expr:href='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' 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 + "_img"' 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.

Se deseja colocar este tutorial em seu blog, fique à vontade. Peço apenas que acrescente um link para cá e automaticamente o link do seu blog aparecerá abaixo deste post.

Efeito hover no cabeçalho, post e sidebar

2009-05-19T15:52:00.001-03:00

Mamanunes perguntava no Twitter dia desses, como dar um efeito hover no cabeçalho da página, utilizando imagens. Para que você possa compreender logo de cara do que trata este tutorial, acesse este link do meu blog de testes e passe o cursor do mouse sobre o cabeçalho, post e títulos da sidebar. Mas adianto que se você insiste em usar o IE6, não verá nada acontecer, isto por que o IE6 suporta a pseudo-class :hover apenas para links, o que não é o caso deste tutorial.

Aliás, li por aí que o IE6 não suporta a Internet e achei a definição excelente. Eu realmente não entendo por que uma pessoa insiste em usar um navegador tão ultrapassado. O navegador é apenas uma ferramenta e quando uma ferramenta se torna antiquada tratamos de substituí-la. Não é por que o IE6 veio instalado em seu computador que você é obrigado a usar. Procure fazer o download de qualquer outro navegador: Internet Explore 7, Internet Explore 8, Firefox, Opera, Chrome...o que for. Eu já não me preocupo em fazer nada parecer bem no IE6 e me parece um contra-senso gritar 'Morte ao IE6' e continuar perdendo horas e horas (e muitas vezes dias) para que este navegador possa interpretar o que naturalmente não compreende. Por que se continuarmos a fazer tudo parecer 'normal' no IE6 como vamos convencer as pessoas a abandoná-lo?

Mas, voltando...
Para dar este efeito no cabeçalho, primeiro vou ensinar como colocar uma imagem no topo que atravesse todo o layout, de ponta a ponta, em qualquer resolução. Crie sua imagem (eu usei esta: http://i44.tinypic.com/21l3os5.jpg), hospede em algum site (eu uso o TinyPic) copie o Direct Link for Layouts fornecido e coloque no seguinte trecho do código, como se apresenta em negrito:

body{
background: #212121 url(aqui o link da sua imagem) repeat-x top left;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
O valor #212121 representa a cor que se estende por toda a página, repeat-x faz com que a imagem se repita indefinidamente na horizontal e situar com top left garante que ela se repetirá a partir do topo à esquerda. Visualize a modificação e salve.
No exemplo que dou em meu blog de testes, eu retirei o cabeçalho para dar lugar a uma imagem onde se lê Título do Blog. Para retirar o cabeçalho, procure por este trecho (não precisa Expandir Modelo de Widget):

<b:widget id='Header1' locked='true' title='Efeito Hover (Cabeçalho)' type='Header'/>

substitua true por false e salve. Feita esta simples modificação você poderá mover o cabeçalho pela página, para a sidebar por exemplo, ou mesmo excluí-lo da página.
Depois de retirar o cabeçalho da página, crie uma imagem que deve aparecer no topo no estado 'normal' (no caso do meu exemplo, esta imagem: http://i43.tinypic.com/2vkian6.jpg, hospede como a anterior, copie o link e coloque neste trecho, como se apresenta:

#header-wrapper {
width:660px;
height:137px;
margin:0 auto 10px;
background: url(http://i43.tinypic.com/2vkian6.jpg) no-repeat top center;
}

*Observe que a minha imagem para título tem a mesma altura da imagem usada em background e eu estipulei esta altura em height:137px; Para que sua imagem não fique afastada do topo do layout, retire todas as margens e paddings que possam distanciá-las. No caso do template Mínima (que foi usado neste teste), retirei o padding:10px de #Outer-wrapper, coloquei margin: 0px para #header e retirei a navbar.

Agora crie a imagem que deve aparecer no cabeçalho no estado hover (quando passa o cursor sobre ele), hospede, copie o link e acrescente este trecho logo abaixo do anterior:

#header-wrapper:hover{
background: url(link da imagem hover) no-repeat top center;}

perceba que eu posicionei da mesma maneira as duas imagens, no estado normal e hover: no-repeat top center.
É apenas isto. O efeito será interpretado por todos os navegadores, menos o IE6 como já expliquei.
Para dar este efeito no post, fiz o seguinte:

.post {
margin:.5em 0 1.5em;
background: #000a09;
padding:2.0em 0 1.5em;
text-align:justify;
color: #ccc
}

.post:hover{
background: #000a09 url(http://i43.tinypic.com/4skx77.jpg) no-repeat top center;}

Basta acrescentar tudo o que está em negrito. No estado normal eu coloquei uma cor de fundo e no estado hover coloquei a cor mais a imagem que criei (com o fundo de mesma cor) e estipulei que ela não se repita e apareça no topo centralizada.

Para os títulos da sidebar.
No template Mínima não há especificações para o título da sidebar, por isso é preciso primeiro criá-las, desta maneira:

.sidebar h2{
margin: 0px;
padding: 15px 0px 5px;
text-align:center;
width: 260px;
height: 35px;
font-size: 18px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-1px;
border-bottom:1px dotted $bordercolor;}

Todas as especificações descritas podem e devem ser mudadas ao gosto de cada um, estou apenas mostrando o que usei no meu exemplo. Para o estado hover usei:

.sidebar h2:hover{
background: url(http://i39.tinypic.com/2isf4pj.jpg) no-repeat top center;color: #000;}

Observe que neste caso em particular eu não estabeleci nenhum background para os títulos no estado normal, aproveitei apenas a cor da página (que coloquei antes do link da imagem usada em body, lembra?). Neste caso a propriedade background aparece apenas no estado hover.

Se deseja colocar este tutorial em seu blog, fique à vontade. Peço apenas que acrescente um link para cá e automaticamente o link do seu blog aparecerá abaixo deste post.

Template Green

2009-05-14T15:42:00.012-03:00

Demo | Download

Template com uma sidebar e menu horizontal. Para editar os links do menu, basta clicar em Editar no retangulo Lista de Links.

Para editar as imagens do Anuncie Aqui basta clicar em editar no quadradinho correspondente (são 4 quadrados no total), adiconar a imagem (tamanho 125x125) e o link que desejar:

Se você não deseja usar esta configuração dos banners na sidebar, procure pelo trecho abaixo no código do template e retire-o:

<div id='patrocinio'>
<b:section class='patrocinio' id='patrocinio' preferred='yes'>
<b:widget id='Image6' locked='true' title='' type='Image'/>
<b:widget id='Image5' locked='true' title='' type='Image'/>
<b:widget id='Image4' locked='true' title='' type='Image'/>
<b:widget id='Image3' locked='true' title='' type='Image'/>
</b:section>
</div>

Se você deseja redistribuir este template, por favor não modifique o link para o download e considere acrescentar um link para este post, para que os leitores possam seguir as instruções.

Não retirar o créditos

Edit 18/05 - Havia um problema com o template que já foi arrumado e o link do download trocado. Para quem baixou antes desta data, para arrumar, procure no código do template os seguintes trechos e deixe os valores que estão em negrito:

#content-wrapper{
margin: 30px auto 10px;
padding-bottom: 50px;
width: 1024px;}

#main-wrapper {
width: 622px;
margin: 0px 0px 60px;
padding: 0 0 0;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 360px;
padding: 0 0 60px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Se deseja colocar este tutorial em seu blog, fique à vontade. Peço apenas que acrescente um link para cá e automaticamente o link do seu blog aparecerá abaixo deste post.

Links para a semana

2009-04-27T13:50:00.002-03:00

Olá pessoal, ainda estou viva :) Ando sumida por conta das inúmeras encomendas de templates e ajustes que chegam todos os dias. Trabalhar é sempre muito bom, mas toma bastante tempo e por isso tenho atualizado o blog (os blogs...) bem menos do que gostaria. Tenho visto muitas coisas interessantes por aí e vou deixar hoje alguns links legais para quem deseja dar uma turbinada no blog e para os que gostam de trabalhar com imagens.

Inspiração : layouts de outras plataformas para inspirar novos modelos.
40 modelos cleans do Wordpress
20 sites onde encontrar lindos modelos do Wordpress

Imagens
28 sites onde editar e brincar com imagens
100 (Legal) Sources for Free Stock Images (é imagem que não acaba mais mas não se esqueça de checar sempre os termos de uso!)
Free Background for Blogger

Ícones
Icons Etc

Posts Interessantes
El Scaparate - Efecto deslizante (slide) para entradas expandibles
Gem@ Blog - Footer - Imagen y color
Vagabundia - Las fuentes de texto y sus unidades
Bloggersphera - Adsense para team e outras utilizações
Leandro Ricardo.com - Lightbox no Blogger

Por hoje é isso, amanhã coloco mais links. Abraços!

Imagens Vetoriais Gratuitas

2009-04-17T12:59:00.001-03:00

Dez sites onde encontrar imagens vetoriais gratuitas:

1- Dezignus

2-Open Source Vector Art

3- QVectors

4- Vector Portal

5- 123Vectors

6- Uberpiglet

7- Vector Lady

8- Keep Designing

9- GomediaZine

10- BittBox

Template Abril

2009-04-16T01:43:00.004-03:00

Demo | Download

Template simples com menu horizontal e uma sidebar. Para editar os links do menu, crie uma lista de links em Elementos de Página e arraste para dentro do retangulo abaixo do cabeçalho.

Não é preciso configurar os links de feeds, porém, para ativar o serviço de enviar posts por e-mail, é preciso que você tenha queimado o feed do seu blog com o FeddBurner. Feito isso, clique no link do seu blog, na página inicial do FeedBurner, clique em Publicize - Email Subscriptions, ative o serviço e copie o código fornecido. Vá no HTML do código do template e procure pela sinalização:

!--Substitua o código abaixo pelo seu código Email Subscriptions do FeedBurner --

.......código.......

!--Fim do código do FeedBurner --

Apague todo o código entre os comentários e cole o código que você copiou.

FeedBurner:

Templates Novo Blogger

Sobre moderação nos comentários

Links para o final de semana

Problema com os ícones de edição rápida

Sobre problema nos comentários

Customizar o gadget Slide

Personalizando o gadget Perfil

Links para o final de semana

Como criar uma pagina de abertura para o Blogger

15 sites com fontes gratuitas

Patterns Photoshop

Voltando...

Template Pet Shop

Template Clinic

Template Photografia

Template Beauty Blog

Template Astra

Template Isabela

Menu com imagens e efeito hover

Usando o Widget de Imagem para destaques no blog

Efeito hover no cabeçalho, post e sidebar

Template Green

Artigos Relacionados no Blogger

Links para a semana

Imagens Vetoriais Gratuitas

Template Abril