Clique Dicas

Vai comprar um notebook ? Espere leia primeiro !

noreply@blogger.com (Unknown) — Sat, 22 Jun 2013 00:00:00 +0000

Você fez a opção por comprar um notebook, ou conhece alguém que queira um, e não faz ideia do que levar em consideração na hora de escolher entre as diversas opções que o mercado oferece. Isso é um problema! Levar para a casa um equipamento que não vai suprir as necessidades, ou incompatível com o perfil do usuário, significa perda de tempo e dinheiro. Contudo, separei algumas dicas com base no site Oficina da Net, que vão lhe ajudar na hora de tomar essa decisão.·

O que precisa ter – Se você já tem um computador de mesa, procure uma configuração baseada na dele, no mínimo. Por exemplo, se no trabalho você usa um desktop com 4GB de memória RAM, 500GB de HD e uma tela de 15 polegadas. Pois bem, procure um notebook desse porte. Preste atenção no processador! Dê prioridade aos que sejam dual-core, no mínimo.
Marca – Muito se ouve falar sobre as marcas. Algumas são famosas pela qualidade dos produtos. Outras, pela quantidade de problemas. Obviamente nem tudo o que dizem por aí é verdade. Algumas são novas e sequer foram comentadas. Sugiro procurar, dentre as marcas mais conhecidas, as variações de preço, procurar saber sobre a garantia e se existe assistência técnica autorizada na cidade, antes mesmo de se comprar.
Placa de vídeo – Isso é um fator opcional. Se o que você quer é um notebook para games, ela é importante. Do contrário, só trará um adicional no preço e não terá serventia. Digo porque esse tipo de placa chamada off-board só funciona quando o computador precisa. Se nunca precisar nunca funcionará.

Essas dicas são as mais simples possíveis. Se deseja saber mais antes de fazer suas compras, consulte um profissional de informática e peça auxílio. Mas não peça sugestão de modelos! Mostre a ele os notebooks que você separou, de acordo com o que você julga entre melhor custo x benefício, e ele lhe dirá qual deles é o mais indicado para você. Boas compras!

Fonte: Jornal Paraná Centro

Voltando

noreply@blogger.com (Unknown) — Fri, 21 Jun 2013 23:57:00 +0000

Olá a todos.

Bom, estamos voltando com as postangens depois de um belo tempo sem postar nada.

Traremos novidades, aguardem.

Aproveite e siga e fica atualizado.

Retirar Navbar do Blogger

noreply@blogger.com (Unknown) — Mon, 10 Oct 2011 03:29:00 +0000

Para quem não sabe, a Navbar, é aquela barrinha do Blogger que fica acima do cabeçalho.

Para retirá-la, faça o seguinte:

Vá em layout>editar html>

Procure no html do seu blog por esta tag:

]]></b:skin>
</head>

eu costumo usar o recurso Crtl + F do teclado para encontrar trechos no html

Uma vez encontrada a tag, copie este código

#navbar-iframe { height: 0px; visibility: hidden; display: none; }

Cole ANTES da tag, devendo ficar assim:

#navbar-iframe { height: 0px; visibility: hidden; display: none; }
]]></b:skin>
</head>

Veja na imagem:

Depois é só clicar em "salvar modelo".

Anúncios nas postagens do Blogger

noreply@blogger.com (Unknown) — Mon, 10 Oct 2011 03:25:00 +0000

Vale tanto para o AdSense quanto para o UOL afiliados.

Os créditos irão para os seguintes blogs, de onde retirei o conteúdo para este tutorial:

Templates Novo Blogger-Usuário Compulsivo-Blosque

CONVERTENDO O CÓDIGO

A primeira coisa que devemos fazer para colocar anúncios nos posts é converter o código gerado pelo programa de afiliados. Este procedimento não fere os termos do AdSense.

Vá no site do programa de anúncios e gere o código.
Entre neste site , cole o código na caixa em branco e clique em PARSE. Assim estaremos convertendo-o para a linguagem aceita pelo Blogger.

COLOCANDO OS ANÚNCIOS NOS POSTS

Para inserirmos as anúncios nas postagens, é necessário editar o html do template.

Basta ir em "Layout" e escolher "editar html"

Uma forma fácil de encontrar as tags (trechos de códigos) é utilizando o Crtl+F do teclado.

ESCOLHENDO A MELHOR LOCALIZAÇÃO

PARA INSERIR ENTRE O TÍTULO E O POST:

Insira o script convertido antes da tag <div class='post-body'>

PARA INSERIR NO FINAL DO POST:

Insira o script antes da tag <div class='post-footer'>

PARA INSERIR APÓS OS CRÉDITOS:

Insira o script antes da tag <p class='post-footer-line post-footer-line-3'>

ESCOLHENDO A HOME OU PÁGINAS INDIVIDUAIS

É possível configurar para que os anúncios apareçam na home page ou apenas nas páginas individuais. Eu prefiro a segunda opção pois deixa o visual mais clean.

Abra o bloco de notas, copie os código em vermelho e insira o do anúncio conforme indicado.

PARA INSERIR OS ANÚNCIOS NAS PÁGINAS INDIVIDUAIS:

<b:if cond='data:blog.pageType == "item"'> BLOCO DE ANÚNCIO
</b:if>

PARA INSERIR NA HOME:

<b:if cond='data:blog.pageType != "item"'>
BLOCO DE ANÚNCIO
</b:if>

Feito isto, escolha a melhor localização como explicado anteriormente.

UM EXEMPLO PRÁTICO

Quero colocar um anúncio do AdSense, entre o título e o post, somente nas páginas individuais.

<b:if cond='data:blog.pageType == "item"'> BLOCO DE ANÚNCIO CONVERTIDO
</b:if>

<div class='post-body'>

Espero ter conseguido facilitar a vida dos futuros ProBloggers.

Formulário de comentários no Blogger

noreply@blogger.com (Unknown) — Mon, 10 Oct 2011 03:23:00 +0000

Agora é possível inserir um formulário para comentários no Blogger.

Vejam como fica mais profissional:

Acesse o painel de controle através do Draft, vá na aba "comentários" e encontre a opção "posição do formulário"; marque a caixa "postagem abaixo incorporada".

Em alguns templates poderá não funcionar, mas o Compulsivo já deixou um hack para correção:

COMO HABILITAR FORMULÁRIO DE COMENTÁRIOS EMBUTIDO NO BLOGGER

Aproveitem para conhecer o novo Template Compulsivo®

Personalizando a caixa de comentários do Blogger

noreply@blogger.com (Unknown) — Mon, 10 Oct 2011 03:20:00 +0000

Hoje vou compartilhar com vocês alguns hacks para personalizar a caixa de comentários. Todos eles estão no blog do Compulsivo mas não sei se todos os meus leitores também são leitores dele (acredito que sim, pois o cara é fera) então, resolvi postar aqui também estas dicas preciosas!

IMPORTANTE: Para encontrar os trechos solicitados no tutorial, vá em layout, procure por editar html e clique sempre em expandir modelos de widgets.

DESTACANDO A ÁREA DOS COMENTÁRIOS

