Templates para VOCÊ

Template Preto e Branco Atualizado

noreply@blogger.com (Áurea) — Thu, 29 Oct 2009 15:05:08 PDT

Muitas pessoas gostam deste template, então resolvi atualizá-lo acrescentando alguns hacks e melhorando a estrutura dele.
Espero que vocês gostem.

DOWNLOAD | DEMO

NÃO SE ESQUEÇAM, NÃO RETIREM OS CRÉDITOS.
Nem REDISTRIBUAM SEM A MINHA PRÉVIA AUTORIZAÇÃO.

Hacks instalados:

QUALQUER DÚVIDA SOBRE OS HACKS CLIQUE NOS LINKS DOS MESMOS PARA ENTENDER MELHOR!

Observações:

♦ Todos os códigos Javascript usados no template estão contidos nele.
♦ Para instalar o seu template leia: Como Instalar o Seu Template

A Pasta de Download Contém

Código XML;
Imagens usadas no template.

Sugestões de hacks para você usar em seu template:

Aproveitem :)

Template Atualizado em 27/10/2009

Como Realçar os Comentários do Autor do Blog

noreply@blogger.com (Áurea) — Sat, 24 Oct 2009 20:52:00 PDT

Para que os seus comentários sejam destacados dos demais no seu blog siga este tutorial.

Clique em Layout ► Editar HTML.► Marque a caixinha Expandir modelos de widgets

1º Passo

1- Encontre o código:

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

Busque pela linha <dd class='comment-body'> com o Ctrl+F que fica fácil

2- Acrescente o código

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>

Acima do código:

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

E a linha: </b:if> abaixo deste código.

» Ficando assim:

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

♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.

♦ Clique em SALVAR ALTERAÇÕES.

2º Passo

Agora você vai configurar o CSS dos seus comentários no seu blog:

» Cole o código:

.blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:10px;
padding:10px;
border:1px dotted #c0c0c0; /*Configure o tipo de borda e a cor*/
background:#f5f5f5; /*Cor do fundo do SEU comentário*/
}

» Acima da tag ]]></b:skin>

♦ Clique em SALVAR ALTERAÇÕES.

♦ Clique em Visualizar blog e Clique em um post para verificar se seu comentário está diferenciado dos outros.

» Vá editando o código CSS até ficar da forma que quiser.

Para completar o conteúdo e você aprender um pouco mais sobre CSS para configurar os seus comentários da forma que quiser visite estes links:
♦ Aprenda HTML e CSS
♦ CSS Padrões
♦ Site do Maujor

Esta dica eu aprendi com o Usuário Compulsivo

Mudança do Template e do Endereço do Blog

noreply@blogger.com (Áurea) — Mon, 12 Oct 2009 16:15:47 PDT

Já há algum tempo quero mudar o endereço do Templates para VOCÊ para uma url sem o blogspot.
O nome do blog já é enorme e com o blogspot.com fica maior ainda. Aí comprei um domínio para cá que começa a funcionar hoje, juntamente com o template novo.

O novo endereço é: http://templatesparavoce.com

Melhorou né!

Quanto ao template novo eis aqui algumas considerações:

A gadget Vale um Click continua com os blogs amigos que tratam de assuntos semelhantes do Templates para VOCÊ. Esta gadget é para você que está navegando por aqui encontrar mais sites de assuntos relacionados com os assuntos daqui e enriquecer o seu conhecimento.
Ainda estou em fase de instalação do novo template, visto que quando coloquei-o no ar com o domínio próprio alguns hacks não funcionaram.
Se o site ficar um pouco bagunçado nesta fase de transição é para que fique melhor. Já me adianto em pedir desculpas por algum problema.

"Tu te tornas eternamente responsável por aquilo que cativas"
Fonte

Pois é meus queridos leitores. Me sinto responsável por vocês. Mas digo novamente que meu tempo é muito curto e todos os hacks e templates são muito demorados tanto para aplicar, montar tutoriais ou criar.
Então, se eu não responder aos comentários não é porque não quero, mas porque não consegui.
A não ser alguns comentários que a resposta já está aqui no site e a pessoa tem preguiça de procurar. Estes não respondo mesmo, porque simplesmente não dá.

No mais é isso!

Espero que gostem do novo template e já tem um tutorial muito legal publicado antes deste post de um menu em abas lindo exclusivo para blogs do blogger.

Menu em Abas com JQuery

noreply@blogger.com (Áurea) — Sat, 17 Oct 2009 16:50:05 PDT

CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO

Vou ensinar como colocar em seu blog um menu muito bonito, simples e fácil de instalar.

Para visualizar este menu clique neste link: Demonstração do Menu em Abas JQuery

Clique em Layout ► Editar HTML

OBS: Se o seu blog tem domínio próprio este menu não funciona.
Ele só funciona em blogs com blogspot no endereço.
Quase morri de tristeza quando ativei o domínio novo do TPV e o menu parou de funcionar. Aí tive que tirar! Depois quebro a cabeça para fazê-lo funcionar com um domínio próprio.

1º Passo:

» Instalar o CSS no seu template.

Cole o código abaixo acima da tag ]]></b:skin>

/*---- Tabbed Sidebar Widgets ---- */
.widget-wrapper2{
    border:1px solid #494e52;
    background-color:#636d76;
    padding:8px;
}
.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://i37.tinypic.com/28iq9fm.gif) repeat-x scroll left bottom !important;/*img-tabcontentbg*/
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}
.widget-tab  ul {
    margin:0px;
    padding:0px 20px 0px 20px;
}
.widget-tab  ul li {
    list-style:none;
    border-bottom:1px solid #d6dde0;
    padding-top:10px;
    padding-bottom:10px;
    font-size:13px;
}
.widget-tab  ul li:last-child {
    border-bottom:none;
}
.widget-tab  ul li a {
    text-decoration:none;
    color:#3e4346;
}
.widget-tab  ul li a small {
    color:#8b959c;
    font-size:9px;
    text-transform:uppercase;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position:relative;
    left:4px;
    top:0px;
}
.tab-content  ul li a:hover {
    color:#a59c83;
}
.tab-content  ul li a:hover small {
    color:#baae8e;
}
.active-tab{
background:#FFFFFF url(http://i38.tinypic.com/2urpe01.gif) repeat-x scroll left top !important; /*img-tabtopbg*/
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;        
}
ul.tab-wrapper {
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://i34.tinypic.com/sf83a1.gif) repeat-x scroll left top; /*img-tabinactivebg*/
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}
ul.tab-wrapper li:hover{
background:#FFFFFF url(http://i38.tinypic.com/2urpe01.gif) repeat-x scroll left top !important; /*img-tabtopbg*/
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;        
}

Imagens:
Tabcontentbg - Tabtopbg - Tabinactivebg - Tabinactivebg - (Sugestão)

♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.
♦ Clique em SALVAR MODELO.

2º Passo

» Instalar o JQuery e o Script em seu blog.

Cole abaixo da tag </head> o código abaixo:

<!-- JavaScript Menu em Abas JQuery--> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

<script type="text/javascript"> 
var starttab=0; 
var endtab=2; 
var sidebarname="sidebar"; 
</script> 
<script type="text/javascript" src="http://tab-for-blogger.googlecode.com/files/bloggertabv1.0-min.js"></script>
<!-- Fim JavaScript Menu em Abas JQuery-->

♦ Você pode também baixar o arquivo JavaScript: Bloggertabv » Salvá-lo num bloco de notas com o nome com a extensão .js, hospedá-lo num site de sua preferência e substituir o endereço http://tab-for-blogger.googlecode.com/files/bloggertabv1.0-min.js acima pelo seu endereço hospedado

♦ Clique em SALVAR MODELO.
OBS: Se você clicar em VISUALIZARseu menu não irá aparecer.

Antes de você Visualizar o seu blog entenda alguns pontos.

Veja as variáveis:

var starttab=0;
var endtab=2;
var sidebarname="sidebar";

» starttab e endtab → São as variáveis que indicam a quantidade de abas do seu menu.
Por exemplo:

starttab=0 e endtab=2 Significa que seu menu vai de 0 a 2 ► Terá 3 abas a nº 0, nº 1 e nº 2.
Se você quiser que o seu menu tenha 4 abas mude o endtab=2 para endtab=3

» sidebarname="sidebar" → Esta variável indica onde o seu menu vai ficar.
Por exemplo:

Se você quer que ele fique na sidebar do seu blog coloque o nome da id='sidebar'.
Se você quer que ele fique na outra sidebar do seu blog coloque o nome da id='newsidebar'.(Este exemplo se refere ao template de demonstração, cuja outra sidebar tem o nome 'newsidebar')

Se você manteve o nº2 para a variável endtab. Observe que os 3 primeiros gadjets da sua sidebar ficarão contidos no menu em abas automaticamente, o próximo ficará abaixo do menu. Veja: Demonstração do Menu em Abas JQuery

Saiba onde colocar seu menu:

Veja o HTML abaixo, ele indica a disposição da 1ª Coluna (sidebar-wrapper), 2ªColuna (main-wrapper) e 3ªColuna (newsidebar-wrapper).

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Recentes' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Arquivo' type='BlogArchive'/>
<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Comentários Recentes' type='HTML'/>
<b:widget id='Label1' locked='false' title='Marcadores' type='Label'/>
</b:section>
</div>

