Este é um pequeno calendário, que você pode adicionar facilmente como um widget, isto é interessante pois seu blog ficará com cara de atualizado sempre pois data sempre será a atual o que dar a entender que você está sempre presente no seu blog. Para adicionar é simples clique no ícone do blogger abaixo faça seu login e escolha o blog que deseja que este script seja adicionado:

Referência: Bloggerstop
Todos os direitos reservados a Bloggerstop

O Orkut é a maior rede social do mundo, ou pelo menos a mais conhecida no Brasil, agora está rede disponibilizou uma ferramenta que permite compartilhar com seus amigos, os links que você encontra na Web, para facilitar este envio encontrei este simples botão que faz todo o trabalho e pode ser facilmente instalado no Blogger, veja:

1.Acesse o painel do Blogger (blogger.com)
2.Vá em "Layout"->"Editar HTML"-> marque "Expandir Modelos de Widgets"
3.Procure pelo seguinte código (Utilize Ctrl e F para procurar):
<data:post.body/>4.Antes dele insira o seguinte código modificando de acordo com a "Nota":<div style='float:right;padding:4px;'>
<a expr:href='&quot;http://promote.orkut.com/preview?nt=orkut.com&amp;du=&quot; + data:post.url + &quot;&amp;tt=&quot; + data:post.title + &quot;&amp;tn=http://imgur.com/pWdpG.jpg&amp;cn=@noticiaeblog&quot;' target='_blank'>
<img src='http://i48.tinypic.com/9urbs9.png'/>
</a></div>
Nota: Em vermelho é a URL da imagem que será exibida nos links de suas postagens. Em verde é uma descrição que será exibida em todos os links de suas postagens, não coloque uma descrição especifica coloque uma neutra que servirá para todos seus links. Em azul é a imagem que servirá de botão a que está é uma padrão como está abaixo:

Se quiser outra basta substituir pela URL da imagem que desejá como botão.
5.Salve as alterações e visualize o resultado.

Este Hack gera um QR-Code para cada url do post. QR-Code é um novo padrão de código de barras, é facilmente gerado sem o uso de scripts, veja o que diz a Wikipédia:

"O QR Code (ou Código de Barras em 2D), é uma matriz ou código de barras bi-dimensional, criado pela empresa Japonesa Denso-Wave, em 1994. O QR vem de Quick Response, pois o código pode ser interpretado rapidamente, mesmo com imagens de baixa resolução, feitas por cameras digitais em formato VGA, como as de celulares. O QR Code é muito usado no Japão."

Vamos inserir o QR-Code no seu blog veja abaixo como fazer:
1.Acesse o painel do Blogger(blogger.com)
2.Vá em "Layout"->"Editar HTML"->marque "Expandir Modelos de Widgets"
3.Procure pelo seguinte código, Utilize as teclas "CTRL e F":
 <p class='post-footer-line post-footer-line-3'/>ou<div class='post-footer-line post-footer-line-3'>4.Abaixo do código anterior adicione o seguinte:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<img src='http://imgur.com/jh224.jpg' style='vertical-align: middle;'/>Gerar: <a expr:href='&quot;http://chart.apis.google.com/chart?cht=qr&amp;chl=&quot; + data:post.url + &quot;&amp;chs=400x400&quot;' title='Gerar QR-code'>QR-code</a>
</b:if>5.Salve as alterações e visualize. Só é exibido ao clicar no título da postagem, veja abaixo como vai ficar:

GERAR: QR-CODE

Então é Natal! Para comemorar essa data que tal colocar neve no seu blog, é um efeito muito bonito feito em JavaScript. O Script gera penas bolinha de neve que vão se acumulando no final da página, ele não atrapalham a leitura, e dão um detalhe para seu blog veja como aplicar este efeito:

1.Acesse o painel do Blogger(blogger.com)]
2.Vá em Layout->Editar HTML
3.Procure pelo seguinte código utilizando as teclas "Ctrl" e "F":
</head>
Antes do código acima insira o seguinte:
<script src='http://www.yourjavascript.com/29407319462/Neve1.js' type='text/javascript'/>
4.Salve as alterações e visualize o belo efeito!

Referência:El Escaparate