Para incluir um ícone destacando a área dos comentários, encontre a linha abaixo(Crtl+F) e onde está em vermelho substitua pela url do ícone.

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<img src='http://IMAGEM.png'/>
<b:if cond='data:post.numComments == 1'> 1 Comentário: <b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

Sugestão de site de ícones:

Icon Archive

Exemplo:

DESTACANDO OS COMENTÁRIOS DO AUTOR

Para destacar os comentários do autor do blog e procure pelo código abaixo:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Inclua as partes em vermelho.

Dica: copie ele inteiro e cole entre as tags <dl id='comments-block'> e </dl>

Depois procure pela área do CSS, entre as tags <head></head> e cole o código abaixo:

. blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #c0c0c0;
background:#f5f5f5;
}

Personalize as cores da borda e do fundo a seu gosto!

ALTERANDO O LINK DO AUTOR

Para que seus comentários não sejam direcionados para o seu perfil do Blogger, procure pelo código abaixo, inserindo a linha em destaque.

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:blog.homepageUrl'>
<data:comment.author/></a><b:else/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if></b:if>
<data:commentPostedByMsg/>
</dt>

INSERINDO ICONE DOS COMENTÁRIOS DO AUTOR

Procure pelo mesmo código anterior e insira a linha em vermelho, substtuindo a url

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:blog.homepageUrl'>
<img src='http://URL_DA_IMAGEM/Imagem.png'/>
<data:comment.author/></a><b:else/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if></b:if>
<data:commentPostedByMsg/>
</dt>

Exemplo:

Neste exemplo vemos os 03 hacks já aplicados.

Ranking de estrelas no Blogger

noreply@blogger.com (Unknown) — Mon, 10 Oct 2011 03:18:00 +0000

Já está disponível no Blogger in Draft um ranking de estrelas, também chamado de Rating, que permite aos leitores votarem no post.

Entretanto, tal como no caso do Formulário de Comentários, em alguns templates (leia-se na maioria), é necessário modificar o código html.

Em primeiro lugar devemos ir nos elementos de página e em postagens no blogclicar em Edit.

Feito isto, marcar a opção mostrar classificação de estrelas.

Em editar html, clicar em expandir modelos de widgets.

Localizar então esta linha:

<b:include name='feedLinks'/>

Logo abaixo incluir este código:

<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

Agora vamos escolher em qual local que as estrelas irão aparecer:

<p class='post-footer-line post-footer-line-1'> primeira linha do rodapé do post
<p class='post-footer-line post-footer-line-2'>segunda linha do rodapé do post
<p class='post-footer-line post-footer-line-3'>final do rodapé do post

Inserir logo abaixo este código.

<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor'
expr:g:text-color='data:textColor'
expr:g:url='data:post.absoluteUrl'
g:height='42'
g:type='RatingPanel'
g:width='180'>
</div>
</b:if>
</span>

Infelizmente está em inglês, mas já é um bom começo.

Vejam o resultado no AvSecurity:

Como destacar citações no Blogger

noreply@blogger.com (Unknown) — Mon, 10 Oct 2011 03:16:00 +0000

Segundo a norma NBR 10520:2002, elaborada pelo Comitê Técnico 014 (Informação e Documentação) da Associação Brasileira de Normas Técnicas, citação numa produção textual é a "Menção de umainformação extraída de outra fonte", tais como (livros, periódicos, vídeos, sites e etc).

As citações na produção textual são feitas para apoiar uma hipótese, sustentar uma idéia ou ilustrar um raciocínio. Sua função é oferecer ao leitor o respaldo necessário para que ele possa comprovar a veracidade das informações fornecidas e possibilitar o seu aprofundamento.

Ressalva-se que a referência bibliográfica, isto é, os dados que identificam uma publicação citada, tais como autor, título, local, editora ou data, deve aparecer no final do trabalho sob o título de Referências bibliográficas ou de Bibliografia, pois desta maneira o leitor poderá identificar a obra e, assim, facilitar sua localização em catálogos, índices bibliográficos, bibliotecas, Internet, entre outros locais.Wikipedia.

Mais uma Dica Compulsiva® .

Como dar destaque às citações nos posts.

Muito útil também para quem, como eu, vive publicando tutoriais.

Entre no html do seu template e procure por:

. post blockquote {
margin: 1em 20px;
border: 1px solid #c0c0c0;
background: #f5f5f5;
padding: 7px;
}

Configue as cores do fundo e da borda a seu gosto.

Caso não exista este trecho no seu template, basta criá-lo antes da tag ]]></b:skin>.

FONTE: Usuário Compulsivo

Resolvendo o problema com o Menu em Abas

noreply@blogger.com (Unknown) — Mon, 10 Oct 2011 03:13:00 +0000

Diversos leitores reportaram problemas com o Menu em Abas instalado em alguns templates do Dicas Blogger. Vocês se lembram que o Google Pages está sendo desativado? Pois então, existe um script instalado nestes templates que faz com que o menu funcione. Este script encontra-se hospedado no Google Pages. Provavelmente o site deve ter apresentado algum tipo de instabilidade hoje e, como logo logo não estará mais disponível, o ideal é hospedar este script em outro lugar, certo?

Vamos lá!

Baixem o script clicando aqui e salvem no computador de vocês.

Sigam este tutorial para hospedar o script no SkyDrive da Microsoft:

SkyDrive-uma solução para o fim do Google Pages?

Copiem a url do arquivo.

Entrem no html do template, façam antes um backup e procurem por este código:

<script src='http://dicasblogger.googlepages.com/tabber.js' type='text/javascript'/>

Substituam a parte em vermelho, pela url fornecida no SkyDrive. Visualizem o blog e se tudo estiver ok, cliquem em salvar modelo. Fiz o teste no Blogger Elegance e deu certo.=)

Informações

Continuo sem telefone em casa e, consequentemente sem conexão banda larga. Tenho usado o Speedy do meu consultório e do hospital onde trabalho, mas é tudo muito corrido. Estou fazendo o máximo que posso para responder os comentários e os emails, porém “tá difícil” de deixar tudo em ordem. Mais uma vez peço a compreensão de todos.

Como vocês já sabem, em casa estou usando uma conexão ~~à lenha~~ discada da Claro; com ela consigo usar o Twitter e mandar algumas atualizações. Então, fiquem de olho na sidebar ou me sigam por lá. Eu achei este recurso muito legal, pois além de mandar notícias sobre o blog, posso também “ conversar” com vocês.

Mapa do site para Blogger/Blogspot

noreply@blogger.com (Unknown) — Mon, 10 Oct 2011 03:01:00 +0000

Que tal ter uma página no seu blog, onde estão todas as suas postagens organizadas por data? Poderíamos chamar essa página de Mapa do Site ou Arquivo do blog e ela pode ser bastante útil quando um visitante não consegue encontrar algum post específico no seu blog usando a pesquisa ou mesmo se este visitante quiser ler tudo o que você já publicou.

Se quiser ver como é uma página assim, dê uma olhada na que eu criei no meu blog neste link. Se quiser uma página igual para o seu blog, siga o tutorial abaixo.