» Para que o seu menu fique nas colunas laterais apenas coloque var sidebarname="nome da id da sidebar"; .
• Que neste caso será da id='sidebar' ou id='newsidebar'.
• Para o seu blog: encontre o nome da id da coluna do seu blog e substitua.
Exemplo do Demoplate:
var sidebarname="sidebar" (1ªColuna) ou var sidebarname="newsidebar" (3ªColuna).

» Mas, se você quiser colocar o menu em cima dos posts como eu coloquei aqui. Crie uma nova section em cima da 2ªColuna:

Como?

Muito simples.
1º Você vai acrescentar a linha verde no local indicado abaixo ficando desta forma:

<div id='main-wrapper'>
<b:section class='main' id='main1' showaddelement='yes'/>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>

2º Em var sidebarname="sidebar"; você irá substituir a palavra sidebar por main1assim: var sidebarname="main1";

3º Coloque as gadgets que desejar na section main1 criada que seu menu em abas aparecerá automaticamente.

♦ Se você clicar em VISUALIZARseu menu NÃO irá aparecer.

♦ Para que você visualize-o precisará clicar em SALVAR MODELO.

E aí sim clicar em Suas alterações foram salvas.Visualizar blog

Fonte: Tradução e Adaptação do Tutorial: Easiest Way to Make Tabbed Sidebar for Blogger

A reprodução, parcial ou total deste post é proibida sem a autorização do autor.
A citação da fonte é obrigatória.

Como Instalar o Seu Template

noreply@blogger.com (Áurea) — Mon, 12 Oct 2009 10:28:29 PDT

- Gostou do template? Já clicou na imagem para ampliá-la?
- Sim? Então quer instalá-lo em seu blogger.

1º- Você clica em DOWNLOAD

» Vai direcionar você para o site 4shared onde você vai fazer o download do arquivo ZIPADO do template após alguns segundos.

2º- Salve o arquivo em uma pasta de seu computador e descompacte.

Certifique-se que ele contém um arquivo no formato XML, as imagens do template e alguns arquivos javascript se tiver.

3º- Você vai instalar o arquivo no formato XML que já contém as imagens hospedadas no site TINYPIC.

Se houver algum problema com as imagens do seu template você deve hospedá-las em um site de hospedagem que já conheça e substituir os endereços das imagens antigas pelos seus.

4º- Como Instalar o template no blogger.

a. Vá até seu painel do blogger Clique em: MODELO » Editar HTML;

b. Antes de tudo: Salve uma cópia do template atual para o caso de dar algo errado. Salve também os conteúdos das widgets. TUTORIAL de como salvar o conteúdo das widgets.

c. Clique em Arquivo » Ache e selecione o arquivo que você salvou no seu computador.

d. Clique em Fazer Upload.

Pronto, seu template está instalado.

♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.
Em seguida:
♦ Clique em SALVAR ALTERAÇÕES.

Se estiver tudo OK salve o seu template novo!

NÃO RETIRE OS CRÉDITOS! NÃO É PERMITIDO REDISTRIBUIR OS TEMPLATES OU OS TUTORIAIS DESTE BLOG SEM A PRÉVIA AUTORIZAÇÃO DE SUA DONA.

INFORMAÇÃO IMPORTANTE:
Na mudança de template, se você tiver widgets (elementos de página das sidebars) no seu blog, poderá PERDER todos eles. Para que isto NÃO ACONTEÇA siga este TUTORIAL.

Recurso Leia Mais do Blogger

noreply@blogger.com (Áurea) — Wed, 23 Sep 2009 19:01:09 PDT

Como eu faço templates e desde 2007 os disponibilizo aqui para download, com certeza a maioria deles não possui este recurso que o blogger disponibilizou recentemente.

Já li em vários blogs amigos - os quais indico na sidebar "Vale um Click" - como fazer para ativar o recurso "Leia Mais" do blogger.

Aprendi com meus amigos e vou ensinar a quem usa algum template que criei a ativar este recurso e utilizá-lo em seu blog.

Antes leia este aviso:
► Se você usa algum template que criei que já possui o recurso "Leia Mais" instalado não precisa incluir o recurso do blogger. Se você quiser fazer isso será por sua conta e risco.

Ativando o recurso em templates mais antigos.

1º Passo:

» Use o Ctrl+F e encontre a linha: <data:post.body/>

» Logo abaixo desta linha coloque o código:

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> 
</div>
</b:if>

♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.
Em seguida:
♦ Clique em SALVAR ALTERAÇÕES.

2º Passo:

Como utilizar o recurso:
1ºAtivando o editor atualizado de posts

♦ Clique em SALVAR ALTERAÇÕES.

2º Crie o seu post e aplique o jump break

3º Observação:
Se você não usa o novo Editor de postagens é só inserir a tag:

Antes da palavra que você quer que fique oculta no seu post.

4º Configure as palavras "Mais informações" indo em Elementos de página » Em Postagens no blog » Clique em Editar e Altere o campo que mostra na figura abaixo:

Você pode alterar "Mais informações »" por "Leia mais" ou "Continue lendo", etc.

5º Altere o lado, cor e o aspecto que as palavras "Leia Mais" vão aparecer em seus posts utilizando o CSS:
Para isso:
» Cole o código abaixo acima da tag ]]></b:skin>

.jump-link {
text-align: right; /*Alinhamento do "Leia mais"*/
font-size: 95%; /*Tamanho*/
font-weigth: bold; /*Fonte em negrito*/
margin: 5px 10px 5px 0px;
}
.jump-link a:link, .jump-link a:visited {
color: blue;
text-decoration: none;
}
.jump-link a:hover {
color: red;
text-decoration: none;
}

♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.
Em seguida:
♦ Clique em SALVAR ALTERAÇÕES.

♦ Clique em Visualizar blog para se certificar que deu tudo certo.

Para aprender de formas diferentes sobre este recurso veja os posts abaixo que serviram como fonte para eu criar este tutorial:
♦ Tutorial para “Leia mais…” do Blogger - Sem complicações!
♦ Leia Mais como Recurso do Blogger
♦ Novo Resumo de Postagens do Blogger – Hack “Leia mais”
♦ Jump Break – o hack “Leia mais” do Blogger

Template PinkA3 Atualizado

noreply@blogger.com (Áurea) — Wed, 23 Sep 2009 16:58:36 PDT

Continuando a série de atualizações dos Templates para VOCÊ.

O template que atualizei desta vez foi o lindo PinkA3.
Acho este template lindo, além de ser pink né, é um charme. Rsss...

Como utilizei o Mínima como base para refazer o template, então...
♦ O recurso Jump Break (“Leia mais”) do Blogger já funciona normalmente;
♦ As fotos nos comentários do blogger também já funcionam, basta configurar na aba Configurações ► Comentários ►Em Mostrar imagens de perfil nos comentários? ►Marque a opção Sim;

Clique na imagem para ampliar.

DOWNLOAD | DEMO

NÃO SE ESQUEÇAM, NÃO RETIREM OS CRÉDITOS.
Nem REDISTRIBUAM SEM A MINHA PRÉVIA AUTORIZAÇÃO.

Hack instalado:

Link de Comentários Corrigido

QUALQUER DÚVIDA SOBRE OS HACKS CLIQUE NO LINK PARA ENTENDER MELHOR!

Observações:

♦ Apliquei apenas um hack para não mudar a essência do template. Veja as sugestões no final do post.

♦ Para alterar os links da barra de navegação!
Encontre o seguinte código: (Use Ctrl+F)

<ul class='solidblockmenu'>
<li><a class='current' href='URL do Link'>Home</a>/li>
<li><a href='URL do Link' title=''><b>Ítem2</b></a>/li>
<li><a href='URL do Link' title=''><b>Ítem3</b></a>/li>
<li><a href='URL do Link' title=''><b>Ítem4</b></a>/li>
<li><a href='URL do Link' title=''><b>Ítem5</b></a>/li>
<li><a href='URL do Link' title=''><b>Ítem6</b></a>/li>
</ul>

1- Substitua 'URL do Link' pelo endereço do Link que você quer colocar;
2- Em title=' ' » coloque entre as aspas '____' o título do link;
3- Ítens e Home » Substitua os Ítens pelo título do link para que apareça na barra de navegação.

A Pasta de Download Contém

Código XML;
Imagens usadas no template.

Sugestões de hacks para você usar em seu template:

Aproveitem :P

Template Atualizado em 15/09/2009

Caso algum dos hacks novos do blogger não funcionem você pode consultar meus amigos:
♦ Ativando foto nos comentários e Correções
♦ Jump Break – o hack “Leia mais” do Blogger

15 Feed Icons Super Legais

noreply@blogger.com (Áurea) — Fri, 11 Sep 2009 16:51:23 PDT

Clique na imagem para ir até o link destes Ícones Super Legais

Templates Cute

noreply@blogger.com (Áurea) — Fri, 11 Sep 2009 16:07:59 PDT

Para você que gosta de templates cute, com muita arte e bom gosto. Encontrei este site com vários templates lindos para o blogger e wordpress e são grátis.

Vá até lá clicando na imagem ao lado.
Além de templates lindos a autora posta sobre vários assuntos sobre design.
Muito legal.
Vale um click!

Atualizando este post...

Encontrei também este blog com vários templates de fundos decorados, muito interessante.

Atualizações e Template Angel-1

noreply@blogger.com (Áurea) — Sun, 30 Aug 2009 18:26:03 PDT

