Colocando o botão do Pinterest no blog

Amigas, resisti até onde pude, mas fui obrigada a passar para a nova interface do blogger. Confesso que está sendo difícil mas vou tentando.
Quero explicar aos "experts"  que detudoumpoucotraçomais é feito por quem não entende de informática e dirigido àquelas pessoas que estão também iniciando, sem conhecimento algum.  Este espaço é  o meu "cantinho de armazenamento", a minha "gaveta", onde irei clocando as minhas descobertas e os códigos que uso ou que achei interessantes. Se alguém quiser cooperar, deixe um comentário.
Continuando: pesquisei vários blogs até encontrar no http://templateseacessorios.blogspot.com.br, pois eu queria colocar o botão do Pinterest, mas os códigos fornecidos pelos outros que visitei não funcionavam.

Como sou um pouco (batante..rsrsrsr)  atrapalhada, e não entendo coisa alguma de informática, vou lendo as instruções e, quando não encontro o que foi indicado, faço o meu próprio caminho. Exemplo: é indicado que se “vá até o Modelo de seu blog, clique em Editar modelo”. Eu fiz diferente. Abri o blog, fiz o login, cliquei em Desing. Abriu uma página:

Cliquei em HTML

Cliquei em Posseguir.

Agora, clique nesse link e continue conforme as instruções.

http://templateseacessorios.blogspot.com.br/2012/09/colocar-botao-do-pin.html

O templateseacessórios mostra em imagens a nova interface do blogger. Eu adorei!

***

Não esqueça salvar uma cópia de seu template, pois caso não dê certo, é só reinstalá-lo.

Como eu não sei salvar,pois o HTML sempre fica errado,  fiz o seguinte:

Copiei todo o código onde se encontra a linha que preciso trocar. Caso algum dia dê problema, ou eu queira retirar o botão, saberei o que fazer.

<!-- quickedit pencil -->

        <b:include data='post' name='postQuickEdit'/>

      </span> <div class='post-share-buttons goog-inline-block'>

        <b:if cond='data:post.sharePostUrl'>

          <b:include data='post' name='shareButtons'/>

        </b:if>

      </div> <span class='post-backlinks post-comment-link'>

         <b:if cond='data:blog.pageType != &quot;item&quot;'>

           <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

             <b:if cond='data:post.showBacklinks'>

               <a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a>

             </b:if>

           </b:if>

         </b:if>

       </span> </div>

Segui os demais passos.

Procurei por:

<b:include data='post' name='shareButtons'/>

Substitui então por:

<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img alt='Pin It' onclick='doPinIt();' src='http://farm8.staticflickr.com/7180/6830456074_6177278e71_z.jpg' style='margin: 0 0 -5px 0;'/></a>

Agora, vem a verificação final: clico em visualizar. Se o blog aparecer verifico se o botão está instalado, retorno para o HTML e clico em salvar. Depois de salvo, clico em fechar e depois em visualizar - lá em cima. 

Se ao clicar no visualizar ( do HTML) aparecer erro, clico em limpar edições.

Nesse caso o código é retirado automaticamente.

Sugiro que ao criar um blog você já coloque o máximo de códigos que você pretende usar. Se der erro você não chegou a grande número de postagens. Pode refazer tudo sem muitas perdas.

Espero ter conseguido explicar o meu jeito de fazer.
Como eu queria mais botões, fiz um  "bloco" de códigos com os botões que escolhi. 
Vou postar para vocês, depois.
Primeiro temos que aprender a usar bem a nova interface.

Atenção: os códigos do templateseacessorios  são feitos para os modelos "Simples", por isso troquei os modelos de alguns dos meus blogs.