» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Breadcrumb - Uma ferramenta de Usabilidade




Breadcrumb é um recurso que mostra o caminho das páginas visitadas no blog.
Em inglês significa migalhas.
É também considerado uma ferramenta de Usabilidade para o blog/site. Porque indica ao leitor onde ele está e facilita que volte à página inicial ou aos marcadores do post que ele se interessou.
Usabilidade é a facilidade de navegação de um site.
É uma importante ferramenta para o sucesso do seu site, uma vez que o usuário terá facilidade de encontrar o que deseja em seu site e navegar nele.
Veja este hack aplicado aqui acima enquanto está lendo este post:
Você está em: Home » TUTORIAIS » USABILIDADE »Breadcrumb - Uma ferramenta de Usabilidade
Navegando na internet encontrei este hack do Blogger Plugins que vou ensinar agora.
Fiz algumas modificações para ficar mais explicativo quando aplicado no blog com frases como: "Você está em:" e alterei as frases em inglês para o português.

Então vamos ao hack que irá facilitar a navegação em seu site.
Clique em Layout ► Editar HTML ► Clique em Expandir modelos de widgets.
1º Passo
Encontre a linha de código:
<b:includable id='main' var='top'>
Selecione-a e Substitua por:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- Sem breadcrumb na página inicial -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb para a página do post -->
<p class='breadcrumbs'>
Você está em: <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>&#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast == &quot;true&quot;'/>
</b:loop>
<b:else/>
&#187;Sem Marcador
</b:if>
&#187;<span><data:post.title/></span>
</b:loop>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb para o arquivo e página de buscas.. -->
<p class='breadcrumbs'>
Você está em: <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Arquivos de <data:blog.pageName/>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
Você está em: <b:if cond='data:blog.pageName == &quot;&quot;'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Todos os Posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts da Categoria <a expr:href='data:label.url' rel='tag'><data:blog.pageName/></a>
</b:if>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
2º Passo
Encontre a linha:
<b:include data='top' name='status-message'/>

Se você encontrar esta linha 2 vezes. Substitua as 2 linhas.

Selecione-a e Substitua esta linha por:
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

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

♦ Clique em SALVAR ALTERAÇÕES.

♦ Entre no seu blog e Clique em um post ou num marcador para verificar se seu breadcrumb está aparecendo corretamente.
3º Passo
Você pode configurar a linha do seu breadcrumb usando o código CSS:

Copie o código abaixo:
/*-----Breadcrumbs-----*/
.breadcrumbs {
font-size: 14px;
padding:5px;
font-weight: bold;
border-bottom:3px double #BEBEBE;
line-height: 1.4em;
}
.breadcrumbs a {
font-weight: bold;
color:red;
}
Cole este código acima da linha
]]></b:skin>
Configure da forma que quiser

Sugestão
Para chamar a atenção para seu breacrumb você pode tirar a mensagem de status do blogger.
Mas o que é esta mensagem de status?
Esta mensagem é aquele quadradinho que aparece toda vez que você acessa os posts de um marcador no seu blog. Já vem configurada pelo blogger. Não deixa de ser uma ferramenta de usabilidade, mas deixa a desejar por não aparecer todos os marcadores do post.
Para isso você deve apagar a linha:
<b:include data='top' name='status-message'/>


Para complementar o conteúdo leia estes textos sobre USABLILIDADE:
♦ Usabilidade: O que é Usabilidade?
♦ Google Analytics: Ajudando na Usabilidade, Acessibilidade e SEO de um Website
♦ Usabilidade no seu dia-a-dia.
♦ Princípios gerais de usabilidade em web sites

Post Atualizado em 27/08/2012

Gerador de Gráficos Grátis para Seu Blog




Cool Text é um gerador de gráficos grátis.
Neste site você pode gerar imagens com o título (logo) do seu blog usando belas fontes e efeitos. Pode gerar botões para links etc...

Clique na imagem e vá até o site.


Como fazer:
» Selecione o tipo de imagem que você deseja.
» Escolhi a Cool Metal.