Leitores do TPV,

Este mês de setembro será um mês de renovações tanto no layout do TPV quanto para os templates que já criei.
Desde 2007 que faço os templates que disponibilizo para vocês.
Como já viram, o blogger está todos os dias se atualizando e não podemos ficar de fora né!

Juntamente com o projeto de fazer um "regime" no TPV para melhorar a velocidade de carregamento do site.
Vou atualizar os templates mais antigos daqui.

O primeiro que escolhi foi o Angel-1, que foi atualizado e além disso implantei alguns hacks para melhorar sua performance.
Este template já teve quase 2.000 downloads desde Fev de 2008.
Os leitores que já usam este template podem baixar este arquivo e atualizá-lo.

Clique na imagem para ampliar.

DOWNLOAD | DEMO

NÃO SE ESQUEÇAM, NÃO RETIREM OS CRÉDITOS.
Nem REDISTRIBUAM SEM A MINHA PRÉVIA AUTORIZAÇÃO.

Hacks instalados:

Hack Leia Mais com Imagens Reduzidas

Link de Comentários Corrigido

Personalizando a Data do seu Post

QUALQUER DÚVIDA SOBRE OS HACKS CLIQUE NOS LINKS DOS MESMOS PARA ENTENDER MELHOR!

Observações:

♦ Todos os códigos Javascript usados no template estão contidos nele.

A Pasta de Download Contém

Código XML;
Imagens usadas no template.

Sugestões de hacks para você usar em seu template:

Aproveitem :)

Template Atualizado em 29/08/2009

Confira as novidades do Blogger nos posts de ótimos blogs da nossa web:

my Fontbook e um site com Fontes Gratis

noreply@blogger.com (Áurea) — Sun, 30 Aug 2009 16:33:30 PDT

my Fontbook é um site que oferece um Visualizador das Fontes do seu computador on line e pode ser usado livremente por qualquer navegador web.

Basta se cadastrar, confirmar o cadastro no email e fazer o login. Então coloque seu email de login, senha e entre no Font Viewer que demora um pouquinho mas localiza e apresenta as fontes como a imagem ao lado.

Principais Vantagens
Você pode digitar o texto que quer e visualizar em qual fonte fica melhor.

A janela de visualização fonte fornece uma visão geral de todas as fontes instaladas no seu pc;

Você pode imprimir uma fonte selecionada para visualizá-la melhor;

Você pode ver suas fonte na exibição condensados, ou alternar para exibição de lista para ver cada letra com texto exemplo expandido;

Você pode definir tags (etiquetas) para as suas fontes classificando-as de vários tipos diferentes da forma que quiser.

A outra dica é de um site onde você pode baixar fontes gratuitas sem limite de download.
Este site é o FONTex .
Um site de fácil navegação com inúmeras fontes gratuitas para você baixar para o seu computador.

Estas dicas eu vi nos sites:
♦ Smashing apps
♦ By Marina

Atualizando este post...

Hoje encontrei este programa leve, grátis e fácil de baixar que é também um visualizador de fontes.
É só clicar na imagem ao lado para ir até o site e baixar.
O programa abre automaticamente as fontes instaladas no seu pc facilitando a sua escolha.
Já testei e gostei muito.

Atualização em 30/08/2009

Template Iara

noreply@blogger.com (Áurea) — Thu, 03 Sep 2009 16:16:15 PDT

» Este template tem o nome da blogueira Iara dona do blog Mais Atitudes e foi criado em sua homenagem. Um blog que tem a seguinte proposta:"Breves divagações sobre: Comportamento, Cotidiano, Relacionamentos e coisas de mulheres."
Conheço Iara desde 2007 quando criei o Aukimia e desde então, estamos sempre por aí, uma com o link da outra, de vez em quando nos falamos e comentamos. Iara é muito simpática e sincera, qualidades que gosto muito. Ela havia me pedido para fazer um template com uma coluna apenas como é o blog dela, mas não consegui e coloquei uma sidebar no template. Mesmo assim acho que ficou uma combinação bem legal.
Então aproveitem o template.

Mas, NÃO SE ESQUEÇAM, NÃO RETIREM OS CRÉDITOS.
Nem REDISTRIBUAM SEM A MINHA PRÉVIA AUTORIZAÇÃO.

DEMO | DOWNLOAD-4SHARED

Hacks instalados:

Hack Leia Mais com Imagens Reduzidas

Lista de Posts Relacionados no Fim do Post

Paginação no Blogger
» Veja o 2º Passo deste link como configurar a Paginação no Seu Blog para que Funcione Corretamente.

Breadcrumb - Uma ferramenta de Usabilidade

Link de Comentários Corrigido

Personalizando a Data do seu Post

QUALQUER DÚVIDA SOBRE OS HACKS CLIQUE NOS LINKS DOS MESMOS PARA ENTENDER MELHOR!

Observações:

♦ Você deve configurar o ícone com o link do Twitter colocando o seu ID no Twitter. Para isso encontre a linha <a href='http://twitter.com/seuID'> e substitua "seuID" pelo seu ID no Twitter.
♦ Os outros dois links de Feeds e Feeds-Email já estão configurados para funcionar automaticamente.
♦ Todos os códigos Javascript usados no template estão contidos nele.

A Pasta de Download Contém

Código XML;
Imagens usadas no template.

Sugestões de hacks para você usar em seu template:

Aproveitem :)

Instalando o Menu em Abas no Seu Blogger

noreply@blogger.com (Áurea) — Sat, 17 Oct 2009 14:44:38 PDT

CLASSIFICAÇÃO DO TUTORIAL
AVANÇADO

Pesquisando na net aprendi a fazer este menu em abas que está instalado aqui no Templates, da imagem ao lado, mais fácil para quem tem menos experiência com os códigos e mais editável.

Principais Vantagens:
♦ Neste menu você pode aumentar ou diminuir o número de abas e até criar outro menu abaixo;
♦ Simples e fácil de ser adicionado em seu template.

Aprendi a fazer este menu neste site: BarelyFitz Designs
O código javascript é opensource.

Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ SEMPRE TENTE ANTES NUM BLOG DE TESTES.
♥ SALVE O SEU TEMPLATE ANTES DE COMEÇAR, CLICANDO EM Baixar modelo completo.
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

Obs: ♦ Estou utilizando como base o Template: Minima, Designer: Douglas Bowman que é disponibilizado pelo blogger.
♦ Este post foi publicado a 1ª vez em Abril/2008 e está sendo Republicado com várias modificações na intenção de melhorar o aprendizado.

Vamos ao Hack:
Clique em Layout ► Editar HTML.

1º Passo

» Você vai criar uma nova widget/gadget para seu menu em abas.

1º - Adicione o código CSS no HTML do seu template abaixo do código da #sidebar-wrapper(coluna lateral).

♦ O código em vermelho é o que vai ser adicionado.
Ficará desta forma:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;  /* fix for long non-text content breaking IE sidebar float*/
}
#tabsidebar-wrapper{
width: 220px;/*Defina a largura do seu widget*/
margin:30px 0px 5px 0px;
border: 1px none $bordercolor;
float:right;
}

OBS:
♦ margin ► Margens → Siga o raciocínio: 30px-superior, 0px-direita, 5px-inferior, 0px-esquerda Nesta ordem. Defina as margens de acordo com as necessidades do seu template.
♦ float ► Aqui você define qual o lado seu menu vai flutuar: right-direita, left-esquerda.

2º - Acima da tag <div id="'sidebar-wrapper'"> cole o código:

<div id='tabsidebar-wrapper'>

</div><!-- End Tabsidebar-->

♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.

2º Passo

» Copie o código CSS do menu e cole acima da linha ]]></b:skin>(Use Ctrl+F para encontrar esta linha):