O Google entrou de vez na onda dos encurtador de URL, após o lançamento do goo.gl o encurtador  para URLs de sites, para seus principais serviços. Agora lança mais um, o encurtador youtu.be para vídeos do Youtube o que tornará mais seguro clicar em links de vídeos pois teremos certeza de que ele realmente redirecionará para um vídeo e não para um spam ou vírus. Para utilizar o serviço é simple basta pegar o id do vídeo e colocar depois do link do encurtador veja:

Link completo do vídeo:
1) http://www.youtube.com/watch?v=FdeioVndUhs
2) http://www.youtube.com/watch?v=Q7vV8f37VpY&feature=channel
2) http://youtu.be/Q7vV8f37VpY
Viu como é fácil ! Você pode usar este link para compartilhar um vídeo no Twitter, sites, blogs, Orkut. Vamos ver agora qual será o próximo encurtador.

Está é uma postagem para corrigir o Hack de páginas numeradas que foi mostrado aqui no blog, este hack é sempre util pois como já falei na postagem antiga, deixa o blog com uma cara de site. Este hack é mais simples de instalar pois ele tem um Java Script embutido em forma de url, o que torna ele menos extenso e mais objetivo. Vamos então a instalação:

Adicionar a CSS

1.Acesse o Painel do Blogger(blogger.com)
2.Vá em Layout->Editar HTML->Marque Expandir Modelos de Widgets
3.Procure pelo seguinte trecho "Utilize Ctrl e F":
]]></b:skin>
Antes dele adicione o seguinte:
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
}

.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}

Adicionando o Script

4.Procure pelo seguinte código:
</body>
Antes dele adicione o seguinte:
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Voltar';
var downPageWord ='Próxima';
</script>
<script src='http://www.yourjavascript.com/19425042120/pagenav.js' type='text/javascript'></script>

Corrigindo o Template

5.Procure pelo trecho seguinte:
'data:label.url'
Substitua pelo por:
'data:label.url + "?&max-results=7"'
6.Salve as alterações e visualize.

UPDATE: Corrigido os erros no código 5
Referência:Abu Farhan

Recentemente foi lançado o Goo.gl, encurtador de URL da Google. Diferente de outros serviços similares, o Goo.gl não estará a princípio disponível para todos, e será utilizado inicialmente em produtos da própria Google, marcando sua estreia na Google Toolbar e no serviço Feedburner.

A criação do Goo.gl é um ataque direto ao Bit.ly, encurtador de URL desenvolvido pela Betaworks Studio, que é o serviço mais utilizado no momento, sendo responsável por cerca de 75% de todos os links curtos no Twitter, de acordo com o site TechCrunch.

O Google cada vez mais vem lutando para conquistar a liderança em vários serviços seja navegadores, sistema operacional (SO) e agora encurtador. A grande rival "Microsoft" aos poucos vai perdendo a liderança os serviços da empresa de Bill Gates são quase sempre pagos e possuem muitos erros que exigem atualizações o navegador por exemplo já passou por centenas de atualizações e continua a ser encontrados erros, sei que na internet de hoje em dia os riscos são grandes mas como uma grande empresa pode deixa com que eles aconteçam sempre.

Voltando ao assunto, se você se interessou pelo encurtador pode testa-lo instalando a barra de ferramentas do Google para o "Internet Explore" ou instalando a extensão goo.gl shortener para o Google Chrome. Você pode também usar um serviço Shorten URL using goo.gl criado pelo Alexandre Gaigalas que faz com que você possa encurtar sem precisar destes requisitos impostos pelo Google, basta inserir a url com http:// e clicar em shorten.

Referência: Yahoo Notícias,Winajuda
todos os links da postagem estão usando o novo serviço

Exibir posts randômicos significa mostra-los de forma aleatória sem respeitar a ordem imposta pelo sistema, isto é bom para trazer mais visitas para velhos posts que você criou a algum tempo. Ele é baseado em Java Script o que torna sua instalação muito mais rápida para instalar basta clicar no símbolo do blogger abaixo:

Referência: widgetsforfree

Está dica é interessante mais deve ser usada como muita responsabilidade pois passar trote é feio  não é legal ficar ligando para os outros à toa, mas como estou aqui pra ensinar ai vai uma dica este site encontra todas as informações de sites/blog com domínio próprio. Basta digitar a URL dos site desejado para encontrar todas as informações. Veja alguns sites que você pode testar o serviço:

• Notícia e blog
• Ferramentas blog
• Bloggersphera

Searching for noticiaeblog.com.  Found 1 record(s) matching noticiaeblog.com.

