Colocar redes sociais ao lado dos anúncios Google Adsense nas páginas do blogge/blogspot

 Para quem usa o programa de afiliados em seu blog como o Google AdSense ou mesmo outro como UOL, HotWord ou similares tem como deixar tudo bem arrumadinho nas páginas das postagens com esse código que deixa mais harmonioso, e mais fácil para seus leitores. É possível colocar mais de um anúncio, caso suas páginas internas tenham espaço para faze-lo.


Vá até o "Modelo de seu blog", clique em "Editar HTML"

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Clique em Expandiir modelos de widgets

Se quiser colocar abaixo dos títulos do post, procure por:


<div class='post-header-line-1'>

ou

<div class='post-header-line-1'/>


Se quiser colocar após a postagem do blog, procure por:
 
<div class='post-footer'>

Abaixo de qualquer dos códigos escolhidos, cole o próximo código, fazendo as modificações necessárias para linkar suas páginas sociais e colar os códigos referentes aos programas de afiliados.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='Adsense-sociais'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td width='708'>

AQUI O CÓDIGO ADSENSE, SE TIVER ESPAÇO, PODE COLAR MAIS DE UM CÓDIGO

</td>
<td>
 <div class='widget' id='counter'>
    <div class='inner clearfix'>
    <div class='box-out'>
    <div class='head box'>
    <p>Inscreva-se e siga NOME DE SEU BLOG</p>
    </div>
    </div>
    <div class='side_cont box-out clearfix'>
    <div class='box clearfix'>
    <div class='email_rss clearfix'>
    <span>Assine nossas atualizações</span>

    <form action='http://feedburner.google.com/fb/a/mailverify' class='clearfix' id='subscribe-form' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=&apos;NICK_FEED_AQUI&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input class='txt' id='newsletter' name='email' type='text'/><input name='uri' type='hidden' value='NICK FEED'/><input name='loc' type='hidden' value='en_US'/><input class='btn' type='submit' value='Assinar'/></form>

    </div>


    <div class='social_links clearfix'>

    <a class='png_bg dysocial' href='ENDEREÇO FACEBOOK' id='side_fb' rel='nofollow' title='Assine nossa página'>Facebook</a>

    <a class='png_bg dysocial' href='ENDEREÇO TWITTER' id='side_tw' rel='nofollow' title='Siga-nos'>Twitter</a>

    <a class='png_bg dysocial' href='ENDEREÇO FEED' id='side_rss' rel='nofollow' title='Inscreva-se via RSS'>RSS</a>

    <a class='png_bg dysocial' href='http://feedburner.google.com/fb/a/mailverify?uri=NICK FEED' id='side_email' rel='nofollow' title='Assine por email'>Email</a>

    </div>
  
    </div>
    </div>
    </div>
    </div>
</td>
</tr>
</table>
</div>
</b:if>

Salve. Agora clique em Layout

Clique em Adicionar um Gadget

Ao abrir, clique em  HTML/Javascript

Cole então o próximo código, depois salve.

