Estilo para os titulos da sidebar

Antes de tudo, preciso avisar que este tutorial serve para os modelos de layout (não testei os novos modelos) e foi usado um template Mínima.

A classe a que pertencem os títulos da sidebar é h2 e no template Mínima existe um trecho do código para h2, que engloba os títulos da sidebar e a data dos posts:

/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;}

Mas você pode dar outros estilos para os títulos da sidebar, inclusive usando imagens e cores diferentes para cada um, bastando acrescentar um pouquinho mais de css.

Sidebar sem estilo:

Primeiro, localize no código CSS, o trecho:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;}

Logo depois, acrescente:

.sidebar h2{   }

é entre as chaves que você irá acrescentar o estilo que pretende dar aos títulos da sidebar. Por exemplo:

.sidebar h2{
font-size: 22px;
color: red;}

resultado:

Você pode acrescentar aqui estilos para a fonte e cores do plano de fundo (ou até mesmo uma imagem para o background). Pode, por exemplo, determinar que a primeira letra de cada titulo seja diferente do restante:

.sidebar h2{
font-size: 17px;
color: #777e95;
font-family: Tahoma;}

.sidebar h2:first-letter {
font-family:Tangerine;
color:#8262ae;
font-size:38px;
font-weight: bold}

resultado:

Posso criar e acrescentar uma imagem de fundo (aqui criei uma imagem 320 x 50):

.sidebar h2{
width: 320px;
height: 50px;
font-size: 17px;
color: #777e95;
font-family: Tahoma;
background: url(http://3.bp.blogspot.com/_YGpl3rQPSzI/TPPq5PUdiBI/AAAAAAAAQ-I/hrx4kFtnQG4/s1600/side.png)  no-repeat;
}

resultado:

Note como os títulos não ficaram centrados (estão muito 'para cima'). Então, não basta colocar a medida da imagem, é preciso usar um pouco de padding:

.sidebar h2{
width: 320px;
height: 35px;
font-size: 17px;
color: #777e95;
font-family: Tahoma;
background: url(http://3.bp.blogspot.com/_YGpl3rQPSzI/TPPq5PUdiBI/AAAAAAAAQ-I/hrx4kFtnQG4/s1600/side.png)  no-repeat;
padding-top: 15px;}

resultado:

 Veja que eu subtrai de height o valor que coloquei em padding-top.

Mas o titulo ainda está 'grudado' no limite à esquerda da imagem. Preciso usar padding aqui? Não. Basta acrescentar text-indent:

.sidebar h2{
width: 320px;
height: 35px;
font-size: 17px;
color: #777e95;
font-family: Tahoma;
background: url(http://3.bp.blogspot.com/_YGpl3rQPSzI/TPPq5PUdiBI/AAAAAAAAQ-I/hrx4kFtnQG4/s1600/side.png)  no-repeat;
padding-top: 15px;
text-indent: 10px;}

resultado:

Agora eu quero usar um ícone diferente para cada título da sidebar. Como expliquei aqui, procure o id de cada widget que acrescentou na sidebar. No meu caso, são:

Anote as ID's e acrescente lá no CSS:

#CustomSearch1 h2{
background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzLTavlHj0V0VDWTYmnD3-8-VPllznFvADpVdeFg4Cf6xi1_2Yg28uu_SwhqBRKiK6C-lru7sBaF8CrKKjngPSY_1QWoZJcw2XnhOFCYArZCq6eUVcqvNAQ8KUYNs1GP3cQKpAByH-1kne/s1600/Find+Search_32.png)  no-repeat 280px 10px;
-moz-border-radius: 5px;
border-radius: 5px;}

Veja que já não vale mais o background que coloquei em .sidebar h2. O que fiz aqui foi colocar uma cor de fundo e o ícone posicionado, 10px de distância do topo do espaço ocupado pelo título e 280px de distância da esquerda, além de uma borda arredondada de 5px (código em vermelho):

Faça o mesmo para cada widget da sidebar e em cada um coloque uma imagem e cor  diferente:
#CustomSearch1 h2{
background: #DAF2FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzLTavlHj0V0VDWTYmnD3-8-VPllznFvADpVdeFg4Cf6xi1_2Yg28uu_SwhqBRKiK6C-lru7sBaF8CrKKjngPSY_1QWoZJcw2XnhOFCYArZCq6eUVcqvNAQ8KUYNs1GP3cQKpAByH-1kne/s1600/Find+Search_32.png)  no-repeat 280px 10px;
-moz-border-radius: 5px;
border-radius: 5px; }

