Mostrando postagens com marcador Tutorial. Mostrar todas as postagens

Lista de Postagens Populares na Horizontal

Um dos novos widgets que eu mais gosto (e uso nos meus outros blogs) é o de Postagens Populares. É uma maneira interessante de atrair seus visitantes para outros textos que talvez não se apresentem na página inicial, além de mostrar os assuntos que mais agradam seus leitores. No entanto, por padrão, a lista aparece na vertical, limitando a possibilidade de mostrá-la em outras áreas do blog que não a sidebar, além de ocupar bastante espaço da coluna lateral, mesmo que se escolha poucos posts a serem mostrados.
Uma maneira que considerei interessante foi mostrar esta mesma lista na horizontal, dentro de alguma div que ocupe toda a largura da página, como a div #crosscol-wrapper (e neste caso, apareceria abaixo do cabeçalho, como neste blog).

Também é possível arrastar o widget para o Footer, por exemplo, e a apresentação dos Posts Populares ficaria no final da página

Tutorial para quem usa os Modelos de Layout(2006)

A primeira coisa que se deve fazer é se certificar da largura total de #outer-wrapper (a div que engloba todas as outras). Procure no CSS do seu template por #outer-wrapper e veja o valor que está em width. Se no seu template este valor for 100%, será preciso então definir um valor para #content-wrapper (a div que engloba #main-wrapper e #sidebar-wrapper). Se o valor de width em #outer-wrapper for algo como 980px, não será preciso definir #content-wrapper.

Para definir uma largura para content-wrapper, acrescente no CSS (imediatamente acima da tag ]]></b:skin> ):

#content-wrapper{margin: 0 auto; width: 990px}

o valor de width deve ser alterado conforme a largura que você desejar.

Tendo definido uma largura para content-wrapper, acrescente também este trecho (ainda acima da tag ]]></b:skin> ):