Primeiramente crie uma nova página no seu blog (1) e entre no modo de edição HTML (2). Copie o código abaixo, alterando a parte em vermelho pelo endereço completo do seu blog. Cole o código no html da página (3) e clique em publicar agora.

<script style="text/javascript" src="http://100rede.com/mapablogger.js"></script>
<script src="http://NOME_DO_SEU_BLOG/feeds/posts/default?max-results=1000&alt=json-in-script&callback=loadtoc"></script>

Observações:

Eu peguei essa dica no blog do Abu Farhan, os créditos do script foram mantidos, sendo que eu apenas traduzi os nomes dos meses para o português.

Não sei como os robôs do Google podem interpretar essa nova página do seu blog cheia de links internos, acredito que isso não renderia nenhuma punição nos resultados de pesquisa do Google, mas não posso afirmar tal coisa com certeza.
Percebam que existe um valor neste URL que indica o número de posts a serem exibidos; no exemplo acima este valor está definido como 1000, pois eu queria mostrar todas as postagens do meu blog no mapa. Altere o valor conforme a quantidade de posts do seu blog, colocar sempre um valor bem acima do número de postagens do seu blog vai garantir que todas sejam mostradas.

Inserindo o lápis de edição rápida de posts

noreply@blogger.com (Unknown) — Sat, 08 Oct 2011 17:46:00 +0000

Assim como acontece com os links de navegação, alguns autores de templates subtraem uma função muito legal do Blogger - presente nos templates clássicos - que é o quick edit pencil ou lápis de edição rápida. Trata-se de um pequeno botão, em forma de lápis, que serve para editarmos nossos posts diretamente da página do nosso blog.

O botão só poderá ser visualizado pelo dono do blog, que ao clicar sobre ele será direcionado ao editor de textos do Blogger. Isso é muito útil para quem deseja editar um post mais antigo, por exemplo. Você está lá, todo contente brincando no seu blog e descobre que uma imagem sumiu ou que uma palavra não foi escrita corretamente. Sem o botão, seria necessário ir até o painel do Blogger e procurar por esse post em editar postagens.

Para adicionar o lápis de edição rápida, entre no html do seu template, marqueexpandir modelos de widgets e procure pelo seguinte trecho (Crtl+F):

<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<span class='quick-edit-icon'> </span></a>
</span>
</b:if>

Substitua a linha vermelha por:

<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_edit_allbkg.gif'/>

Devendo ficar assim:

<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_edit_allbkg.gif'/></a>
</span>
</b:if>

Agora, vá até os elementos de página e em postagens no blog, clique em editar. Abrirá uma nova janela de configuração das postagens. Marque a caixa mostrar edição rápida.

Atualização do código para Favicon

noreply@blogger.com (Unknown) — Sat, 08 Oct 2011 17:41:00 +0000

Em janeiro, eu fiz um post ensinando a criar imagens no formato ICO para que os favicons funcionassem no ~~ieca~~ Internet Explorer - Favicon: como criar e hospedar imagens .ico.

Entretanto, o código passado não vinha funcionando no Google Chrome, que já é o terceiro browser mais usado na atualidade. Notei que no meu outro blog - Dicas de Informática - onde eu ainda não havia trocado de código, que o favicon funcionava no Chrome, mas não no Firefox. O que eu fiz? Juntei tudo e deu nisto:

<link href='URL_DA_IMAGEM_ICO' rel='shortcut icon'/>
<link href='URL_DA_IMAGEM_PNG' rel='shortcut icon'/>
<link href='URL_DA_IMAGEM_PNG' rel='apple-touch-icon'/>
<link href='URL_DA_IMAGEM_PNG' rel='shortcut icon' type='image/x-icon'/>

A partir daí, passou a funcionar em todos os navegadores, incluindo Chrome e Safari.

Favicon: como criar e hospedar imagens .ico

noreply@blogger.com (Unknown) — Sat, 08 Oct 2011 17:40:00 +0000

Ao customizar o template do Diário de Bordo me deparei com um problema. O favicon não aparecia em todos os navegadores, somente no Firefox. Eu nunca me preocupei muito com isso pois o Dicas Blogger é hospedado no blogspot e um íconezinho do Blogger não ia fazer diferença. Sem contar que eu achava que todo mundo deveria usar o Firefox. Já com o novo blog, considerei a idéia de fazer diferente, visto que ele tem domínio próprio e ficaria mais elegante com um favicon próprio. Fui ao super blog Compulsivo, peguei o código e…descobri que eu não sabia criar uma imagem no formato .ico – necessário para que o favicon funcionasse nos outros browsers. Pedi um help ao Compulsivo e ao mesmo tempo fui pesquisar no São Google. E aí está a solução que eu encontrei.

Para quem não sabe, favicon, é aquele pequeno ícone que aparece na barra de navegação, do lado esquerdo da url de uma página web.

Nos posts anteriores, ensinei como criá-lo em formato .png. Agora, para que ele seja visualizado em outros navegadores, é preciso transformar a imagem .png em .ico. Uma forma simplificada de se fazer isso é acessando este site:http://www.favicon.ru/en

Devemos clicar em arquivo e procurar a imagem já salva no computador. Depois, iremos clicar em create favicon.ico. Feito isso, aparecerá uma nova janela para o download.

Legal! Mas, neste ponto, apareceu um novo problema: nem Picasa, nem ImageShack, nem Photobucket hospedam imagens no formato .ico. Nova pesquisa no Google e encontrei diversos sites com esta função. Escolhi o Image Boo Hosting.

Para hospedar a imagem, devemos clicar em arquivo, procurar a imagem com formato .ico recém-criada, fazer o upload dela e copiar a url, conforme nos mostra a imagem abaixo:

<link href='URL_DA_IMAGEM_FORMATO_ICO.ico' rel='shortcut icon'/>
<link href='URL_DA_IMAGEM_FORMATO_PNG.png' rel='shortcut icon'/>

Na primeira linha colamos a url da imagem .ico e na segunda, a url da mesma imagem em .png. Agora, é só entrar no html, procurar (Crtl+F) por ]]></b:skin> e colar o código logo abaixo, devendo ficar assim:

Vamos visualizar o template e, se tudo estiver bem, salvar. Para criar a imagem em .png, podemos usar o Paint ou o Photshop e hospedar no Picasa. Não tem erro!

Caixa de busca no cabeçalho do Blogger

noreply@blogger.com (Unknown) — Sat, 08 Oct 2011 17:31:00 +0000

Irei ensiná-los como colocar uma caixa de busca/pesquisa no cabeçalho do blog. Quero lembrar que a aplicação desta técnica pode não funcionar em todos os templates ou quase todos.

Antes de começar, faça um backup do seu template por precaução e aplique a~~gambiarra~~ técnica primeiro em um blog de testes e só depois em seu blog principal.

Entre no painel do Blogger e na aba layout, clique em editar html. Marque a caixaexpandir modelos de widgets e procure por /* ----- HEADER ----- */ ou#header-wrapper ( que é onde começa o código do cabeçalho).

Copie o código abaixo e cole ANTES do código do cabeçalho (header).

/* ----- Busca ----- */
#busca{
width:auto;
height:auto;
z-index:1;
position: absolute;
top: 50px;
left: 660px;
}