#Profile1 h2{
background: #E3FDB3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7NBESD_c8LPrmUY-rlD1HVScrk_2Py1weDxw7H_Ef-6EBwPnfB2C8FzWifO6575k-HoyAjndVOkBba07hOl7TUVRlDY7E7R6jLMtXDtpp5zPoPVNvj7GWjbkMKUqIDLcf4ShJpk7Mg7dD/s1600/Buddy+Chat_32.png)  no-repeat 280px 10px;
-moz-border-radius: 5px;
border-radius: 5px;}

#Label1 h2{background: #FCF1B4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgre5O2qdDovFBNGv1I6Tdui8BsS4ccAZrkbg6fPlt490Raa7KnzU9aC0q8O77lQ6WnSkNRPWgNXWfmYlyUVas8a_LKDP8es9pTls_g5SSVXrJIidcX5fSKL0UBs_qRR2d2lXrUMRU66HV1/s1600/Tag_32.png)  no-repeat 280px 10px;
-moz-border-radius: 5px;
border-radius: 5px;}

resultado:

Invertendo a posição do ícone:

#CustomSearch1 h2{
background: #DAF2FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzLTavlHj0V0VDWTYmnD3-8-VPllznFvADpVdeFg4Cf6xi1_2Yg28uu_SwhqBRKiK6C-lru7sBaF8CrKKjngPSY_1QWoZJcw2XnhOFCYArZCq6eUVcqvNAQ8KUYNs1GP3cQKpAByH-1kne/s1600/Find+Search_32.png)  no-repeat 4px 10px;
text-indent: 36px;
-moz-border-radius: 5px;
border-radius: 5px; }

Para completar, veja este tutorial no blog Vagabundia, que ensina como usar span para dar estilos diferentes para um mesmo título.

Read More

Template Knitting

Duas colunas, espaço para menu horizontal no topo (crie uma lista de links e arraste para o local indicado).

 Demo  |  Download

Read More

Como ocultar a sidebar na home do blogger

Não é de hoje (não mesmo) que tento encontrar uma maneira de esconder a sidebar da home no Blogger. Minhas tentativas se iniciaram meses atrás, buscando por tutoriais, scripts e macetes. A única coisa que encontrei sobre o assunto era como esconder determinados widgets da home (ou de qualquer outra página), como explicam os tutoriais dos seguintes blogs (dentre muitos outros):

Templates e Acessórios
IceBreaker
UsuarioCompulsivo
MundoBlogger
Bloggersphera

Mas não era isso que eu queria. O que eu queria era que toda a sidebar ficasse oculta apenas na home, aparecendo nas páginas internas normalmente, ao lado da postagem. Deixei de converter muitos temas do wordpress para o blogger por não encontrar maneira de fazer isso. Hoje, enfim, descobri como.

Para que vocês entendam a dificuldade, se eu optava em colocar toda a sidebar dentro de uma condicional que determinasse que ela não deveria aparecer na home, ela realmente não aparecia, porém, também não aparecia na página 'Elementos de Página' e ai não havia como incluir, excluir, movimentar widgets. Não me adiantava nada lançar um template que impedisse os usuários de colocarem widgets na sidebar.

Hoje, conversando no twitter sobre o assunto, a Iara (@iarana)  me apontou um template que tem esta caracteristica: a sidebar aparece apenas nas páginas internas. Instalei o template e constatei que o problema também se apresentava: a sidebar havia sumido da página 'Elementos de Página', inutilizando, de certa forma, a coluna.