Domain:              noticiaeblog.com
Nameserver:          ns1.dominios.uol.com.br
Nameserver:          ns2.dominios.uol.com.br
Nameserver:          ns3.dominios.uol.com.br
Created:             20090826
Updated:             20090826

Registrant:

Name:                FERNANDO FERREIRA PASSE
Organization:        FERNANDO FERREIRA PASSE
E-mail:              
Address:             Rua frederico Zanan 1384 null

Address:             36680000
Address:             SAO JOAO NEPOMUCENO - MG
Phone:               55 32 32614124
Country:             BRASIL
Created:             20090826
Updated:             20090826

Administrative Contact:

Name:                FERNANDO FERREIRA PASSE
Organization:        FERNANDO FERREIRA PASSE
E-mail:              
Address:             Rua frederico Zanan 1384 null

Address:             36680000

Address:             SAO JOAO NEPOMUCENO - MG
Phone:               55 32 32614124
Country:             BRASIL
Created:             20090826
Updated:             20090826

Technical Contact:

Name:                FERNANDO FERREIRA PASSE
Organization:        FERNANDO FERREIRA PASSE
E-mail:              
Address:             Rua frederico Zanan 1384 null

Address:             36680000
Address:             SAO JOAO NEPOMUCENO - MG
Phone:               55 32 32614124
Country:             BRASIL
Created:             20090826
Updated:             20090826

Um menu horizontal é a forma mais fácil de organizar seus links principais, facilitando o leitor a encontra-los, a caixa de busca também é uma forma de ajudar a buscar o que procura-se mais rapidamente sem ter que ficar navegando muito na página para achar. Como os dois são importantes para o blog o melhor é uni-los, é isso que você vai ver neste tutorial abaixo:

Dando Estilo ao menu

1.Acesse o painel do Blogger (blogger.com)
2.Vá para "Layout"->"Editar HTML"
3.Procure pelo trecho abaixo em seu template "Utilize Ctrl e F":
]]></b:skin>
Antes do trecho acima adicione o código seguinte referente a CSS:
/*-- CSS Menu Superior-- */
#navtop { background: #dcdcdc ; height: 26px; width: 100%; margin: 0px auto 24px auto; font-family: "Century Gothic", Palatino Linotype, Trebuchet MS, sans-serif; font-variant: small-caps; font-weight: bold; color:#737374; font-size: 14px; border-bottom: 1px solid #afafaf;}
.nav {width: 950px; margin: auto;}

