La cajita para que sigan y recomienden tu contenido + el bloque de publicidad de AdSense se verá así:
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
Antes de comenzar con ésto, te recomiendo guardar una copia de respaldo de tu plantilla, y para ello, vas a la pestaña Plantilla, y haces click en el botón que dice: "Crear-Restablecer copia de seguridad" y descargas la plantilla completa.
Primero, vas a la pestaña "Plantilla" del panel de Blogger, luego a: Personalizar > Avanzado > Añadir CSS, y ahí agregas el siguiente CSS:
/* Caja Redes */
ul#caja-redes{
width:275px;
padding:0;
margin:0;
list-style:none;
background:#f7f7f7;
border:1px solid #dcdcdc;
overflow:hidden;
}
ul#caja-redes strong, li.c-rss{
color:#848484;
font-size:12px;
}
ul#caja-redes li{
overflow:hidden;
}
li.cg-plus{
height:108px;
padding-bottom:6px;
border-right:1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
margin:0 -1px 0 -5px;
}
li.c-fb{
border-bottom:1px solid #dcdcdc;
padding:8px 3px 2px;
margin:5px;
}
li.c-tw, li.c-mail{
margin:5px;
padding:6px 3px 0;
}
li.c-rss{
float:left;
margin:5px;
padding:0 4px 4px;
}
a.c-rss {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw2c14hk33exbYBIkrR8WTVo1xAD22YjRp7y7q3L-_9Mvd3Ue_yYuKifRDpqTdErns3eOJ-eaquKFJEKSSGyFz7InTzUsQWJ_hbjPXE39Wf7pjoL_TX0bFqkWrLK6-yIoK5xm7qYfLyO0/s1600/rss1.png) no-repeat 25% 40%;
display:inline;
padding:0 0 1px 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 + margenes deben ser igual o menor que el ancho que hay en la columna principal o main.
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.
<ul id="caja-redes"><li class="c-fb"><iframe src="//www.facebook.com/plugins/like.php?locale=es_ES&href=http%3A%2F%2Fwww.compartidisimo.com&send=false&layout=standard&width=260&show_faces=false&font&colorscheme=light&action=like&height=42" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:42px;" allowtransparency="true"></iframe> </li> <li 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> </li> <li class="cg-plus"><div class="g-plus" data-width="286" data-href="//plus.google.com/109627432877953314897" data-rel="publisher"></div> <!-- Inserta esta etiqueta después de la última etiqueta de insignia. --> <script type="text/javascript"> window.___gcfg = {lang: 'es'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </li> <li class="c-mail"> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=compartidisimo', 'popupwindow', 'scrollbars=yes,width=550,height=520');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> </li> <li 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></li> </ul>
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.
- 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.
- Luego ve a esta página y convierte el código del anuncio que creaste.
- 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 == "item"'>
<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> - 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
- 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.
- 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.
No hay comentarios:
Publicar un comentario