Bom, resumindo a novela, continuei insistindo no assunto hoje, por que estou trabalhando para converter este template do Wordpress para o Blogger (note que toda a home é ocupada por resumos de postagens e quando se clica em Style no menu, tendo acesso ao post completo, a sidebar aparece.), e finamente encontrei uma solução bastante simples:

Como retirar a sidebar da home do blog

Primeiro é preciso usar uma condicional. Após a tag ]]></b:skin> coloque o seguinte trecho:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<style>
#sidebar-wrapper{display:none}
</style>
</b:if>

Traduzindo em miúdos, determinei que a sidebar não apareça (display:none) se a condição for a página principal do blog (homepage).

Visualize e note que a sidebar realmente desaparece da home do blogger. Agora vá a página 'Elementos de Página' e veja que a sidebar não aparece ali.
Volte ao código do seu template e antes de body{ (logo no começo dos códigos CSS)  acrescente o trecho:

body#layout  #sidebar-wrapper{display:block;margin:0px;float:right;}

Salve e torne a visitar a página 'Elementos de Página'. Veja que a sidebar reapareceu e ainda assim, não aparece na home do blogger, apenas nas páginas internas. 
body#layout é o código para modificar a estrutura da página 'elementos de página', como já publiquei aqui.

Testei no Firefox, Chrome e IE8.

Meus agradecimentos aos meus amigos do Twitter que tentaram hoje me ajudar :)

Read More

Importante: Sobre as imagens dos Templates

Estou recebendo mensagens de pessoas que usam os templates que modifiquei com a queixa de que hoje perceberam que as imagens dos mesmos não aparecem no blog; no lugar delas uma mensagem do TinyPic, serviço de hospedagem que eu sempre recomendei e confiei:

No final de setembro, sem mais nem menos, o TinyPic resolveu fechar as portas para os usuários estrangeiros, assim, deixando todo mundo na mão, conforme este post da Mamanunes: Tinypic - Fechando para Estrangeiros. Depois o Tinypic voltou atrás e liberou os links das imagens novamente. Pelo menos no meu caso. E eu fiquei tranquila, tudo voltou ao normal, não me abalei.
Eis que fui acessar minha conta hoje para ver qual era a novidade e me deparo com uma mensagem que diz que minha conta foi banida! Sem motivo, sem explicações, sem avisos, nada. Baniram e pronto. O Tinypic fez de conta que reabriu para estrangeiros para logo depois banir a conta de vez. Muito bonito. Tomem cuidado.



Ok, muita calma agora. O jeito é hospedar tudo no Blogger (o que eu já devia ter feito antes) e alertar vocês para que façam o mesmo. Quando você faz o download de um template, junto com o código, na pasta zipada, estão todas as imagens usadas no template. Hospede as imagens no Blogger (como a Mamanunes ensina no post que mencionei) e coloque os links nos locais correspondentes no template (geralmente o título da imagem já dá uma pista de onde deve ser colocada, por exemplo post li, outer-top, etc). 

Peço desculpas a vocês, principalmente por ter continuado a confiar em um serviço que já vinha dando sinais de que iria me aprontar uma.

Read More

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 &lt;b:if cond=&#039;data:blog.pageType != &amp;quot;item&amp;quot;&#039;&gt; &lt;/b:if&gt;), e acrescentar position: relative, assim:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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 :)

Read More

Template Mundo Verde

Demo |Download

O template contém duas colunas e menu superior:

Menu: é o mesmo menu que foi mostrado neste post. Para editar os links do menu, procure no código do template por:

<!-- inicio do menu -->
<div class='container'>
<ul class='v2' id='topnav'>
<li><a href='http://templatesparanovoblogger.blogspot.com'>Home</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
<!-- fim do menu -->

Onde está o link do Templates Novo Blogger, apague e coloque o link do seu blog. Apague todos os # e coloque os links que desejar.

