Cursos 24 Horas - Cursos 100% Online com Certificado

Disponibilize Links e Códigos de Compartilhar no Rodapé das Postagens - Blogger

12 Comentários Autor : Notícia e blog 27 março 2010
Disponibilize um links e códigos de embutir no final de seus artigos para facilitar seu leitor a divulgar seus conteúdos e postagens em outros sites ajudando assim seu blog ser mais conhecido, pois se seus visitantes gostarem eles vão querer mostrar para outras pessoas e assim difundir seu conteúdo de forma simples e rápida. Basta fazer essas pequenas alterações abaixo em seu HTML.

Inserindo o Códigos

1)Acesse o painel do Blogger(blogger.com)
2)Vá em Layout->Editar HTML->Marque Expandir Modelos de Widgets. Procure pelo seguinte código, utilizando as teclas CTRL e F:<div class='post-footer-line post-footer-line-3'>Abaixo do código anterior insira o seguinte:<div id='linksparaartigo'>
<p><b>Links para Compartilhar ou Embutir</b></p>
<p class='noborder'>
<label for='aa-url'>URL:</label>&lt;br /&gt;
&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;
</p>
<p>
<label for='aa-forum'>Link em HTML:</label>&lt;br /&gt;
&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;&lt;a href=&amp;quot;<data:post.url/>&amp;quot;&gt;<data:post.title/>&lt;/a&gt;&quot; /&gt;
</p>
<p>
<label for='aa-forum'>Link para Fórum:</label>&lt;br /&gt;
&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;[url=<data:post.url/>]<data:post.title/>[/url]&quot; /&gt;
</p>
</div>

Inserindo Estilo ao Código

Vamos agora formatar o código procure por ]]></b:skin> e antes dele insira o seguinte:#linksparaartigo {
background-color:#f9f9f9;
padding-bottom:5px;
padding-left:20px;
font-size:11px;
}
input{
background-color:#ffffff;
}
Salve as alterações e visualize. Abaixo veja na imagem como fica:
Imagem de: Et Dúvida

    12 Comentários

    Daniele disse...
    27 de março de 2010 14:41 #

    Aqui.. nao estou onseguindo.. da erro.

    Jc Denton disse...
    27 de março de 2010 14:46 #

    Vai ficar igual ao seu?

    Notícia e blog disse...
    27 de março de 2010 14:47 #

    @Daniele Olha tente refazer pois pois o código está correto. Se persistir envie o que está aparecendo para mim para que eu possa te ajudar

    Notícia e blog disse...
    27 de março de 2010 14:51 #

    @Jc Denton, não este é outro.

    Daniele disse...
    27 de março de 2010 15:47 #

    persistiu.. qual o seu email pra q eu possa te enviar

    Jc Denton disse...
    27 de março de 2010 16:09 #

    Esse compartilhe e salve ficou legal!

    Daniele disse...
    27 de março de 2010 16:30 #

    olha.. eu consegui.. mas realmente faltou um detalhe.. pq dps do numero "3" no codigo que eh pra procurar tem uma barra.. so assim que consegui.

    Notícia e blog disse...
    28 de março de 2010 09:25 #

    @Daniele, que bom que conseguiu, mas meu e-mail é fernandopasse[arroba]noticiaeblog.com qualquer dúvida entre em contato.

    SGT FREIRE disse...
    31 de março de 2010 23:56 #

    Muito boa essa dica cara, valeu!

    tatodicastro disse...
    14 de abril de 2010 09:15 #

    tem como diminuir a largura dele ? aki no meo ficou muito grande !

    tatodicastro disse...
    14 de abril de 2010 09:17 #

    Já consegui diminuir, hehe nem preciso procurar :D

    Ana | alcoholicos anonimos disse...
    22 de março de 2011 09:05 #

    Buen codigo, muchas gacias!

    Saludos.

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.