Procure agora por <div id='header-wrapper'>e cole logo abaixo o código de busca:

<div id='busca'>
<form action='/search' id='searchthis' method='get' style='margin:0;padding:0;display:inline;'><input id='search-box' name='q' onblur='clickrecall(this,'Pesquisar')' onclick='clickclear(this, 'Pesquisar')' size='20' style='color: #999;' type='text' value='Pesquisar '/> <input id='search-btn' type='submit' value='Buscar'/></form> </div>

Caso você queira colocar uma caixa de busca do Google Adsense, substitua a parte em vermelho do código acima pelo código fornecido pelo AdSense.

<div id='busca'>CÓDIGO DO ADSENSE</div>

Ajuste a posição da caixa de busca, alterando os valores top e left do 1° código.

Vá visualizando o template até ficar legal e só depois clique em salvar modelo.

Personalize os marcadores do Blogger

noreply@blogger.com (Unknown) — Sat, 08 Oct 2011 17:26:00 +0000

Conforme alguns já notaram, fiz algumas alterações na forma de exibição dos marcadores do blog. Antes os posts apareciam por completo e com aquela mensagem “Mostrando postagens com marcador Primeiros Passos. Mostrar todas as postagens” Agora, só aparecem os títulos dos posts e sem a referida mensagem.

Ao fazer essa alteração, minha intenção foi facilitar a vida dos visitantes, já que no caso de marcadores vinculados com muitos posts a página demorava muito pra carregar.

Existem diversas formas de personalização, então escolha a que você mais gostar.

Antes de começar as alterações, faça um backup do seu template e salve no pc.

1. Excluindo a mensagem padrão do marcador (Fonte: El Escaparate de Rosa)

Entre em editar html, marque expandir modelos de widgets e procure (Crtl+F) por:

<b:include data='top' name='status-message'/>

Apague essa linha inteira, visualize e se tudo estiver bem, clique em salvar modelo.

2. Ocultando a mensagem padrão do marcador

Você pode também ocultar a mensagem padrão, ao invés de excluí-la. Inclua no CSS do template, antes de ]]></b:skin> , o seguinte código:

.status-msg-wrap {
display:none;
}

Clique primeiro em visualizar e se tudo estiver bem, clique em salvar modelo.

3. Alterando a mensagem do marcador, sem excluí-la (Fonte: Icebreaker )

Entre em editar html, marque expandir modelos de widgets e procure (Crtl+F) por:

<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>

Substitua todo o código acima por este:

<div class='status-msg-wrap'>
<li>Você está no marcador "<data:blog.pageName/>":</li>
</div>

A parte assinalada em vermelho pode ser substituída pela frase que você quiser.

4. Para personalizar a nova mensagem

Aqui daremos um estilo para a frase acima, colocando cor, plano de fundo, borda e alinhamento no texto. Entre no html do template e procure por ]]></b:skin>

Cole, logo acima, o seguinte código:

.status-msg-wrap {
text-align: left;
margin:6px 0px;
background:#e6e6e6;
color: #cc0000;
padding:6px;
border:1px solid #ccc
}
.status-msg-wrap li {
list-style-type:none;
font-weight:bold
}

Você pode substituir a parte em vermelho por center (texto alinhado no meio) ou porright (texto alinhado à direita) e a parte em verde para normal ou italic. Para alterar o background (plano de fundo), a cor do texto (color) e a cor da borda (border) use uma tabela de cores e substitua pelos respectivos números.

5. Para mostrar apenas os títulos dos posts

Vá até o blog Templates para Novo Blogger e siga este tutorial da Ariane.

Páginas estáticas com CSS

noreply@blogger.com (Unknown) — Fri, 07 Oct 2011 03:43:00 +0000

No final do mês passado, o Blogger lançou um recurso há muito tempo esperado por seus usuários – as páginas estáticas. Muita gente comemorou o lançamento, tal como aconteceu quando disponibilizaram o Jump Break. Até então, nós nos virávamos utilizando os hacks, também chamados de gambiarras, alterando os códigos html e css dos templates para obter essas e outras funções que não eram nativas do Blogger.

O problema é que tanto o Jump Break quanto as páginas estáticas, se mostraram incompatíveis com os templates que são criados pelos próprios usuários, sendo necessário a inclusão de mais códigos no html. Mesmo assim, muitos ainda se queixam que a sidebar foi parar embaixo do posts (no caso do jump break) ou que algum dos hacks para colocar o resumo das postagens não funcionam com as páginas estáticas.

Eu, particularmente, jamais deixaria de usar um template personalizado por causa das deficiências do Blogger; afinal, os templates padronizados são…digamos…simples demais. O jeito é continuarmos com nossas gambiarras, já que não existe suporte para templates personalizados – o que é altamente compreensível, pois seria impossível auxiliar cada um que aparece lá no fórum do Blogger para pedir ajuda para um determinado modelo.

Eu não uso o Jump Break e não vou usar as páginas estáticas; prefiro os hacks. Para colocar resumo de postagens, já ensinei dois tipos de hacks neste post - Como colocar o hack “Leia Mais” no Blogger – e hoje vou explicar como criar páginas estáticas usando CSS.

CSS é a abreviatura para Cascading Style Sheets. — Folha de Estilos em Cascata. CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. HTML pode ser (in)devidamente usado para definir o layout de websites. Contudo CSS proporciona mais opções e é mais preciso e sofisticado. CSS é suportado por todos os navegadores atuais. Fonte: HTML.net

Não sou expert no assunto.Confesso que tenho dificuldades para usar CSS e que demorei para fazer este post justamente porquê sei que irão surgir muitas dúvidas e que eu não saberei responder à todas elas, mas, por outro lado, não seria correto da minha parte privá-los de algo tão interessante e funcional. Portanto, tenham calma :)

Bem, o que não deve aparecer em uma página estática? Data, hora, comentários, nome do autor, anúncios publicitários, convites para assinar os feeds e etc. Na página estática deve aparecer somente o título e o texto do post. Vejam estes exemplos:

Termos de Uso I Licença I Sobre nós I Midia Kit I Rss/Feed

Podemos também retirar a sidebar ou colocar só meia sidebar. Eu faço isso quando o post é menor do que o comprimento da sidebar, para ficar esteticamente mais adequado.

Chega de conversa e vamos logo para o tutorial, pois o post já está ficando enooooorme.

ATENÇÃO: Não posso garantir que funcionarão em outros modelos.

Por que tal advertência? Porque os códigos de cada template variam muito então sugiro que vocês façam testes para adaptar este tutorial ao template de vocês.

Antes de mais nada, apliquem o hack fornecido neste post - Páginas estáticas no Blogger sem data - para retirar a data da futura página estática e lembrem-se de desabilitar os comentários também, para que tudo funcione satisfatoriamente.

Criei o post (1) que dará origem à página estática, desabilite os comentários (2), escolha uma data mais antiga (3), clique em “editar html” e ao final cole um dos códigos abaixo (4).

Páginas estáticas com sidebar

<style type="text/css">.blog-pager{display: none;}#blog-pager{display: none;}.post-footer-line{display: none;}.post-footer{display: none;} #comments {display:none} .post-header{display: none;}</style>