Resumo dos textos: o resumo utilizado é o resumo nativo do Blogger, o More (ou Jump-link);

Posts relacionados com imagem na página inicial (home) e também nas páginas internas:

OBS: se você estiver mexendo no código do seu template e clicar em Visualizar, não verá os posts relacionados, porém eles estarão funcionando normalmente (veja na home do blog).

Abaixo dos posts relacionados, links de redes sociais ('Sharing is Sexy'). Basta apenas editar o link do seu feed; para tanto clique em Expandir Modelo de Widget e procure por esta linha:

<li class='sexy-syndicate'><a href='Url_FeedBurner' title='Subscribe to RSS'/></li>

coloque a Url do Feed onde indicado.

Read More

Menu Horizontal com CSS e Jquery

Em um dos meus blogs de teste eu instalei este menu criado por Soh do site SohTanaka e que tem um efeito bastante interessante. Você pode conferir o demo aqui.
Me pediram para explicar como colocar este menu no Blogger, então lá vai:

Primeiro você deve criar uma imagem com 80px de altura onde metade de cima dela (40px) aparecerá quando o menu estiver em estado normal e a metade de baixo no estado hover (quando passa o mouse por cima), como neste exemplo:

Hospede a imagem (pode ser no próprio Blogger) e guarde o link. Agora vá em Editar HTML e cole no código do seu template, abaixo de ]]></b:skin>

<style type='text/css'>

.container {
    width: 520px;
    height: 100px;
    position: absolute;
    top: 10%; left: 60%;
    margin: 0px 0 0 -80px;
    overflow: hidden;
}
img {border: none;}
ul#topnav {
    margin: 10px 0 20px;
    padding: 0;
    list-style: none;  
    font-size: 1.1em;
    clear: both;
    float: left;
    width: 520px;
}
ul#topnav li{
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
    height:40px;
}
ul#topnav a, ul#topnav span {
    padding: 10px 10px;
    float: left;
    text-decoration: none;
    color: #fff;
    clear: both;
    height: 20px;
    line-height: 20px;
    background: #1d1d1d;
}
ul#topnav a {    color: #7bc441; }
ul#topnav span {
    display: none;
}

ul#topnav.v2 span{
    background: url(coloque aqui a url da imagem) repeat-x left top;
}
ul#topnav.v2 a{
    color: #555;
    background: url(coloque aqui a url da imagem) repeat-x left bottom;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
           $(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag
  
    $(&quot;#topnav li&quot;).each(function() { //For each list item...
        var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag
        $(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag
    });
  
    $(&quot;#topnav li&quot;).hover(function() {    //On hover...
        $(this).find(&quot;span&quot;).stop().animate({
            marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels
        }, 250);
    } , function() { //On hover out...
        $(this).find(&quot;span&quot;).stop().animate({
            marginTop: &quot;0&quot; //Move the span back to its original state (0px)
        }, 250);
    });
     
});
</script>

depois, no HTML ( após a tag <body> ) coloque o seguinte trecho, antes ou depois de <div id='header-wrapper'>....</div> :


<div class='container'>

<ul class='v2' id='topnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>

</div>

No meu exemplo, os códigos foram colocados abaixo de header, assim:

 em container, determinamos as dimensões ocupadas pelo menu, bem como sua posição na página:

.container {
    width: 520px;
    height: 100px;
    position: absolute;
    top: 10%; left: 60%;
    margin:  0px 0 0 -80px;
    overflow: hidden;
}


width: largura total ocupada pela div que contém o menu.
note que em ul#topnav o valor se repete (width: 520px)
top: 10% - distância do menu para o topo da página
left: 60% - distância do menu para o lado esquerdo da página
com margin você também controla a posição do menu. Veja que o menu está a 60% da esquerda da página menos 80px. Vá alterando os valores para que melhor se encaixe no seu layout. 
Coloque a url da sua imagem hospedada (no Blogger ou em outro site) onde está indicado no código CSS em negrito. Substitua os # no HTML do menu pelos links que desejar.

