28 abril 2013

Recuerda descargar tu plantilla antes de empezar con el tutorial. Ésto lo haces en: Plantilla > Crear/Restablecer copia de seguridad > Descargar plantilla completa. De ése modo la puedes volver a instalar.

Widget para que te sigan y recomienden tu blog al final de las entradas + Bloque de publicidad de AdSense

En una entrada anterior, te decía como agregar un widget para que sigan y recomienden tu contenido. Hubo un par de preguntas que coincidieron, donde me decían que querían poner este elemento al final de las entradas.

Así que, hoy te diré cómo hacerlo y además, pensando en aprovechar bien todos los espacios, agregaremos un bloque de publicidad de AdSense a un lado, pensando en que ya usas este programa de publicidad en tu blog.

La cajita para que sigan y recomienden tu contenido + el bloque de publicidad de AdSense se verá así:

Bloque de publicidad y cajita para que recomienden el blog

Todo esto aparecerá al ingresar a las entradas y esta estará al final del post, arriba del mensaje de los comentarios.

Puedes ver la cajita en acción, y cómo quedaría el bloque de publicidad (uso una imagen como ejemplo, ya que en ese blog, no puedo tener publicidad), en la demostración:

Demostración

Muy bien, pues ya sabiendo de lo que se trata, ahora veamos cómo lograrlo. Este tutorial a considerado como ejemplo para todos los pasos, las plantillas del diseñador de plantillas de Blogger.