/*--------Tabber ---------------------------------*/
.tabberlive .tabbertabhide { display:none; }
.tabberlive {margin-top:8px;}
/*------------ Tabernav=Navegação -------------------*/
ul.tabbernav{ margin:0;
padding: 6px 0;
border-bottom: 1px solid $bordercolor;/*Variável bordercolor pode ser alterada por um código de cor*/
font: bold 12px Verdana, sans-serif;
padding:6px 0; }
ul.tabbernav li{ list-style: none; margin: 0; display: inline; }
/*--- Abas Inativas ---*/
ul.tabbernav li a{
padding: 6px 0.5em;
margin-left:3px;
border: 1px solid $bordercolor;
border-bottom: none;
background:#D5DFE8; /*Cor do fundo das abas inativas*/
text-decoration: none; }
ul.tabbernav li a:link { color: #333; } /*Cor do texto das abas inativas*/
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover{ color:#B30000; /*Cor do texto coloca o mouse sobre a aba*/
background: #dedede; /*Cor do fundo quando coloca o mouse sobre a aba*/
border-color: #dedede;
}
/*--- Abas Ativas ---*/
ul.tabbernav li.tabberactive a{
background-color: #fff; /*Cor do fundo da aba ativa »Deve ser igual a cor do conteúdo da aba*/
color:#B30000; /*Cor das letras da aba ativa*/
border-bottom: 1px solid #fff; /*Deve ser igual a cor do conteúdo da aba*/
}
ul.tabbernav li.tabberactive a:hover {
color: $linkcolor; /*Cor do texto coloca o mouse sobre a aba*/
background: white; /*Cor do fundo coloca o mouse sobre a aba*/
border-bottom: 1px solid white;
}
/*------ Tabbertab = Conteúdo da Tab/Abaixo das Abas -----------*/
.tabberlive .tabbertab {
background:#fff; /*Cor do fundo abaixo »Deve ser igual ao da aba ativa*/
padding:5px;
border:1px solid $bordercolor;
border-top:0; font-size:100%;
}
.tabbertab ul {
list-style:none;
margin:0 0 0;
padding:0 0 0 0px;
}
/*----- Links Internos -----*/
.tabbertab ul li{/*Estilo para os links*/
background:url("http://i8.tinypic.com/6lip3c7.gif") no-repeat; /*Seta para os links*/
background-position:0 5px;
border-bottom:1px dotted #B30000;/*Cor da borda inferior dos links*/
text-indent:10px;
color:$linkcolor;/*Cor do link*/
list-style:none; margin:0; padding:2px 0 3px 2px;
}
/*-----Tabberlive-----*/
.tabberlive .tabbertab h2,.tabberlive .tabbertab h3{display:none;}
.tabberlive#tab1 .tabbertab,.tabberlive#tab2 .tabbertab{height:;overflow:auto;}

» Este código vai definir a aparência do seu menu. Por exemplo se você quer que o fundo das abas inativas fiquem cinza ou azuis, tamanho do menu, etc.

♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.

♦ Clique em SALVAR ALTERAÇÕES.

3º Passo

» Copie o código Javascript abaixo e cole acima da tag </head>:

<script src='http://www.barelyfitz.com/projects/tabber/tabber.js' type='text/javascript'/>

ATENÇÃO

»O menu em abas funciona com um JavaScript que deve ser hospedado por você;
»BAIXE E SALVE o arquivo java que está em azul:
<script src="'http://www.barelyfitz.com/projects/tabber/tabber.js' type='text/javascript'">;
»Hospede no local de sua preferência substituindo o LINK: http://www.barelyfitz.com/projects/tabber/tabber.js no código do seu template pelo LINK fornecido por sua hospedagem(Sugestão Dropbox);
»Desta forma não haverá o risco de suas abas não funcionarem, a não ser que muitas pessoas usem o mesmo endereço do java e sua taxa de transmissão de banda ultrapassar o limite do site de hospedagem.

Você tem a opção de colocar o código javascript incorporado ao seu template, ou seja, Hospedar no próprio Blogger, para que não corra o risco do site de hospedagem dar problemas.

» Para isso copie o código abaixo e cole acima da linha </head>

<!-- JavaScript Tabber-->
<script type='text/javascript'>
//<![CDATA[
/* Copyright (c) 2006 Patrick Fitzgerald */
function tabberObj(argsObj)
{var arg;this.div=null;this.classMain="tabber";this.classMainLive="tabberlive";this.classTab="tabbertab";this.classTabDefault="tabbertabdefault";this.classNav="tabbernav";this.classTabHide="tabbertabhide";this.classNavActive="tabberactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabberid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg];}
this.REclassMain=new RegExp('\b'+this.classMain+'\b','gi');this.REclassMainLive=new RegExp('\b'+this.classMainLive+'\b','gi');this.REclassTab=new RegExp('\b'+this.classTab+'\b','gi');this.REclassTabDefault=new RegExp('\b'+this.classTabDefault+'\b','gi');this.REclassTabHide=new RegExp('\b'+this.classTabHide+'\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null;}}
tabberObj.prototype.init=function(e)
{var
childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false;}
if(e.id){this.id=e.id;}
this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1;}}}
DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title='';}
if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"");}
break;}}}
if(!t.headingText){t.headingText=i+1;}
DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabber=this;DOM_a.tabberIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabberid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9-]/gi,''));DOM_a.id=aId;}
DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li);}
e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabber:this});}
return this;};tabberObj.prototype.navClick=function(event)
{var
rVal,a,self,tabberIndex,onClickArgs;a=this;if(!a.tabber){return false;}
self=a.tabber;tabberIndex=a.tabberIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabber':self,'index':tabberIndex,'event':event};if(!event){onClickArgs.event=window.event;}
rVal=self.onClick(onClickArgs);if(rVal===false){return false;}}
self.tabShow(tabberIndex);return false;};tabberObj.prototype.tabHideAll=function()
{var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i);}};tabberObj.prototype.tabHide=function(tabberIndex)
{var div;if(!this.tabs[tabberIndex]){return false;}
div=this.tabs[tabberIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide;}
this.navClearActive(tabberIndex);return this;};tabberObj.prototype.tabShow=function(tabberIndex)
{var div;if(!this.tabs[tabberIndex]){return false;}
this.tabHideAll();div=this.tabs[tabberIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabberIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabber':this,'index':tabberIndex});}
return this;};tabberObj.prototype.navSetActive=function(tabberIndex)
{this.tabs[tabberIndex].li.className=this.classNavActive;return this;};tabberObj.prototype.navClearActive=function(tabberIndex)
{this.tabs[tabberIndex].li.className='';return this;};function tabberAutomatic(tabberArgs)
{var
tempObj,divs,i;if(!tabberArgs){tabberArgs={};}
tempObj=new tabberObj(tabberArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabberArgs.div=divs[i];divs[i].tabber=new tabberObj(tabberArgs);}}
return this;}
function tabberAutomaticOnLoad(tabberArgs)
{var oldOnLoad;if(!tabberArgs){tabberArgs={};}
oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabberAutomatic(tabberArgs);};}else{window.onload=function(){oldOnLoad();tabberAutomatic(tabberArgs);};}}
if(typeof tabberOptions=='undefined'){tabberAutomaticOnLoad();}else{if(!tabberOptions['manualStartup']){tabberAutomaticOnLoad(tabberOptions);}}  //]]>
</script>

♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.

♦ Clique em SALVAR ALTERAÇÕES.

4º Passo

» Agora você vai colocar o código HTML e fazer funcionar seu menu em abas.Acrescente o código no local que deseja no seu blog.

Por exemplo: Se você quer que fique acima da sidebar (coluna lateral) do seu blog deve ser colocado acima do código correspondente ao da sidebar → <div id="'sidebar-wrapper'">.

1º - Copie o código abaixo:

<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='tabbertab' id='tabbertab1' maxwidgets='1' preferred='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabbertab' id='tabbertab2' maxwidgets='1' preferred='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabbertab' id='tabbertab3' maxwidgets='1' preferred='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabbertab' id='tabbertab4' maxwidgets='1' preferred='yes'/>
</div>
</div><!-- End tab1-->

<div class='tabber' id='tab2'>
<div class='tabbertab'>
<b:section class='tabbertab' id='tabbertab5' maxwidgets='1' preferred='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabbertab' id='tabbertab6' maxwidgets='1' preferred='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabbertab' id='tabbertab7' maxwidgets='1' preferred='yes'/>
</div>
</div><!-- End tab2-->

2º - Cole este código entre as tags:

<div id='tabsidebar-wrapper'>

</div><!-- End Tabsidebar-->

» Criadas no 1º Passo. Lembra?

3º - Observações Importantes:

♦ Com este código acima você irá acrescentar 2 menus em abas, sendo o primeiro com 4 abas e o segundo com 3 abas.

♦ Você pode retirar um dos menus RETIRANDO este código:

<div class='tabber' id='tab2'>
<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab5' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab6' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab7' maxwidgets='1' showaddelement='yes'/>
</div>
</div><!-- End tab2-->
</div><!-- End Tabsidebar-->

♦ Se você quiser acrescentar mais abas repita o código:

<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab#' maxwidgets='1' showaddelement='yes'/>
</div>

♦ Não se esqueça de alterar # por um número que não se repita.

♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.

♦ Clique em SALVAR ALTERAÇÕES.

Post Atualizado em 17/08/09 e Republicado nesta data.

A reprodução, parcial ou total deste post é proibida sem a autorização do autor.
A citação da fonte é obrigatória.

Hack Leia Mais com Imagens Reduzidas

noreply@blogger.com (Áurea) — Sun, 16 Aug 2009 09:21:00 PDT

CLASSIFICAÇÃO DO TUTORIAL
AVANÇADO

Existem várias formas de você colocar o hack leia mais em seu blog.
Algumas das quais eu já ensinei aqui no TPV.
♦ Hack Leia mais com Posts Expansíveis → Neste hack os posts se expandem na página principal do blog como um efeito sanfona.
♦ Hack Leia mais → Neste hack podemos escolher qual parte do post ficará oculta na página principal e qual ficará à mostra. Quando clicamos em "Leia mais" a página do post se abre saindo da página principal.

» Hoje vou ensinar como aplicar no seu blog o hack de Posts Resumidos Automaticamente com Thumbnails onde o próprio hack já define quantos caracteres irão aparecer na página principal do blog automaticamente sem que você defina qual parte do post irá aparecer na página principal.
» Além deste recurso este hack também apresenta a possibilidade de aparecer uma imagem reduzida (thumbnail) da imagem que você adicionou no post, também na página principal.
» Este hack é a Versão 4.1 Auto Readmore criada pelo Vietnamita Anhvo dono do blog VIETWEBGUIDE.COM