resultado

Read More

Template Televisão

Demo | Download

• Template com cabeçalho dividido para inserção de banner à direita, menu horizontal para lista de links, marcadores ou páginas.
• Sidebar dividida em três colunas: uma com largura total no topo e duas paralelas abaixo.
• Footer dividido em 3 colunas.

Neste template o resumo automático não foi utilizado e sim o resumo do Blogger (jump-link). Para utilizá-lo basta clicar no botão assinalado na imagem abaixo:

Uma faixa cinza aparecerá demarcando até que ponto o texto será mostrado na página inicial. Continue a escrever o restante do texto após a faixa. O uso do resumo é opcional e você tem total controle sobre a quantidade de texto a ser mostrado na página inicial. Note no Demo que os primeiros posts estão resumidos mas o último não.

Para alinhar corretamente uma imagem no topo do texto, como mostra o exemplo abaixo, deixe o código da imagem entre as tags <div id='imagem-top'> e </div>,:

imagem dentro do div 'imagem-top'

Como deve ficar o código da imagem

Note que você deve inserir o código clicando em Editar Html. A medida da imagem deve ter largura de 596px e altura de 120px. Se você colocar uma imagem com estas medidas sem utilizar as tags, ela não ficará alinhada como no exemplo. Você pode inserir imagens de qualquer tamanho em seu texto sem o uso da div 'imagem-top', ela serve apenas para alinhar as imagens com as dimensões citadas, para dar um visual interessante aos textos resumidos.

Imagem sem o uso da div 'imagem-top', desalinhada.

 Já no topo da sidebar é possível apresentar imagens como no exemplo abaixo, onde a legenda se sobrepõe a imagem num fundo com opacidade:

Isso nada mais é do que um widget de imagem (use as medidas width: 338px; height:120px; para a imagem), onde você coloca o link para um post e uma legenda (não coloque título no gadget)

Este hack funciona apenas para o topo da sidebar (a primeira divisão) e se você não tem interesse em exibir imagens com a legenda sobreposta, basta arrastar o widget para a seção de baixo. O topo da sidebar pode ser utilizado para exibir qualquer widget normalmente, apenas as legendas aparecerão acima da imagem.

Qualquer modificação que pretenda fazer no layout, será por sua conta e risco.

O  ícone da Tv Plasma  utilizado no layout é de autoria de  Roberto Abril Hidalgo, que gentilmente autorizou a utilização e distribuição do seu trabalho neste template.

Read More

Template Boa Forma

Demo |Download

• Template com resumos automáticos de postagens com miniatura da imagem utilizada no post;
• Menu horizontal para lista de links ou gadget Páginas;
• Widgets fixas de imagens abaixo do cabeçalho que se revezam nas páginas internas;
• Artigos Relacionados abaixo dos posts;
• Possibilidade de alterar todas as cores do template através do Painel Fontes e Cores. Você pode criar  uma combinação única de cores para seu layout.

Para utilizar os widgets de imagens abaixo do cabeçalho, vá no painel Layout, que deve se apresentar desta maneira:




Note que há um total de 8 widgets de imagem fixas no layout. Os quatro primeiros aparecerão na página inicial do blog e os 4 últimos nas páginas internas. Basta clicar em editar em cada widget, mudar o título, a imagem, a legenda (que deve ser curta) e o link, que deverá apontar para o post que se deseja promover. Feitas as modificações, clique em salvar.





*******************************************************************

