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 unbloque 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:
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:
- Tiempo de preparación:
- Tiempo de cocción:
- Porciones:
Ingredientes:
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/AVvXsEhIy9o0AIfrMObygOhFkQFmNckDbSrGhId4q2YJEWlRgaN7xlJfDkAfpxytMbLZ-Az4VhZfmY63E3KAfB8oTDAkOxHxT2bfLn653ZOZKLUOXQA_ybKNlGf6b0pGKhocFBi01sTdfVU6vCw/s1600/check1.png)}
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.
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>
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'>
6. Verifica en vista previa y si todo luce bien, guarda los cambios.
Aquí el contenido del bloque de AdSense.Quitar esto.
Hasta aquí, ya tenemos creada la plantilla de entrada, y agregado el bloque de publicidad de Adsense.
cómo usar la plantilla desde la entrada.
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:
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:
Comentarios