Principais Vantagens:
♥ Você não precisa se preocupar com qual parte vai se expandir ou não, tendo que aplicar o <span="fullpost">Conteúdo oculto < /span> no seu post, como acontece com os hacks anteriores;
♥ O post da página principal do seu blog aparece resumido automaticamente → Isso diminui o trabalho na hora de criar o post;
♥ Você pode configurar quantos caracteres podem aparecer na página inicial do post, qual o tamanho da imagem reduzida e de qual lado ela deve ficar no resumo do post;
♥ As miniaturas(thumbnails) das imagens não ficam deformadas nos resumos dos posts;
♥ Você tem a opção de limitar, no seu post, até onde quer que apareça o resumo usando apenas uma tag ().

Obs: Se você já tem o hack instalado em seu blog pode atualizá-lo para esta versão 4.1.

Vamos ao hack:
Clique em Layout ► Editar HTML ► Clique em Expandir modelos de widgets.

1º- Passo:

» Encontre as linhas:

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

Substitua a linha:

<data:post.body/>

Pelo código:

<b:if cond='data:blog.pageType != "item"'>
<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 cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Personalizando....

» Você pode substituir as palavras »»Leia mais... Por Continue lendo»», Resto do Post», etc.

» Você também pode personalizar as palavras »»Leia mais... criando um comando CSS.

Copie e cole acima da linha ]]></b:skin> do HTML do seu blog o comando CSS abaixo:

.rmlink {
font-size: 120%;
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*/

♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.

2º- Passo:

» Encontre a tag: </head>

Cole abaixo desta tag o código abaixo:

<!-- JavaScript Posts Resumidos-->
<!--
/*****************************************************
Auto-readmore link script, version 4.0 (for blogspot)
(C)2009 by Anhvo
Homepage:  http://vietwebguide.com 
Please dont remove this copyright or change it into your own
******************************************************/
-->

<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;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ; 
var classicMode = false ;
var summary_noimg = 50;
var summary_img = 40;
var indent = 3;
</script>
<script  type='text/javascript'>
//<![CDATA[
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}

function getSummaryLikeWP(id) {
        return document.getElementById(id).innerHTML.split(/<!--\s*more\s*-->/)[0];
}

function getSummaryImproved(post,max){
   var re = /<.*?>/gi
   var re2 = /<br.*?>/gi
   var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi
   var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi
   
   post = post.replace(re4,'')
   post = post.replace(re3,'<br /> ').split(re2)
   
   for(var i=0; i<post.length; i++){
    post[i] = post[i].replace(re,'');
   }
 var post2 = new Array();
 for(var i in post) {
  //if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);
  if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;

 }
 
 
 var s = "";
 var indentBlank = "";
 for(var i=0;i<indent;i++){
  indentBlank += " ";
 }
 if(post2.join('<br/>').split(' ').length < max-1 ){
   s = post2.join(indentBlank +' <br/>');
 } else {
  var i = 0;
  while(s.split(' ').length < max){
   s += indentBlank + ' ' + post2[i]+'<br/>';
   i++;
  }
 }  
 return s;
}


function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var content = div.innerHTML;
 if (/<!--\s*more\s*-->/.test(content)) {
  div.innerHTML = getSummaryLikeWP(pID);
  div.style.display = "block";
 } 
 else {
 
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
 if(img.length>=1) { 
  if(thumbnail_mode == "float") {
   imgtag = '<span class="thumbnailimg"><img src="'+img[0].src+'" /></span>';
   summ = summary_img;
  } else {
   imgtag = '<div class="thumbnailimg" align="center"><img src="'+img[0].src+'" /></div>';
   summ = summary_img;
  }
 }
 
 var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';
 
 div.innerHTML = summary;
 div.style.display = "block";
 }
}
//]]>
</script><!-- Fim JavaScript Posts Resumidos-->

♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.
♦ Clique em SALVAR ALTERAÇÕES.

Vamos entender o código acima:

Veja a parte que está em vermelho. Nela você pode fazer alterações para personalizar os posts resumidos do seu blog.

<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;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
var classicMode = false ;
var summary_noimg = 50;
var summary_img = 40;
var indent = 3;
</script>

1º Configurando a parte em CSS:

.thumbnailimg IMG {
max-width:150px; ► Valor máximo da largura da miniatura da imagem do seu post
width: expression(this.width > 150 ? 150: true);
max-height:120px; ► Valor máximo da altura da miniatura da imagem do seu post
height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
float:left; ► Lado que a miniatura ficará flutuada no resumo do post
padding:0px 10px 5px 0px; ► Margem interna da imagem
}

2º Configurando alguns pontos do Script:

var thumbnail_mode = "no-float"; ► Para que a miniatura fique sempre à esquerda selecione "float". Determina a flutuabilidade variável à esquerda da imagem.
var classicMode = false ; ► False para modo clássico desligado. É aconselhável deixar em "true " se a var thumbnail_mode for definida para "float".
» Sugiro que você faça testes e mantenha o que melhor lhe agradar. Eu, prefiro o modo "true".
var summary_noimg = 50; ► Corresponde ao corte do resumo quando seu post NÃO tem imagem.
var summary_img = 40; ► Corresponde ao corte do resumo quando seu post tem imagem.
» Respectivamente o valor 50 significa "50 palavras" e o valor 40 significa "40 palavras" para o classicMode definido como "true".

♦ Clique em VISUALIZAR para ver suas alterações.
♦ Se estiver tudo OK»» Clique em SALVAR ALTERAÇÕES.

3º Passo - Opicional

» Você pode definir até onde o seu post será exibido na página principal usando uma única tag.

<!-- more -->

Você pode usar esta tag no meio do seu post, por exemplo veja a imagem:

OBSERVAÇÃO IMPORTANTE: Quando você configurar até onde será o resumo do seu post e esta parte tiver uma imagem, esta imagem não irá aparecer como miniatura da forma que aparece no resumo automático .

Fonte: Tradução e adaptação do link Auto Readmore ver 4.1

Este post deu muito trabalho para ser feito. Portanto:
Sua reprodução, parcial ou total, é proibida sem a autorização do autor.
A citação da fonte é obrigatória.

Como Repetir a Data do Post

noreply@blogger.com (Áurea) — Sun, 30 Aug 2009 16:12:55 PDT

CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO

No post Personalizando a Data do seu Post ensinei como colocar a data no formato que tem aqui no blog. Este formato possibilita que coloquemos imagens na data e que ela fique com a aparência de calendário, basta colocar uma imagem de fundo e ajustar o código CSS da data. (Não se preocupem, estou produzindo um tutorial de como colocar a imagem na data para que fique como calendário.)

Para quem já usa este recurso que ensinei neste post, aprendi como repetí-la quando criamos posts no mesmo dia. Um recurso que ainda não tem no blogger.

Se você pretende aplicar este recurso pela primeira vez leia primeiro o post Personalizando a Data do seu Post , aí então faça a alteração que estou ensinando agora.
Lembra que você teve que substituir a linha:

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

Pelo código:

<div id='fecha'><script>remplaza_fecha('<data:post.dateHeader/>');</script></div>

Pois é. Para que sua data se repita você deve substituir este código acima ou a linha <h2 class='date-header'><data:post.dateHeader/></h2> por este código abaixo:

<div id='fecha'>
<script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='fecha'>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>
<script>remplaza_fecha(ultimaFecha);</script>
</div>

Clique em SALVAR CONFIGURAÇÕES

Assim sua data se repetirá quando você criar mais de um post no mesmo dia.

Aprendi esta dica no Templates para Novo Blogger e adaptei ao tutorial que já havia publicado aqui.

Post Atualizado em 30/08/09

Template Left Black

noreply@blogger.com (Áurea) — Mon, 17 Aug 2009 12:06:37 PDT

Este template é a versão escura do Gray Left com um papel de parede como background.
A fonte usada é Arial diferente da Trebuchet do Gray Left.

DEMO | DOWNLOAD-4SHARED

Orientações Sobre o Menu e Caixa de Pesquisas

Hacks instalados:

Postagens Resumidas com imagem (thumbnail)

Abas nos Comentários
» Para que Funcione corretamente Configure os comentários do seu blog em: Configurações » Comentários » Posição do formulário de comentários » Marque:Postagem abaixo incorporada.

Lista de Posts Relacionados no Fim do Post

Paginação no Blogger
» Veja no 2º Passo neste link como configurar para que a paginação no seu blog funcione.

Breadcrumb - Uma ferramenta de Usabilidade

Link de Comentários Corrigido

Personalizando a Data do seu Post

QUALQUER DÚVIDA SOBRE OS HACKS CLIQUE NOS LINKS DOS MESMOS PARA ENTENDER MELHOR!

A Pasta de Download Contém

Código XML;
Imagens usadas no template;
Todos os códigos dos javascript usados.

Sugestões de hacks para você usar em seu template:

Aproveitem :)

Template Gray Left

noreply@blogger.com (Áurea) — Mon, 10 Aug 2009 15:53:56 PDT

Seguindo a mesma linha do Template Eddie este template tem um design mais moderno, um menu de navegação e links para feeds e feeds por email já configurados para o endereço do blog que usá-lo. (Se tiver um feed é claro.)

DEMO | DOWNLOAD-4SHARED

Orientações Sobre o Menu e Caixa de Pesquisas

Hacks instalados:

Postagens Resumidas com imagem (thumbnail)

Abas nos Comentários
» Para que Funcione corretamente Configure os comentários do seu blog em: Configurações » Comentários » Posição do formulário de comentários » Marque:Postagem abaixo incorporada.

Lista de Posts Relacionados no Fim do Post