ul.navtop { padding: 0px;}
ul.navtop li { list-style: none; display: inline;}
ul.navtop li a { background: transparent; color:#737374; display: block; float: left; padding: 4px 7px 3px 7px; margin-right: 3px; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf;}
ul.navtop li a:visited { text-decoration: none; color: #737374;}
ul.navtop li a:hover { background: #e1477d; color: #ffffff; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf; }
ul.navtop li a:active { text-decoration: none; color: #737374; }
ul.navtop li a:focus { color: #41a5c3; outline: 1px dotted #e1477d; }
ul.navtop li.current_page_item a { text-decoration:none; color:#fff; background: #E1477D ; }
ul.navtop li ul { float:left; margin:0; padding:0; }

#searchcont { width: 100%; margin: 12px auto 12px auto; }

#searchform { height:26px; line-height:25px; float:right; margin: 0px; padding: 0px;}
input#s {color: #e1477d; width: 283px; background:#fcfcfc; padding: 2px 4px 2px 4px; border: 1px solid #afafaf;}
input#searchsubmit{ background:#afafaf; color:#fff; font-size:13px; padding: 2px;}

Inserindo o menu

4.Agora vamos inserir o menu no template, procure pelo seguinte código:
<div id='header-wrapper'>
Abaixo dele adicione o seguinte código:
<!-- Menu Superior -->
<div id='navtop'>
<div class='nav'>
<ul class='navtop'>
<li><a href='/'>Ínicio</a></li>
<li><a href='http://url-do-seu-perfil-do-blogger' title='Perfil Blogger'>Sobre mi</a></li>
<li><a href='/feeds/posts/default' title='Assine o Feed'>Assine o Feed</a></li>
<li><a href='mailto:seu-e-mail@hotmail.com' title='Contato'>Contato</a></li>

<li><a href='/search/label/?max-results=999' title='Ver todas las entradas'>Ver todas as postagens</a></li>
</ul>
<form action='/search' id='searchform' method='get' style='display:inline;'><input id='search-box' name='q' type='text'/><input id='search-btn' type='submit' value='Buscar'/></form>
</div>
</div>
<!-- Fim Menu superior -->
5.Substitua os trechos em negrito pelas respectivas urls.
6.Salve as alterações e visualize.

Referência:El Escaparate

No natal a gente enfeita nossas casas com árvores, luzes, enfeites entre outras coisas. Porque não enfeitar seu blog/site também? É simples, no Site Design Swan você encontra 11 ícones de RSS para o Natal, são ícones em alta resolução que vão deixar seu blog/site ainda mais bonito, veja alguns exemplos de ícones do site:
Pegue já estes lindos ícones para seu blog:
Ver ícones

Este é o meu primeiro template convertido de uma versão html de Free CSS Templates, no template eu tentei deixar tudo da forma mais automática possível, para que não seja necessário a edição pelo painel editar HTML veja os componentes "hacks,scripts" utilizados neste template:


Características:

• 2 Colunas sendo uma sidebar e a outra a das postagens
• Resumo automático com miniatura
• 2 colunas no rodapé das postagens
• Artigos relacionados com imagem
• Ícones de compartilhamento
• Corrigido o erro 1comentárioS
• Caixa de busca
• Ícones de navegação personalizado
• Breadcrumb

Atenção: Não retire os credito do template a retirada deste pode ocasionar uma quebra de licença

Primeiro vamos saber um pouco o que é rotear um modem, como eu não sei explicar muito bem isso, vou colocar um trecho de um fórum conhecido. Então vamos lá o que é rotear?

"Um modem roteador, "compartilha" a conexão com toda a rede. Um modem bridge, está obrigatoriamente ligado à apenas um computador.Neste computador ligado ao modem bridge pode-se instalar softwares de proxy, ou mesmo configurá-lo pra fazer o trabalho de um roteador, compartilhando, da forma que seja, a conexão com outros micros. Mas nesse caso, esse computador sorteado tem de estar ligado para que os outros tenham acesso a net. No caso do modem roteador, apenas o modem tem que estar ligado para que qualquer um dos computadores tenha acesso." fonte: Fórum PCs

Agora que você já sabe a verdadeira função de rotear o modem vamos começar o processo de roteamento, o processo é simples mas exige alguns cuidados ou seja leia atentamente o tutorial abaixo:

1. Vamos primeiro verificar a versão do seu modem "ADSL" para ver a versão digite na barra de endereço o seguinte: http://10.0.0.138 se não aparecer nada digite: http://192.168.1.254 aparecerá uma tela como está abaixo:
2. Verifique se a "Versão do Software" é igual ou superior, a que utilizamos neste tutorial foi a versão "5.4.0.15" se o idioma da página estiver em inglês clique em "pt" no canto lá em cima da página. Se sua versão for uma anterior a "5.4.0.14" provavelmente você vai ter que atualizar o firmware.
4.No menu do lado esquerdo clique em "SpeedTouch" depois clique em "Configuração" e depois clique em "Configurar" veja a imagem abaixo:
5.Após ter feito o passo anterior abrirá uma janela como está da imagem abaixo então é só clicar em "Avançar":
7.Após o passo 6 você verá está tela da imagem abaixo, então é só selecionar "0.33" que é o padrão de "VPI/VCI" para rede (Oi Velox) e depois clique em "Avançar":
8.Após o passo 7 você verá uma tela igual a da imagem abaixo, preencha com seu "Login" e "Senha" repita novamente a senha para confirmar e clique em "Avançar":

---

Alguns esclarecimentos deste tutorial

Não no responsabilizamos por quaisquer erros ocasionado pelo uso deste tutorial, mas ele é super confiável pois já foi testado em vários modens e em todos eles obtivemos sucesso!

Curiosidade

O que é VPI/VCI ?
R: Os valores de VPI (Virtual Path Identifier) e VCI (Virtual Channel Identifier) são definidos como uma espécie de norma adoptada pelo país. O que diferencia este tutorial para Oi Velox é apenas isso então se souber o VPI/VCI da sua operadora pode funcionar.

Centralizando imagens e links

Este recurso do html permite que você centralize qualquer código, link, imagem, sem a utilização de CSS facilitando e muito para os mais leigos, veja abaixo como é fácil:

Como exemplo vou utilizar o link que aprendemos a fazer no post anterior veja:
O código do link ficou da seguinte forma:
<a href='http://www.noticiaeblog.com'/>Notícia e blog</a>
O link gerado ficou assim:
Notícia e blog
Agora vamos aplicar a tag "center" para que ele fique no meio ou seja centralizado:
<center><a href='http://www.noticiaeblog.com'/>Notícia e blog</a></center>
O resultado será este abaixo:
Notícia e blog
Outra forma de centralizarmos é utilizando a tag "div" veja:
<div align='center'><a href='http://www.noticiaeblog.com'/>Notícia e blog</a></div>
O resultado é este abaixo ou seja o mesmo resultado da tag "center":

Colocando uma imagem a esquerda ou direita

Para colocarmos uma imagem, código ou link a esquerda ou direita da página também utilizaremos a tag "div" veja:
Para esquerda use: left
Para direita use: right


Veja o exemplo, para esquerda:
<div align='left'><a href='http://www.noticiaeblog.com'/>Notícia e blog</a></div>
O resultado é este abaixo:

Veja o exemplo, para direita:
<div align='right'><a href='http://www.noticiaeblog.com'/>Notícia e blog</a></div>
O resultado é este abaixo:

---

E aqui termina está pequena serie de tutoriais html em breve mais algumas dicas.

Para ver outras partes deste tutorial os links estão abaixo:
PARTE 1 , PARTE2.

Como fazer um link

Os links são feitos utilizando a tag "a".Veja o exemplo abaixo:
<a href='http://www.noticiaeblog.com'/>Notícia e blog</a>
Em vermelho são os códigos que formam o link, em roxo página para qual o link será redirecionado e em verde texto que será exibido pelo link. O resultado é este abaixo:

Notícia e blog

Incorporando um link a imagem

Vamos usar como exemplo a imagem que utilizamos na primeira parte deste tutorial.
O código da imagem ficou da seguinte forma:
<img src='http://1.bp.blogspot.com/_8AL-4bHE9zs/SxoqTZhqquI/AAAAAAAABXs/qYnqVwqC9rw/s1600/Logo_Blogger.png' height='120px' widht='128px' title='Este é um tutorial feito para o Notícia e blog' />
Para transformarmos ela em link basta substituir o texto do link pelo código da imagem veja:
<a href='http://www.noticiaeblog.com'/><img src='http://1.bp.blogspot.com/_8AL-4bHE9zs/SxoqTZhqquI/AAAAAAAABXs/qYnqVwqC9rw/s1600/Logo_Blogger.png' height='120px' widht='128px' title='Este é um tutorial feito para o Notícia e blog' /></a>
O resultado será este abaixo:

No próximo veremos um pouco de centralização IR PARA O PRÓXIMO

Uma postagem bem editada garante um grande número de visitas pois o leitor vai se interessar por uma postagem que tem um conteúdo relevante e ao mesmo tempo bonito de se olhar. Para ter uma postagem bem elaborada é necessário saber alguns códigos "Tags" básicas do HTML, como inserir uma imagem um link, uma cor a letra, negrito,itálico. Vamos conhecer abaixo algumas dessas tags e sua aplicações:

Onde inserir

Se você usa o Blogger, pode inserir em "Postagem"->"Nova Postagem"-> E clicar na aba "Editar HTML". E se você tem uma página HTML pode inserir diretamente no código de fonte.

Inserir imagem

Para inserir uma imagem você deve primeiramente ter o link ou Url da imagem. A tag utilizada para inserir uma imagem é a "IMG" veja o exemplo abaixo de como ela é usada:
<img src='url-da-imagem' />
Um exemplo pratico seria inserir o logotipo do blogger veja:
A url do logotipo é http://1.bp.blogspot.com/_8AL-4bHE9zs/SxoqTZhqquI/AAAAAAAABXs/qYnqVwqC9rw/s1600/Logo_Blogger.png
Agora vamos inserir a url na tag veja:
<img src='http://1.bp.blogspot.com/_8AL-4bHE9zs/SxoqTZhqquI/AAAAAAAABXs/qYnqVwqC9rw/s1600/Logo_Blogger.png' />
O resultado será este abaixo:

Atributos da Tag IMG

Atributos são trechos que dão outras funções as tags um exemplo seria largura, altura e título.Vamos conhecer uma pouco mais esse atributos:
height: Define a altura da imagem
widht: Define a largura da imagem
title: Define um título a imagem

Vamos usar como exemplo o logotipo do Blogger que vimos acima. O código para inserir-lo ficou da seguinte forma:
<img src='http://1.bp.blogspot.com/_8AL-4bHE9zs/SxoqTZhqquI/AAAAAAAABXs/qYnqVwqC9rw/s1600/Logo_Blogger.png' />


Agora vamos definir para o logotipo uma altura de 120px e uma largura de 128px veja como ficaria o código:
<img src='http://1.bp.blogspot.com/_8AL-4bHE9zs/SxoqTZhqquI/AAAAAAAABXs/qYnqVwqC9rw/s1600/Logo_Blogger.png' height='120px' widht='128px' title='Este é um tutorial feito para o Notícia e blog' />
O resultado é este que vemos abaixo:

Se você está se perguntando,cadê o título? Passe mouse sobre a imagem para ver.

No próximo tutorial veremos como transformar a imagem em um link e como fazer um link. Até a proxima! IR PARA PARTE 2

Personalizar a "setinha" pode parecer estranho, mas também deixa o layout bem personalizado e elegante. Alguns pensariam que isso não é possível para o Blogger mas isso é mentira você pode personalizar facilmente veja abaixo como:

1º Escolher o ícone

Quaisquer ícones que estejam no formato ".cur" podem ser usados como seta é só copiar o link do ícone. Abaixo a alguns apenas alguns dos muitos que podem ser encontrados na web:

1.Link: http://api.ning.com:80/files/sOqkGMK5dzt5hq1GCAMsJa1xjQvgiV9MnpUbo2ZaGG0_/cursor1.cur

---

2.Link:
http://api.ning.com:80/files/gSFSldBbObRb-SVTsc5Bfw5yOR4xwTEi58DCwclmqkE_/cursor2.cur

---

3. Link:
http://api.ning.com:80/files/4S0mMLSngQT25YPB7JHsTXUINHcP8jk*6FAKNUj*P-M_/cursor3.cur

Instalando o cursor

Agora vamos inserir o cursor escolhido no blog:
1.Faça login no painel do Blogger
2.Vá em "Layout"->"Editar HTML"
3. Procure pelo seguinte código "Utilize as teclas Ctrl e F para procurar":
body {
4.Abaixo do código anterior adicione o seguinte:
cursor:url(Link do cursor aqui),auto;
Nota: Substitua o trecho em vermelho pelo link do cursor escolhido.
5.Procure pelo seguinte código:
a:hover {
6.Abaixo do código anterior adicione o seguinte:
cursor: url(Link do cursor),auto;
Nota: Onde está em azul substitua pelo link do cursor. Se colocar um cursor diferente do primeiro escolhido apenas os links ficaram com cursor diferente, pois está parte do CSS define os links da página.
7.Salve as alterações e visualize.

Pronto seu blog possui agora um cursor diferente!

Imagem: Blog Tec

Está ferramenta você já deve ter visto em vários sites, ele consiste em exibir o caminho feito pelo leitor desde o ínicio do blog e assim auxiliando o leitor a encontrar ou se localizar no blog. Aqui no blog possui está ferramenta clique no título do post para ver ela em funcionamento. Está função deixa o template mais bonito e atraente, vamos ver abaixo como aplica-la ao seu:

Instalando

1.Acesse o painel do Blogger (blogger.com)
2.Vá em "Layout"->"Editar HTML"->Marque a caixa "Expandir Modelos de Widgets"
3.Procure pelo código abaixo "Utilize as teclas Ctrl e F":
<b:includable id='main' var='top'>
4.Substitua o código anterior pelo seguinte:
<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'>
5.Procure pelo código abaixo:
<b:include data='top' name='status-message'/>
6.Substitua-a o código acima por:
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

Inserindo a CSS

1.Procure pelo código abaixo:
]]></b:skin>
2.Antes do código aceima adicione:
/*-----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;
}
3.Salve as alterações e visualize.

Dica

Para remover aquela mensagem que aparece ao procurar no blog, ou clicar em um marcador é facil basta remover este código no seu template "É necessário marcar a caixa Expandir Modelos de Widgets":
<b:include data='top' name='status-message'/>

Referência:Beautiful Beta,Templates para Você,Blogger'SPhera