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.

;)

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

Template Manchete

Segue o mesmo modelo do Template Oggi, sem o slide, com o último post publicado em destaque:

Ver Demo

Siga as instruções para o Template Oggi para hospedar as imagens do template e alterar o tamanho das imagens dos resumos automáticos. Para usar o menu horizontal, crie páginas e arraste o gadget páginas para o local determinado abaixo do cabeçalho.
Não é possível retirar os resumos deste template sem quebrar o layout original. Qualquer alteração no modelo é por sua conta e risco.

A redistribuição deste template só está autorizada ao site BTemplates e os créditos não devem ser removidos.

Para fazer o download do arquivo zipado clique aqui

Leia Mais

Template Oggi

Às vezes, passeando pela net, um detalhe que me chama a atenção pode ser fonte de inspiração para criar um novo template. Foi o caso deste post no Gem@ Blog, onde a Gema nos ensina a colocar este belo slide criado por Soh Tanaka. 

Ver Demo

Slide

O slide é automático e o script necessário para fazê-lo funcionar já se encontra dentro do código html, não havendo necessidade de hospedagem. Tudo que é preciso fazer é criar banners de 790px x 286px, hospedar a imagem, copiar a url fornecida e colocar neste trecho do código html, onde está indicado em vermelho:

<div class='window'>
<div class='image_reel'>
<a href='url do post 1'><img alt='titulo' src='url da imagem do banner 1'/></a>

<a href='url do post 2'><img alt='titulo' src='url da imagem do banner 2'/></a>

<a href='url do post 3'><img alt='titulo' src='url da imagem do banner 3'/></a>

<a href='url do post 4'><img alt='titulo' src='url da imagem do banner 4'/></a>
</div>
</div>

Onde está em verde, coloque a url do post para onde o banner deve apontar e onde está titulo, dê um titulo para a imagem.

Imagens

As imagens que compõem o template devem ser hospedadas por você, no seu servidor de preferência (pode ser ImageShack, Photobucket, TinyPic, etc) e a url  gerada (Direct Link) deve ser colocada onde está indicado no código. Por exemplo, a imagem crosscol.png - busque dentro do código do template (use Ctrl+F para facilitar a busca) este nome, que deve aparecer entre parênteses. Coloque dentro dos parênteses a url da imagem crosccol.png hospedada.

Ex:
Está assim no código do template:

#crosscol{
margin: 3px auto 0px;
height:auto;
background:url(crosscol.png)  repeat-x;
border: 1px solid #e0e0e0;
}

Deve ficar assim depois de hospedar a imagem e copiar a url gerada (Direct Link):

#crosscol{
margin: 3px auto 0px;
height:auto;
background:url(http://i43.tinypic.com/depklu.png)  repeat-x;
border: 1px solid #e0e0e0;
}

Os locais onde as imagens devem ser colocadas são (pela ordem que aparecem no código):

.post li, body, #crosscol, .sidebar a, .sidebar a:visited, .footer a, .footer a:visited e .paging, #showlink

Obs: O banner que segue junto com as outras imagens não deve ser hospedado, serve apenas como exemplo das medidas que devem ser utilizadas.

Na página inicial os posts apresentam-se resumidos automaticamente, bem como nas páginas dos marcadores e arquivos:

Página dos Marcadores

O menu horizontal é apropriado para receber o gadget Páginas. Crie as páginas que deseja exibir e arraste o gadget para o local indicado:

Acima do cabeçalho há um  pequeno menu à esquerda que também deve ser editado no código do template:

<!-- Menu Esquerda -->

<ul class='left'>
<li><a href='url aqui'>Home</a></li>
<li><a href='url aqui'>Sobre</a></li>
<li><a href='url aqui'>Templates</a></li>
<li><a href='url aqui'>Contato</a></li>
</ul>

<!-- Menu Direita -->

<ul class='right'>
<li><a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts</a></li>
<li><a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments</a></li>
<li><a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Feeds</a></li>
</ul>

<!-- Fim dos Menus -->
</div>

Note que o menu à direita é automático; não altere nenhum código dele.

Os créditos do ícone usado nos itens da sidebar são do Blog Perfume

Para fazer o Download do Template Oggi em pasta zipada clique aqui

E antes que me perguntem:

*Não é possível alterar as dimensões do slide
*Para alterar o texto do link Ler Mais, expanda os códigos do template e use o Ctrl+F para fazer a busca, como mostra a imagem abaixo:

Escreva Ler Mais na caixinha que se abre e clique em Próximo e automaticamente o trecho a ser modificado aparecerá destacado.

Para alterar as dimensões das imagens nos resumos, procure por:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 320;
summary_img = 170;
img_thumb_height = 110;
img_thumb_width = 98;
</script>