Paginação no Blogger
» Veja no 2º Passo neste link como configurar para que a paginação no seu blog funcione.

Breadcrumb - Uma ferramenta de Usabilidade

Link de Comentários Corrigido

Personalizando a Data do seu Post

QUALQUER DÚVIDA SOBRE OS HACKS CLIQUE NOS LINKS DOS MESMOS PARA ENTENDER MELHOR!

A Pasta de Download Contém

Código XML;
Imagens usadas no template;
Todos os códigos dos javascript usados.

Sugestões de hacks para você usar em seu template:

Aproveitem :)

Paginação no Blogger

noreply@blogger.com (Áurea) — Wed, 19 Aug 2009 19:50:19 PDT

CLASSIFICAÇÃO DO TUTORIAL
AVANÇADO

Este hack é para você colocar, abaixo dos posts do seu blog, uma linha de paginação onde você vai poder escolher qual página quer ir dentro do blog. Facilitando a navegação. (Usabilidade)

Veja a demonstração aqui mesmo no TPV, vá até o fim da página principal.

Vantagens:
» O usuário pode navegar nas páginas de posts do seu blog e voltar quando quiser naquela que o chamou a atenção;
» Melhor organização do seu blog;
» Design simples e bonito sem ocupar muito espaço.

Vamos ao hack:
Clique em Layout ► Editar HTML ► Clique em Expandir modelos de widgets.

1º- Passo:

» Encontre a linha:

<b:include name='nextprev'/>

» Copie o código abaixo:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
.blogpager {
font-size:16px;
color: #060;
font-weight:bold;}
A.blogpager:hover {
background:transparent;
color:white;}
#vwg-pager-first, #vwg-pager-last, #vwg-pager-next, #vwg-pager-prev{
padding:2px 5px;
border:1px #cccccc solid;
font-weight:bold;
margin:2px;}
#vwg-pager-first:hover, #vwg-pager-last:hover, #vwg-pager-next:hover, #vwg-pager-prev:hover{
padding:2px 5px;
border:1px navy solid;
background-color:#24618E;
color:white;
font-weight:bold;}
</style>
</b:if>
<div align='center' style='margin:5px;'>
<form action='#' name='pager20'>
<span id='vwg-pager-first'/> <span id='vwg-pager-prev'/> <input name='showingpage' onfocus='this.select()' size='4' title='Enter page number that You want to go' type='text' value='init...'/>/<input disabled='disabled' name='pagestotal' size='4' type='text' value='init...'/> <input onclick='checkpager()' type='button' value='Go'/> <span id='vwg-pager-next'/> <span id='vwg-pager-last'/>
</form>
</div>

<script type='text/javascript'>
var blogID = &quot;3972232990891503524&quot;;
var home_page = &quot;http://tpviara.blogspot.com/&quot;;
var pager_max_main = 3;

var pager_first_text = &quot;First&quot;;
var pager_last_text = &quot;Last&quot;;
var pager_prev_text = &quot;Prev&quot;;
var pager_next_text = &quot;Next&quot;;
</script>
<script src="http://www.freewebs.com/anhvo/blogger/blogger_pager_script_v20.js" type="text/javascript"></script>

» Cole abaixo da linha:

<b:include name='nextprev'/>

♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.

Antes de ir para o 2ºPasso:

» Você pode colocar o código Javascript direto no seu template, evitando a hospedagem externa.
► Para isso substitua:

<script src="http://www.freewebs.com/anhvo/blogger/blogger_pager_script_v20.js" type="text/javascript"></script>

► Pelo código javascript:

<script type='text/javascript'>
//<![CDATA[
/********************************
Blogger Pager Script v2.0
(C) 2008 by Anhvo, http://vietwebguide.com
Visit http://www.vietwebguide.com to get more cool hacks
********************************/

var pager_max_results = 20;
if(location.href.match("max-results=")){
pager_max_results = parseInt(location.href.substring(location.href.indexOf("max-results=")+12).split("&")[0]);
} else if(!location.href.match("/search/label/")){
pager_max_results = pager_max_main;
}


var per_page = pager_max_results ;
if(!location.href.match('/search/label/')) {
pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary";
pager_pageurl = home_page+"search";
}
else {
label = location.href.split("/")[5];
label = label.split("?")[0];
label = label.replace(/ /g,"%20");
pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary/-/"+label;
pager_pageurl = home_page+"search/label/"+label;
}

var pager_opening = 1;
if(location.href.match("popening=")){
pager_opening = parseInt(location.href.substring(location.href.indexOf("popening=")+9).split("&")[0]);
}

var num_pages = 1;

function createBlogPager(){
var script = document.createElement('script');
script.src = pager_feedx+"?start-index=1&max-results=0&alt=json-in-script&callback=countnumpost";
script.type = "text/javascript";
document.getElementsByTagName('head')[0].appendChild(script)
}

function countnumpost(json) {
var posts  = json.feed.openSearch$totalResults.$t;
num_pages = (posts%per_page == 0) ? posts/per_page : Math.floor(posts/per_page)+1;
//////////////////////////////
var a1 = document.createElement("a");
a1.className = "blogpager";
a1.title = "Jump to page: (1)";
a1.href = "javascript:page(1)";
a1.innerHTML = pager_first_text;
document.getElementById("vwg-pager-first").appendChild(a1);
var a4 = document.createElement("a");
a4.className = "blogpager";
a4.title = "Jump to page: ("+num_pages+")";
a4.href = "javascript:page("+num_pages+")";
a4.innerHTML = pager_last_text;
document.getElementById("vwg-pager-last").appendChild(a4);

var prev = (pager_opening!=1) ? pager_opening-1 : 1;
var a2 = document.createElement("a");
a2.className = "blogpager";
a2.title = "Jump to page: ("+prev+")";
a2.href = "javascript:page("+prev+")";
a2.innerHTML = pager_prev_text;
document.getElementById("vwg-pager-prev").appendChild(a2);

var next = (pager_opening!=num_pages) ? pager_opening+1 : num_pages;
var a3 = document.createElement("a");
a3.className = "blogpager";
a3.title = "Jump to page: ("+next+")";
a3.href = "javascript:page("+next+")";
a3.innerHTML = pager_next_text;
document.getElementById("vwg-pager-next").appendChild(a3);

document.pager20.showingpage.value = pager_opening;
document.pager20.pagestotal.value = num_pages;

}

function checkpager(){
var uinput = parseInt(document.pager20.showingpage.value);
if((uinput <= num_pages)&&(uinput >= 1)) {
page(uinput);
}
else {
alert("Invalid page number. Please try by another!");
document.pager20.showingpage.focus() ;
document.pager20.showingpage.select();
}
}

function getDateAndGo(json){
var date2 = json.feed.entry[0].published.$t;
ss = parseFloat(date2.substring(17,19));
if(ss<59) ss++;
if(ss<10) { ss = "0"+ ss; }
date4  = encodeURIComponent(date2.substring(0,17)+ss+date2.substring(23,date2.length));
location.href = pager_pageurl+'?updated-max='+date4+'&max-results=' + per_page + '&popening=' + pager_opening;
}

function page(startindex) {
pager_opening = startindex;
var i = per_page*(startindex-1)+1;
var script2 = document.createElement("script");
script2.src =  pager_feedx+"?start-index="+i+"&max-results=1&alt=json-in-script&callback=getDateAndGo";
document.getElementsByTagName('head')[0].appendChild(script2)
}


createBlogPager();
//]]>
</script>

» O código COMPLETO da Paginação ficará assim:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
.blogpager {
font-size:16px;
color: #060;
font-weight:bold;}
A.blogpager:hover {
background:transparent;
color:white;}
#vwg-pager-first, #vwg-pager-last, #vwg-pager-next, #vwg-pager-prev{
padding:2px 5px;
border:1px #cccccc solid;
font-weight:bold;
margin:2px;}
#vwg-pager-first:hover, #vwg-pager-last:hover, #vwg-pager-next:hover, #vwg-pager-prev:hover{
padding:2px 5px;
border:1px navy solid;
background-color:#24618E;
color:white;
font-weight:bold;}
</style>
</b:if>
<div align='center' style='margin:5px;'>
<form action='#' name='pager20'>
<span id='vwg-pager-first'/> <span id='vwg-pager-prev'/> <input name='showingpage' onfocus='this.select()' size='4' title='Enter page number that You want to go' type='text' value='init...'/>/<input disabled='disabled' name='pagestotal' size='4' type='text' value='init...'/> <input onclick='checkpager()' type='button' value='Go'/> <span id='vwg-pager-next'/> <span id='vwg-pager-last'/>
</form>
</div>

<script type='text/javascript'>
var blogID = &quot;3972232990891503524&quot;;
var home_page = &quot;http://tpviara.blogspot.com/&quot;;
var pager_max_main = 3;

var pager_first_text = &quot;First&quot;;
var pager_last_text = &quot;Last&quot;;
var pager_prev_text = &quot;Prev&quot;;
var pager_next_text = &quot;Next&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
/********************************
Blogger Pager Script v2.0
(C) 2008 by Anhvo, http://vietwebguide.com
Visit http://www.vietwebguide.com to get more cool hacks
********************************/

var pager_max_results = 20;
if(location.href.match("max-results=")){
pager_max_results = parseInt(location.href.substring(location.href.indexOf("max-results=")+12).split("&")[0]);
} else if(!location.href.match("/search/label/")){
pager_max_results = pager_max_main;
}