Páginas estáticas sem sidebar

<style type="text/css">.blog-pager{display: none;}#blog-pager{display: none;}.post-footer-line{display: none;}.post-footer{display: none;}#side-wrapper{display: none;}.post-footer {display:none} #comments {display:none} .post-header{display: none;} </style>

Páginas estáticas com meia sidebar

<style type="text/css">.blog-pager{display: none;}#blog-pager{display: none;}.post-footer-line{display: none;}.post-footer{display: none;}#sidebar-wrapper{display: none;} #comments {display:none} .post-header{display: none;}</style>

Se você usa anúncios dentro dos posts ou um convite para assinar os feeds, basta criar uma div para eles e depois colocar no código da página estática. Por exemplo:

Esta parte vai no html do template => <div id='anuncio'> (código do anúncio) </div>

Esta parte vai na página estática => <style type="text/css">.blog-pager{display: none;}#blog-pager{display: none;}.post-footer-line{display: none;}.post-footer{display: none;}#side-wrapper{display: none;}.post-footer {display:none} #comments {display:none} .post-header{display: none;}#anuncios{display:none} </style>

Cada parte do código CSS se refere à parte correspondente que não deve aparecer na página estática. Então temos: #comments = comentários / .post-footer = rodapé do post / #side-wrapper = sidebar/ .post-header = cabeçalho do post e assim por diante.

Acredito que irá aparecer algum aspirante a metablogger dizendo “ah eu faço diferente” Ótimo. Publique lá no seu blog, mande o link pro meu Twitter e darei RT :D

Pessoal, é isso. Espero que vocês tenham conseguido entender. Não consegui fazer um post menor, já que é um assunto novo aqui no DB e foi necessário uma boa introdução

Páginas estáticas no Blogger/Blogspot

noreply@blogger.com (Unknown) — Fri, 07 Oct 2011 03:39:00 +0000

Temos duas ótimas novidades para os usuários do Blogger/Blogspot! A primeira é a tão aguardada função de páginas estáticas. Esse recurso serve para implantar páginas fixas no blog, tais como contato, about, midia kit, parcerias e etc. São páginas que aparecem sem a data e sem o rodapé. Vejam os exemplos aqui na nossa linkbar.

Até então, nós precisávamos recorrer a uma série de gambiarras para criarmos páginas estáticas no Blogger. No ano passado cheguei a ensinar uma delas - Páginas estáticas no Blogger sem data, mas confesso que o máximo que dava para fazer era esconder a data. Para retirar o rodapé, nome do autor, ícones e etc, era preciso usar CSS – algo complicado demais para explicar em alguns posts e que varia muito de template para template.

Ontem o Blogger, finalmente, nos presenteou com uma forma bem mais simples de implementação de páginas estáticas. Por enquanto o recurso está disponível somente na página de testes Blogger In Draft. Vamos aprender como usá-lo?

Acesse o painel de controle do Blogger In Draft e clique em editar postagens; você será direcionado para uma outra página. Clique agora em editar páginas:

Clique em NOVA PÁGINA para criar sua primeira página estática:

Aparacerá o editor de textos do Blogger para que você possa escrever seu post:

Configure se será permitido comentários e depois escolha publicar página. Você será questionado onde deseja incluir a nova página:

Escolha nenhum gadget e clique em salvar e publicar para visualizar a nova página.

No nosso exemplo, os ícones do rodapé (post footer) ficaram aparecendo, bem como os artigos relacionados. E agora? Vamos ter que apelar para os códigos :D

Esta dica serve para os templates do DB, mas basta fazer uma adaptação para outros templates: cole o seguinte código ao final do seus post, em editar html:

<style type="text/css">.post-footer-line{display: none;}.post-footer{display: none;} </style>

Prontinho, sua página estática estará criada e armazenada no painel do Blogger:

Você ainda pode exibir suas páginas na sidebar. Vá em layout>adicionar gadget> páginas:

No próximo post informarei a outra novidade, que já foi anunciada no Twitter ;)

Outros blogs que postaram sobre as páginas estáticas:

Colocando páginas estáticas no Blogger – Sem Preceito
Páginas estáticas no Blogger, finalmente! – Crazyseawolf’s Blog
Como criar Páginas Estáticas padrões do Blogger – novidade - Ferramentas Blog

ATUALIZAÇÕES:

14:45 – a alegria durou pouco, pois por algum motivo ainda desconhecido, o recurso “editar páginas” não está mais aparecendo no Blogger in Draft.

15:30 - pronunciamento oficial no Twitter -http://twitter.com/Blogger/status/8033601318

Atualização- Problema corrigido. As páginas estáticas estão de volta.

Páginas estáticas no Blogger sem data

noreply@blogger.com (Unknown) — Fri, 07 Oct 2011 03:26:00 +0000

Faz muito tempo que eu uso páginas estáticas aqui no blog. O que seria isso? São aquelas páginas usadas como links da home page: contato, about me, parcerias e etc.

Para criar uma página assim é muito fácil. Basta escrever um post e escolher uma data antiga para a publicação. No editor de textos do Blogger, existe a opção data e hora de postagem – configure a seu gosto e pronto. Em uma página estática não há necessidade de comentários, então esses poderão ficar desabilitados.

O chato do procedimento acima é que a data ficará aparecendo. Caso a gente queira atualizar alguma das páginas estáticas, vai ficar uma coisa bem esquizofrênica: uma data super antiga para um texto atual. Um exemplo disso é o link sobre ou about me.Vamos supor que resolvemos colocar a nossa idade em um post com data de de 2 anos atrás. Na hora de atualizar a idade, a data continuará a mesma.

Em 2007 eu tinha 37 anos e não 38, como aparece no post

Para resolver essa questão, devemos retirar a data. Depois de muito quebrar a cabeça, pedi ajuda no Twitter e recebi o presente do querido Cidão - o link de um hack! Mas atenção: o hack só irá funcionar em posts com os comentários desabilitados.

Entre no html do template, faça um backup, marque a caixa expandir modelos de widgets e procure (Crtl+F) por:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Substitua por:

<b:if cond='data:post.allowComments'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Com isso, todos os posts que estiverem com os comentários desabilitados aparecerão sem a data.

Aproveito para dizer, que eu acho muito importante o about me. Eu não gosto de chegar em um blog e não conseguir descobrir quem é que está por de trás do texto e sobre qual é o tema do blog. Falarei mais sobre isso em um próximo post. Por enquanto, fiquem com as palavras da Nospheratt – a primeira blogueira a dar dicas sobre o Blogger:

Todo, absolutamente todo blog precisa ter uma página dessas. Não ter uma página que conte quem você é e que explique de quê trata seu blog significa um desperdício de oportunidades dos mais variados tipos; desde conquistar um novo leitor, até ser convidado para um projeto bacana.
Se você não tem um, vai criá-lo agora. Se você já tem um, vai fazer uma avaliação dele e fazer as modificações necessárias - e pode apostar que há modificações necessárias para fazer.

Designer do modelo – como retirar navbar

