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

O Windows Live Writer não Funciona mais. Agora temos o Open Live Writer



Desde de dezembro de 2015 vinha tentando acessar o Windows Live Writer e não estava conseguindo. Dizia que o Usuário ou Senha estavam errados.

Procurando uma solução na internet encontrei o Open Live Writer o software que substituirá o Windows Live Writer que por decisão da Microsoft este aplicativo agora é open source e mudou de nome para Open Live Writer.
Open_Live_Writer
Por isso que o Windows Live Writer não estava funcionando corretamente. Esta ferramenta já que não estava recebendo atualizações desde 2012 e como o Google alterou as configurações de autenticação das suas contas o Windows Live Writer deixou de funcionar com o Blogger em dezembro de 2015.

Então a solução encontrada é baixar o Open Live Writer e utilizá-lo da mesma forma que você usava o Window Live Writer.  A maior vantagem deste software ser Open Source é que por ser gerido por uma fundação de voluntários a Net Foundation agora será atualizado com mais frequência.

O Open Live Writer ainda está em inglês, não possui a verificação ortográfica, nem a inclusão das tags dos blogs. Mas com certeza os desenvolvedores estão trabalhando para deixá-lo ainda melhor do que era o Windows Live Writer. Mesmo assim dá para utilizá-lo sem problemas e produzir os posts do blogger com muito mais agilidade do que o editor nativo do blogger.

Fiz um Vídeo Tutorial ensinando como Baixar, Instalar e Vincular o Open Live Writer a sua conta do Blogger para que você continue editando seus posts com esta ferramenta.


Você pode baixar o Open Live Writer neste link: http://openlivewriter.org/

Vídeo Tutorial – Como Baixar e Instalar o Open Live Writer


Espero que gostem do vídeo e não se esqueça, de inscrever no Canal do TPV no Youtube

Como Criar um Blog no Blogger




Meus Amigos sempre me perguntam sobre os meus blogs.

Como eu faço? Como criei os blogs? O que publico neles? e Porque gosto tanto? Sim, gosto. Gosto tanto que gostaria de viver trabalhando na internet e me dedicando aos blogs.

Muitos amigos e familiares já manifestaram a vontade de Criar um Blog, mas disseram que não sabiam nem por onde começar. E eu, procrastinadora que sou, não havia publicado, até hoje, um tutorial ensinando a fazer isso.

Mas isso acabou!

O TPV já possui a tag INICIANTES com assuntos que ajudam bloggers que estão iniciando no ofício.
E, Criar um Blog nada mais é, que um assunto de Iniciante.
Como o Templates para Você se tornou um blog para ensinar as pessoas a customizarem os seus blogs, ou seja, a deixarem os seus blogs do seu jeito, nada mais justo que eu ensine como criar um blog aqui.

A primeira informação que você deve saber é que existem várias plataformas onde você pode ter um blog de graça.
Vou citar o exemplo de 4 plataformas onde você pode ter um blog gratuitamente:
  1. Blogger
  2. WordPress.com
  3. Tumblr
  4. Jimdo
Prometo falar de cada plataforma separadamente nos próximos posts.

Hoje vou ensinar como Criar um Blog na plataforma Blogger

1º. Passo

O 1º passo para ter um blog na plataforma Blogger.com é ter uma conta no Google, ou seja, um Gmail, Youtube, G+, Google Drive, etc...
Se você tem uma Conta no Google, já cumpriu o 1º passo para criar o seu blog no Blogger.
A plataforma Blogger.com é um serviço do Google.
Caso você ainda não tenha uma conta no Google terá que criar uma clicando neste link: Criar Conta Google

2º. Passo

Acesse ww.blogger.com
Se você não tiver um perfil do G+ o Blogger irá sugerir que você crie um nesta tela.

Neste tutorial eu escolhi criar um perfil limitado no Blogger para facilitar. Mas nada me impede que eu crie um perfil no G+ posteriormente.
Porém se você tem interesse em divulgar melhor seu trabalho e ainda não tem o perfil no Google Plus, sugiro que já crie seu blog com um perfil no G+.

