¿A quienes puede resultarles muy útil crear una plantilla de entrada?
Esto resulta muy útil, para quienes siempre muestran ciertos elementos en todas las entradas, por ejemplo, en los blogs de cocina donde se mencionan los "ingredientes"; también en blogs de descargas donde por medio de una tabla (por ejemplo) agregan información relevante sobre cierto archivo, etc.
Cómo crear una plantilla de entrada.
Necesitamos crear nuestro diseño para las entradas, luego agregar el HTML en la opción "Plantillas de las entradas", para que éste aparezca en todas las entradas. También, agregar el CSS para poder definir el estilo o presentación de lo que será nuestra plantilla para las entradas.
Ejemplo: Lo que haremos
Para poder ilustrar ésto, usaremos un ejemplo: vamos a pensar que tenemos un blog de "recetas". Lo que haremos entonces es crear dos secciones a las que le daremos estilos. La primera será una sección en la que colocaremos:
- Tiempo de preparación
- Tiempo de cocción
- Porciones
La segunda sección es la que incluirá los ingredientes. Luego colocaremos un bloque de publicidad de AdSense, y éste quedará a un lado de la sección de los ingredientes. De este modo aprovechamos los espacios.
En la siguiente imagen, se puede apreciar cómo deberá lucir nuestra entrada, una vez que hayamos utilizado nuestra plantilla de entradas:
O bien, puedes ver la Demostración
Pasos para crear la plantilla de entrada del ejemplo.
- Vas a la pestaña: "Configuración", luego a Entradas y comentarios, y después a la opción "Plantillas de las entradas", haces click en añadir, y agregas el código HTML:
<ul class="seccion3"><li>Tiempo de preparación:</li> <li>Tiempo de cocción:</li> <li>Porciones:</li> </ul>
<div class="ingredientes">Ingredientes:</div>
Deberá verse así:
- Guarda los cambios.
Hecho lo anterior, ese código HTML que agregaste aparecerá en el editor de entradas, y lo veremos si accedemos al HTML de la entrada. - Ahora lo que falta, es agregar el CSS para darle una apariencia a las secciones predeterminadas. Entonces,
vas a la pestaña "Plantilla" luego a Personalizar > Avanzado > Añadir CSS, y agregas el CSS. Después, guarda los cambios en "Aplicar al blog".
.post-body ul.seccion3{
width:550px; /*ancho sección horizontal*/
height:20px;
background: #f0f9ff;/*color de fondo primera seccion*/
display:block;
padding:4px 0 4px 10px;
border-bottom:1px solid #e2f2fc; /*color de borde*/
margin:4px 2px 20px;
position:absolute;top:0;left:0;
}
.post-body ul.seccion3 li{
float:left;
list-style:none;
margin-right:30px; /*separación */
}
.post-body .ingredientes{
background: #f0f9ff; /*color de fondo sección ingredientes*/display:block;
width:265px;
margin:4px 2px 100px; /*100px margen abajo*/
padding:8px 5px 12px;
float:none; /*float:left si usas imagen a un lado*/position:relative;
top:0;left:0;
overflow:hidden;
}
.ingredientes:before{
content:""; position:absolute;right:0;top:0; border-width:0 16px 16px 0;border-style:solid;border-color:#FFF #FFF #d6ebfa #d6ebfa;width:0;display:block}
.ingredientes:after{
content:""; position:absolute;left:0;bottom:0; border-width:16px 0 0 16px;border-style:solid;border-color:#d6ebfa #d6ebfa #FFF #FFF;width:0;display:block}
.ingredientes ul li{
list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHGaf4ISweKV56Lu1cczjpGI6nPZfmD61Y8ScJOBoT2zlTk5sHQPPHXSorxqY31A9cP-n7qIGz6l-nakhUGbBsneugw-GDHx91y9SdKGHN8C-Qr4WWiVZdkFm9lApAoeDoVoS-UH0r9r0/s1600/check1.png)}
Explicación del CSS:
.post-body ul.seccion3 Es la sección horizontal donde dice: Tiempo de preparación, tiempo de cocción, porciones puse los comentarios entre /*...*/ para que sepas que editar.
Donde dice: .post-body .ingredientes ahí definimos la apariencia de la sección de los ingredientes, puse los comentarios y lo valores de rojo que pudieras editar (aunque todo se puede editar)
En .ingredientes:before simulamos la esquina doblada. En border-color:#FFF #FFF #d6ebfa #d6ebfa; puedes edita los valores de rojo, lo mismo para: .ingredientes:after es la esquina doblada de abajo, los valores de rojo son los que forman el triangulito azul que de preferencia deberá ser de un tono más obscuro que el bloque completo. El resto de los valores está de color blanco #FFF, y quedará bien si el color de fondo de la página es blanco, sino habrá que editarlos.
Agregar Bloque de AdSense en la entradas
1. Ingresa a tu cuenta de AdSense y crear un bloque de anuncios, yendo a la pestaña de "mis anuncios". Debes tomar en cuenta el ancho del bloque para que quede bien en el post, y alto para que lo desplace lo suficientemente hacia abajo (el resto del contenido). Yo usé un bloque de 250 x 250 pixeles. Recuerda que el ancho del bloque + el ancho de la sección de "Ingredientes" + el margen (en nuestro ejemplo) no deben superar el ancho del post.
Nota: Asegúrate de usar un formato de texto distinto para el texto si es que vas a usar un bloque de texto/imagen.
2. Copia el código que te genera.
3. Convierte el código generado de tu bloque de publicidad, usando esta herramienta. El código tiene que verse algo parecido a esto:
<script type="text/javascript"><!--
google_ad_client = "ca-pub-22789064524467778";
/* Cuadro 250 x 250 */
google_ad_slot = "3076554850";
google_ad_width = 250;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
Una vez teniendo el código del bloque de AdSense listo, tenemos que agregarlo desde el editor de HTML de la plantilla. 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.
4. Ve a la pestaña "Plantilla", luego a "Editar HTML" y haz click en el botón que dice "Plantilla de formato" luego, presiona las teclas Ctrl + F, y busca el siguiente código, poniendo en el campo lo que resalté de azul, para que lo encuentres rápido:
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'> <data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats --> </div>
5. Antes de <data:post.body/> pones el código con AdSense (ya convertido), como se indica a continuación:
<div style='float:right; margin: 0 0 0 15px;position:relative;top:45px;right:0;'>
Aquí el contenido del bloque de AdSense.Quitar esto.
<div style='height:60px'/>
</div>
6. Verifica en vista previa y si todo luce bien, guarda los cambios.
Hasta aquí, ya tenemos creada la plantilla de entrada, y agregado el bloque de publicidad de Adsense.
Notas Importantes sobre el bloque de publicidad de AdSense:
- Es posible agregar de este modo la publicidad sin infringir las políticas de uso. Lo menciono por el hecho de que quede a un lado del contenido de la entrada. Para más información, ver las prácticas recomendadas para la ubicación de anuncios de AdSense.
- No utilices un formato de texto igual al que usas en las entradas, los colores pueden combinar pero no se debe confundir con el texto del post, pensando en que usas bloque de texto.
- Recuerda que no se trata de engañar al usuario, sino de aprovechar bien los espacios.
- 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.
Ahora veremos cómo usar la plantilla desde la entrada.
Cómo usar la plantilla desde la entrada
Como ya tenemos creada la plantilla y puesto el bloque de anuncios de Adsense, ahora empezaremos a usar la plantilla en la entrada. Podemos comprobar que aparezca el código de la plantilla de entrada que creamos, si vamos al panel de edición de entradas, e ingresamos al HTML de la entrada, ahí verás el HTML que pusiste:
Regresamos a Redactar, y entonces nos ubicamos inmediatamente después de los dos puntos respectivamente ":", y escribimos lo que corresponda, por ejemplo la primera sección, se ve así en mi ejemplo de la demostración:
En la parte de ingredientes, sólo te ubicas inmediatamente después de Ingredientes: y empiezas a poner los ingredientes. Para ello, usa la herramienta de "Lista con viñetas", de ese modo se verá la imagen que pusimos para cada ingrediente (la marquita de verificación o "palomita" como le llaman algunos).
Te recomiendo que una vez terminado ésto, hagas dos veces enter, cuando hayas colocado todos los datos, para evitar que vayas a quedar dentro de la sección de los ingredientes, o bien, vayas al HTML de la entrada, y te ubiques debajo del último div de cierre </div> , luego teclea cualquier letra y regresas a Redactar.
Ahora, cada vez que crees una nueva entrada, harás lo mismo, de ese modo tus entradas tendrán la misma presentación ;)
Es un proceso un poco largo pero creo que el resultado vale la pena, puede aumentar los CRT en los anuncios, como comentaba Miguel empleado de Googel desde el foro. y además con el uso de la plantilla, el contenido puede lucir más profesional ;)
Nota: Se puede poner el bloque a la izquierda y en el código del paso 5 usarías "float:left" y cambiarías el margen por esto "margin: 0 15px 0 0".
No dudes en decirme cualquier observación que tengas o duda al respecto ;)
+ Referencias:
Info. sobre plantilla de entrada. Blogger
No hay comentarios:
Publicar un comentario