Pasos


  1. Primero, vas a la pestaña  "Plantilla" del panel de Blogger, luego a: Personalizar > AvanzadoAñadir CSS, y ahí agregas el siguiente CSS:

    #caja-redes{width:275px;padding:0;margin:0;list-style:none;background:#f7f7f7;border:1px solid #dcdcdc;overflow:hidden}
    #caja-redes strong,li.c-rss{color:#848484;font-size:12px}
    #caja-redes div{overflow:hidden}
    .cg-plus{height:99px;padding-bottom:6px;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;margin:0 -1px 0 -5px}
    .c-fb{border-bottom:1px solid #dcdcdc;padding:8px 3px 2px;margin:5px}
    .c-tw,.c-mail{margin:5px;padding:6px 3px 0}
    .c-rss{margin:5px;padding:12px 4px}
    a.c-rss{background:url(http://2.bp.blogspot.com/-c0cyucnLJqo/UQpGV9dhS1I/AAAAAAAAL5I/xORlp1k-A4M/s1600/rss1.png) no-repeat 25% 40%;display:inline;padding:0 0 0 26px;color:#848484}
    input[type="text"].campo,input[type="submit"].enviar{border:1px solid #dcdcdc;float:left;color:#848484;display:block;height:20px;font-size:11px}
    input[type="text"].campo{text-indent:3px;width:145px;margin-right:-3px}
    input[type="submit"].enviar{height:24px;cursor:pointer;text-shadow:0 1px 0 #fff;background:-webkit-linear-gradient(top,white,#d8d8d8);background:-moz-linear-gradient(top,white,#d8d8d8);background:-ms-linear-gradient(top,white,#d8d8d8);background:-o-linear-gradient(top,white,#d8d8d8)}
    #seccionf{width:560px; /*el ancho de los dos elementos + margen derecho de la cajita con botones*/height:330px;margin:0 0 14px 0; padding:0;}
    #misredes{margin: 0 18px 0 0;width:49%;float:left;}
    #publi{width:49%;float:right;}



    Deberás tomar en cuenta el ancho que tienes definido para los posts. La cajita + el bloque de publicidad.
  2. Luego, copia todo este código y ponlo en una nota de tu computadora, para que lo edites con tus datos. Debajo del código menciono cómo editarlo.
    <div id="caja-redes"><div class="c-fb"><iframe src="//www.facebook.com/plugins/like.php?locale=es_ES&amp;href=http%3A%2F%2Fwww.compartidisimo.com&amp;send=false&amp;layout=standard&amp;width=260&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=42" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:42px;" allowtransparency="true"></iframe> </div> <div class="c-tw"><a href="https://twitter.com/compartidisimo" class="twitter-follow-button" data-dnt="true"  data-lang="es">Seguir a @compartidisimo</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div> <div class="cg-plus"><div class="g-plus" data-width="286" data-href="//plus.google.com/109627432877953314897" data-rel="publisher"></div></div><div class="c-mail"> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=compartidisimo&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><strong>Compartidísimo directamente a tu e-mail</strong><p><input class='campo' name='email' placeholder='ingresa tu e-mail' type='text'/></p><input name='uri' type='hidden' value='compartidisimo'/><input name='loc' type='hidden' value='es_ES'/><input class='enviar' type='submit' value='Suscríbete'/></form></div><div class="c-rss">O suscríbete por otras vías:<a class="c-rss"  href="//feeds.feedburner.com/compartidisimo" title="Vía RSS" target="_blank">RSS</a></div>
    Edita los datos de arriba hacia abajo tomando en cuenta que en:
    • www.compartidisimo.com pones la URL de tu blog, omitiendo el http:// pondrías por ejemplo nombre_del_blog.blogspot.com, pensado que usas subdominio. 
    • compartidisimo ahí pones el nombre de usuario de Twittter.
    • Seguir a @compartidisimo  es el texto del botón de twitter.
    • 109627432877953314897 ahí pones el ID de tu página de Google+, o el del perfil. Para conseguir ese número tienes que ir a la página en Google+, y copiar la numeración que aparece en la barra de direcciones de tu navegador. Por ejemplo esta es la de mi página en Google+, y la numeración la he resaltado de rojo:

      https://plus.google.com/109627432877953314897/posts

    • compartidisimo ahí pones la URI de FeedBurner. Puedes obtenerla accediendo a la página de FeedBurner,y luego haces click en el icono de RSS que está a un lado del nombre de tu blog, luego se abrirá una ventana. El nombre de la URI es el texto que aparece después de la barrita diagonal "/" en la barra de direcciones. 
    • Compartidísimo directamente a tu e-mail ese es el texto que aparece antes del campo para que ingresen el e-mail para la suscripción del blog.
    • compartidisimo otra vez pones la URI de FeedBurner.
    • O suscríbete por otras vías: este es el texto que esta antes del icono de RSS.
    • compartidisimo ahí va de nuevo la URI de FeedBurner.
  3. Luego, ingresa a tu cuenta de AdSense y crea un bloque de anuncios yendo a la pestaña de "Mis anuncios". Recuerda tomar nota del ancho disponible de la sección del post. Este, debe ser mayor al del bloque + el ancho de la cajita con las redes sociales + el margen, Yo usé un bloque de 250 x 250 pixeles en mi prueba.
  4. Luego ve a esta página y convierte el código del anuncio que creaste.
  5. Una vez editado el código de la cajita, y el código del anuncio, vas o poner todo junto como se indica:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='seccionf'>
    <div id='misredes'>
    El código de la cajita del Paso 2
    </div>
    <div id='publi'>
    El código del bloque con publicidad
    </div>
    </div>
    </b:if>



  6. Teniendo todo el código listo, vas a la pestaña "Plantilla", luego ingresas al editor en "Editar HTML", haces click en "Plantilla de formato", y presionas las teclas Ctrl + F, y ahí en el campo de búsqueda (search:) pegas la siguiente linea de código:

    class='post-footer-line post-footer-line-3

    Editor HTML de Blogger
  7. Una vez localizada esa linea, te desplazas hacia abajo, y pega el código del paso 5  ya editado, antes de </b:includable> como puede apreciarse en la imagen arriba. De ese modo, la cajita quedará fuera de la sección llamada post-footer (donde normalmente están las etiquetas, botones para compartir, etc), aunque, dentro de los posts, al finas de los mismos. 
  8. Verifica en vista previa y si todo luce bien, guarda los cambios en "Guardar plantilla". Aunque no verás los elementos agregados, te asegurarás que todo luzca bien, por lo menos en la página principal.

¡Y listo!, habrás agregado la cajita para que te sigan y recomienden tu blog, y además un bloque de publicidad de AdSense ;)

Notas finales y + información sobre el programa de AdSense:

  • No agregues ningún texto arriba del bloque como "haga click", "Te recomendamos que visites:" es decir, nada que incite a hacer click sobre el bloque de publicidad.
  • En una página sólo se puede mostrar tres bloques de anuncios.
  • Para obtener mas información sobre la creación de bloques de anuncios dirígete a esta página de Google.
  • También, puedes consultar las directrices de calidad para webmasters de AdSense, para informarte sobre las prácticas recomendadas del programa.

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.