Veja este post: A Importância de ter o Link do Seu blog no Perfil do Google +

Assim que você escolhe o nome do seu perfil nesta tela:
Clica em Continuar para o Blogger

Você é encaminhado para esta tela:

Onde irá clicar em Novo Blog

3º. Passo

Este é o próximo passo para Criar o seu Blog no Blogger → Título e URL

Após clicar em Novo Blog
Terá que criar o Título para o Seu blog e o endereço (URL) na internet que será composto mais ou menos assim: nomedoseublog.blogspot.com

Veja bem:
Nem sempre o nome que você escolheu para o blog poderá ser o mesmo para a url dele.
Na imagem abaixo quando coloquei a url nocoesbasicas.blogspot.com para coincidir com o nome do blog que criei para o tutorial vocês viram que o próprio blogger me avisou que este endereço não está disponível. Então você terá que escolher uma url próxima do nome do seu blog que seja de fácil memorização para o seu leitor, mas que esteja disponível.

Feito isso você parte para o próximo passo que será escolher um Modelo - Template para o seu blog.

4º Passo

Você está em um blog que se chama Templates para Você. O que o leva a perguntar:

O que é um Template?

Template em inglês significa Modelo, é a estrutura do seu blog na web » Esta estrutura que do TPV que você está vendo aqui de um título no topo, os posts em uma coluna à esquerda, links na coluna à direita, etc...
Existem milhares de formas de organizar as informações do seu blog no seu template.

Nesta etapa de criação do seu blog sugiro que você escolha um modelo nativo do blogger.
Quando já estiver familiarizado com a estrutura dos templates e do blogger, já tiver criado seus posts com o conteúdo chave do seu blog, aí então parta para uma etapa mais avançada que seria mudar o seu template ou então aplicar alguns tutoriais para incrementar o seu blog. » O TPV tem vários TUTORIAIS que ensinam você a deixar seu blog bem legal. Depois confira!

Escolhi o modelo Simples e Cliquei em Criar um blog! → Que vai te levar para esta página.


Pronto! Você Criou Seu Blog!

Agora é só começar a criar o conteúdo para ele através de Posts → Clicando em Nova Postagem.

Será normal que seu blog demore algum tempo para ser visto pelo Google e outros motores e busca e muito comum ter poucas visitas no início. Será preciso ter muita paciência. Investir em conteúdo de qualidade, ler muito sobre o assunto, estudar e gostar.

Nos vemos nos próximos posts da série INICIANTES! ;-)

Espero que tenha gostado!



Gadget Posts Recentes junto com Posts de um Marcador




Neste tutorial você irá aprender a criar um Gadget de Posts Recentes no estilo Galeria (somente com as imagens) e junto um Gadget de Posts de um Determinado Marcador que você considera importante ao assunto do seu blog!
Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em Modelo » Fazer backup/Restaurar » Fazer download do modelo completo.
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.
Vamos lá:

1º Passo: Colocar o Código Javascript no Blog

Entre no seu blog: Vá em ModeloEditar HTML → Encontre a tag </head>

Se não souber como fazer:»Leia:Como Acessar o Editor de HTML do Blog e Ativar o Search

Copie o código Javascript e cole abaixo da tag </head> do seu blog.

<script type='text/javascript'>
//<![CDATA[
// Posts Recentes em Galeria
function recentgrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-gallery">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://1.bp.blogspot.com/-B6v6I956eLM/VlzQmpoW51I/AAAAAAAAAOg/tIXluUw3Kng/s1600/sem_imagem4.jpg",s=n.replace("s72-c","s"+recent_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+recent_thumbs+'" height="'+recent_thumbs+'"/>',p=recent_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>

Clique em Salvar modelo

2º Passo: Incluir o código CSS do Gadget no blog

Ainda Editar HTML encontre a tag  ]]></b:skin> e cole o código abaixo acima desta tag.