A ilustração utilizada neste template é do meu querido amigo Fernando Buson, que conheci através do Twitter. Com apenas 18 anos, Fernando revela multi talentos: é desenhista, escritor, domina técnicas de Photoshop (ele mesmo criou o template do seu blog Dinastia Croft e cria histórias em quadrinhos, entre outras coisas.

"Bom, eu desenho desde pequeno. Nunca tive aulas,  foi tudo "na raça" mesmo. Comecei a aprender mangá através daquelas revistas de "Curso Prático" que eram vendidas em bancas de jornais. Hoje eu faço curso de comunicação visual na Escola Panamericana de Arte e Design e faço ilustrações para a Editora 2D. Sou usuário do blogger há alguns anos quando criei o blog "Dinastia Croft" em parceria com uma amiga." F.Buson

Para conhecer mais do trabalho de Fernando Buson acesse: F.Buson
Para segui-lo no Twitter: @fgouldfell

Read More

Personalizar os comentários - Web Developer

Quando modificamos um layout do Blogger diretamente nos códigos (painel Editar HTML) e clicamos em Visualizar, temos uma visão da página inicial. Se clicarmos nos comentários, as alterações não se revelam enquanto não salvarmos as modificações, o que nos obriga a personalizar a área dos comentários 'no escuro'. É preciso salvar a modificação e abrir o blog em um dos posts para que se possa ver o resultado. É trabalhoso, é chato, desanima. Por isso vou ensinar um método (o que uso) para personalizar os comentários de maneira muito mais fácil e agradável.

Primeiro de tudo, use o Firefox e baixe a extensão Web Developer. Depois de baixar, instalar e reabrir o navegador, você verá um novo menu, como mostra a imagem:

Você logo descobrirá o quão fantástica é esta extensão e o quanto ela poderá te auxiliar a criar layouts e entender melhor alguns códigos em diversas páginas. Falarei sobre os recursos desta extensão em um novo post, hoje me deterei a aba CSS e a possibilidade de editar o código CSS de qualquer página da web (Obviamente a modificação nos códigos de uma página gerará uma visualização prévia, não uma mudança real).

Entre e uma página do seu blog onde os comentários estão visíveis. Feito isso, clique em CSS no menu que acabou de instalar e escolha a opção Edit CSS.

Uma janela se abrirá na parte inferior (em alguns casos, superior) do browser, então clique na última opção do menu desta janela 'Embedded Styles':

Na parte inferior do menu aparecerá todo o código CSS da página onde se encontra. 

Note que depois que iniciar as alteração na página, você não deverá sair dela ou perderá o que escreveu, por isso altere tudo o que deseja, copie suas alterações e só então deixe a página.

Procure no código que se abriu o trecho comments como mostra a imagem:

Eu já mostrei em outro tutorial que uma boa maneira de descobrir a que se relaciona cada trecho do código é determinando cores de fundo para cada bloco, quanto mais chamativas, melhor. Faça isso, como mostra a imagem (veja que inseri background: red no código e background: yellow, etc):

Para separar um comentário do outro, dei estilo a #comments-block .comment-body

Vá colorindo cada parte do código e descobrindo sua função, criando estilos para cada parte dos comentários. Note que a cada mudança que se faz nos códigos o resultado é mostrado instantaneamente na página. Depois que terminar suas alterações, copie tudo o que fez, feche a janela do Web Developer e vá até o código do seu template, substituindo o trecho que modificou pelos novos códigos e salve:

Copie apenas o trecho que modificou e substitua apenas o que deseja modificar, não o código da página inteira, ok?

Para centralizar o formulário de comentários, acrescente esta linha:

#commnet-form, .comment-form{margin: 0 auto;}

Para aumentar a largura do formulário de comentário você deve ir direto no código do seu template, expandir modelo de widget e encontrar este trecho:

Altere o valor 100% de width para qualquer outro que deseja, por exemplo: 580px. Se quiser aproveitar e diminuir a distância do formulário de comentário para os link de navegação, diminua o valor de height (coloque uns 290px).

Bem, mostrei a ferramenta que uso para me ajudar a modificar os códigos dos comentários, agora é com a criatividade de cada um. Para ajudar ainda mais neste trabalho, sugiro que leiam os seguintes tutoriais:

Personalizando a caixa de comentários do Blogger
Destacar comentários do autor no Blogger 
Blogger: Avatares en los comentarios

Claro que existem muitos outros tutoriais de grande qualidade em outros blogs; uma simples busca no google  trará ótimos resultados.

;)

Read More

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.

Read More