Botão Pin It | Blogger Tips

January 25, 2016


Olá meus amores, como estão?
Hoje venho aqui muito rápido mostrar-vos o novo acrescento do blog: O botão Pin it! Vocês não sabem, mas já à imenso tempo que queria juntar este botão aqui ao blog, mas nunca tive grande tempo para ir pesquisar. Hoje estive de folga, e não estive assim muito bem humorada por isso fui fazer o meu trabalho de casa! E cá está ele, e não está giro?

Este é um widget super fácil de adicionar ao blog, e se assim o tiveres direccionado poderás ficar com mais visualizações visto que o post estará noutra rede social! Para além de o layout ficar muito mais giro com estes bad boys aqui, não acham? Espero que gostem deste mini-post, mas assim já aprendem mais uma coisinha nova! Se utilizarem este tutorial digam-me nos comentários, e se precisarem de ajuda, digam também! Até ao próximo post, beijinhos! 

Backup
Recomendo que façam back up do vosso layout para o caso de algo correr mal! Basta irem: Modelo, Efectuar cópia de Segurança/Restaurar e por fim transferir modelo completo. Se tiverem algum problema com o layout têm o backup do layout antigo e para o voltarem a por basta irem ao mesmo sitio mas desta vez carregam o modelo antigo.

HTML
Para conseguirem ter este botão no vosso blog terão de mexer no HTML, mas é um passo super simples só de copy paste. Vamos lá a códigos então: Ao irem ao HTML pressem CTRL + F para abrir uma caixa de pesquisa dentro do HTML. Depois pesquisem por  </body> e coloquem este código por baixo:

<script>
//<![CDATA[
var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'/>
<!-- please do not alter or remove the following code -->
<div id='bs_pinOnHover'><a href="http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html">Pin It button on image hover</a></div>

Podem mudar apenas duas coisas no código
Onde têm o URL (http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png)
E onde diz "center".

Embelezar o botão
Como podem ver (quem estiver a utilizar este tutorial) o botão que vocês vão utilizar é o mesmo do meu, mas deixo aqui em baixo mais uns códigos de outros botões! Assim podem mudar o que quiserem de acordo com o vosso blog!



http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png



http://s27.postimg.org/ldqfkj6e7/64_round_pinlove.png


http://i1098.photobucket.com/albums/g363/Maggie_Silva/Pinterest_Gold_Iconlittle80_zpsso8gcdlm.png




Todos os comentários que forem perguntas serão respondidos neste mesmo post.

You Might Also Like

5 COMENTÁRIOS

  1. Adorei o tutorial , no fim de semana vou tirar um tempnho para mudar o layout do meu blog e vou sem dúvida usar este código !!

    xoxo ❤
    Watermelon Clouds

    ReplyDelete
  2. no meu template esse ja veio junto mas otima dica!
    Pam xo/ Pam Scalfi♥

    ReplyDelete
  3. Assim que tiver o meu computador de volta, certamente que irei fazer algumas atualizações pois adorei o tutorial!

    http://instantesimprovaveis.blogspot.pt/

    ReplyDelete
  4. Obrigada pela dica, andava a imenso tempo para fazer isto mais ainda não tinha tido tempo para procurar.

    Beijinhos, MARGARITA

    ReplyDelete
  5. Olha este post era mesmo o que eu precisava :p Não sou muito jeitosa pra estas coisas, mas esta dica tá muito bem :)

    ReplyDelete

FOLLOW ME ON INSTAGRAM @BLACKROSEBYANNLUCK