Inserindo banner ou Adsense sob o cabeçalho

Uma maneira de inserir banners e outros elementos de página centralizados sob o cabeçalho facilmente é procurar no código do seu template (não é preciso Expandir Modelo de Widget) este trecho:

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

onde está no substitua por yes e salve. Vá em Modelo/Layout e já poderá visualizar o espaço apropriado sob o cabeçalho para inserir elementos de página.

Nota1: Esta DIV pode ser encontrada em todos os templates originais do Blogger. Templates modificados podem não conter esta DIV

Nota2: Esta DIV pode ser personalizada no CSS assim:

#crosscol-wrapper{
width: estabeleça aqui a largura;
height: estabeleça uma altura, se desejar;
background: estabeleça cor ou imagem de fundo;
padding: estabeleça distância das margens;}

Nota3: esta DIV sempre acompanhará a largura total de Outer-Wrapper se nenhum valor em width for estabelecido.

É excelente para centralizar facilmente, links de anúncios do Adsense sob o cabeçalho.

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.

Read More

Hack para menu suspenso

Mais um que encontrei no Hackosphere; como transformar os Marcadores num menu suspenso. Para fazer esta mudança, será necessário mexer no código do template, por isso meus queridos, sempre, sempre antes de qualquer modificação, salvem uma cópia de seus templates ou testem antes, em blogs sem conteúdo. Visualizem várias vezes para se certificar de que está tudo ok no template, que não desapareceu nada e só então, salvem as modificações!

Para transformar a lista de Marcadores em um menu suspenso, (óbviamente você deverá primeiro já ter uma lista de Marcadores ativos em seu blog), vá no HTML do seu template, clique em Expandir Modelo de Widget e procure por este trecho do código (utilizem o ctrl+F para facilitar):

<ul>
<b:loop values="'data:labels'" var="'label'">
<li>
<b:if cond="'data:blog.url">
<data:label.name/>
<b:else/>
<a href="'data:label.url'"><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

e substitua todo ele por:

<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Selecione um marcador</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

Vizualize e estiver do mesmo jeito que ficou meus marcadores aí na Sidebar, salve.

Então, como sou muito xereta, pensei em usar o mesmo hack para lista de links... Às vezes temos listas enormes na sidebar, sejam de parceiros, sejam de amigos, e que acabam ocupando um espaço quilometrico. Pensei que seria muito interessante usar este mesmo recurso para listas de links e como não encontrei nada a respeito no Hackosphere, fiz umas modificações, uns testes e deu certo. Então, para transformar uma lista de links em um menu suspenso, procure por este trecho:

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>

<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>


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

Substitua o que está em vermelho por:

<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a label</option>
<b:loop values='data:links' var='link'>
<option expr:value='data:link.target'><data:link.name/>
</option>
</b:loop>
</select>

Visualize e se a lista de links tiver se tornado um menu suspenso, salve. Onde está Select a label você poderá colocar o título que quiser.

É isso.

Read More

Links para o fim de semana II

Vou deixar alguns links voltados para quem deseja mudar o visual do blog. São sites e ferramentas que ajudam na hora de compor o layout ou editar imagens

Imagens Free

Na maioria dos casos as imagens são free para páginas pessoais mas recomendo dar uma checada no tipo de licença da imagem escolhida.

Stock.xchng
OpenPhoto
NationsIlustrated
Stockvault

Fontes

Fawnt
dafont

Geradores

LoonaPix
Image reflection generator
Genfavicon
Stripe Generator
3D-box maker
RoundedCornr - bordas arredondadas

Menus

CSS Menu Generator
Navigation Tab Menu


E por fim, totalmente fora do contexto mas deliciosamente digerível, principalmente para titios e titias (como eu!) indico este este post do Inagaki relembrando 8 clips do rock nacional da década de 80.

Só para que conste: 'Timidez' também foi o hino das minhas desventuras românticas adolescêntes

Bom final de semana à todos e comportem-se (pero no mucho)!

Read More

Melhorando a apresentação dos marcadores e arquivos

Essa eu ví no Hachosphere e achei muito interessante. Quando se clica em um Marcador ou mesmo em um determinado mês do arquivo, por padrão o blogger mostra todas as postagens relacionadas ao mesmo, o que não é muito interessante, principalmente se você tem umas 200 postagens vinculadas à um determinado marcador ou escreve muitos posts mensalmente. Pelo menos 20 postagens aparecerão na página principal, o que carrega demais a página e não garante que seu leitor realmente encontre de pronto o que procura.

Com este hack é possível exibir uma lista com o nome de todas as postagens relacionadas ao marcador/mês do arquivo solicitado. Eu já estou usando aqui no Templates e gostei bastante (clique em um marcador para ter uma idéia), só pretendo melhorar a apresentação da lista.

