Templates para VOCÊ

28 Sites com Fontes Grátis para Você

noreply@blogger.com (Áurea) — Fri, 01 Jan 2010 16:09:59 PST

Consegui reunir neste post 28 Sites com Fontes Grátis para Você aproveitar.

Se você quiser abrir em uma NOVA ABA segure o "Ctrl" e clique no link/imagem ou se quiser abrir em uma NOVA JANELA segure o "Shift" e clique no link/imagem.

1001 Freefonts

A1Fonts

AbstractFonts

Acidfonts

BeautifulFonts

Better Fonts

CoolFonts

CutePageFonts

Dafont

FlashHeavenFonts

Font.a.licious

Font Zone

FontEmpire

Fontes Grátis

Fontes.pt

Fonts.com

Fonts.tom7

FontSpace

FreeFonts

InfoDesktop

MyFonts

N Fontes

Net Fontes

SearchFreeFonts

SketchPad

The Font Pool

Truques e Dicas

Urbanfonts

Ícones de Natal

noreply@blogger.com (Áurea) — Tue, 08 Dec 2009 07:16:41 PST

Estamos próximos ao natal e se você quer enfeitar o seu site... Veja este ícones lindos que encontrei hoje na net.

Smashing Christmas Icons Set

Ícones de Feeds Natalinos

Fonte:SmashingMagazine

Comunicado

noreply@blogger.com (Áurea) — Sun, 06 Dec 2009 05:54:22 PST

Queridos Leitores,

Estou escrevendo este post para comunicar-lhes que precisarei ficar ausente do blog neste resto do mês de novembro e em dezembro. Estou na reta final do curso que estou fazendo e vou fazer um estágio no meu período livre. Não vou conseguir fazer tanta coisa ao mesmo tempo. Nos fins de semana vou correr contra o tempo para terminar os trabalhos do curso e se sobrar algum estarei me dedicando aos blogs que tanto gosto.
Quanto aos comentários...
Vou responder na medida do possível como já faço, quem já me conhece sabe o porque de não poder responder tão rapidamente quanto queria. Também estou mais rigorosa quanto as regras que estão acima da caixinha de comentários e que muitas pessoas nunca leêm.

Para ajudar aos que aqui chegam agora e aos que já estão nos acompanhando há algum tempo, aqui vai uma lista de links daqui do TPV com os hacks mais lidos e comentados e alguns que eu indico para você aplicar no seu blog.

♦ Como Instalar o Seu Template

♦ Paginação no Blogger

♦ Abrir Lista de Links em uma Nova Página

♦ Instalando o Menu em Abas no Blogger

♦ Menu em Abas com JQuery

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

♦ Breadcrumb uma Ferramenta de Usabilidade

♦ Índice dos Posts

♦ Gadget dos Marcadores Expansível

♦ Gadget da Lista de Links Expansível

♦ Personalizando a Data do Seu Post

» Se vocês quiserem falar comigo aqui está o meu email de contato:

» Aproveitando a oportunidade para deixar a DICA do site onde você pode gerar uma imagem do seu email como esta.
No meu caso eu editei a imagem para ficar com o meu domínio, mas se você tem um gmail, yahoomail, etc... o E-MAIL ICON GENERATOR funciona muito bem.

E-MAIL ICON GENERATOR.

» E para criar o link do email basta utilizar a linha de código:


<a href="mailto:falecomigo@templatesparavoce.com"><img src="Endereço da Imagem do seu Email"/></a>

» Substitua o email falecomigo@templatesparavoce.com pelo SEU email e coloque onde quiser em seu blog, seja em um gadget ou em posts, etc...

Baixe Vários Twitter Icons e Aprenda Sobre o Twitter

noreply@blogger.com (Áurea) — Sun, 29 Nov 2009 07:21:47 PST

Vários ícones para você colocar em seu blog!

Se você quiser abrir em uma NOVA ABA segure o "Ctrl" e clique no link/imagem ou se quiser abrir em uma NOVA JANELA segure o "Shift" e clique no link/imagem.

1. It’s Twitter Time! Free vector icon set

2.IconTexto WebDev Social Bookmark

3. Free Download Social Icons

4. Practika: A Free Icon Set

5. DryIcons

6.Free Twitter Bird Icon Set

7. Cute Twitters!

8. Free PSD’s Give Away: High Resolution Twitter Bird Icons.

9. TwitterJoy Icons

10. Free Twitter Icons – Happy Birds

11. Tweet Tweet Cute Tweet: Another Free Twitter Bird Icon

12. Mais ícones para Twitter

Aproveitando a Oportunidade...
Aprenda um Pouco Sobre o Twitter

» Aqui vão alguns links sobre o Twitter para você aprender mais sobre esta ferramenta de comunicação que já conquistou inúmeros blogueiros.

☺O que é Twitter? E outras twittices no Códigos Blog
☺Sobre o Twitter no Dicas Blogger
☺Twitter Widgets para Blogger/Blogspot no Usuário Compulsivo
☺Juitter no Blogger'SPhera
☺Free Twitter Designer vi no Usuário Compulsivo
☺Twitter Buttons

As Fontes das Imagens já estão linkadas nas mesmas.

Ícones de Feeds para o Natal

noreply@blogger.com (Áurea) — Sun, 29 Nov 2009 05:42:22 PST

Navegando hoje na internet vi este ícones para Feeds em comemoração ao Natal e não pude deixar de postar aqui.

Os links para Download são estes:

Ícones com Fundo Preto
Ícones com Fundo Transparente
Ícones com Fundo Branco

Fonte: AJAX and PHP

Obs: A fonte está sendo citada, mas tive que hospedar os arquivos no 4Shared porque os arquivos anteriores não estavam funcionando!

Vários Social Media Icons Grátis

noreply@blogger.com (Áurea) — Sat, 14 Nov 2009 12:47:46 PST

Clique nas imagens para encontrar vários Ícones de Sites de Social Bookmarking

Se você quiser abrir em uma NOVA ABA segure o "Ctrl" e clique no link/imagem ou se quiser abrir em uma NOVA JANELA segure o "Shift" e clique no link/imagem.

Aproveite a Oportunidade para Aprender um Pouco sobre

O que é Social Bookmarking

▲ Clicando neste Link ▲

Tenho certeza que você vai gostar!

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) — Sun, 29 Nov 2009 07:27:58 PST

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

Fonte Imagem

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) — Mon, 30 Nov 2009 08:21:13 PST

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