var per_page = pager_max_results ;
if(!location.href.match('/search/label/')) {
pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary";
pager_pageurl = home_page+"search";
}
else {
label = location.href.split("/")[5];
label = label.split("?")[0];
label = label.replace(/ /g,"%20");
pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary/-/"+label;
pager_pageurl = home_page+"search/label/"+label;
}

var pager_opening = 1;
if(location.href.match("popening=")){
pager_opening = parseInt(location.href.substring(location.href.indexOf("popening=")+9).split("&")[0]);
}

var num_pages = 1;

function createBlogPager(){
var script = document.createElement('script');
script.src = pager_feedx+"?start-index=1&max-results=0&alt=json-in-script&callback=countnumpost";
script.type = "text/javascript";
document.getElementsByTagName('head')[0].appendChild(script)
}

function countnumpost(json) {
var posts  = json.feed.openSearch$totalResults.$t;
num_pages = (posts%per_page == 0) ? posts/per_page : Math.floor(posts/per_page)+1;
//////////////////////////////
var a1 = document.createElement("a");
a1.className = "blogpager";
a1.title = "Jump to page: (1)";
a1.href = "javascript:page(1)";
a1.innerHTML = pager_first_text;
document.getElementById("vwg-pager-first").appendChild(a1);
var a4 = document.createElement("a");
a4.className = "blogpager";
a4.title = "Jump to page: ("+num_pages+")";
a4.href = "javascript:page("+num_pages+")";
a4.innerHTML = pager_last_text;
document.getElementById("vwg-pager-last").appendChild(a4);

var prev = (pager_opening!=1) ? pager_opening-1 : 1;
var a2 = document.createElement("a");
a2.className = "blogpager";
a2.title = "Jump to page: ("+prev+")";
a2.href = "javascript:page("+prev+")";
a2.innerHTML = pager_prev_text;
document.getElementById("vwg-pager-prev").appendChild(a2);

var next = (pager_opening!=num_pages) ? pager_opening+1 : num_pages;
var a3 = document.createElement("a");
a3.className = "blogpager";
a3.title = "Jump to page: ("+next+")";
a3.href = "javascript:page("+next+")";
a3.innerHTML = pager_next_text;
document.getElementById("vwg-pager-next").appendChild(a3);

document.pager20.showingpage.value = pager_opening;
document.pager20.pagestotal.value = num_pages;

}

function checkpager(){
var uinput = parseInt(document.pager20.showingpage.value);
if((uinput <= num_pages)&&(uinput >= 1)) {
page(uinput);
}
else {
alert("Invalid page number. Please try by another!");
document.pager20.showingpage.focus() ;
document.pager20.showingpage.select();
}
}

function getDateAndGo(json){
var date2 = json.feed.entry[0].published.$t;
ss = parseFloat(date2.substring(17,19));
if(ss<59) ss++;
if(ss<10) { ss = "0"+ ss; }
date4  = encodeURIComponent(date2.substring(0,17)+ss+date2.substring(23,date2.length));
location.href = pager_pageurl+'?updated-max='+date4+'&max-results=' + per_page + '&popening=' + pager_opening;
}

function page(startindex) {
pager_opening = startindex;
var i = per_page*(startindex-1)+1;
var script2 = document.createElement("script");
script2.src =  pager_feedx+"?start-index="+i+"&max-results=1&alt=json-in-script&callback=getDateAndGo";
document.getElementsByTagName('head')[0].appendChild(script2)
}


createBlogPager();
//]]>
</script>

♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.
♦ Clique em SALVAR ALTERAÇÕES.

2º- Passo:

Viu as 3 linhas em vermelho?

1- var blogID = &quot;5879906334350418630&quot;;2- var home_page = &quot;http://endereçodoseublog.blogspot.com/&quot;;3- var pager_max_main = 6;

Você deve fazer algumas alterações nestas linhas:

1- Colocar o número do seu blogID:

Olhe para a barra de endereços do seu navegador. Olhou?
Veja o endereço do blogger como este da imagem:

Veja que neste endereço tem o número do ID do seu blog. Copie este número e substitua o nº em verde na linha do código abaixo:

var blogID = &quot;5879906334350418630&quot;;

2- Substituir a URl: [http://endereçodoseublog.blogspot.com/] pelo Real Endereço do SEU BLOG.

var home_page = &quot;http://endereçodoseublog.blogspot.com/&quot;;

3-Posts a serem Exibidos na Página Principal

Sabe quando você seleciona a quantidade de posts que devem ser exibidos no seu blog? Pois é, o Número de postagens da página inicial deve ser igual ao número do [var pager_max_main].

var pager_max_main = 6;

Para isso:
Clique em Elementos de página » Postagens no blog » Clique em Editar » Veja a imagem.

♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.
♦ Clique em SALVAR ALTERAÇÕES.

3º- Passo:

» Para que seu Blog Pager funcione corretamente e SEMPRE você deve baixar o Arquivo Javascript. Veja em azul no código original.

Endereço do Javascript para Download

» Hospedá-lo em um site de sua preferência. Sugestão Dropbox.
» E substituir o endereço do Javascript original: [http://www.freewebs.com/anhvo/blogger/blogger_pager_script_v20.js] pelo endereço hospedado por você.

4º- Passo:

» Tirar os links Postagens mais recentes e Postagens mais antigas OU NÃO:
Em Layout ► Editar HTML ► Clique em Expandir modelos de widgets
» Encontre as linhas de código abaixo e apague-as:

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

» OU NÃO → Encontre as linhas acima e altere para que apareçam apenas nas páginas dos posts, sem as palavras Postagens mais recentes e Postagens mais antigas e SIM com os síbolos ◄ e ►.
» Basta selecionar os códigos descritos acima e substituir pelas linhas abaixo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>◄</a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>►</a>
</span>
</b:if></b:if>

♦ Clique em SALVAR ALTERAÇÕES

Pronto! Seu blog ficou muito mais elegante com este hack! ;)

Fonte: Tradução e adaptação do link Blog Pager Version 2.0

Template Eddie

noreply@blogger.com (Áurea) — Sun, 09 Aug 2009 17:24:31 PDT

» Baseado no template Mínima Left do blogger.
» Um template clean com vários hacks instalados.

DEMO | DOWNLOAD-4SHARED

Hacks instalados:

Postagens Resumidas com imagem (thumbnail)

Abas nos Comentários
» Para que Funcione corretamente Configure os comentários do seu blog em: Configurações » Comentários » Posição do formulário de comentários » Marque:Postagem abaixo incorporada.

Lista de Posts Relacionados no Fim do Post

Paginação no Blogger
» Veja no 2º Passo neste link como configurar para que a paginação no seu blog funcione.

Breadcrumb - Uma ferramenta de Usabilidade

Link de Comentários Corrigido

QUALQUER DÚVIDA SOBRE OS HACKS CLIQUE NOS LINKS DOS MESMOS PARA ENTENDER MELHOR!

A Pasta de Download Contém

Código XML;
Imagens usadas no template;
Todos os códigos dos javascript usados.

Sugestões de hacks para você usar em seu template:

Aproveitem :)

Abrir Links da Lista de Links em uma Nova Página

noreply@blogger.com (Áurea) — Sat, 24 Oct 2009 20:39:24 PDT

Todos sabemos que quando criamos uma lista de links no blogger ela está configurada para quando clicarmos no link este se abra na mesma página do seu blog.

Há uma forma de direcionarmos os links da lista de links do blogger para outra aba ou página que não a mesma que já exibe o nosso blog.

1º- Você deve ter a lista de links ou criá-la em seu blog.

Para isso: ♦ Clique em Layout » Elementos de Página » Adicionar um Gadget e crie a sua Lista de Links.

♦ Depois clique em Editar HTML » Marque a caixinha Expandir modelos de widgets

2º - Encontre o código correspondente à sua lista de links:

Você pode usar o recurso Ctrl+F e procurar o título da lista de links que criou ou já tinha em seu blog ou pela ID LinkList se seu gadget não tiver título.
O código será semelhante à este:

<b:widget id='LinkList1' locked='false' title='Lista de Links' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

» Para que seus links abram em uma aba diferente você deve adicionar o código:

 target='_blank'

Na linha:

<li><a expr:href='data:link.target'><data:link.name/></a></li>

Ficando assim:

<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>

»Você pode também adicionar o atributo rel='nofollow'

Ficando assim:

<li><a expr:href='data:link.target' target='_blank' rel='nofollow='><data:link.name/></a></li>

Mas antes de colocar o rel='nofollow' clique neste LINK, LEIA e entenda quando ele deve ser usado.

Fonte: List links open in new window

Ja Ouviram Falar em Sitemap?

noreply@blogger.com (Áurea) — Fri, 07 Aug 2009 08:59:13 PDT

"Um Sitemap é uma lista das páginas do seu site. Criar e enviar um Sitemap ajuda a garantir que os Mecanismos de Busca, sejam o Google, Bing, Yahoo, etc, tenham conhecimento de todas as páginas do seu site, incluindo URLs que não seriam normalmente encontrados através do processo normal de rastreamento dos mesmos."

Fonte:Sobre os Sitemaps

Mas porque estou falando sobre isso?

Este é um recurso de SEO que ajuda o seu blog a ser "mais encontrado" nos sites de busca.
Estive lendo sobre e resolvi selecionar alguns bons links que nos ajudam a entender melhor sobre estes assuntos.