#crosscol-wrapper{margin: 0 auto; padding: 0px}
#PopularPosts1{width: 100%; margin: 0px auto; padding: 5px 0px} /*define que o widget ocupe 100% de largura */
#PopularPosts1 h2{font-size:18px;text-align:left; border-bottom: 1px dotted #fff} /*estilo para o título do widget */
.PopularPosts .widget-content{float:left;margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
.PopularPosts .widget-content ul {margin: 0px auto;padding: 0px 0px;width: 100%; list-style:none; } /* estilo para a lista de posts */
.PopularPosts .widget-content li {margin: 0px 6px 10px 6px;width: 182px;padding: 0px;height: 180px; overflow:hidden;list-style:none; float:left; border: 1px solid #fff;} /*estilo para cada item da lista. Altere os valores de width, height, border, etc, para que se encaixem na largura total. */
.item-content{font-size: 12px; text-align:left; padding: 5px 10px} /* estilo para o resumo do post */
.PopularPosts img{margin: 0px 0px;padding: 4px; background: #fff; float:right} /*estilo para a imagem */
.PopularPosts .item-title{line-height:1.3em} /* estilo para o titulo de cada post */

Salve a modificação. Em Elementos de Página, arraste o widget Postagens Populares para sob o cabeçalho (ao arrastar, deve aparecer um retângulo onde se deve encaixar o widget), ou para #footer.

Se você desejar, poderá também colocar no início ou final da coluna dos posts, mas deverá modificar as medidas para que se encaixem na largura da coluna. No meu exemplo, as medidas são ideais para #content-wrapper com width: 990px; mostrando cinco posts populares por 'linha'.

Se quiser mostrar os posts populares apenas na primeira página, vá em Editar HTML, clique em Expandir Modelo de Widget e encontre o widget PopularPosts expandido. É um código bastante extenso e a condicional (em vermelho) deve ser colocada logo após <b:includable id='main'> e seu fechamento logo antes de </b:includable> como mostrado abaixo:

<b:widget id='PopularPosts1' locked='false' title='Populares' type='PopularPosts'>
<b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
    <ul>
......... mais código .........

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

Para os que usam os Modelos de Designer

Para os que usam os novos modelos, fiz este teste mas é necessário fazer algumas aterações no HTML. Primeiro vá em Designer do Modelo => Avançado e em Adicionar CSS, acrescente os códigos passados acima (aqui, a única diferença será que você deve especificar uma medida exata de largura e altura para #crosscol-wrapper, como na imagem abaixo - clique para ampliar -):

Salve a modificação e vá em Editar HTML e procure por:

<div class='region-inner tabs-inner'>
      <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
      <b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
    </div>

E acrescente depois de </div>:

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

Salve as modificações e em Elementos de Página, arraste o widget Posts Populares para o espaço abaixo do cabeçalho.

Se quiser mostrar os posts populares apenas na primeira página, deixe desta maneira:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

</b:if>

Como sempre, acho muito mais fácil fazer do que explicar, por isso, se tiverem dúvidas, não hesitem em deixar nos comentários.

Leia Mais

Retirar marcadores dos posts

Algumas pessoas me perguntam como manter a lista de marcadores na sidebar sem que os mesmos apareçam nos finais das postagens.

Para isso, vá em Editar HTML, clique em Expandir Modelo de Widget, procure e apague todo o trecho abaixo:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>

Feito isso, clique em Visualizar e se tudo estiver ok, clique em Salvar.
A lista de Marcadores continuará aparecendo na coluna lateral (sidebar), porém, não mais aparecerá abaixo das postagens.

Leia Mais

Como colocar jogos em flash no blog

Disponibilizar jogos em flash na sua página do Blogger é bastante simples. Há casos em que um site oferece gratuitamente o arquivo swf para baixar e basta fazer o download do jogo e hospedar no Google Sites, como mostra este tutorial.
Em certos casos, porém, alguns sites de jogos permitem que os mesmos sejam publicados em outras páginas mas não disponibilizam links para download. Neste caso você deve usar o iWisoft Flash SWF, um software gratuito que permite copiar as animações em Flash (.swf) de qualquer página. Depois de instalado, abra o programa e cole a url da página onde se encontra o jogo, escolha a pasta de destino e clique em Download. Feito isso, hospede o arquivo do jogo no Google Sites como mostra o tutorial.

Sites como 123Bee e Mochimedia (é necessário fazer registro neste último) disponibilizam os jogos para download gratuitamente, dispensando o uso do iWisoft.

Depois de hospedar o jogo no Google Sites, abra uma postagem, clique em Editar HTML e cole o seguinte código:

<embed height="550px" name="plugin" src="aqui você colocará o link do jogo hospedado no google sites" type="application/x-shockwave-flash" width="720px"></embed>

No Google Sites, clique com o botão direito do mouse sobre download e copie o link:

O link será semelhante à esse:
https://sites.google.com/site/osmeusjogos73/jogos/temple-escape.swf?attredirects=0&d=1

O que você deve fazer é apagar toda a parte em vermelho, que vem depois de .swf. Feito isso, cole a url dentro do código mostrado acima, ficando assim:

<embed height="550px" name="plugin" src="https://sites.google.com/site/osmeusjogos73/jogos/temple-escape.swf" type="application/x-shockwave-flash" width="720px"></embed>

Height define a altura da tela do jogo e width a largura. Você pode mudar estes valores para que se encaixem na largura do seu post.

O resultado :

Leia Mais

Estilo para o link Leia Mais

Se você costuma usar o resumo nativo do Blogger através do botão Inserir Jump Break, saiba que você pode personalizar a apresentação do link, não só do texto, que pode ser modificado em Elementos de Página (clicando em Editar no quadrado que corresponde a coluna do post):

Você pode também alterar a localização do link, bem como adicionar background, borda e imagens. Para isso, acrescente o seguinte trecho ao código do seu template:

.jump-link{
float:right; // aqui estabeleço que o link aparecerá à direita
margin: 0px 15px 10px 0px; // distância do link para o topo, direita, esquerda e base
font-size:13px; // tamanho da fonte do link
text-indent: 19px; // o quanto o link se afasta ou recua da esquerda
font-weight:normal; // tipo de fonte
padding: 0px 0px; // espaçamento
background: url(link da imagem) no-repeat center left; // imagem/ícone que aparece à esquerda do link
}

.jump-link a, .jump-link a:visited{color:#0066CC; text-decoration: none; //cor do link em estado normal}

.jump-link a:hover{color:#0066CC; text-decoration: none; // cor do link em estado hover}

Retirei este exemplo do Template Mundo Verde e o resultado pode ser visto aqui.
Você pode optar por não usar um ícone mas criar um botão com bordas arredondadas com uma imagem de fundo, como uso aqui no TNB. Para isso, basta:

.jump-link{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 4px 6px;
float:right;
background: url(link da imagem do bg) repeat-x;}

O site CSS3 Generator vai te ajudar muito a gerar os códigos para bordas arredondadas, textos com sombras, sombras em botões entre outros.

Mas Ariane, eu uso nos meus templates aquele resumo automático de postagens. Como faço para personalizar o link?

Bem, o código que eu usei em diversos templates para gerar resumo automático ( e creio que seja o mesmo que a maioria usa ) tem a class #showlink (ou .showlink ) . Então basta dar estilo a esta class e tudo certo. Porém, o interessante é fixar este link no post resumido e não apenas dar um espaço entre o final do resumo e o link. Por exemplo, note o botão comprar neste template em que estou trabalhando:

Aqui usei o resumo automático e o botão comprar nada mais é que o #showlink personalizado. Para fixar ele no canto inferior direito, independente do conteúdo do resumo, é preciso primeiro determinar uma altura fixa para os resumos em .post (estilo para a página inicial apenas, usando a condicional <b:if cond='data:blog.pageType != &quot;item&quot;'> </b:if>), e acrescentar position: relative, assim:

<b:if cond='data:blog.pageType != "item"'>
<style>
.post {
position: relative;
height: 250px;
outros estilos....
}
</style>
</b:if>

em #showlink, position:absolute e determine as distâncias para o topo e para a esquerda, em relação ao post:

#showlink{
position: absolute;
top: 210px;
left: 200px;}

Isto vale para posicionar qualquer elemento. Determine position:relative na div principal (div1: post, header-wrapper, etc) e position:absolute no elemento que se pretende posicionar em relação a div1 (div2: #showlink, logo, etc).

É isso :)

Leia Mais

Como criar páginas no blog

Um dos novos recursos do Blogger é a possibilidade de criar páginas estáticas, ou seja, que estão fora da cronologia das publicações. Para criar páginas para o seu blog, é muito fácil. Vem comigo:

Primeiro clique em Postagem e depois em Editar Páginas:

Clique em Nova Página:

Escreva o título da página e o texto, normalmente, depois clique em Publicar Página:

Após clicar em Publicar você deverá escolher onde deseja exibir o gadget de páginas: na sidebar ou abaixo do cabeçalho:

No caso do seu template não possuir a div crosscol-wrapper (que fica abaixo do cabeçalho): Esta div se encontra presente nos templates originais do Blogger, mas muitos templates modificados não tem esta div, por isso pode aparecer esta outra página:

Basta clicar em Adicionar o gadget lista de páginas.

Então você determinará, na janela que se abre, a ordem dos links do menu, como mostra a imagem abaixo. Basta clicar em salvar e arrastar o gadget pelo layout, como qualquer outro gadget de sua página:

No meu exemplo, a lista aparece abaixo do cabeçalho:

Se o seu layout não possui a div crosscol-wrapper, é muito fácil de colocá-la. Copie o código abaixo:

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
</div>

Agora vá em Editar HTML e coloque o trecho do código que copiou abaixo de content-wrapper, como mostra a imagem e clique em Salvar:

;

Eu particularmente não vejo ainda muita utilidade nestas páginas mas também não posso afirmar que seja algo ruim;
Me parece que esta opção só está disponível através do Blogger in Draft;
Existe a possibilidade de dar um estilo diferente para as páginas, o que ensinarei num futuro tutorial.

No próximo post vou mostrar como dar estilo a este menu com os links para páginas.

Leia Mais

isFirstPost - Exemplo 2

Continuando o post anterior, explicarei aqui como deixar o seu blog como o Exemplo 2. Neste exemplo, os posts aparecem resumidos na página inicial e em formato de lista nos marcadores e arquivos (como uso aqui no meu blog). Além disso, usei jQuery no primeiro post, que esconde e revela parte do conteúdo sem sair da página.

Como lembrar nunca é demais, lá vai o conselho da titia: Nunca faça modificações diretamente no seu blog 'oficial'. Crie um blog de testes para isso, evitando desesperos e dores de cabeça.

Atenção: se você seguiu o tutorial anterior e colocou os códigos para o Exemplo 1, substitua tudo pelo que se segue:

1- Clique em Expandir Modelo de Widget, procure por <b:include data='post' name='post'/> e substitua por:

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>

<div id='first'>
<b:if cond='data:post.title'>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>

<p><data:post.body/></p>

<br/>
<span class='commentlink'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
</div>

<b:else/>

<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='post'/>
</b:if>

<b:else/>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<div id='first'>
<ul><li><a expr:href='data:post.url'><data:post.title/></a></li></ul>
</div></b:if></b:if></b:if>

<b:else/>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>

<div id='titulos'><ul><li>
<a expr:href='data:post.url'><data:post.title/></a></li></ul>
</div>

<b:else/>

<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

</b:if>

O que fiz aqui foi basicamente isso: Se a condição for o primeiro post na home page, o post aparecerá dentro da div First, exibindo título, texto e link para comentários, caso contrário, os posts aparecem normalmente nas páginas internas. E ainda, se for diferente das páginas internas e diferente da home page, o primeiro post deve aparecer em forma de lista ( <ul><li><a expr:href='data:post.url'><data:post.title/></a></li></ul> ). Se os posts não estiverem contidos em First (ou seja, todos os outros posts), também devem, nestas condições, aparecer em forma de lista (<div id='titulos'><ul><li>
<a expr:href='data:post.url'><data:post.title/></a></li></ul>
</div>) e fora de todas estas condições, os posts devem aparecer normalmente.

Provavelmente existe uma maneira mais simples e enxuta de organizar estas condições (e espero mesmo que sim!) mas confesso que passei muitas horas até conseguir organizar os códigos desta maneira e foi a única sequência lógica que realmente funcionou comigo. Prometo que assim que descobrir uma maneira mais simples ou direta de dispor as condicionais, volto aqui e explico para vocês.

Salve as modificações. Se você está começando agora, siga os passos do primeiro tutorial para ver como aplicar o hack de resumos automáticos e esconder as informações de post-footer e data dos resumos, além do estilo para os resumos da página inicial. Lembre-se de modificar as medidas para que acompanhem a largura do primeiro post.

Se você já seguiu anteriormente o primeiro tutorial, a diferença aqui é que os estilos para First (tanto na página inicial quanto nas listas) serão colocados abaixo da tag ]]></b:skin>, dentro de uma condicional:

Estilo para First em forma de lista:

<style>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
#first{margin:6px 0px;background:#fff;padding:6px;border:1px solid #e3e2e3; clear:both;}
#first ul{margin:0px;list-style-type:none;background:#eeeded;padding:3px;}
#first li{background: #fff;padding:15px 0px 3px 40px;font-weight:bold}
</b:if></b:if></style>

<style>

Aqui estilo para First na home page:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
#first{ /* altere os estilos da forma que achar melhor */
float: left;
margin: 0px 0px 10px 5px;
width: 580px;
text-align:justify;
padding:0px 12px 12px;
font-size: 14px;
line-height: 1.4em;
font-family: 'Trebuchet MS';
color: #3b3b3b;
border-top: 1px solid #E9E9E9;
border-left: 1px solid #E9E9E9;
border-right: 2px solid #E9E9E9;
border-bottom: 2px solid #E9E9E9;
background: #f8f8f8
}
#first h1 {margin: 10px 0 0 0; padding: 3px 20px 6px 20px;font-size: 24px;font-family: Verdana;color:#fff;border-bottom:1px dotted #aeb4af} /* estilo para o título */

#first h1 a{margin: 0px auto; padding: 0px;font-size: 24px;font-family: 'Palatino Linotype';font-weight:normal;color:#e71ea7;letter-spacing:1px; } /* estilo para o título */

#first img{margin: 0 5px 5px 0px;padding: 5px; background: #fff; border: 1px solid #dfc8d1; float:left;width: 150px;height:180px; } /* estilo para as imagens em first-post */
#first .commentlink{float:right} /* estilo para o link de comentários */

#first .date-header{float:right} /* estilo para a data */

</b:if></style>

Agora acima de ]]></b:skin> os estilos para a div 'títulos' que apresenta os outros posts em forma de lista nos arquivos e marcadores:

#titulos{margin:10px 0px 6px;background:#fff;padding:6px;border:1px solid #e3e2e3} /* estilo para a div */
#titulos ul{margin:0px;list-style-type:none;background:#eeeded;padding:3px;} /* estilo para a lista */
#titulos li{background: #fff;padding:15px 0px 3px 40px;font-weight:bold} /* estilo para os itens da lista */

Para ver o resultado, entre neste blog e clique em algum marcador ou no mês de julho dos arquivos.

Para colocar o efeito de revelar/esconder no primeiro post, siga este tutorial no Empório Digital. O efeito também aparecerá nos posts internos, não apenas na página inicial.

O exemplo 3 dispensa um novo tutorial, pois a diferença está apenas na medida dos posts resumidos, que ocupa toda a largura da coluna, ao contrário do exemplo dois, onde cada resumo ocupa metade da medida, ficando dispostos lado a lado.

Leia Mais

Customizar o gadget Slide

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.

Há novidades sobre este assunto! Por favor, leia também: Customizar gadget slide II

Leia Mais

Personalizando o gadget Perfil

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.

Leia Mais

Como criar uma pagina de abertura para o Blogger

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.

Leia Mais

Menu com imagens e efeito hover

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!

Leia Mais

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 != ""'>

<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.

Leia Mais