1º Escreva o Texto para o qual você quer criar o logo;

2º Escolha a fonte;
3º O tamanho da fonte;
4º O gradiente do texto, imagem de fundo;
» O formato da imagem está automático para tipo PNG. Mude se quiser.

5º Após escolher todos os itens acima clique em Renderizar Logo.


►Sua imagem está formada.

» Agora é só fazer o Download da imagem.
» Se quiser fazer mais alterações você pode clicar em Editar este logo.
» Ou utilize as outras opções disponíveis.


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

Como Publicar um Arquivo PDF no Seu Blog





Se você deseja publicar um arquivo em PDF no seu blog e quer que ele seja visualizado no seu post. Você pode usar o.
▲Clique na Figura acima para ir até o site.▲

1º Passo - Cadastrar no Site slideshare

♦ Clique em Upload

♦ Crie uma conta no site Slideshare » Clicando em Signup

♦ Ou você pode usar sua conta do Facebook
(Eu prefiro usar uma conta desvinculada do Facebook. Isso vai de cada um.)

2º Passo - Fazer Upload do Arquivo

♦ Faça o Upload do arquivo que você deseja postar.
♦ Enquanto o arquivo é carregado você pode incluir informações sobre ele. Veja a imagem abaixo
♦ Se o arquivo já foi carregado irá abrir esta página e você pode continuar a colocar as informações sobre o seu arquivo PDF. Para isso clique em edit como mostra na figura abaixo.

3º Passo - Publicar / Compartilhar o Seu Arquivo PDF

♦ Pronto. Você já fez o upload do seu arquivo, já colocou as informações pertinentes sobre o arquivo. Agora é só compartilhar.
» Você pode compartilhar no Twitter, Facebook Linkedin ou por Email clicando em qualquer um dos ícones disponíveis em SHARE
» Para postar o seu arquivo: Copie o código ao lado da palavra EMBED e cole no seu post ►ATENÇÃO » Antes selecione formato HTML para colar o código no post e depois volte em Escrever.
» Clique em cima do arquivo e selecione Alinhar ao Centro para que seu arquivo fique no centro do post.


O resultado será este:

♦ Seu arquivo PDF publicado e visível direto no seu post.


NÃO é Permitido redistribuir e ou copiar os tutoriais/hacks e os templates do TPV sem a prévia autorização de sua Autora. A Citação da Fonte é Obrigatória.

Ícones para o seu blog




A palavra ícone vem do Grego "eikon" e significa imagem, já na informática ícone é um pequeno símbolo gráfico, usado geralmente para representar um software ou um atalho para um arquivo específico, aplicação (software) ou diretório (pasta). Os ícones chamaram muita atenção com o surgimento da Interface Gráfica nos primeiros Sistemas Operacionais. Hoje em dia tanto computadores como também vários dispositivos utilizam ícones que facilitam gerenciamento e execução.
Fonte: Wikipedia
Bons ícones servem para "incrementar" nossos blogs, também para sinalizar e melhorar a aparência do nosso espaço virtual! São considerados ferramentas de Usabilidade.
Fiz uma seleção de vários links com ícones free para download.

10 Links de Sites de Ícones para VOCÊ:

1- Free Icons Download

2- Free Icons Web

3- Icons, Buttons and Templates - Smashingmagazine

4- Pixelgirl Presents

5- Icon Drawer

6- Icon Archive
7- Gallery of date Stamps and Calendars

8- 20 Date Icons for your blog


9- Ícones BR

10- 365icon


Sempre que encontrar mais links coloco aqui para vocês!


Se você quiser aprender mais sobre Ícones e Web Design
♦ Afinal, o que é ícone? Como criar ícones?
♦ Usando ícones no design de interfaces

Estou Voltando...




Olá Amigos do Templates para Você,

Estive sem atualizar os meus blogs por um bom tempo.

Mas resolvi voltar...

Vi que a plataforma Blogger está de aparência nova, com vários recursos interessantes.
Confesso que estive resistente no começo em utilizar esta nova aparência e ficava voltando à aparência antiga por estar mais familiarizada, mas me rendi e agora concluo que a nova aparência é ótima e os recursos estão muito legais.