<!--BloggingeHow Subscription Widget-->

     <style>
    body {
        color: #434343;
        font: 12px/20px Arial,Helvetica,sans-serif;
    }
    #sidebar .widget {
        background-color: #000000;
        margin: 15px 0;
        padding: 4px;
        position: relative;
    }


    #sidebar .widget .head {
        text-shadow: 0 1px 0 #FFFFFF;
    }
    #sidebar .widget .box {
        background: #ccc;
        padding: 8px;
    }
    #sidebar .widget .box-out {
        background-color: #FFFFFF;
        border-bottom: 1px solid #E5E5E5;
        padding: 1px;
    }
    .clearfix:after {
        clear: both;
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        line-height: 0;
        visibility: hidden;
        width: 0;
    }
    #sidebar .widget .box {
        background: #ccc;
        padding: 8px;
    }
    .clearfix {
        display: block;
    }
    .clearfix {
        display: inline-block;
    }
    .clearfix:after {
        clear: both;
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        line-height: 0;
        visibility: hidden;
        width: 0;
    }
    .email_rss {
        border-bottom: 1px solid #E5E5E5;
        margin-bottom: 5px;
        position: relative;
    }
    .social_links, .email_rss {
        padding: 5px 0 10px;
        width: 100%;
    }
    .clearfix {
        display: block;
    }
    .fan_box {
        background-color: #F5F5F5;
        margin: 15px 0;
        padding: 4px;
        position: relative;
    }
    .fan_box .full_widget {
        background-color: #FFFFFF;
        border: 1px solid #E5E5E5;
    }
    .fan_box .full_widget .connect_top {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4fI3fK1iI5t-jAKCSBKrvDbPeNxNhd5ls7O34vl1mbxdAo0v_QA53lorJDYUKbEzO-8Xry_qk8xLz-Kunf2K2jmK6xzUYQ-IBV9LkFOpu8M_QPO9HOFdd15D5RZprF0PgJTEbFXm3ApE/s1600/sidebar_bg.png") repeat-x scroll left bottom transparent;
        padding: 8px;
    }
    .fan_box .full_widget .connections {
        background-color: #FFFFFF;
        border-bottom: 1px solid #E5E5E5;
        padding: 5px 1px 1px;
    }
    .fan_box .full_widget .connections_grid {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4fI3fK1iI5t-jAKCSBKrvDbPeNxNhd5ls7O34vl1mbxdAo0v_QA53lorJDYUKbEzO-8Xry_qk8xLz-Kunf2K2jmK6xzUYQ-IBV9LkFOpu8M_QPO9HOFdd15D5RZprF0PgJTEbFXm3ApE/s1600/sidebar_bg.png") repeat-x scroll left bottom transparent;
        padding: 6px;
    }
    .fan_box .full_widget .connections .total {
        margin: 4px 0 4px 8px;
    }
    .fan_box .profileimage {
        background-color: #FFFFFF;
        border: 1px solid #E5E5E5;
        display: inline;
        margin-right: 10px;
        padding: 5px;
    }
    .fan_box .full_widget .connections_grid a img {
        border: 1px solid #FFFFFF;
    }
    .fan_box .full_widget .connections_grid a img:hover {
        border: 1px solid #000000;
    }
    .social_links, .email_rss {
        padding: 5px 0 10px;
        width: 100%;
    }
    .social_links a {
        background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiez6v0JddRN4vR_kFkVKNxgs40uKbKDnqzAhocJ2g_FYWuYN4zdgqqFUyzjO4yDDl7u3BjFvFPhSqS9JNE8VvFUoB5p1T5HbYLAEveq96Q4Di0YEI02DPbU2MG8iVMGP9Ce9vEhKArINo/s1600/social.png");
        background-repeat: no-repeat;
        color: #999999;
        display: inline;
        float: left;
        font-size: 11px;
        margin-bottom: 0;
        padding-top: 45px;
        text-align: center;
        text-decoration: none;
        width: 67px;
    }
    .social_links a:hover {
        color: #000000;
        text-decoration: underline;
    }
    a#side_fb {
        background-position: -173px 0;
    }
    a#side_tw {
        background-position: -81px 0;
    }
    a#side_rss {
        background-position: 8px 0;
    }
    a#side_email {
        background-position: -267px 0;
    }
    #geek {
        background: url("4.bp.blogspot.com/-JJL5i3WAtEA/UDip4G3DxhI/AAAAAAAAF7A/fa1vmnxMt38/s1600/social.png") no-repeat scroll -387px -363px transparent;
        bottom: -1px;
        display: block;
        height: 117px;
        position: absolute;
        right: -22px;
        text-indent: -9999em;
        width: 94px;
    }
    .email_rss {
        border-bottom: 1px solid #E5E5E5;
        margin-bottom: 5px;
        position: relative;
    }
    .email_rss span {
        font-size: 11px;
    }
    #subscribe-form {
        margin-top: 5px;
    }
    #subscribe-form #newsletter {
        border: 1px solid #CCCCCC;
        padding: 5px;
        width: 150px;
    }
    #subscribe-form #newsletter:focus {
        background-color: #F5F2D3;
        border: 1px solid #000000;
    }
    #subscribe-form .btn {
        background-color: #7EB4CF;
        border: 1px solid #2F6A89;
        box-shadow: 3px 3px 0 #6DA5C1 inset, -3px -3px 0 #6DA5C1 inset;
        color: #FFFFFF;
        cursor: pointer;
        display: inline;
        float: right;
        font-size: 12px;
        font-weight: 900;
        line-height: 12px;
        padding: 5px 8px;
        position: relative;
        text-shadow: 0 1px 0 #000000;
        z-index: 999;
    }
    #subscribe-form .btn:hover {
        background-color: #4E9CC4;
    }
    #subscribe-form span {
        background-color: #F5F5F5;
        display: inline;
        float: left;
        margin-right: 10px;
        padding: 3px;
    }

    h3 {
    font-family: MgOpenModata;
    
        font-weight: 400;
    }
    #sidebar .widget .head p {
        color: #999999;
        font-size: 11px;
        line-height: 15px;
        padding: 0;
    }
    </style>