Efeito hover no cabeçalho, post e sidebar

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), coloque-a em um post do Blogger (depois salve como rascunho), copie o link da imagem clicando na aba Editar HTML (no editor de postagens) 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', hospede como a anterior, copie o link e coloque neste trecho, como se apresenta:

#header-wrapper {
width:660px;
height:170px;
margin:0 auto 10px;
background: url(url da imagem aqui) 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:170px; 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(url 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(url da imagem) 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 10px;
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(url da imagem) no-repeat top left;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.

Leia Mais

Resumo na página inicial com posts de cores diferentes

O título é grande mas o procedimento é até simples. O resultado é este: Post 01

Antes de tudo, vai o conselho amigo da titia:

Não faça experiências com seu blog oficial! Crie um blog de testes, coloque nele uns quatro posts Lorem Ipsum (uma encheção de linguiça que soa latim), uma imagem em cada post (acima dos textos) e brinque à vontade.

Primeiro vamos mudar as medidas do template (use o Mínima). Procure por #Outer-wrapper e mude o width para: 990px; Mude #header-wrapper width:100%.Mude ainda #main-wrapper width: 700px;

Agora vamos ao hack que alterna as cores/background dos posts. Este hack foi criado por JMiur e é uma variação do hack que faz uma contagem dos comentários.Procure por este trecho do código e insira o que está em vermelho:

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<data:post.body/>
<div style='clear: both;'/> 
</div>

Coloque acima de </head> o script:

<script type='text/javascript'>
//<![CDATA[
function ContarP(cual) {
var resto;
resto = contadorPosts % 2;
if (resto == 0)
document.getElementById(cual).className='entradaPar';
else
document.getElementById(cual).className='entradaImpar';
}
//]]>
</script>

e também o estilo para os posts:

<style>
.entradaImpar {background-color: #FFF; padding: 10px;}
.entradaPar {background-color: #000; padding: 10px;}
</style>

Procure por este trecho do código:

<b:loop values='data:posts' var='post'>

e cole ACIMA dele:

<script type='text/javascript'>var contadorPosts=0;</script> 

acrescente ainda os trechos em vermelho entre os seguintes códigos:

<b:loop values='data:posts' var='post'>
.......
<b:if cond='data:blog.pageType != "item"'>

<script type='text/javascript'>
contadorPosts=contadorPosts+1;
ContarP('post-<data:post.id/>');
</script>
</b:if>
</b:loop>
.......
</b:includable>

Quem quiser conferir no original, o post é esse: Jugando con los posts.

Visualize: se os posts aparecerem em cores diferentes (branco e preto), você fez tudo corretamente. Salve.
Bem, agora vá até o blog da Rô e leia este post onde ela ensina a colocar um hack de resumo automático de posts, com miniaturas das imagens utilizadas. Eu realmente adorei este hack e foi o mesmo que usei no Clean Magazine. Para hospedar o script, a própria Rô mostra alternativas e dentre elas, estou usando o Dropbox e até agora não tenho do que me queixar.

Só para constar, no hack para o resumo dos posts, no meu exemplo, usei estes valores:
summary_noimg = 450;
summary_img = 400;

Não se esqueça: quando colocar o hack para resumo dos posts, mantenha a configuração para os posts pares e ímpares, que passei acima:
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>

Muito bem, depois de instalar o resumo automático, vamos dar estilo aos posts.O trecho que nos interessa para determinar as cores e/ou imagens que usaremos, é este:

<style>
.entradaImpar {background-color: #FFF; padding: 10px;}
.entradaPar {background-color: #000; padding: 10px;}
</style>

No meu exemplo, criei duas imagens de tamanho 700x190px, hospedei no TinyPic e deixei assim o código:

.entradaImpar {height:190px;background: url(http://i41.tinypic.com/2im64m.jpg) no-repeat top left; padding: 20px 35px;}
.entradaPar {height:190px;background: url(http://i40.tinypic.com/1z1rcqh.jpg) no-repeat top left; padding: 20px 35px;}

Note que além de acrescentar o link das imagens, estabeleci uma altura fixa para os resumos (height:190px) e um afastamento do texto para a borda da imagem de 20px para o topo e base e 35px para as laterais.

Mas podemos ir além disso. Podemos acrescentar outros estilos para os nossos resumos e para tanto é preciso acrescentar o seguinte código em vermelho:

<b:if cond='data:blog.pageType != "item"'>
<style>
.entradaImpar {background-color: #FFF; padding: 10px;}
.entradaPar {background-color: #000; padding: 10px;}
</style>
</b:if>

Tudo o que for colocado entre as linhas em vermelho aparecera apenas na página inicial, não afetando em nada as páginas individuais. Sendo assim, deixei o meu código desta maneira:

<b:if cond='data:blog.pageType != "item"'>
<style>
.entradaImpar {height:190px;background: url(http://i41.tinypic.com/2im64m.jpg) no-repeat top left; padding: 20px 35px;}
.entradaPar {height:190px;background: url(http://i40.tinypic.com/1z1rcqh.jpg) no-repeat top left; padding: 20px 35px;}
.post-footer{display:none}
.post{margin: 0 auto; padding: 0; text-align:justify}
h2.date-header {display:none}
</style>
</b:if>

Em roxo: determinei que todo o conteúdo de footer não apareça na página inicial;
Em verde: eliminei o estilo para margin e padding que existe no template Mínima para os posts, aproximando-os e eliminando a borda da base. Justifiquei o texto;
Em azul: determinei que a data não apareça na página inicial.

Para terminar, eu queria que o título do blog ficasse dentro da moldura que criei para os posts e não fora dela, como naturalmente deve ficar. Para alterar a posição do título, procure este trecho:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

E desloque ele para baixo de :

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>

Lembre-se:

Estas modificações afetarão apenas a página inicial. Para criar estilos para as páginas individuais, é preciso modificar os códigos .post e .post-body do Mínima.

Quando for acrescentar o hack para resumos automáticos, não se esqueça de manter o hack para posts pares e ímpares, que passei primeiro. O código completo, com os dois hacks, e o deslocamento do título, deve ficar assim:

<div class='post-header-line-1'/>
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span id='showlink'><a expr:href='data:post.url'> [ ... ]</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<div style='clear: both;'/> 
</div>

No próximo artigo trarei novas sugestões para personalizar os posts.

Leia Mais

Mais menus horizontais

Hoje o Carlinhos me perguntou no Twitter como colocar no blog os menus que aparecem nesta página. Como é impossível explicar em 140 caracteres, vou responder aqui no blog:

Primeiro faça o download do pacote que contém as imagens e códigos para os 4 menus: download.
Copie o código CSS (ver abaixo) para o menu escolhido: Blue, Green, Red ou Purple e cole em qualquer lugar antes de ]]></b:skin>

Hospede as duas imagens que são pedidas para cada menu. Por exemplo, se você escolheu o Red, hospede redslate_background e redslate_backgroundOVER e coloque assim no código:

.red #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(aqui o link da primeira imagem/code/slate/images/redslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.red #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.red #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.red #slatenav ul li a{display:block;float:left;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.red #slatenav ul li a:hover,.red #slatenav ul li a.current{color:#fff;background:transparent url(aqui o link da segunda imagem/code/slate/images/redslate_backgroundOVER.gif) no-repeat top center;}

Não mude nada entre os parenteses, apenas acrescente o link das imagens, como indicado.

Agora copie o trecho do HTML do código do menu :

<div class='red'>
<div id='slatenav'>
<ul>
<li><a class='current' href='http://seu link aqui' title=''>Home</a></li>
<li><a href='http://seu link aqui' title=''>About Us</a></li>
<li><a href='http://seu link aqui' title=''>Services</a></li>
<li><a href='http://seu link aqui' title=''>Our Work</a></li>
<li><a href='http://seu link aqui' title=''>Contact Us</a></li>
</ul>
</div>
</div>

e cole abaixo ou acima de:

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

O meu ficou assim.

Espero ter ajudado.

Leia Mais

Colocando um slide no blog

Esta dica encontrei no Gem@ Blog e achei sensacional: como criar um slide para o seu blog usando jQuery. Você pode ver o efeito neste blog de testes da Gema. Bonito, não? E você verá que é muito fácil colocar um slide assim no seu blog.

Antes de tudo é preciso que você encontre um local para hospedar os scripts que serão utilizados. Eu recomendo o Dropbox, que estou utilizando para guardar todos os scripts que uso. Siga o tutorial da Rô e crie sua conta. Feito isto, faça o download dos scripts utilizados para conseguir o efeito:

jQuery.js
s3Slider.js

(basta clicar nos links que o download é feito automaticamente)

Hospede os scripts e copie os urls oferecidas. Vá no código do seu template e antes de </head> cole o seguinte código:

<script src='url-do-arquivo-jquery.js' type='text/javascript'/>
<script src='url-do-arquivo-s3Slider.js' type='text/javascript'/>

Logo abaixo, acrescente este código:

<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>

Alterando o valor em timeOut (negrito) você pode mudar o tempo de transição das imagens.

Salve as modificações. Agora, antes de ]]></b:skin> acrescente o estilo para o slide:

/* s3slider
----------------------------------------------- */
#s3slider {
width: 720px; /* largura total do slide*/
height: 300px; /* altura total do slide*/
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
width: 720px; /* importante que as imagens devem ter a mesma largura ou mais */
position: absolute; /* important */
top: 0; /* important */
padding: 0px;
margin-left: 0; /* important */
}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}
.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 15px/20px Arial, Helvetica, sans-serif;
padding: 30px 13px;
width: 720px;
background-color: #000; /*cor de fundo do slide*/
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
bottom: 0;
/*
Nesta última linha em negrito, determina se a caixa de texto aparecerá na parte superior ou inferior das imagens
top: 0; -> a caixa de texto aparecerá na parte superior
si ponemos
bottom: 0; -> a caixa de texto aparecerá na parte inferior
*/
}
.clear {
clear: both;
}

Salve as modificações. Agora você deve posicionar o slide no blog com o código html. Um bom local é a div crosscol, que fica logo abaixo do cabeçalho. Certifique-se de que ela está visível para acrescentar o código, procurando por este trecho (não é preciso expandir modelo de widget):

<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

Em showaddelement deve estar yes . Se o seu template não contiver este trecho, basta acrescentar, abaixo de <div id='content-wrapper'>

Salve a modificação e vá para a aba Layout. Acrescente o seguinte código em crosscol (abaixo do cabeçalho):

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

Para tantas forem as imagens a serem exibidas, repita o trecho :

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

Se você desejar transformar os textos em links, basta colocar:
<span><a href='http://url do post'>Texto da legenda</a></span>

Se você deseja que o slide apareça apenas na página inicial (Home) coloque o código acima entre:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
código
</b:if>

Como muitas pessoas tiveram dificuldades em encontrar hospedagem para os scripts, disponibilizo o código pronto para colocar dentro do template. Faça o download deste arquivo, abra-o com o bloco de notas, copie tudo e coloque acima da tag </head>
É um código enorme mesmo mas vale à pena, pois você não terá mais problemas com a hospedagem dos scripts. Mas atenção, neste arquivo estão apenas os scripts, não deixe de acrescentar o estilo para o slide nem o código html.

Leia Mais

Templates Novo Blogger

Quem sou eu

Marcadores

Recomendo (Metablogs)

Seguidores

Miscelanea

Lista de Postagens Populares na Horizontal

Retirar marcadores dos posts

Como colocar jogos em flash no blog

Estilo para o link Leia Mais

Como criar páginas no blog

isFirstPost - Exemplo 2

Customizar o gadget Slide

Personalizando o gadget Perfil

Como criar uma pagina de abertura para o Blogger

Menu com imagens e efeito hover

Usando o Widget de Imagem para destaques no blog

Efeito hover no cabeçalho, post e sidebar

Artigos Relacionados no Blogger

Resumo na página inicial com posts de cores diferentes

Mais menus horizontais

Colocando um slide no blog