Trabalhando com alguns códigos no Blogspot

No Blogspot, para obter o link da postagem ou permalink, como é chamado:

data:post.url = Permalink ou URL completa da postagem do blog. Deve ser colocando dentro de expr:href='AQUI'
<data:post.title/> = Título da postagem. É uma boa ideia utilizar esse código também na parte 'title' do link
<data:blog.metaDescription/> = Para obter a descrição da postagem. É uma boa ideia colocá-la abaixo do título de sua postagem

Exemplo em um link:

<a expr:href='data:post.url' title='data:post.title'>TEXTO ou IMAGEM AQUI</a>

Como posso utilizar o link de minha postagem junto com outro texto? 

O código do blogspot deve ficar separado do texto no template. Aqui aqui um exemplo de compartilhamento via Facebook:

<a expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.url'>TEXTO ou IMAGEM AQUI</a>

Perceba que a URL da rede está entre as tags convertidas: "&quot;" e "&quot;". Logo após vem o código do Blogspot.

Outra observação é que no Blogspot a expressão "expr:" deve ser colocada antes do "href". Quanto ao permalink nesse caso ele deve ficar fora dessas tags seguindo "+ data:post.url". Nos exemplos a seguir temos 3 exemplos de como fazer botões de compartilhamento no Blogspot para Facebook, Twitter e Google+.

Facebook

<a expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.url' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&apos;);return false;' rel='nofollow'><img src='URL_DE_ICONE_DO_FACEBOOK'/></a>

Google+

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&apos;);return false;' rel='nofollow'><img src='URL_DE_ICONE_DO_GOOGLE'/></a>

Twitter

<a expr:href='&quot;http://twitter.com/share?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&apos;);return false;' rel='nofollow'><img src='URL_DE_ICONE_DO_TWITTER'/></a>

Neste caso aqui do Twitter colocamos novamente o código "+ &quot;" para inserir o parâmetro de url que o próprio Twitter pede e novamente "&quot;" para inserir a URL da postagem.

WhatsApp

<a expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; - &quot; + data:post.url'><img src='URL_DE_ICONE_DO_WHATSAPP'/></a>

Neste exemplo do WhatsApp após compartilhar em um contato ou grupo teríamos algo mais ou menos assim: "Título da postagem ou trecho de código - http://www.site.com".

Copie e cole cada código para compartilhamento após a tag <post-footer-line post-footer-line-3> do seu template.

LEIA MAIS »

Como adicionar botões de compartilhamento sem plugins em seu site

Alguns webmaster ou blogueiros, preocupados com o tempo de carregamento de suas páginas podem buscar outra alternativa, digamos, mais “arcaica” mas que vai, além de deixar o site com a sua cara, pode beneficiar muito no tempo de carregamento.

A solução é usar janelas com códigos "window.open", um modelo muito utilizado na internet, bem antes das redes sociais darem as caras. Mas lembre-se, não são aqueles “Pop up” chatos que podem ser bloqueados pelo navegador, mas sim uma nova aba independente e personalizável.

Para que isso funcione um dos requisitos é o link de compartilhamento da rede social que você deseja colocar. Abaixo estarão listados os links do Facebook, Twitter e Google+. Só lembre-se de alterar as partes em vermelho para links do seu blog/site.
Facebook

<a href="https://www.facebook.com/sharer/sharer.php?u=LINK_COMPLETO_DA_POSTAGEM_DO_SEU_SITE" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" rel="nofollow"><img src="URL_DE_ICONE_DO_FACEBOOK"></a>

Twitter

<a href="http://twitter.com/share?text=trecho do texto ou descrição de sua postagem aqui&amp;url=LINK_ENCURTADO_DA_POSTAGEM_DO_SEU_SITE" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" rel="nofollow"><img src="URL_DE_ICONE_DO_TWITTER"></a>

Google+

<a href="https://plus.google.com/share?url=LINK_COMPLETO_DA_POSTAGEM_DO_SEU_SITE" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" rel="nofollow"><img src="URL_DE_ICONE_DO_GOOGLE+"></a>

Assim como nos exemplos você pode utilizar imagens (de 1 Kb no máximo, cada), mas você pode optar por ícones do Bootstrap, que é gratuito, mas que pode ser um pouquinho mais pesado se for utilizado apenas para esse fim. Para implementar você deve incluir os scripts font-awesome.min.css (CSS de 23Kbs) e o fontawesome-webfont .woff (Fonte de 44Kbs) corretamente no header do documento. Para utilizar o ícones Bootstrap de redes sociais ao invés de imagens, delete <img src=" URL_DE_ICONE_DO_GOOGLE+">. Alguns exemplos:

<i class="fa fa-facebook" title="Compartilhe no Facebook"></i>

<i class="fa fa-twitter" title="Compartilhe no Twitter"></i>

<i class="fa fa-google-plus" title="Compartilhe no Google+"></i>

Para os demais ícones veja no site do Boostrap.

LEIA MAIS »

Conversor de código HTML

Antes de inserir códigos Javascript em seu blog, como código do Google Adsense ou outros plugins em algumas áreas específicas do template ou dentro da postagem é necessário convertê-los (parsear). Para isso criamos essa área.

Atenção: Se você estiver utilizando Blogspot e quiser inserir seus códigos JavaScript em um Widget HTML/JavaScript, isso pode ser feito tranquilamente, sem a necessidade de conversão.

Para inserir anúncios dentro da postagem, basta colar aqui o seu código e clicar em Converter Código.



É isso.

Agora, sempre que você quiser converter um código, seja html, seja do Adsense ou outros Javascript basta digitar no Google "Conversor Ajuda Ops" ou visitar o nosso site pelo navegador.

É importante ressaltar que não é permitido modificar anúncios do Google Adsense.

LEIA MAIS »