Créditos: Blogging How

Publicado por Administrador14:57

0

Continuar Lendo

Colocar anúncios do Adsense dentro das postagens no Blogger

O Google Adsense é o sistema de monetização de blogs mais usado em todo o mundo, iniciantes ou não. Isso se deve principalmente pela facilidade em que é possível se inscrever no mesmo, e isso faz com que ele seja muito usado por blogueiros novatos. Porém ganhar dinheiro com o sistema não se trata de uma tarefa tão fácil, inclusive muitas pessoas dependendo do tráfego recebido, acabam por esperar por alguns meses para enfim receber seu primeiro salário.

Uma das estratégias que uso e recomendo é inserir anúncios em espaços estratégicos, ou seja, que esteja bem visível ao leitor, e que não prejudique a leitura.

INSERINDO ANÚNCIOS DENTRO DAS POSTAGENS NO BLOGGER

Foto: Divulgação/Como Blogar 

Antes de tudo, é altamente recomendável que você faça um rápido backup do seu template, dessa forma, caso ocorra algum erro, você poderá voltar seu template da mesma maneira em que estava antes do tutorial.

1° passo: Acesse o painel do Google Adsense e gere o código do seu anúncio como você já está acostumado a fazer. O mais recomendável é que o tamanho do anúncio seja 300 x 250, mas você pode colocar o tamanho que desejar.

2° passo: Após gerar o código do anúncio, é necessário que você o converta para que ele funcione em seu blog. Para fazer isso, clique aqui, cole o código gerado no formulário e clique em “Convert”. Automaticamente será gerado um novo código, copie e cole no bloco de notas pois precisaremos dele no 4° passo.

3° passo: Agora acesse o painel do blogger, escolha o blog que você deseja instalar, selecione a opção modelo, clique em “Editar HTML”.

4° passo: Agora usando o Ctrl + F, procure pela tag <data:post.body/>, e insira o seguinte código acima dela:

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

<div style='float:right;padding:2px'>

CÓDIGO DO ANUNCIO CONVERTIDO

</div></b:if>

5° passo: Substitua o texto em vermelho pelo código que você colocou no bloco de notas.

Automaticamente o anúncio ficará do lado direito do artigo, se você quiser colocar do lado esquerdo basta substituir o trecho float:right, por float:left.

Obs.: Os anúncios aparecem apenas nas páginas dos artigos, e não na página inicial.

Espero que vocês tenham gostado, e até o próximo tutorial. 

Referências: Como Blogar | Dicas Blogger | Gerenciando Blog

Publicado por Administrador13:51

5

Continuar Lendo