Vamos lá:

♦Sitemap completo no Blogger com Feedburner - Este é um artigo do Usuário Compulsivo sobre os Sitemaps, foi a primeira vez que ouvi falar em Sitemap para os blogs.

♦Ferramentas para Webmasters e Sitemap - Considero este artigo um roteiro excelente de dicas sobre SEO. Porque além de explicar sobre adicionar o seu Sitemap no Google em Ferramentas para Webmasters o Marcos Lemos(autor) também cita outros artigos dele mesmo relacionados ao assunto que também devem ser lidos.

♦Bing Webmaster Center - Sitemap - Também é um artigo do Marcos Lemos que me ensinou a adicionar os meus blogs no Webmaster Center do Bing.

♦Guia de Otimização para Mecanismos de Pesquisa - Este é o material criado e distribuído pelo setor de Ajuda a Webmasters do Google.

Então não perca tempo, leia e aprenda! :)

Icones de Social Bookmarking

noreply@blogger.com (Áurea) — Sun, 02 Aug 2009 09:48:50 PDT

Agora que você já sabe o que é um site de social bookmarking, vai amar estes ícones para colocar em seu blog.

Esta é uma amostra de um post que tem por volta de 50 Packs de Social Service e Bookmarking Icones para Bloggers
Vai lá e escolha o seu.

White Magik - A free Social Icon Pack

80 Social Network Icon Pack

High Quality Web 2.0 Services Icons in PNG and PSD

O que é Social Bookmarking

noreply@blogger.com (Áurea) — Sun, 02 Aug 2009 09:48:04 PDT

Ao ler este post você verá no fim alguns ícones muito simpáticos iguais aos da imagem ao lado.
Estes ícones vêm acompanhados com as palavras: Adicione aos Favoritos, aí você passa o mouse em cima deles e aparece: Adicionar ao Twitter, Adicionar ao BlogBlogs, etc...

Agora você me pergunta: Para que isso? O que são estes ícones? O que significa "Adicione aos favoritos"? Porque usá-los?

Na verdade esta foi a pergunta que eu me fiz e dediquei a quarta-feira praticamente inteira para responder para mim e para os leitores do TPV.

O que é Social Bookmarking?

De acordo com a Wikipédia= O Social Bookmarking, resumidamente, é um sistema de bookmarks (também conhecido como favoritos ou marcadores) online, público e gratuíto, que tem por finalidade disponibilizar seus favoritos na internet para o seu fácil acesso e para compartilhar com os usuários deste tipo de serviço. Pode ser classificado como parte do conceito que é chamado de Web 2.0.

Quando o seu leitor se interessa pelo conteúdo do seu post e o considera relevante ele pode adicionar ou "favoritar" o seu post ou site em mecanismos de Social Bookmarking para que possa acessar de qualquer computador. O usuário do site de social bookmarking pode compartilhar ou não o conteúdo da página adicionada com outros internautas tornando seus favoritos públicos ou não.

Para facilitar a vida do seu leitor você coloca os ícones dos principais sites de social bookmarking ao final (no rodapé) dos seus posts. Aí ele clica sobre um dos ícones que o direciona ao site respectivo e o inclui, na lista dos seus links favoritos (bookmarks), atribuindo a ele uma palavra-chave (tag). Para isso o leitor deve ser cadastrado no site em questão.

Esta é uma maneira muito boa de DIVULGAR o conteúdo do seu site pela internet, ganhar visibilidade na rede e, consequentemente, AUMENTAR OS ACESSOS À SUA PÁGINA.
E quando você traz acessos à sua página pode-se considerar que usar os sites de bookmarking para divulgar o seu site é uma técnica de SEO.

Uma forma muito interessante de entender os sites de social bookmarking foi dita no blog Antisocial

"...O fato de você poder ter a chance de popularizar aquilo que você acha relevante é o máximo. Os usuários acabam “levantando um bandeira” quando adicionam um post, um conteúdo qualquer em seu bookmarking, isso é muito mais que popularidade, isso gera relevância por terceiros! Não são mecanismos determinando o que é relevante sobre determinado assunto, é “Nós gerando relevância” para web! Democratizar a classificação do conteúdo na web é manter a web evoluindo, porque dando o direito ao usuário de “votar” naquilo que considera interessante para determinado assunto é garantir a todos o direito de mostrar ao mundo o que é realmente interessante para “mim” usuário...."

Quem são estes sites de Social Bookmarking?

Estes sites também podem receber outros nomes como Agregadores de Conteúdo como o Marcos Lemos do Ferramentas Blog os chama em Usando Agregadores de Conteúdo para atrair visitas. Porém de acordo com os meus estudos a essência de todos é a mesma. Me corrija se estiver enganada. Estamos aqui para aprender.

Vou enumerar os sites que encontrei e as classificações encontradas na Wikipédia sobre estes sites.

Links
(Usados para Favoritar links na web)

del.icio.us - O mais popular serviço de social bookmarking atualmente.
BlinkList - Similar ao del.icio.us.
Ma.gnolia.com - Similar ao del.icio.us, aceita o uso de OpenIDs.
Blogmarks.net - Similar ao del.icio.us.
Connotea - Essencialmente dedicado a bookmarks da área académica.
StumbleUpon - Serviço que utiliza uma barra de ferramenta para o Internet Explorer ou Mozilla Firefox.
Imera Bookmarks - é um gerenciador de links favoritos. Você pode cadastrar links e acessá-los de qualquer lugar de forma fácil, simples e rápida.
Favoritus.com.br - Guardar seus links favoritos. Monte uma página inicial com seus links e seus ícones.
Favoritus.com - Versão em Inglês do Favoritus. English version. Bookmarks Online.
Pagestacker - O Pagestacker é a sua memória pessoal para a web. Em português.

Notícias
(Usados para Favoritar Notícias - É necessário que seu blog seja atualizado Regularmente)

Digg - Social bookmarking especializado em notícias.
Digga - Similar nacional ao Digg.
diHITT - Similar nacional ao Digg.
Reddit - Similar ao Digg.
Linkk - Similar nacional ao Digg.
Webphoto - Similar nacional ao Digg, mas direcionado para fotografia apenas.
Rec6 - Similar nacional ao Digg.
Levitar - Similar nacional ao Digg.
Mexame - Similar nacional ao Digg.
Bookmarks.com.br - Similar nacional ao Digg.

Botões
(Usados para Facilitar a Vida dos Blogueiros)

SoBoo - Primeiro botão de Social Bookmarking do Brasil
AddThis - Botão de Social Bookmarking internacional

Blogs
(Usados para Favoritar Blogs na web)

Technorati - Social bookmarking especializado em blogs.
BlogBlogs - Similar nacional ao Technorati.

Não podemos esquecer do Twitter e do Orkut que são sites de relacionamento muito importantes na divulgação do seu blog. Podem ser chamados de Sites de Social Networking.
Tem também o Uêba um site brasileiro criado por um brasileiro que tem uma importante função na divulgação de links. O que é o Uêba? Ah, ainda estou estudando sobre isso. Aceito comentários com esta resposta!

Seguindo este mesmo raciocínio encontrei esta classificação destes sites no post How Search-Like Are Social Media Sites?(Como são as pesquisas nos sites de social media) do site Search Engine Land.

"» Social Notícias Sites(tais como Digg, Reddit, o Yahoo Buzz)
» Social Bookmarking Sites (tais como Delicious, StumbleUpon)
» Social Networking (tais como Facebook, MySpace, LinkedIn)
» Conhecimentos sociais (tais como a Wikipedia, Yahoo Answers)
» Partilha Social (tais como YouTube, Flickr, Twitter, Urban Spoon, ganir)"

Fontes:
♦Além das inúmeras pesquisas no Google
♦Social Bookmarks, salve seus favoritos na web
♦BookMarking e Folksonomia - Puro Social Media Marketing!
♦Social Bookmarking-Informática Educacional

Para Complementar o Conteúdo:
♦3 Passos para uma Divulgação mais eficiente do seu Blog
♦Submissão em Sites de Social Bookmarking
♦10 dicas de como promover seu site usando Social Bookmarking
♦Por que Divulgar seu Conteúdo Pense nisso!
♦Como Será Seu Blog em 2012? Uma crítica muito boa sobre a internet brasileira e as redes sociais no nosso pais.
♦Top 20 Most Popular Social Bookmarking Websites | July 2009
♦125 Social Bookmarking Sites : Importance of User Generated Tags, Votes and Links

Aproveite a Oportunidade e Comente este Post!
Esta também é uma forma de você Receber Clicks em seu Blog!
Principalmente se seu comentário for Inteligente e Procedente com o Assunto do Post!

Geradores de Templates

noreply@blogger.com (Áurea) — Wed, 29 Jul 2009 10:28:46 PDT

Navegando na internet hoje encontrei alguns sites que são geradores de templates.
Uma ótima oportunidade para você ampliar os seus conhecimentos e treinar bastante para criar o seu template.
Os sites são estes:

♦ Layout Generators

♦ Pimp-My-Profile.com

♦ Trix Template Generator

♦ Firdamatic

Divirta-se!

Esta dica eu vi neste Link

16 Packs de Icones de Feeds para o seu Blog

noreply@blogger.com (Áurea) — Wed, 29 Jul 2009 08:52:39 PDT