altere o valor (110) onde está em vermelho para a altura e o valor (98) em verde para alterar a largura da miniatura da imagem. O valor na linha azul refere-se ao número de caracteres mostrados no resumo quando não há imagem a ser exibida e o número na linha roxa refere-se ao número de caracteres mostrados quando há imagem no resumo.

Não é possível retirar o slide ou os resumos sem quebrar completamente a estrutura do template original. Qualquer alteração  é por sua conta e risco :)

EDIT 25/03/10 : Havia um erro no código do template que já foi corrigido. Para os que fizeram o download do código antes desta data, por favor, procurem o seguinte trecho no código do template:

#main-wrapper{
float:left;
margin-left 6px;
width: 796px;}
#Blog1{float:left;margin:0px;padding: 0px;width:796px; clear:both;}

e troquem por:

#main-wrapper{
float:right;
margin-right: 6px;
width: 796px;}
#Blog1{float:left;margin:0px;padding: 0px;width:796px; clear:both;}

Para os que baixarem desta data em diante, o código já está ok.

Edit 31/03/10 - Correções no código para o navegador Internet Explore foram feitas.


Edit 10/04/10 - Respondendo a diversos comentários: a imagem do link Leia Mais é a mesma do Menu e deverá ser colocada em #showlink

A distribuição deste template só está autorizada ao site BTemplates e os créditos não devem ser removidos.

Leia Mais

Novos modelos de templates nativos do Blogger

Acabei de ver a novidade, que provavelmente está disponivel, por enquanto, apenas para quem usa o Blogger in Draft (o blog de 'testes' do Blogger). Para acessar o Blogger in Draft e ficar por dentro das novidades, faça o login por esta página: http://draft.blogger.com/

Para ver os novos modelos de templates, vá na aba Layout e verá à direita o link Designer do Modelo, como mostra a imagem:

Uma nova tela irá se abrir com opções de modelos separados por autor, além de outros recursos muito interessantes:

Além de trocar o seu template, você poderá, clicando em Layout, escolher o tipo de modelo que deseja: uma coluna lateral, duas, footer dividido, nenhuma sidebar e assim por diante:

Clicando em Plano de fundo você altera as cores do layout:

Em Avançado você poderá determinar o estilo de cada seção do seu template em separado: um estilo para o título do post, outros para a sidebar, etc:

Depois de fazer todas as modificações basta clicar em Aplicar ao Blog e as alterações serão salvas.

Eu ainda estou aqui 'brincando' com a novidade que, confesso, foi a que mais me empolgou dentre todas as novidades que o Blogger nos ofereceu nos últimos meses.

Agora fica fácil criar um modelo exclusivo, não? Aproveitem!

Edit: Para saber mais (em inglês):  The Blogger Template Designer. Dica da @maryynett

E melhor explicado nos blogs: UsuarioCompulsivo, Ferramentas Blog e Dicas Blogger

Nunca faça modificações diretamente no seu blog 'oficial'. Crie um blog de testes para isso. Não deixe de fazer backup dos seus posts e template periodicamente. Evite dores de cabeça!

Leia Mais

Olá

Olá!


depois de mais de duas semanas de indecisão, mudei o template do TNB hoje e conto com a visita dos leitores do feed, agradecendo sugestões e comentários. Por falar em comentários, eles estão novamente abertos, mas não se esqueça de dar uma olhada no que já foi respondido, antes de fazer sua pergunta.


O ano aqui começa agora. Neste mês o TNB completa 3 anos de vida e já é hora de organizar o conteúdo, criar um FAQ e arrumar os templates. Alguns novos serão publicados nos próximos dias, outros desaparecerão. Conto com a paciência de todos, mais uma vez.


Agradeço todos aqueles que me enviaram mensagens neste período de ausência, externando simpatia pelo blog e saudades das publicações.


Em breve publicarei o resultado de algumas experiências que fiz com as novidades propostas pelo Blogger.


abraços!

Leia Mais

E então é Natal...

 Desejo à todos vocês Boas Festas e um ano de 2010 maravilhoso, capaz de deixar excelentes recordações para 2011. Agradeço a companhia, as mensagens que recebi através do formulário de contato, os elogios, as críticas e principalmente a generosidade de vocês com esta aprendiz. Que no próximo ano possamos todos nos 'encontrar' novamente através desta maravilha que é a Internet e  que esta experiência continue a ser tão bacana.

Abraços e até 2010!

Leia Mais

Template Outubro

Download

Com um certo atraso publico o Template Outubro.
Contém menu horizontal, resumos automáticos de postagens e posts relacionados.
Para editar os links do menu, procure por este trecho e coloque a url onde indicado, substituindo o que está em negrito:

<div id='header-right'>
<ul>
<li class='home'><a href='http://templateoutubrotnb.blogspot.com/'>Home</a></li>
<li class='tab'><a href='http://templateoutubrotnb.blogspot.com/'>Sobre</a></li>
<li class='tab'><a href='http://templateoutubrotnb.blogspot.com/'>Fotos</a></li>
<li class='tab'><a href='http://templateoutubrotnb.blogspot.com/'>Contato</a></li>

EDIT: existe um erro no código que faz com que a paginação (links Postagens Recentes, Postagens Antigas) apareçam acima dos resumos. Para arrumar, procure por: #blog-pager e acrescente a linha abaixo:

#blog-pager {
text-align: center;
clear:both;
}

Obs: novo link para download em 21/10/10

Leia Mais

Como dividir o cabeçalho do Blogger

 Atenção: Este tutorial aplica-se aos Modelos de Layout (lançados em 2006). Se você procura o mesmo tutorial para os novos modelos (Designer do Modelo - 2010) leia este tutorial.

Atendendo pedidos, vou explicar como dividir o cabeçalho do blog para que possa acomodar outro widget ao lado do título e abaixo do mesmo. Lembrando que todos os tutoriais aqui publicados usam o template Mínima do Blogger como base; templates já modificados podem não apresentar o resultado esperado.
Este é o método que eu uso, vocês podem encontrar outros tutoriais que expliquem de maneira diferente, ok?

Primeiro vamos entender o cabeçalho original, no HTML:

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

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

</b:section>

</div>

Perceba que existe uma Div (bloco) no alto da página de nome (ID) 'header-wrapper' que recebe um widget de nome Header1 dentro de uma seção  header. Header1 é um widget como qualquer outro elemento que você adiciona em sua sidebar por exemplo, e que não se perde a cada troca de template por que está trancado (locked='true'). O que precisamos fazer é estabelecer que a seção header não ocupe a área total de header-wrapper para dar espaço a uma nova seção. Faremos isso no CSS. Procure por:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Neste trecho do CSS está contido o estilo para toda div header-wrapper. Veja que a largura total desta div é de 660px. Você pode aumentar esta largura (não sem antes aumentar a largura de Outer-Wrapper, que é a Div maior que engloba todas as outras). O que vou fazer primeiramente é estabelecer que Outer-wrapper tenha 990px de largura:

#outer-wrapper {
width: 990px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Feito isso, aumento a largura de header-wrapper para 980px de largura:

#header-wrapper {
  width:980px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

Agora que a Div header-wrapper está apta para conter duas seções, vou dar uma largura para header e determinar que flutue à esquerda (para que a nova seção se apresente à direita do título do blog):

#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: left;
  float:left;
  width:40%;
  color:$pagetitlecolor;
}

Em seguida crio uma nova  seção que ocupará o lado direito de header-wrapper e que receberá o novo widget; vou chamá-la de #header-right:

#header-right{
margin: 5px;
border: 1px solid $bordercolor;
text-align: left;
float:right;
width:56%;
color:$pagetitlecolor;
}

Bom, sabemos que apenas com CSS não se cria nada, ele serve apenas para dar estilo, portanto iremos criar a nova seção no HTML:

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

</div>

Pronto, já temos o nosso cabeçalho dividido em dois. Salve e vá até a página Layout, deve ficar assim:

Se você deseja que a nova seção possa receber mais de um widget, basta apagar o trecho maxwidgets='1' ou aumentar o número de 1 para quantos widgets deseja que ele receba.

Mas Ariane, eu quero colocar um widget ao lado do título e um baixo, ocupando todo o espaço do header-wrapper, tem como? Tem sim. Novamente vamos criar uma nova seção que chamaremos #header-bottom. Vamos estabelecer primeiro o estilo e depois acrescentamos o código HTML:

#header-bottom {
width:100%; /*veja que a largura é total*/

margin:0 auto 0px; /*não há flutuação, está alinhado ao centro*/
}


e no HTML:

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

<b:section class='header-right' id='header-right' maxwidgets='1' showaddelement='yes'/>

<div style='clear:both'/>

<b:section class='header-bottom' id='header-bottom' maxwidgets='1' showaddelement='yes'/>

</div>

A linha <div style='clear:both'/> abaixo das duas primeiras seções serve para 'empurrar' a nova seção (header-bottom) para baixo, caso contrário ela ficaria acima das outras e bagunçaria todo o layout. Salve e veja como deve ficar na página Layout:

E então eu fiquei muito feliz de conseguir dividir meu cabeçalho e coloquei lá um banner do Adsense de 468x60 na seção da direita e um de 790x90 na seção de baixo e ficou assim:

Aff Ariane, ficou feinho...não tem como deixar o banner alinhado no centro? Tem, claro que sim. O que fizemos até agora foi dar estilo para as seções que recebem os novos widgets, mas não determinamos como os widgets devem se comportar dentro destas seções, certo?
Vou então determinar que o widget que ocupa a seção #header-bottom apareça alinhado ao centro, com um espaçamento para o topo de 5px:

#header-bottom  .widget{text-align:center; padding-top:5px;}

Acrescento ainda uma cor no background de #header e obtenho este resultado:

Melhorou um pouco, não? Claro que estou apenas usando um exemplo bem básico para que você tenha uma noção, depois é com a criatividade de cada um. Você também pode centralizar o widget que ocupa a seção #header-right, da seguinte maneira:

#header-right .width{text-align:center} /*o banner ocupará o centro da seção*/

Supondo que você queira colocar em #header-bottom uma lista de links (ou marcadores) para que se apresente como um menu horizontal, acrescente no CSS:

#header-bottom ul{
margin: 0 0 0;
padding: 0 0 0;}

#header-bottom li{
float:left;
list-style-type:none;
}

#header-bottom li a{
display:block;
padding:0 20px; /*espaçamento entre os títulos*/
font-size:0.9em; /*tamanho da fonte*/
font-weight:normal;
text-decoration:none;
color: #000000; /*cor do link*/
}

#header-bottom a:hover{
color:#000000; /*cor do link no quando passa o mouse sobre*/
text-decoration:none;}

O resultado é este (acrescentei também uma borda em #header-wrapper e um background em #header-bottom  valor #ccc):

É isso ;)

Leia Mais

Como colocar links no menu

Muitas pessoas me perguntam como colocar links nos menus dos templates que baixam aqui e em outros blogs. Outra pergunta que me fazem muito é que link colocar no menu. Então vamos por partes.
Se você baixou um template que tem a opção de menu horizontal, saiba que há duas maneiras distintas de editar os links:

Editar através do html.

Este tipo exige que os links sejam colocados diretamente no código html do menu. A estrutura do código de um menu é bastante semelhante ao exemplo abaixo:

<div id='menu'>
<ul>
<li><a href='url do link aqui'>Home</a></li>
<li><a href='url do link aqui'>Sobre</a></li>
<li><a href='url do link aqui'>Fotos</a></li>
<li><a href='url do link aqui'>Contato</a></li>
</ul>
</div>

Entre  <div id='menu'> e </div> encontra-se o conteúdo do bloco ou seja, uma lista, que se inicia em <ul> e termina com </ul> . Entre cada um dos <li> e </li> deve ser colocado o link de destino e onde está Home, Sobre, Fotos, etc, o nome que aparecerá no menu (destino do link).
Mas, que links colocar no menu? Você pode colocar o link de um post específico (criar um post sobre você ou seu trabalho e colocar em Sobre ou ainda um formulário de contato em um post e nomear Contato) para dar a impressão de páginas, por exemplo. Para obter o link de um post específico, basta clicar sobre o título do post e ir em Copiar Link. Se o post não tiver título, basta copiar o endereço que aparece no seu navegador quando está na página do post. Você pode ainda linkar um marcador específico como faço aqui no blog (em Templates). Basta clicar com o botão direito do mouse sobre determinado marcador de sua lista e copiar o link.

Editar através do gadget Lista de Links.

Em muitos dos templates que disponibilizo deixo para que o menu seja editado através do gadget Lista de Links. Para isso, basta ir em Layout, clicar em Adicionar Elemento de Página e escolher a opção Lista de links:

Em Novo Url do Site coloque o link de destino e em Novo Nome do Site o nome que aparecerá no menu. Clique em Adicionar Link e continue colocando os outros links que deseja que apareçam no menu.

Não coloque título em sua lista!
Tendo terminado sua lista, disponha os links na ordem que deseja que apareçam, da esquerda para a direita no menu, clicando nas flechinhas que direcionam para cima e para baixo (para cima o link fica à esquerda, para baixo à direita).

Clique em Salvar e arraste o gadget para o espaço destinado ao menu, geralmente à direita do cabeçalho ou abaixo dele.

Mas como saber que tipo de edição há em cada template? Bom, geralmente o autor dá uma pista de como editar o menu, mas se ele esquecer (e eu sempre esqueço...) procure no código do seu template algo semelhante a primeira lista (HTML) e se não houver nada assim, edite uma Lista de Links e arraste para o local que seja mais obviamente indicado para mostrar um menu e visualize para ter certeza de que arrastou para o local correto.

Leia Mais