Enfim, sem mais delongas: Clique em Editar HTML e em Expandir Modelo de Widget e procure por este trecho do seu código:

<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/> </h2>
</b:if>

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

Substitua o que está em vermelho por:

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Visualize (na verdade não deve aparecer nenhuma mudança no seu template, ok?) e se estiver tudo em ordem, salve. Para testar, clique em um dos seus marcadores ou mês do arquivo. A lista com o nome dos artigos relacionados deve aparecer na coluna das postagens.

É isso!

Read More

Cinco perguntas para Nospheratt

Desta vez quem responde às Cinco Perguntas é a brasileira Nospheratt, radicada em Montevidéu, autora de diversos blogs, dentre eles o Blosque ( anteriormente Blogando por Dinheiro), provavelmente o mais relevante de todos para quem busca dicas de otimização e monetização de blogs.

Nospheratt se define em seu blog desta maneira:

Sou mulher por nascimento e vocação, irônica por diversão e hobby, brasileira inveterada, filosofa nas horas mais impróprias, blogueira de profissão, escritora e poeta pela pura necessidade de expressar seus oceanos interiores.

Quero agradecer à Nospheratt a gentileza de sua participação e salientar que se eu já conhecia uma blogueira com textos muito interessantes, pude conhecer também, através de breves contatos por e-mail, uma mulher prestativa, educada e inteligente. Obrigada.

As respostas:


1- A facilidade de se expor através de uma ferramenta simples e gratuita como um blog motiva milhares de pessoas em todo o mundo a criarem sua própria página na web. Você acredita que existem muitos blogueiros e poucos leitores?

Se com "leitores" você se refere à pessoas que só lêem, mas não escrevem blogs, acho que sim. Claro que existe uma grande massa de leitores (que não escrevem blogs) fora da blogosfera; mas dentro dela, os blogs são lidos basicamente por outros blogueiros. Todo blogueiro é leitor de outros blogs,e a maioria dos leitores de blogs são blogueiros.

Uma das grandes questões da blogosfera, nos dias de hoje, é: como atrair essa massa de leitores de fora da blogosfera. Não porque seja negativo que hajam tantos blogueiros lendo e ao mesmo tempo escrevendo blogs (quero deixar claro que não vejo nada de errado nisso), mas porque somos poucos (relativamente falando). Precisamos de mais leitores, para crescer. E isso inevitavelmente nos leva à busca de pessoas que não têm blogs.

2- Baseada em sua experiência pessoal, o que um blogueiro iniciante pode esperar ao trilhar um caminho que visa obter grande popularidade para o blog que criou?

Depende. De que tipo de popularidade estamos falando? Por exemplo, uma coisa é ser popular dentro da blogosfera, entre seus pares; e outra coisa é ser popular fora dela. Popularidade = muitas visitas, ou popularidade = reconhecimento e fama?

Essas coisas são relativas, o que torna impossível dar respostas absolutas. O que eu posso garantir, é que independentemente dos objetivos específicos de cada blogueiro, alcançar qualquer tipo de popularidade é difícil. Requer trabalho, dedicação, aprendizado, tempo. Você terá que trabalhar de forma diferente, e aprender coisas diferentes, segundo qual seja sua linha de ação e seu objetivo; mas ninguém vai ficar popular do dia para a noite, ou em um mês de blog.

A não ser que você tenha uma idéia brilhante, realmente original e que atraia uma grande quantidade de público, prepare-se para trabalhar ao menos um ano antes de alcançar seus objetivos. O prazo médio, na minha opinião, para que um blog dê frutos - seja em visitação, reconhecimento, dinheiro, etc; - são dois anos.

3- O conceito de sucesso é algo muito subjetivo, no entanto, no que concerne ao campo das publicações - seja de que tipo for - sucesso é igual a milhares de leitores. Assim, obviamente, todo aquele que cria um blog associa o sucesso do mesmo à popularidade. Na sua opinião o que é fundamental para se obter este sucesso e qual seria o maior erro que um blogueiro iniciante poderia cometer?

O fundamental é criar conteúdo que as pessoas queiram consumir. Não há escapatória disto. Existe uma miríade de outros fatores que podem ajudar ou atrapalhar a consecução do sucesso, mas se ninguém (ou muito pouca gente) está interessado no seu conteúdo, você nunca terá milhares de leitores.

O maior erro? Achar que basta produzir (ou copiar) conteúdo e publicar, para alcançar o sucesso. Na maioria dos casos, nem sequer produzir conteúdo de qualidade é suficiente. Você pode escrever um excelente blog, o melhor de todos, sobre poesia alemã do século XII - quanta gente vai querer ler sobre isso? Sem dúvida devem existir interessados, mas em número reduzido. Então, apesar da primeiríssima qualidade do seu blog, você estará limitado a um número reduzido de leitores.