Os novos modelos de templates fornecidos pelo Blogger não tem muito a ver com os que criei e postei aqui.
Estudei e aprendi a customizar os templates baseados no modelo mínima de 2006 que foi quando o Google adquiriu o Blogger. Criei meu primeiro blog em 2007, o Aukimia, e comecei a estudar sobre os blogs para deixar do jeito que eu queria porque não gostava dos modelos prontos disponibilizados pelo Blogger.
Template em inglês significa Modelo em português.
Template (ou "modelo de documento") é um documento sem conteúdo, com apenas a apresentação visual (apenas cabeçalhos por exemplo) e instruções sobre onde e qual tipo de conteúdo deve entrar a cada parcela da apresentação — por exemplo conteúdos que podem aparecer no início e conteúdos que só podem aparecer no final.
Web templates (ou "modelos de página") são instrumentos utilizados para separar a apresentação do conteúdo em web design, e para a produção massiva de documentos web. Os templates são interpretados por um "sistema de template". Fonte: Wikipedia

Estou, aos poucos, atualizando os posts já existentes.

Pretendo atualizar os templates que já criei, colocar novos recursos e disponibilizá-los novamente.
Enquanto isso vou procurando novos tutoriais de recursos (hacks) legais para colocar aqui para vocês também.

Peço a vocês Paciência...

Estive sem atualizar o blog este tempo todo (aproximadamente uns 2 anos) porque desgostei daqui. Ficava muito chateada com a falta de educação generalizada, a preguiça das pessoas e os plagiadores. Parece que só pelo fato de você estar ensinando alguma coisa as pessoas acham que você tem a obrigação de dar assistência gratuita 24h por dia e até querem que você modifique os blogs deles etc... O Blogger tem sua própria página de suporte e ajuda: Página de Ajuda do Blogger

Vejam este post Seguidores do Blogger e Outros Assuntos. Nele explico como respondo aos comentários e o porque de não responder.

Amigos leitores, peço novamente PACIÊNCIA, porque tudo aqui demanda muito tempo.

Estou animada a voltar e espero que vocês gostem.

Grande abraço a todos.

Colocando Tradutor no seu Blog




Para colocar o tradutor do Google no seu blog você deve:
→ Ir na página de Layout do Blogger;


1º- Clicar em Adicionar um Gadget;
2º- Clicar em Gloogle Tradutor;

Irá abrir a página da imagem abaixo onde você deve:
3º- Colocar o Título da sua Gadget de tradutor;
4º- Escolher a forma que o tradutor irá aparecer;
5º- Clicar em Salvar.


Pronto.
Seu tradutor estará instalado, aí é só definir o local onde ele vai ficar em seu blog.

Este post foi atualizado em 16/08/2012.
Antes era ensinado um código independente para colocar o tradutor em seu blog, mas o site que traduzia o blog parou de funcionar.
Com a evolução do Blogger e a criação do gadget específico para tradução pelo próprio google ficou tudo mais fácil.

26 Sites com Fontes Grátis para Você




Consegui reunir neste post 26 Sites com Fontes Grátis para Você aproveitar.
  1. 1001 Freefonts


  2. AbstractFonts


  3. Acidfonts


  4. BeautifulFonts

  5. Better Fonts


  6. CoolFonts



  7. Dafont


  8. FlashHeavenFonts


  9. Font.a.licious


  10. Font Zone


  11. FontEmpire


  12. Fontes Grátis


  13. Fontes.pt


  14. Fonts.com


  15. Fonts.tom7


  16. FontSpace


  17. FreeFonts


  18. InfoDesktop


  19. MyFonts


  20. N Fontes


  21. Net Fontes


  22. SearchFreeFonts


  23. SketchPad


  24. The Font Pool


  25. Truques e Dicas


  26. Urbanfonts



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.

 
Copyright ©2007-2014. Templates para VOCÊ - Todos os Direitos Reservados
Licença Creative Commons
Baseado no Tema Johny Classicsite | Tecnologia do Blogger