noreply@blogger.com (Unknown) — Fri, 07 Oct 2011 03:13:00 +0000

Se você já está usando um dos novos modelos do Blogger, através da página Blogger in Draft, saiba que retirar a navbar ficou ainda mais fácil.

Eu já expliquei neste post Como criar um template para Blogger / Blogspot, mas me parece que nem todo mundo conseguiu entender. Sendo assim, vou explicar detalhadamente.

Acesse o designer do modelo, clique em avançado (1) e depois em adicionar CSS(2). Cole o código abaixo, dentro da parte em branco (3) e aperte a tecla enter do seu teclado.

#navbar-iframe { height: 0px; visibility: transparent; display: transparent; }

Clique sobre a imagem para ampliar

Assim que você colar o código e apertar a tecla enter, a navbar irá ficar invisível.

Que eu saiba, não há nenhuma restrição por parte do Blogger quanto à retirada da navbar:

Confirmado: NavBar do Blogger é opcional – blog Usuário Compulsivo
While we don't recommend or support the removal of the Blogger navbar, there is nothing in our Terms of Service that explicitly mandate its use. Fonte: fórum do Blogger em inglês

ATUALIZAÇÃO – Este método já não está funcionando tão bem, visto que a Equipe do Blogger vem fazendo alterações no Designer do Modelo. O @velosomanel, postou em seu blog Rascunhos Blogger, uma forma de retirar a navbar completamente e que pode ser adaptada aos novos modelos. Entre no html e procure por <body class='loading'>

Cole logo antes o seguinte código:

<script type='text/javascript'>
<![CDATA[

]]>
</script>

Aceite a exclusão do widget navbar e salve.

Como criar um template para Blogger / Blogspot

noreply@blogger.com (Unknown) — Fri, 07 Oct 2011 03:11:00 +0000

seria impossível escrever um post com o título acima. A criação e customização de templates sempre foi algo tão complicado, que ensinar isso em posts sempre me pareceu inviável. Tanto é verdade, que existem blogs inteiros dedicados ao tema, ou seja, com muitas e muitas postagens somente sobre HTML, CSS e afins.

Com o advento do recurso Designer de Modelos, qualquer um será capaz de fazer um template totalmente personalizado, mesmo sem entender absolutamente nada de códigos. Basta ter criatividade e vontade de aprender. Vamos lá?

É altamente recomendável que vocês façam um backup do atual template
Tutorial Dicas Blogger – todos os direitos reservados

A primeira coisa a ser feita é acessar o Blogger in Draft ( a página de testes de novas funções do Blogger), procurar pelo link layout e depois por designer do modelo:

Preparem-se para o impacto, pois vocês serão direcionados para algo moderno e inovador.

Na parte superior, estão todas as ferramentas para customizar o seu novo template e na parte inferior, irá aparecer o atual modelo do seu blog. À medida que vamos aplicando os novos recursos, eles já vão aparecendo na parte inferior. Legal, né?

Na guia modelos (1), iremos escolher um dos templates pré-fabricados (2), clicando sobre eles. Logo abaixo, existem as variações do tema (3), com mudanças nas cores.

Na guia plano de fundo (1) , podemos alterar a cor do tema do nosso template (2) ou inserir uma imagem de fundo (3). Existem diversos modelos, todos lindos ;)

Na guia layout (1) é que a brincadeira começa a esquentar. Em layout do corpo(2), escolheremos a disposição do post e das barras laterais (sidebar) do novo template (3). Atentem-se aos diversos formatos que foram disponibilizados pela Equipe do Blogger :D

Ainda na guia layout, ao clicarmos em layout do rodapé (1), escolheremos o modelos do rodapé do template (2) – com uma coluna, duas ou três.

Em ajustar largura (1), podemos ir acertando a largura (2) da área de postagens e das barras laterias (sidebar), de acordo com nossas necessidades.

Na guia avançado (1), temos as opções de personalização das fontes e cores (2) de diversas áreas do template, tais como links, título do blog, plano de fundo e etc.

Deslizando a barra de rolagem até o final, encontramos um campo para códigos CSS (1)

E aqui está uma prévia do futuro template do Dicas de informática ( meu falecido blog )

Para retirar a navbar, cole o seguinte código no campo para CSS e aperte enter

#navbar-iframe { height: 0px; visibility: hidden; display: none; }

Para deixar a navbar invisível, cole este código no campo CSS

#navbar-iframe { height: 0px; visibility: transparent; display: transparent; }

Ficou legal? Agora é só apertarmos o botão aplicar no blog (1). Simples assim :D

Como nem tudo é perfeito, notei que gadgets que sempre ficaram invisíveis, como o do Google Analytics por exemplo, passaram a aparecer em branco, porém sombreados.

ATUALIZAÇÃO: Este problema pode ser resolvido, enviando os gadgets invisíveis para o footer ( rodapé ) e não acontece em todos os modelos. Bom, né?

IMPORTANTE: Todos os hacks que estavam instalados no template anterior, serão perdidos com esta mudança e várias funções já padronizadas no código do Blogger serão inseridas no novo template. Neste exemplo que usei, o hack para artigos relacionados, desapareceu. Em compensação, apareceram diversas funções nativas, tais como as avatar nos comentários, o jump break e as estrelas para votação dos posts

E agora, #comofaz? Basta reinstalar todos os hacks através do “editar html” do template. .

Se você usava um hack para resumir os posts na página inicial (hack Leia Mais) e não o Jump Break do Blogger, vai compensar muito mais reinstalar o hack do que ter que colocar o jump break em todos os posts manualmente.

Outra detalhe interessante: nenhum gadget será perdido e podemos movimentá-los dentro da própria área pertencente ao Designer de Modelo.

Em caso de arrependimento, pegue o arquivo .xml que você salvou no começo deste post, entre na guia layout, procure por “editar html” e faça o upload do seu antigo template.

Acredito que, em breve, este novo recurso já estará disponível na página oficial do Blogger.

Avatar nos comentários do Blogger

noreply@blogger.com (Unknown) — Fri, 07 Oct 2011 03:02:00 +0000

Temos mais um recurso em comemoração aos 10 aninhos do Blogger – a possibilidade de mostrar (ou não) os avatares dos comentaristas na nem tão nova assim caixa de comentários abaixo incorporada.

O Blogger oferece três formas de posicionamento da caixa de comentários: página inteira, pop up e postagem abaixo incorporada. Essa última foi lançada no ano passado e trouxe um ar mais profissional aos nossos blogs, porém sem o uso de avatares, que foi mantido nas duas outras opções.

Hoje foi anunciado no Blogger Buzz que agora está disponível o uso de avatares também para a terceira opção. Para ativar esse recurso, entre no painel do Blogger, procure por configurações e na aba comentários encontre Mostrar imagens de perfil nos comentários? Marque a opção sim.

Como na vida dos usuários do Blogger nem tudo são flores, o recurso NÃO funciona em templates personalizados; somente nos templates disponibilizados por eles.

Graças à astúcia e à boa vontade dos metabloggers, o mistério já foi desvendado.

O Sergio Estrella e o Marcos Lemos anunciaram no Twitter a solução:

Avatar nos Comentários do Blogger [Ferramentas Blog]
Ativando as fotos/avatares nos comentários do Blogger [Icebraker]

Entre no html do template, marque expandir modelos de widgets e procure por:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:blog.homepageUrl'>
<data:comment.author/></a><b:else/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' shape='rect'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if></b:if>
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' rel='noindex,nofollow,noarchive' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Substitua tudo por:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<div class='comment'>
    <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
      <b:if cond='data:comment.favicon'>
        <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
      </b:if>
      <a expr:name='data:comment.anchorName'/>
      <b:if cond='data:blog.enabledCommentProfileImages'>
        <data:comment.authorAvatarImage/>
      </b:if>
      <b:if cond='data:comment.authorUrl'>
        <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
      <b:else/>
        <data:comment.author/>
      </b:if>
      <data:commentPostedByMsg/>
    </dt>
    <dd class='comment-body'>
      <b:if cond='data:comment.isDeleted'>
        <span class='deleted-comment'><data:comment.body/></span>
      <b:else/>
        <p><data:comment.body/></p>
      </b:if>
    </dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
    <a expr:href='data:comment.url' title='comment permalink'>
      <data:comment.timestamp/>
    </a>
    <b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</div>
</b:loop>
</dl>

Visualize o blog e se tudo estiver ok, salve o template. Este será o resultado:

E eu vou continuar sonhando com um sistema de comentários semelhante ao dos blogs que usam a plataforma Wordpress, com direito à nome/url/email

Hack “Leia mais” automático e com imagens

noreply@blogger.com (Unknown) — Fri, 07 Oct 2011 02:55:00 +0000

Fui procurar este hack, à pedido de uma cliente do DB-produtos e serviços e encontrei no Templates para você, blog da querida e sumida amiga Áurea.

Trata-se de um hack que resume os posts da página inicial (home) automaticamente e ainda mostra uma pequena imagem (thumbnail) do lado esquerdo da postagem.

Antes de mais nada, recomendo que você instale este hack em um blog de testes ou, se quiser instalar diretamente no blog, faça antes um backup do template.

Como colocar o hack Leia Mais com imagens

Entre no painel do Blogger, clique em design e, depois, em editar HTML.

Marque a caixa expandir modelos de widgets e procure por:

<div class='post-body entry-content'>
<data:post.body/>

Substitua a linha <data:post.body/> por:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>Leia mais »»</a></div>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/>
</b:if>

ATENÇÃO! Para quem usa os meus templates, que já vêm com um outro hack “leia mais” e/ ou com o jump break do Blogger, o caminho é outro. Procure por:

<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
<span id='showlink'>
<a expr:href='data:post.url'>Continue lendo >></a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/>

Substitua tudo por:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>Leia mais »»</a></div>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/>
</b:if>
<div style='clear: both;'/>

Agora vá no CSS do template e antes da tag ]]></b:skin> cole este código:

.rmlink {
font-size: 100%;
float: right;
margin-right: 30px;
margin-top: 10px;
font-weight: bold;}
.rmlink a {
font-style: normal;
font-weight: bold;
font-variant: small-caps;
font-family: Arial,Sans-Serif;
color: #24618e; /*Cor do Link*/}
.rmlink a:visited { color: #649dc7;}/*Cor do link depois de clicado*/
.rmlink a:hover { color: red;} /*Cor do link ao passar o mouse em cima*/

Procure então pela tag </head> e cole este outro código embaixo dela:

Fontes de referência

Templates para Você - Hack Leia Mais com imagens reduzidas
Mundo Blogger - Hack Leia mais com imagens na página inicial

Escondendo o rodapé dos post na página inicial

Para esconder a data e o rodapé dos posts na página inicial, procure por:

]]></b:skin>

e cole o seguinte código depois dessa tag:

<b:if cond='data:blog.pageType == "index"'>
<style type='text/css'> .post-footer { display: none; } </style>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<style type='text/css'> h2.date-header { display: none; } </style>
</b:if>

Para entender melhor as condicionais do Blogger, acesse:

O Blogger e as Condicionais – BloggerSphera
Aplicar estilos a página inicial do Blogger – Mundo Blogger

Esta última dica funcionou no Template Mínima e nos meus templates, mas talvez não funcione em outros, já que o nome dos seletores ( .post-footer e h2.date-header ), pode variar de um modelo para outro.

Exibindo apenas o texto

Se você quiser mostrar apenas o texto na home e não as imagens, procure por:

<style type="text/css">
.thumbnailimg IMG {
max-width:150px;
width: expression(this.width > 150 ? 150: true);
max-height:120px;
height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
float:left;
padding:0px 10px 5px 0px;
}

Substitua todo o trecho acima por este:

<style type="text/css">
.thumbnailimg IMG {
max-width:150px;
width: expression(this.width > 150 ? 150: true);
max-height:120px;
height: expression(this.height > 120 ? 120: true);
display: none:
}
.thumbnailimg {
float:left;
padding:0px 10px 0px 0px;
}

Como colocar o botão do Facebook no Blogger

noreply@blogger.com (Unknown) — Fri, 07 Oct 2011 02:32:00 +0000

Com a popularização de aplicativos como o Farmiville e outros jogos online, o Facebook obteve um crescimento explosivo no Brasil. Ficar de fora do Facebook é perder a oportunidade de receber milhares de visitas no seu blog ou site. Vou iniciar uma série de artigos ensinando como integrar um blog ao Facebook, e o primeiro é como colocar um botão do Facebook no Blogger:

A vantagem de utilizar o botão "Gosto" (ou "Like", em inglês e "Curtir", em português de Portugal) é que sempre que alguém clica no botão será feita uma atualização do status no mural do perfil no Facebook com o link do post em questão. Os amigos deste perfil também irão receber esta atualização. Para colocar este botão, tal como o botão do Twitter, não é necessário ter conta no Facebook.

Integrando o botão do Facebook no Blogger:
O botão "Gosto" pode ser inserido em qualquer parte. Recomendo que seja colocado no final do post, é o local onde o leitor irá realizar a próxima ação após a leitura, mas isto não é uma regra. Antes de fazer esta alteração, faça um backup completo do template do blog.

Entre no painel do Blogger, clique em design e, depois, em editar HTML. Marque a caixa expandir modelos de widgets e procure por:

<data:post.body/>

Copie e cole logo abaixo do código anterior:

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

Se deseja que o botão do Facebook apareça na parte superior do post, ao lado do título, coloque o código logo abaixo desta linha:

<div class='post-header-line-1'/>

Otimizar o botão do Facebook:
Para que o botão não apareça na página inicial, somente nos posts, deve inserir o código em verde:

<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
</b:if>

Para que apareça as fotos dos utilizadores que gostaram, deve alterar o false paratrue, e o tamanho do widget de 40px para 80px:

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=true&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:80px;'/>

Outra coisa que pode ser feita é alteração de "Gosto" para "Recomendar", bastando para isto alterar o like (em vermelho, no código acima), por recommend.

A fonte das letras também pode ser alterada, por default vem em Arial, mas é possível utilizar outras fontes.

Salve e veja se ficou tudo correto.