4-Ao entrar pela primeira vez em um blog, que tipo de coisa geralmente lhe causa boa e má impressão?

Primeiro que nada, o layout. Fundo preto e/ou difícil de ler, gifs coloridos e piscantes, anúncios em flash, texto amontoado em colunas estreitas demais são péssimos, fecho na hora e não volto nunca mais. O layout não precisa ser uma obra de arte, mas tem que permitir a leitura sem forçar os olhos.

Se o layout é no mínimo legível de forma cômoda, passo ao conteúdo. Português péssimo, cheio de typos e abreviações de SMS, ou miguxês, também me levam embora imediatamente. Se o conteúdo é bacana, interessante, vou dar uma passeada pelo blog, ler outros posts.

E aí entra em cena a navegação. Se for muito difícil de achar o que desejo, ou a página demora uma vida para carregar, provavelmente irei embora - a não ser que o conteúdo seja tão bom que valha à pena o sacrifício. Geralmente não é. Quem produz bom conteúdo, costuma se preocupar com todos os aspectos do blog, incluindo a usabilidade.

Outros pontos negativos: ausência de "About" (é chato não poder saber quem escreve o blog) e de RSS, dificuldade para comentar. Coisas absolutamente horrendas, que deveriam ser banidas da face da terra: música tocando ao entrar no blog, pop-ups de qualquer tipo, anúncios que flutuam sobre o conteúdo.

5 - Blogs existem aos milhares, no mais variados gêneros e estilos. A fim de orientar o blogueiro iniciante (sem o intuito de se criar totens e modelos a serem copiados), você poderia indicar blogs que considera referência de sucesso nas seguintes categorias:

Humor - Verdade Absoluta - Diário da Morróida
Pessoal - Mme.Mean - Drops da Fal
Jornalístico - Não leio nenhum blog jornalístico
Variedades - O Fim da Várzea - Papo de Homem
Artes - Alessandro Martins - Pensar Enlouquece, Pense Nisso
Tecnologia - Digital Drops - Meio Bit
Metablogs - BrPoint - Quero ter um blog

Para encerrar, se possível, deixe uma frase que considere interessante.

Frase de Pablo Picasso, que acho que tem tudo a ver com as perguntas sobre sucesso:

"Nossos objetivos só podem ser alcançados através do veículo de um plano, no qual devemos crer fervorosamente, e sobre o qual devemos agir vigorosamente. Não há outro caminho rumo ao sucesso."

Read More

Links para o fim de semana I

A partir de hoje vou publicar, todas às sextas-feiras links que ví durante a semana e que recomendo.

CriaRecria - Duas Colunas, Duas Formatações - A Rô, que a cada dia me ensina muitas coisas interessantes com suas postagens, mostra neste tutorial a possibilidade de deixar uma sidebar diferente da outra (claro, se você já tiver duas colunas no seu template). Muito bem explicado e fácil de fazer.

A Dr. Juliana pergunta: Blogar dá Insônia?

O Usuário Compulsivo, estreando como webdesigner, lança o seu Template Compulsivo, que ficou muito interessante e cheio de recursos já inclusos, como backlinks personalizados e comentários do autor com destaque. E mais, o Compulsivo também criou o grupo BlogspotBrasil, onde é possível trocar informações, tirar dúvidas e dar opiniões livremente. Só vale para quem usa o Blogspot, claro.

O Recognized Expert está com dezenas de vídeo-aulas sobre o novo blogger. Nestes vídeos é possível aprender a usar todos os recursos do Blogger, além de dicas de customização do template. Todas as narrações são em inglês mas é aquela história: uma imagem vale por mil palavras.

...e o Compulsivo também me enviou um link esta semana que gostei muito e repasso para vocês: Paris, Pinheiros. É prá pensar.

Não sei se já conhecem mas fica a dica: se cadastrando no Clicky vocês terão acesso à um interessante monitoramento das visitas ao seu blog: de onde vieram, quanto tempo ficaram, onde clicaram e quem anda te linkando. Tudo em tempo real. Basta inserir um código no template e pronto, instantaneamente você passa a ter informações. A versão free aceita blogs que tenham até 1000 visitas/dia, já a paga não tem limite algum, lógico. Tudo isso sem propagandas (lindo) . Eu usei e gostei muito, mas perdí o 'de grátis' por que o Templates excedeu o limite de 1000 visitas (bão, né?). Recomendo.


Crianças, tenham um excelente final de semana e comportem-se! :-)

Read More

Como personalizar a sidebar