/* CSS Posts Recentes em Galeria */
.recent-gallery {padding:0;clear:both;}
.recent-gallery:after {content:"";display:table;clear:both;}
.recent-gallery .gallerytem{display:block;float:left;position:relative;margin:8px;overflow:hidden;padding:0}
.recent-gallery .gallerytem a{position:relative;float:left;margin:0;overflow:hidden;text-decoration:none}
.recent-gallery .gallerytem .ptitle{background:rgba(255,255,255,.95);display:block;clear:left;font-size:11px;line-height:1.3em;position:absolute;text-align:left;bottom:0;left:0;right:0;top:0;color:#444;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;transform:translate(-79px,0);backface-visibility:hidden;transition:all .2s}
.recent-gallery .gallerytem:hover .ptitle{visibility:visible;transform:translate(0,0)}
.recent-gallery a img{background:#fdfdfd;float:left;transition:all .3s}

Clique em Salvar modelo

3º Passo: Criar o Gadget de Posts Recentes E de um Marcador a sua escolha


Vá em Layout » Clique em Adicionar um Gadget no Local onde deseja » Escolha o Gadget HTML/Javascript e Cole o código abaixo:

Gadget dos Posts Recentes

<script>
var recent_thumbs = 72;
var recent_title = true;
</script>
<script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=recentgrid"></script>

Gadget dos Posts de um Determinado Marcador ou Tag

<script>
var recent_thumbs = 72;
var recent_title = true;
</script>
<script src="/feeds/posts/summary/-/TAG?max-results=9&amp;alt=json-in-script&amp;callback=recentgrid"></script>

Entendendo os códigos

  • var recent_thumbs = 72;► Indica o tamanho das miniaturas das imagens dos posts
  • var recent_title = true; ► Apresenta o título do post quando passarmos o mouse sobre a miniatura
  • max-results=9 ► Indica o número de miniaturas que deve ser exibido no gadget. Você define a quantidade de acordo com a largura do seu gadget para ficar simétrico.
  • TAG►Você substitui a palavra TAG pelo marcador ou tag que deseja exibir no gadget. Escreva exatamente da forma que está o marcador em seu blog. Se estiver com todas as letras maiúsculas escreva igual.

Um Vídeo-Tutorial Para você entender melhor como criar o seu Gadget


Espero que goste e entenda o que ensinei! :-)
NÃO Retire os Créditos!
NÃO é Permitido redistribuir os templates ou os tutoriais/hacks do TPV sem a prévia autorização de sua Autora.
Fonte: Tradução e adaptação do post Cara Memasang Widget Recent Post Gallery

Posts em Destaque na Página Inicial



Já pensou em destacar alguns posts que gostaria de ter mais acessos em seu blog?

Com este tutorial  você poderá colocar um Gadget de 3 Posts em Destaque no início do seu blog com um estilo bem legal. Que, inclusive já estou utilizando aqui no TPV.
Antes »»» 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.


Observações Importantes:

»Para que o Gadget de Posts em Destaque apareça apenas nas páginas inicial, estáticas e de marcadores temos que usar as tags condicionais.
»Aqui no tutorial o gadget estará programado para NÃO aparecer apenas nas páginas dos posts. As demais páginas inicial, estática, de marcadores e de arquivos terão os posts em destaque.
»Caso você queira que este gadget não apareça nestas páginas basta colocar as tags condicionais correspondentes que estão neste post aqui do TPV:

Como colocar o Gadget de Posts em Destaque no Blog


→ Você deve ir em Layout » Clicar em Adicionar um gadget em cima da coluna dos posts.

Já sei!
Você foi em Layout e não tinha opção de Adicionar um Gadget em cima da coluna dos posts né?
Não se preocupe.
Basta criar uma seção para incluir os gadgets em cima da coluna dos posts.
Para isso:

Vá em Modelo » Editar HTML e procure pela tag:
<b:section class='main' id='main' showaddelement='no'>
E inclua este código abaixo acima desta tag:
<b:if cond='data:blog.pageType != "item"'>
        <b:section class='main' id='main1' preferred='yes'>
        </b:section>
</b:if>

Clique em [Salvar modelo]

Assim irá criar uma sessão que irá possibilitar criar gadgets acima dos posts.

Observação:

Note que a tag:
<b:if cond='data:blog.pageType != "item"'> </b:if>
É a condicional que define que o Gadget de Posts em Destaque NÃO apareça apenas nas páginas dos posts quando estão abertos. Se quiser colocar mais condicionais basta colocar a tag correspondente que aprendeu no post sobre condicionais no blogger  e não se esqueça de fechar com o </b:if> no final.


Agora vá em Layout, atualize a página (clique F5)
» Clique em Adicionar um gadget e escolha um gadget tipo HTML




Cole este código abaixo no Gadget tipo HTML e preencha os itens que são pedidos:

<style type="text/css">
/*--- Slides ---- */
.section-title {background: none repeat scroll 0 0 #FFFFFF; float: left; margin: -7px 0 0;}
.heading{border-top: 1px solid #E6E6E6; color: #929292; display: block; font-family: Tahoma,Geneva,sans-serif; font-size: 14px; line-height: 14px; margin: 7px 0 10px; text-transform: uppercase;}
.sect-container{padding:23px 0 6px 12px
}
#slider-cont{padding: 0px 0px 0px 0px;}
.slide-1,.slide-2,.slide-3,.slid-thumb{width:200px;}
.slide-1,.slide-2,.slide-3,.slid-thumb{height:200px; overflow:hidden; position:relative; display: block; -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out;}
.slide-1:hover,.slide-2:hover,.slide-3:hover,.slid-thumb:hover{ opacity:.6;filter:alpha(opacity=60);-moz-opacity:.6;-khtml-opacity:.6}
.top-strip{ background:#111; opacity:0.7; filter:alpha(opacity = 70); color: #929292; display: block; font-family: Tahoma,Geneva,sans-serif; font-size: 11px; left: 0; line-height: 11px; padding: 5px; position: absolute; text-transform: uppercase; top: 10px;}
.slid-cont{position:absolute; bottom:0; left:0; right:0; background:#111; opacity:0.7; filter:alpha(opacity = 70); padding:10px; overflow:hidden; margin-bottom:0px;}
.slid-cont h3{color:#fff; padding:0; margin:0; font-family: Tahoma,Geneva,sans-serif;}
.slid-cont a{color:#fff; line-height:11px; font-size:14px; font-weight:bold;}
.slid-cont a:hover{text-decoration:underline;}
.slide-1{float: left; margin-left:10px;}
.slide-2,.slide-3{float:left; margin-left:10px;
</style>

<div class='sect-container'>
<div class='heading'>
  <span class='section-title'>Posts em Destaque</span>
</div>
</div>
<div style='clear: both;'></div>
<div id='slider-cont'>
<!-- Slide 1 image here -->
<li class='slide-1'>
<a href='Link_Post'>
<img class='slid-thumb' src='Link_Imagem' title='Titulo_do_Post' style='width:200px;height:200px;'/>
</a>
<span class='top-strip'>Destaque1</span>
<h3 class="slid-cont"><a href="Link_Post">Título_do_Post_1</a>
</h3>
</li>  
  
  <!-- Slide 2 image here -->
<li class='slide-2'>
<a href='Link_Post'>
<img class='slid-thumb' src='Link_Imagem' title='Titulo_do_Post' style='width:200px;height:200px;'/>
</a>
<span class='top-strip'>Destaque2</span>  
<h3 class="slid-cont"><a href="Link_Post">Título_do_Post_2</a>
</h3>
</li>

<!-- Slide 3 image here -->
<li class='slide-3'>
<a href='Link_Post'>
<img class='slid-thumb' src='Link_Imagem' title='Titulo_do_Post' style='width:200px;height:200px;'/>
</a>
<span class='top-strip'>Destaque3</span>
<h3 class="slid-cont"><a href="Link_Post">Título_do_Post_3</a>
</h3>
</li>
</div>

Como configurar o Gadget:

♦ Em Link_Post» Coloque o Link do post que deseja destacar.

♦ Em Link_Imagem» Coloque uma imagem que represente o post.

♦ Em Titulo_do_Post» Você vai repetir o Título do Post neste local para quando passarmos o mouse em cima da imagem o título irá aparecer graças ao recurso Tooltip.

Dica para Você

♥ Uma dica que utilizei no Farmacêutico Digital foi destacar 3 marcadores que considero importantes no blog. Coloquei o Título dos marcadores onde se escreve Destaque1, 2 e 3 e onde seria o título dos posts (Título_do_Post_1) coloquei uma frase sobre o marcador correspondente..

Fonte:
Template: http://freshlife-bloggertheme9.blogspot.com.br/

Gadget das Redes Sociais em Estilo Metro - Versão 2



Já publiquei um post aqui explicando o que é o Estilo Metro e como colocar um Gadget das Redes Sociais em Estilo Metro como mostra a figura abaixo.


Porém eram apenas 3 redes sociais, o Facebook o G+ e o Twitter além do link de Feeds para o seu blog.

Atendendo a pedidos alterei este gadget acrescentando mais duas redes sociais o Pinterest e o Instagram e deu um resultado bem legal!



Como colocar um Gadget das Redes Sociais no Estilo Metro

O procedimento é o mesmo do post anterior com a diferença de ter mais dois links de redes sociais.
→ Vá em Layout» Escolha a Coluna que deseja colocar o Gadget » Clique em Adicionar um gadget » Escolha um gadget tipo HTML

►Cole o código abaixo no espaço reservado para isto:

<div class="MBD2B-social">
<li><a class="fb2" href="URL_Facebook" target="_blank"></a></li>
<li><a class="tw2" href="URL_Twitter" target="_blank"></a></li>
<li><a class="gp2" href="URL_Google+" target="_blank"></a></li>
<li><a class="fd2" href="URL_Feedburner" target="_blank"></a></li>
<li><a class="in2" href="URL_Instagram" target="_blank"></a></li>
<li><a class="pi2" href="URL_Pinterest" target="_blank"></a></li>
</div>

<style type='text/css'>
.MBD2B-social {width: 285px}
 .MBD2B-social li { position: relative; cursor: pointer; padding: 0; list-style: none }
 .MBD2B-social .fb2,.tw2,.gp2,.fd2,.in2,.pi2 { z-index: 7; float: left; margin: 1px; position: relative; display: block }
 .MBD2B-social .fb2 { background: url(http://3.bp.blogspot.com/-5uDzuzPa4ao/UqOnGZYpiKI/AAAAAAAAAEo/8CyoMUABc3U/s1600/Facebook1.png) no-repeat center center #1f69b3; width: 140px; height: 205px }
 .MBD2B-social .tw2 { background: url(http://3.bp.blogspot.com/-vopcCiP-PjM/UqOnHTMd-2I/AAAAAAAAAFM/eG9JJ2MY6qM/s1600/twitter1.png) no-repeat center center #43b3e5; width: 140px; height: 70px }
 .MBD2B-social .gp2 { background: url(http://4.bp.blogspot.com/-A13Rw_xfZag/UqOnG6-bqBI/AAAAAAAAAFE/hhmC9iKB9LQ/s1600/g+1.png) no-repeat center center #da4a38; width: 140px; height: 133px }
 .MBD2B-social .fd2 { background: url(http://1.bp.blogspot.com/-cVOxJstBcBg/UqOnGdwpRsI/AAAAAAAAAEs/Yy_SbDLWwFA/s1600/Feed1.png) no-repeat center center #e9a01c; width: 140px; height: 77px }
 .MBD2B-social .in2 { background: url(http://1.bp.blogspot.com/-Px9UJWkw78U/VMZ2DQatmbI/AAAAAAAAAKc/aRBQVEofjkA/s1600/instagram1.png) no-repeat center center #3D739C; width: 140px; height: 77px }
 .MBD2B-social .pi2 { background: url(http://4.bp.blogspot.com/-rCIENnwBn8w/VMZ2DWDuwxI/AAAAAAAAAKY/PMP0M8K-Ge8/s1600/pinterest1.png) no-repeat center center #B93936; width: 282px; height: 70px }
 .MBD2B-social li:hover .fb2 {background: url(http://4.bp.blogspot.com/-JwHnPN5lgb4/UqOnGYRa93I/AAAAAAAAAEw/Fjw0lBlnOmk/s1600/Facebook2.png) no-repeat center center #1f69b3}
 .MBD2B-social li:hover .tw2 {background: url(http://1.bp.blogspot.com/-osuN0bVZ80o/UqOnH8ldX9I/AAAAAAAAAFU/FZ40AYwTUTA/s1600/twitter2.png) no-repeat center center #43b3e5}
 .MBD2B-social li:hover .gp2 {background: url(http://3.bp.blogspot.com/-4fYQ1zi5K8o/UqOnHMOQqyI/AAAAAAAAAE8/CiF2XMqeYjo/s1600/g+2.png) no-repeat center center #da4a38}
 .MBD2B-social li:hover .fd2 {background: url(http://2.bp.blogspot.com/-HEQHhVN6PIw/UqOnG9F_HiI/AAAAAAAAAFc/idsaUJrCaN8/s1600/Feed2.png) no-repeat center center #e9a01c}
 .MBD2B-social li:hover .in2 {background: url(http://3.bp.blogspot.com/--uW6lsaYNec/VMZ2DWfl3dI/AAAAAAAAAKU/NprNulN_rXM/s1600/instagram2.png) no-repeat center center #3D739C}
 .MBD2B-social li:hover .pi2 {background: url(http://2.bp.blogspot.com/-dGrSXW4khX4/VMZ2Dw05orI/AAAAAAAAAKk/6bui6BSulHA/s1600/pinterest2.png) no-repeat center center #B93936}
</style>

Como configurar o seu Gadget

1- Configure as URLs das Redes Sociais
♦ Em URL_Facebook » Coloque o link da sua página do Facebook
♦ Em URL_Twitter » Coloque o link do seu Twitter
♦ Em URL_Google+ » Coloque o link da sua página no G+
♦ Em URL_Feedburner » Coloque o link dos Feeds do seu Blog
♦ Em URL_Instagram » Coloque o link do seu Instagram
♦ Em URL_Pinterest » Coloque o link do seu perfil no Pinterest

Obs: Se você ainda não ativou os Feeds para o seu blog » Leia este artigo: O que são feeds e entenda a importância de ter feeds para o seu blog.


2- Se você quiser hospedar as imagens do Gadget em seu blog para não correr o risco ultrapassar largura de banda elas estão neste link:
» Imagens para o Gadget de Redes Sociais Estilo Metro
Baixe-as - Hospede em seu blog e substitua os links em azul no código acima.

Link para Texto na Mesma Página




Sabe quando você está escrevendo um texto grande e quer fazer referência a alguma parte do seu texto, mas não sabe como levar o leitor até lá sem que ele procure.
Pois é ontem aprendi como colocar um link onde a página desce ou sobe automaticamente até o texto indicado no link.

Para os webmasters isso é mamão com açúcar, mas para mim foi um super achado. Posso aplicar este recurso em tutoriais extensos onde quero que a pessoa volte numa explicação sem que ela tenha que procurar. O simples fato de ter que procurar a explicação faz com que a pessoa se desinteresse de ler o tutorial e com isso não aprende.

Então vamos lá:

» Você também pode usar este recurso para indicar para voltar ao topo da página.

♦ Estas tags abaixo indicam onde você vai levar o seu leitor:
<a name="nome_da_Ancora">Você escreve entre estas tags.</a>
» Devem estar localizadas onde você quer que o leitor chegue.

♦ Este comando abaixo indica o link para chegar no local que você determinou anteriormente:
<a href="#nome_da_Ancora">Voltar para o começo</a>

♦ Vou exemplificar para você entender melhor, veja o texto abaixo:

<a name="loremipsum">1. Lorem ipsum </a>consequat concludaturque mea in, ei nostro convenire duo, wisi quas electram mel te. Eam cu hinc reprehendunt. Usu eu alienum euripidis, ut lorem homero civibus eum. Mei ne mazim democritum, tation sanctus suavitate in has, atqui omittantur ut vim. Disputationi consequuntur delicatissimi in sit, vitae pertinax consetetur te nec.

2. In sed ipsum deseruisse disputationi, per at sapientem philosophia. Tale delicatissimi et est, at posse utinam pro. Dicat maluisset eu nec. Cum quodsi apeirian accommodare ex, mel cu quodsi consulatu efficiantur, ex veniam mollis integre mea. Pri amet falli viderer ei, tempor option scriptorem in eos.

3. An quo stet <a name="minimum">minimum,</a> regione tritani eligendi mel et. Qui choro essent no. Cu has rebum ullum interpretaris, et enim appareat concludaturque cum. Harum nostrud vulputate pri no, ei adhuc clita fastidii vim. Te fugit quidam pri, his dolorum suscipit facilisis ea.

4. Dictas fuisset senserit nam te, vix ut scripta facilisis posidonium, ei amet adolescens consequuntur usu. Ei eirmod vocibus temporibus eos, kasd habeo feugiat id has, decore consul feugait an nec. At vel rebum propriae imperdiet, ne iudico epicuri philosophia ius. Dicant postulant an sea, puto adhuc mea at, dicunt evertitur est no. His quis melius option at, saepe congue antiopam ei cum, his probo iusto dolore at. Alii iisque aliquip cu pro, his eu homero rationibus dissentiet.

5. Dicit noluisse splendide et ius, ei nostrud pericula persecuti quo, ea agam zzril labores eum. Populo propriae incorrupte ius ne, eam lucilius cotidieque an. Eum illud tractatos deterruisset ne, quo ea errem choro viderer. Et sed dicta commodo, meis falli sit cu, populo commune voluptaria ei per. Ne veri sale malorum pri, mea sanctus prodesset ne, adhuc congue assueverit eam eu. Unum quaeque voluptatum pri te, sonet nostro probatus usu cu, mea ludus tibique vulputate id.

6. Nec id probo quodsi incorrupte. Ius no harum lucilius contentiones. Erant nostrum et mea, sit accusam mediocrem vulputate ea, doming scriptorem mei ex. Sea elitr discere accumsan cu, in nec audiam eloquentiam. Malis omnes argumentum in eos.

7. Usu ei quod torquatos assueverit, vel eu commune persecuti. Tollit munere doctus pro id, id error gloriatur philosophia sed, deserunt explicari nec ex. Sed te iusto signiferumque, his eu iusto nostrum, partem aliquam facilisis ei ius. <a href="#minimum">Clique aqui para Voltar ao Parágrafo 3</a>Cu qui meis exerci ornatus, mel cibo modus quaestio et, ex prima quodsi habemus vis. Nec in enim primis deterruisset, pro ei quem malorum volutpat. Eu vel brute invidunt.

8. Ex velit nobis quo, no possit legimus nominati ius. Simul dissentias cum te, pericula periculis complectitur in vis. Mel malis elitr propriae ut, atqui assum nominavi est in, vim salutatus splendide et. Te est iuvaret denique lucilius, vocibus expetendis quo in, at sed decore delicata percipitur. Eum prima propriae concludaturque id, et duo tation ullamcorper. Qui alii dolorem imperdiet an, alia repudiare reprimique ea qui, dico adipisci interesset eam in. Everti instructior in qui, nec et ignota aliquyam.

<a href="#loremipsum">Clique aqui para Voltar ao 1ºParágrafo</a>


♦ Agora o texto com o recurso aplicado:

1. Lorem ipsum consequat concludaturque mea in, ei nostro convenire duo, wisi quas electram mel te. Eam cu hinc reprehendunt. Usu eu alienum euripidis, ut lorem homero civibus eum. Mei ne mazim democritum, tation sanctus suavitate in has, atqui omittantur ut vim. Disputationi consequuntur delicatissimi in sit, vitae pertinax consetetur te nec.

2. In sed ipsum deseruisse disputationi, per at sapientem philosophia. Tale delicatissimi et est, at posse utinam pro. Dicat maluisset eu nec. Cum quodsi apeirian accommodare ex, mel cu quodsi consulatu efficiantur, ex veniam mollis integre mea. Pri amet falli viderer ei, tempor option scriptorem in eos.

3. An quo stet minimum, regione tritani eligendi mel et. Qui choro essent no. Cu has rebum ullum interpretaris, et enim appareat concludaturque cum. Harum nostrud vulputate pri no, ei adhuc clita fastidii vim. Te fugit quidam pri, his dolorum suscipit facilisis ea.

4. Dictas fuisset senserit nam te, vix ut scripta facilisis posidonium, ei amet adolescens consequuntur usu. Ei eirmod vocibus temporibus eos, kasd habeo feugiat id has, decore consul feugait an nec. At vel rebum propriae imperdiet, ne iudico epicuri philosophia ius. Dicant postulant an sea, puto adhuc mea at, dicunt evertitur est no. His quis melius option at, saepe congue antiopam ei cum, his probo iusto dolore at. Alii iisque aliquip cu pro, his eu homero rationibus dissentiet.

5. Dicit noluisse splendide et ius, ei nostrud pericula persecuti quo, ea agam zzril labores eum. Populo propriae incorrupte ius ne, eam lucilius cotidieque an. Eum illud tractatos deterruisset ne, quo ea errem choro viderer. Et sed dicta commodo, meis falli sit cu, populo commune voluptaria ei per. Ne veri sale malorum pri, mea sanctus prodesset ne, adhuc congue assueverit eam eu. Unum quaeque voluptatum pri te, sonet nostro probatus usu cu, mea ludus tibique vulputate id.

6. Nec id probo quodsi incorrupte. Ius no harum lucilius contentiones. Erant nostrum et mea, sit accusam mediocrem vulputate ea, doming scriptorem mei ex. Sea elitr discere accumsan cu, in nec audiam eloquentiam. Malis omnes argumentum in eos.

7. Usu ei quod torquatos assueverit, vel eu commune persecuti. Tollit munere doctus pro id, id error gloriatur philosophia sed, deserunt explicari nec ex. Sed te iusto signiferumque, his eu iusto nostrum, partem aliquam facilisis ei ius. Clique aqui para Voltar ao Parágrafo 3Cu qui meis exerci ornatus, mel cibo modus quaestio et, ex prima quodsi habemus vis. Nec in enim primis deterruisset, pro ei quem malorum volutpat. Eu vel brute invidunt.

8. Ex velit nobis quo, no possit legimus nominati ius. Simul dissentias cum te, pericula periculis complectitur in vis. Mel malis elitr propriae ut, atqui assum nominavi est in, vim salutatus splendide et. Te est iuvaret denique lucilius, vocibus expetendis quo in, at sed decore delicata percipitur. Eum prima propriae concludaturque id, et duo tation ullamcorper. Qui alii dolorem imperdiet an, alia repudiare reprimique ea qui, dico adipisci interesset eam in. Everti instructior in qui, nec et ignota aliquyam. Clique aqui para Voltar ao 1º Parágrafo


» Note que o local onde você quer indicar deve ter o mesmo nome de Âncora para que o link funcione.Clique aqui para Voltar aos Códigos das Tags

Fonte: Aprendi esta dica no Fórum Webmasters Online

Obs: Se o blogger interpretar o link para a edição do seu post, peça para editar o post e retire o link automático do blogger e atualize enquanto estiver no formato HTML. Porque se voltar para "Escrever" o blogger irá reverter para um link dele mesmo.

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