TweetMeme- Inserindo botão de Retweet no Blogger

noreply@blogger.com (Unknown) — Fri, 07 Oct 2011 02:31:00 +0000

A nova febre é o botão de RT do site TweetMeme. Muitos bloggers já adotaram esse recurso, que mostra todos os retweets de um determinado post. Por insistência do@luanfr, acabei aderindo também e não é que ficou bonitinho? Além de mostrar os Rts, o botão ainda possibilita que os leitores enviem nossos posts diretamente para a página do Twitter. E é simples de instalar.

Para colocar o botão embaixo dos posts:

Entre no html do template (layout>editar html), marque a caixa “expandir modelos de widgets” e procure (Ctrl+F) por:

<div class='post-footer'>

Cole logo acima o seguinte código:

<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
tweetmeme_source = 'NOME NO TWITTER';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</b:if>

Substitua NOME NO TWITTER pelo seu nome de usuário e salve.

A parte em vermelho é referente ao código do TweetMeme e a parte em verde é referente às condicionais para que o botão só apareça nos posts e não na página inicial do blog.

Para colocar o botão entre o título e o post, encontre:

<div class='post-header-line-1'/>

Cole o código anterior embaixo dessa linha e salve.

Você pode integrar o botão de RT com um anúncio, do tipo banner ou meio banner (Isso vai depender do tamanho da área de postagem do seu blog). Basta usar o seguinte código:

<b:if cond='data:blog.pageType == "item"'>
<table
style="border: 1px solid rgb(255, 255, 255); background:rgb(255, 255, 255);text-align: left; width: 100%;" cellpadding="2" cellspacing="2 ">
<tbody>
<tr>
<td valign="undefined" align="left">CÓDIGO DO TWEET MEME </td>
<td valign="undefined" align="undefined"> CÓDIGO DO ANÚNCIO </td>
</tr>
</tbody>
</table> </b:if>

Aí está o resultado que eu obtive no meu blog de testes, usando um banner:

Lembrando que o código do AdSense tem que ser convertido. Use o site Blogcrowd.

Anúncios nas postagens do Blogger

Caso você não use publicidade no seu blog, coloque um mensagem para os seus leitores. E se quiser ir mais além, use o programa NVU portable para construir o seu próprio código:

Exemplo de uma mensagem legal:

<b:if cond='data:blog.pageType == "item"'>
<table
style="border: 1px solid rgb(255, 255, 255); background:rgb(255, 255, 255);text-align: left; width: 100%;" cellpadding="2" cellspacing="2 ">
<tbody>
<tr>
<td valign="undefined" align="left">CÓDIGO DO TWEET MEME </td>
<td valign="undefined" align="undefined">
<b>Siga este blog no <a href='http://LINK DO SEU TWITTER'>Twitter </a> e fique por dentro das novidades!</b>
</td>
</tr>
</tbody>
</table> </b:if>

Recomendo que essas alterações sejam feitas, primeiramente, em um blog de testes.

ATUALIZAÇÃO

Para que o botão fique à direita do anúncio, inverta os códigos:

<b:if cond='data:blog.pageType == "item"'>
<table
style="border: 1px solid rgb(255, 255, 255); background:rgb(255, 255, 255);text-align: left; width: 100%;" cellpadding="2" cellspacing="2 ">
<tbody>
<tr>
<td valign="undefined" align="left">CÓDIGO DO ANÚNCIO</td>
<td valign="undefined" align="undefined"> CÓDIGO DO TWEETMEME </td>
</tr>
</tbody>
</table> </b:if>

Caso você não use anúncios, siga esta dica do Ferramentas Blog:

<b:if cond='data:blog.pageType == "item"'>
<p style='display: inline; float: right; margin-left: 5px'>
Adicione aqui o código do botão
</p>
</b:if>

Aprendendo a criar tabelas em HTML

noreply@blogger.com (Unknown) — Fri, 07 Oct 2011 02:31:00 +0000

Depois que coloquei um portfólio na sidebar mostrando blogs que foram customizados por mim, alguns leitores me perguntaram como fiz para que os banners aparecessem lado a lado.

O processo é bem simples, mas ao invés de passar o código pronto, irei ~~ensiná-los a pescar o peixe~~ a criar tabelas usando o excelente programa opensource, NVU Portable.

Eu suponho que a maioria de vocês tenha vontade de se aprofundar no tema e não apenas ficar esperando que tudo venha mastigadinho, certo? Aprender a customizar um template traz mais liberdade, tranquilidade e possibilita fazer algo que fique com asua identidade.

Não dá para personalizar um template sem saber o mínimo de html – dá pra trocar cores, fontes e imagem do cabeçalho porque o painel do Blogger permite; o resto é HTML e CSS.

Voltando o assunto dos banners “lado a lado”, usei o mesmo princípio dos anúncios embaixo do cabeçalho: TABELAS. Aliás, não sei o que seria de mim sem elas :)

Tabelas são usadas para apresentar "dados tabulares" , isto é, informação que deva ser apresentada em linhas e colunas, de forma lógica. Fonte: HTML.net

Quase tudo que está na sidebar do DB foi feito através de tabelas. Não sou nenhumaexpert em webdesign, mas o que sei é que funciona super bem com blogs do Blogger.

Baixe o programa NVU portable e a extensão que permite deixá-lo em português. Clique sobre o arquivo que você baixou e siga as instruções de tela. Ele irá te perguntar onde você deseja descompactá-lo. Escolha uma pasta do seu pc e continue a instalação. Procure agora pela mesma pasta e execute o programa, clicando em seu ícone:

Uma vez aberto o programa, procure por Tools e depois por Extensions . Clique no botão Install e selecione o pacote xpi. que você baixou. Clique em Install Now e reinicie o NVU.

Para criar uma tabela, clique em inserir e depois em inserir tabela. Escolha o número de colunas e de linhas. Clique em ok. Irá aparecer o desenho da tabela:

Para retirar a borda, clique em tabela, propriedades da tabela; em bordas e espaçamentos, coloque zero no campo destinado à borda e clique em aplicar.

Agora, iremos colocar os banners de cada blog em cada uma das colunas (para pegar os códigos dos banners, basta copiá-los dos respectivos blogs).

Clique dentro de uma das coluna, depois vá em código fonte e cole o código do banner. Repita este processo em todas as colunas e visualize. Se estiver ok, volte emcódigo fonte, copie o código começando pela tag <table> e terminando pela tag </table>

Cole então o código em elementos de página, na opção html/javascript do seu blog.

As tabelas podem ser criadas tanto na horizontal, quanto na vertical.

Com o NVU é possível realizar muitas tarefas, pois trata-se de um verdadeiro canivete suíço, mas é preciso ter curiosidade e explorar todas as suas funções.

Para colocar links nas imagens, acesse o post Como colocar um link em uma imagem.

Se quiser se aprofundar em HTML e em CSS, recomendo os tutoriais do site HTML.net.

Outro detalhe importante é que, apesar de já ter um pequeno portfólio, eu (ainda) não faço templates sob encomenda, por causa da falta de tempo. Os layouts apresentados na sidebar foram criados para os meus próprios blogs e para amigos próximos e familiares.