Você quer saber tudo sobre como personalizar a sidebar? Então chegou ao lugar certo :-)
Neste post vou detalhar todas as maneiras possíveis (que eu conheço, óbvio) de personalizar a sidebar (ou coluna do perfil, para alguns).

Primeiro quero lembrar que sempre pego o código do template Mínima (do Blogger) como base para ensinar as modificações. Templates que já foram alterados ou que são criações de outros blogs, podem apresentar algumas diferenças, por isso fique atento principalmente aos títulos que geralmente são os mesmos.

Onde encontrar o código da sidebar?

Procure por (ou algo semelhante):

#sidebar-wrapper {
width: 220px;
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 */
}

Como modificar a largura da coluna?

#sidebar-wrapper {
width: 220px;
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 */
}

Altere o valor de width (o que está em vermelho no código acima). Quanto maior o valor, mais larga será a coluna. Aqui o valor se apresenta em pixels, mas poderá ser determinado em % também. Vá alterando e visualizando por várias vezes, antes de salvar.

Como acrescentar um fundo colorido na sidebar?

acrescente a seguinte linha:
background-color: #000000;

o valor da cor aqui representada é a que equivale ao preto. A cor pode ser determinada por seu código html (como coloquei) ou por seu nome, por exemplo gray, red, black...O código todo então deverá ficar assim:

#sidebar-wrapper {
width: 220px;
background-color: #000000;
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 */
}

Como acrescento uma imagem ao fundo da coluna?

Para acrescentar uma imagem que deve se repetir continuamente, coloque:
background: url(endereço da imagem) repeat;

sobre este endereço da imagem, leia aqui (até o final)

para que a imagem se repita somente na horizontal:
background: url(endereço da imagem) repeat-x;

para que a imagem se repita somente na vertical:
background: url(endereço da imagem) repeat-y;

para usar uma imagem que não se repete:
background: url(endereço da imagem) no-repeat;

e ainda, para usar uma imagem que não se repete na vertical e manter o restante do fundo de uma cor determinada (como após uma imagem gradiente) use:
background: #7E7E7E url(http://i26.tinypic.com/2z9lkzk.jpg) repeat-x;

ou seja, criei uma imagem de 20X150 para que se repita horizontalmente (preenchendo a largura real da coluna). Para que haja continuação da cor do final do gradiente, copio o valor desta última cor que se apresenta e coloco antes do endereço da imagem.
Veja como:


e a imagem já colocada na sidebar:



Como personalizar os títulos na Sidebar?

No template Mínima não existe o trecho referente aos títulos da Sidebar, então, se você está usando este template, crie o código, caso contrário, se estiver usando um template cujos títulos deseja modificar, procure por:

.sidebar h2{
margin: 0px;
padding: 8px 5px 3px 15px;
}

Para colocar cor ou imagem no fundo dos títulos, segue as mesmas fórmulas para o background da coluna, descritos acima.

Para centralizar o título use:
text-align: center;
para alinhar à esquerda:
text-align: left;

padding cria um espaço entre as letras e os limites determinados para o título e se apresentam
no sentido horário:
padding:8px 5px 3px 15px;

8px: espaçamento do título para o topo
5px: espaçamento do título para a direita
3px: espaçamento do título para a base
15px: espaçamento do título para à esquerda.

Vá testando os valores e visualizando, até que fique do seu agrado.

Para estabelecer uma fonte diferente no título, leia aqui

Como separar as widgets na Sidebar?

Para separar as widgets da sidebar procure por (se já não estiver separada no seu template):

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Separe desta maneira:

.sidebar .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em; }

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

sendo que o que está em azul refere-se a Sidebar (esqueça o outro trecho por enquanto).

Para que as widgtes fiquem distintamente separadas, como nesta imagem:



deixe o código assim:

.sidebar. widget{
margin: 0px 0px 20px 0px;
padding:20px 5px 20px 15px;
background: #CFC6AF; (aqui coloque o valor da cor escolhida)
border: 2px solid #34201F; (aqui o valor da cor da borda)
}

Óbviamente, para que haja contraste entre o background das widgets e da coluna toda, os valores (cores) escolhidos devem ser diferentes.
Veja que aqui, tanto para margin quanto para padding os valores correspondem aos quatro cantos em sentido horário, como explicado acima

margin: 0px 0px 20px 0px;
margin: topo, direito, base, esquerdo

uma margem de 20px na base garante o afastamento de uma widget da outra.

Edit: à pedidos....

Como colocar uma linha sob os links da Sidebar

Procure por :
.sidebar li{

e acrescente:
border-bottom: 1px dotted $bordercolor;

Para colocar bullets ou ícones antes do link, leia aqui

Se tiverem outras dúvidas, deixem nos comentários que vou acrescentando.

E é isso :-)

Read More