Aunque esta barra puede tener algunos atajos para manejar nuestro blog, su valor es poco o nulo para el lector, ocupa espacio extra y es poco estética. Eliminarla es sumamente sencillo, solo hay dirigirse a Diseño/Edición HTML y buscar el siguiente código:
dijo:]]></b:skin>
Y justo antes pegar lo siguiente:
dijo:#navbar-iframe { height:0px; display:none; visibility:hidden; }
2. Mostrar los últimos comentarios y los últimos artículos en la sidebar.
Este “truco” se basa en usar la dirección sindicación de comentarios y los artículos que todos los blogs de Blogger tienen. Estas direcciones son:
Para comentarios: http://tublog.blogspot.com/feeds/comments/default
Para artículos: http://tublog.blogspot.com/posts/comments/default
Donde tublog.blogspot.com es la dirección de tu blog.
Ahora solo hay que ir a Diseño/Elementos de página y dar clic en Añadir un gadget, en la ventana que se abre se selecciona un gadget de Feed y se escribe la dirección de comentarios para mostrar los últimos comentarios, se repite el proceso para crear un nuevo gadget de feed pero esta vez usando la dirección de los artículos.
3. Agregar una barra lateral o sidebar adicional a la plantilla.
Agregar una nueva sidebar a una plantilla Blogger es una de las preguntas más comunes entre lo usuarios de la plataforma para blogs de Google. Agregar una segunda sidebar varia en complejidad de acuerdo al diseño que se trate, así, mientras algunas solo requieran cambiar unas lineas de css, otras necesitarán de una remodelación total que tal vez hagan más conveniente cambiar de diseño.
A grandes rasgos el proceso es el siguiente:
1. Analizar la estructura y estilos de la plantilla.
2. Agregar un nueva zona editable, es decir, la nueva zona para agregar los gadgets.
3. Modificar estilos.
Para seguir sin problema este y cualquier tutorial que implica hacer cambios en la estructura de un blog o sitio web es muy recomendable saber algo de html y css. Entonces:
Analizar la estructura y estilos de la plantilla
La mayoría de las plantillas, y especialmente las de Blogger, tienen una estructura muy similar, un header (cabecera) con título y descripción, un contenedor con la columna principal y una sidebar (barra lateral) y un footer (píe de página) con créditos y otra información.
Para este caso, es de interés el contenedor, donde se encuentra el contenido y la sidebar, desde el código de Blogger(Diseño / Edición HTML) este se ve como:
dijo:<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/> </b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<!-- Código de los gadgets o widgets del sidebar -->
</b:section>
</div>
</div>
Varia un poco de plantilla en plantilla, pero generalmente es muy similar a lo anterior. Tanto main-wrapper (columna principal) como sidebar-wrapper (contenedor del sidebar) están definidos por estilos css que determinan su ancho, fondo y otras características. Así que lo primero será averiguar estas características buscando algo como:
dijo:#main-wrapper {
float:left;
width:620px;
/*.... otros atributos ... */
}
#sidebar-wrapper {
float:right;
width:300px;
/*.... otros atributos ... */
}
Nota: Seguramente no los encontraran juntos ni exactamente igual y en algunas ocasiones, más de una vez.
Aquí es importante ver los anchos (width) de cada elemento, pues para agregar una nueva barra hay que cambiar la distribución. Al sumar los anchos del código de ejemplo se tiene un total de 920px, el cual será el espacio disponible para el contenedor principal y las sidebars.
Agregar un nueva zona editable.
Agregar una nueva zona editable en blogger es muy sencillo, estas están definidas por elementos “section” que al incluirlos en el código ya pueden contener gadgets (elementos de página). El código de una nueva zona editable es algo como:
dijo:<b:section class='sidebar' id='sidebar2' preferred='yes'></b:section>
Y para agregar una nueva zona editable, solo hay que agregar este código justo después de la zona editable existente:
dijo:<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<!-- Zona editable existente -->
<b:section class='sidebar' id='sidebar' preferred='yes'>
<!-- Código de los gadgets o widgets del sidebar -->
</b:section>
<!-- Nueva zona editable -->
<b:section class='sidebar' id='sidebar2' preferred='yes'></b:section>
</div>
</div>
Hay que tener cuidado que el ID de la nueva zona, no exista en otro elemento “section”, es por eso que en el ejemplo aparece como “sidebar2″. La clase puede repetirse y en el caso de los sidebars hasta es conveniente que lo haga. Como es una zona nueva, no necesita tener código de gadgets, estos se integraran automáticamente cuando agreguemos un nuevo gadgets desde “Elementos de página”.
Con esto ya hay una zona editable pero como no la plantilla no esta preparada seguramente se deformaría, así que falta hacer algunos cambios.
Modificar estilos.
Ya sabemos el ancho total disponible y tenemos la zona editable, así que hay que cambiar determinar el ancho de cada elemento. Siguiendo el ejemplo; main-wrapper se reduce a 540px y sidebar-wrapper el ahora contenedor de ambas sidebars se aumenta a 380px. Quedando los estilos como sigue:
dijo:#main-wrapper {
float:left;
width:540px;
/*.... otros atributos ... */
}
#sidebar-wrapper {
float:right;
width:380px;
/*.... otros atributos ... */
}
De esto modo el espacio disponible para ambas sidebars es de 380px. Lo más comun es ambas tengan el mismo ancho, es decir que ocupen el 50% cada una. A partir de lo IDs de cada zona editable definimos el ancho de cada una y su ubicación (derecha – izquierda) dentro del contenedor sidebar-wrapper, agregando los estilos:
dijo:#sidebar {
width:50%;
float:left;
/*.... otros atributos que consideres necesarios: padding, margin, etc ... */
}
#sidebar2 {
width:50%;
float:right;
/*.... otros atributos que consideres necesarios: padding, margin, etc ... */
}
Con esto ya se tiene 2 sidebars de un ancho de 190px cada una, capaces de soportar gadgets.
4. “Leer más” o “Continuar leyendo” en los artículos de Blogger.
Para hacer la navegación más ligera a nuestros lectores muchas veces conviene mostrar solo un resumen de los artículos. Como Blogger no tiene esta característica por defecto, habrá que usar CSS o Javascript para conseguir este propósito.
Ventaja: “Leer más” se añade sólo en las entradas que elegimos.
Paso a paso:
a) Expandir los artilugios y añadir justo antes de </head>:
<script type='text/javascript'
src='http://girlyblogger.site90.net/hackosphere.js' />
b) Buscar la siguiente línea antes de post-header-line-1:
dijo:<div class='post hentry uncustomized-post-template'>
Y reemplazarla por:
dijo:
<div class='post' expr:id='"post-" + data:post.id'>
c) Justo debajo de <div class=’post-header-line-1′/>, ubicar estas dos líneas:
<div class=’post-body entry-content’>
<data:post.body/>
Reemplazarlas por:
<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p>
<a expr:onclick='"javascript:showFull("post-" +
data:post.id + "";"'
href='javascript:void(0);'>
Leer más...
</a>
</p>
</span>
<span id='hidelink' style='display:none'>
<p>
<a expr:onclick='"javascript:hideFull("post-" +
data:post.id + ""
href='javascript:void(0);'>
</a>
</p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>"
</script>
</b:if>
) Guardar los cambios.
e) Para postear una entrada, hacerlo del siguiente modo:
dijo:
TEXTO A MOSTRAR
<span id="fullpost">
TEXTO A OCULTAR
</span>
y listo.
5. Mostrar los artículos más populares o más comentados.
Seguramente debido a las pruebas de Blogger para incluir el "Suscribe" en el formulario de comentarios, el widget de entradas más populares en español, ha dejado de funcionar correctamente.
He corregido la Pipes de Yahoo, y ya podéis disponer de nuevo del widget funcionando sin problemas.
Solo tenéis que copiar el código en un elemento HTML (Gadget) y sustituir donde dice "elescaparatederosa" por el nombre de vuestro blog (tal como aparece en la url del navegador).
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items.link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items.title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback& _id=e1f5a9b2248904d8b81f794c09353010&url=http%3A%2F%2Felescaparatederosa.blogspot.com&num=5" type="text/javascript"></script>
El número de entradas a mostrar en el widget, podéis controlarlo en &num=5 cambiando el 5 por el número de entradas que queréis mostrar en el widget.
6. Paginación o páginas numeradas en Blogger.
Blogger solo muestra un enlace a la página siguiente y anterior, con la página es posible mostrar un cantidad más grande de páginas para navegar indicadas con números. Nuevamente el funcionamiento se basa en un script que es necesario instalar en el blog para que funcione.
Paginar es separar las entradas del blog en grupos de cierta cantidad de entradas y permitir navegar entre ellas.
En Blogger, la única posibilidad que tenemos es Avanzar (Newer Post) o Retroceder (Older Post); en otros servicios, también existe la posibilidad de crear esa paginación de tal manera que no sólo podemos avanzar o retroceder sino "dividir" nuestro blog de tal manera de poder "saltearnos" cosas y navegar más rápido:
En Blogger Accesories han creado un script que nos permite hacer esto con algunas limitaciones pero, funciona bien y, como parte del truco se basa en propiedades CSS, nos da la posibilidad de personalizarlo de muchas maneras.
Para empezar, vamos a la plantilla y sin expandir lo artilugios, buscamos lo siguiente:
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
Justo debajo, agregamos el script que pueden descargar de este archivo de texto o copiarlo del blog original. Este es su contenido:
<script type='text/javascript'>
//<![CDATA[
// http://rias-techno-wizard.blogspot.com
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/"
var isPage = thisUrl.indexOf("/search?updated"
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/"
thisLable = thisLable.indexOf("?"
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Anterior';
var downPageWord ='Siguiente';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage) {
if(title!='') {
if(post.category) {
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable) {
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))) {
if(thisUrl.indexOf(timestamp)!=-1 ) {
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
} //end if(post.category){
itemCount++;
}
} else {
if(title!='') {
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))) {
if(thisUrl.indexOf(timestamp)!=-1 ) {
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++) {
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)) {
if(fFlag ==0 && p == thisNum-2) {
if(thisNum==2) {
if(isLablePage) {
upPageHtml = labelHtml + upPageWord +'</a></span>';
} else {
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
} else {
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)) {
html += '<span class="showpagePoint">'+thisNum+'</span>';
} else {
if(p==0) {
if(isLablePage) {
html = labelHtml+'1</a></span>';
} else {
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
} else {
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum) {
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1) {
if(!isLablePage) {
html = '<span class="showpage"></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea">'+html;
// html = '<div class="showpageArea"><span class="showpage"> Total '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)) {
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage) {
var pageArea = document.getElementsByName("pageArea"
var blogPager = document.getElementById("blog-pager"
if(postNum <= 2) {
html ='';
}
for(var p =0;p< pageArea.length;p++) {
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0) {
html ='';
}
if(blogPager) {
blogPager.innerHTML = html;
}
}
}
//]]>
</script>
<script src='/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999' type='text/javascript'/>
En el código, hay una serie de valores que podemos modificar:
La cantidad de posts que se mostrarán por página (por defecto una sola):
var pageCount = n;
La cantidad de páginas listadas (por defecto dos)
var displayPageNum=n;
Los textos a mostrar:
var upPageWord ='Back'; // página anterior
var downPageWord ='Next'; // página siguiente
Para que todo estuviera terminado sólo nos faltaría agregar el estilo. Eso lo ponemos entre etiquetas <style> o bien antes de </b:skin>.
Este son las propiedades originales definidas por Blogger Acccesories:
dijo:.showpageArea {
background: transparent url(http://i263.photobucket.com/albums/ii150/mohamedrias/ShowPagenavbar.jpg) no-repeat left top;
color:#003366;
font-size: 11px;
padding: 10px 15px 10px 30px;
text-align: left;
width: 470px;
}
.showpageArea a {
color: #0F0;
text-decoration: underline;
}
.showpageNum a {
border: 1px solid #FFF;
color:#0F0;
margin: 0 10px;
padding: 0 5px 0 8px;
text-decoration:none;
}
.showpageNum a:hover {
color: #FE8314;
background-color: #FFF;
border: 1px solid #0071A5;
}
.showpagePoint {
color: #FE8314;
margin: 0 8px 0 4px;
}
.showpage a {
color: #FFF;
padding: 0 2px 0 4px;
text-decoration: none;
}
.showpage a:hover {
color: #FE8314;
text-decoration: underline;
}
.showpageNum a:link,.showpage a:link {
color: #CC0000;
text-decoration: none;
}
Veamos que significa cada cosa así podemos personalizarlo:
.showpageArea {} es el rectángulo donde se va a mostrar la paginación y en el ejemplo, tiene una imagen de fondo. En mi caso, sólo definí un borde, eliminé el ancho y centré el contenido.
.showpageArea a {} son los enlaces en general (los números de las páginas y los textos Anterior y Siguiente). Podemos usar cualquier propiedad; yo, elegí ponerles una imagen y un borde.
.showpageArea a:hover {} no está en el ejemplo pero, como en mi caso, todos los rectangulitos será iguales se lo agrego para cambiar el efecto gráfico cuando colocamos el ratón encima de un enlace.
.showpageNum a {} y .showpageNum a:hover {} son los enlaces con los números de las páginas si es que queremos que se vean diferentes.
.showpage a {} y .showpage a:hover {} son los enlaces con los textos si es que queremos que se vean diferentes.
.showpagePoint {} es el texto que muestra el número de la página actual
Otra posibilidad si no se quiere poner el código a la plantilla, es agregar un elemento HTML y ubicarlo justo debajo del elemento Entradas del Blog. En ese caso, es allí donde colocamos el estilo y debajo, el script.
Es importante saber que la paginación no funciona en las páginas individuales (esto es lo normal incluso en otros sistemas) pero tampoco funciona si navegamos por etiquetas utilizando hacks y, esto último es una limitacion. De cualquier modo, me parece una solución interesante y pese a que los códigos son largos, es bastante simple de implementar y allá en el fondo, pueden verlo funcionando.
7. Agregar un favicon en Blogger.
Para agregar ese pequeño icono visible en favoritos, pestañas y barra de direcciones, solo hay que crear un icono y vincularlo desde la plantilla. Para esto desde Diseño/Edición HTML se busca el siguiente código:
dijo:<title><data:blog.pageTitle/></title>
Y justo antes se coloca lo siguiente:
dijo:
<link href="http://sitio.com/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
<link href="http://sitio.com/favicon.ico" rel="icon" type="image/x-icon"/>
Para obtener la URL de tu favicon puedes alojarlo en un servicio gratuito como fileden.
8. Utilizar un dominio propio en Blogger.
Tener un dominio propio es como tener una marca y una identidad mejor definida y desde hace un tiempo Blogger te da la posibilidad de usar el tuyo en tu blog. A continuación te mostramos como hacerlo:
1. Tu dominio
Lo primero es disponer de un dominio propio (ej tublog.com), si no cuentas con uno, existen muchos sitios para comprarlos, como mydomain o godaddy, este último es el más popular y económico en particular, lo recomiendo. En estos momentos los precios no rebasan los 9 dolares y todos te proveen de un panel para manejarlo. Sí quieres ahorrarte algunos pasos, puedes comprarlo en Blogger por un precio un poco mayor (10 dolares) y pasar al paso 3.
2. Configuración en tu dominio.
Lo siguiente es direccionar los DNS (Domain Name System) de tu dominio con un registro CNAME, esto varia de acuerdo a la entidad registrante pero afortunadamente Google provee una guía en español para los servicios más comunes. De forma general el proceso es el siguiente:
1: Entra al panel de tu dominio y busca la administración de DNS.
2: Si existen registros CNAME, elimínalos. Después de eliminarlo o si no existe ninguno, crea uno nuevo, en el campo de nombre (name) coloca sin comillas “www” y en el nombre del hospedaje (host name) coloca sin comillas: “ghs.google.com” y guarda el registro.
Sí tienes problema con esto tienes todo el derecho a pedir que te auxilie tu empresa registradora.
3: Configuración en Blogger.
1- Entra Blogger y dirígete a la pestaña “Configuración” y ahí a la opción “Publicación”.
2- Entra en el enlace de “Dominio personalizado”
3: Sí no has comprado aun tu dominio, aquí lo puedes hacer pero a un precio un poco más alto, si ya dispones de él da clic en “Cambiar a opciones avanzadas”
4: Introduce el nombre de tu dominio, por ej. www.tublog.com y guarda
4. Ahora solo resta esperar para que el registrante actualice sus registros y la redirección se complete
Hay que ser pacientes en la actualización de los registros, algunos servicios pueden durar unos minutos y otros un par de días. Algo muy bueno es que Blogger se encarga de redireccionar tu dominio genérico (tublog.blogspot.com) al nuevo.
9. Formulario de comentarios en la misma entrada.
para esto hay dos formas fasil y difisel yo recomiendo la difisil pero la que les guste funsiona
1: La fasil
En este en realidad a dejado de ser un truco, pues ya forma porte de las características comunes de Blogger, aun así hay que activarlo desde Configuración/Comentarios , ahí en la opción de “Ubicación del formulario de comentarios” se selecciona “Entrada incrustada a continuación”.
2: La difisil
Hace unos días que Blogger la opción de agregar el formulario de comentarios en la misma página, una gran noticia pero que no se aplica de forma automática en los blogs que usan plantillas modificadas previamente. Para estos casos hay que introducir modificar un código manualmente. El proceso es el siguiente:
1. Entrar a Blogger in Draft (No blogger normal).
2. Ir a la pestaña “Opciones” y posteriormente a la opción “Comentarios”.
3. Ahí encontraran una nueva sección “Ubicación del formulario de comentarios” con las opciones:
blogger-formulario-comentar
Donde se selecciona la marcada en la imagen.
4. Guarda los cambios. Ahora dirígete a la pestaña “Diseño” y posteriormente a la opción “Edición de HTML”. Ahí marca la opción “Expandir plantillas de artilugios”.
5. Ahora busca el siguiente código:
dijo:<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
Nota: Si encuentras dos códigos iguales a este, el indicado será el que se encuentre dentro de: <b:includable id='comments' var='post'> , es decir, que este código estará unas lineas arriba del buscado. Si encuentras solo una vez el código, continua normalmente.
Y remplázalo con el siguiente:
dijo:
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
6. Guarda los cambios en la plantilla y tendrás a disposición tu nuevo formulario de comentarios.
Nota: La variación en el diseño de las plantillas puede causar algunas pequeñas diferencias el proceso.
10. Poner publicidad de Adsense en Blogger.
Con el cambio de lenguaje en las plantillas de Blogger, de html a xml, agregar publicidad directamente en el código se volvió un poco menos intuitivo, además que cualquier error en la sintaxis puede ocasionar que no puedas guardar los cambios en la plantilla.
Para ayudarte en esta tarea hemos hecho una lista con 10 de los lugares en tu blog más comunes para poner publicidad, así como la forma de implementarlos y los formatos más adecuados en base a los disponibles en adsense. (Clic en leer más)
PUBLICIDAD
Sidebar
Implementación. Este es uno de los lugares más sencillos para colocar adsense. Basta con ir al panel de elementos (plantilla/elementos de página) y agregar un widget html con el código del anuncio o bien directamente un widget de publicidad adsense.
Formatos recomendados: 125×125, 120×600 y 160×600
Entre posts
Implementación. Puedes ver como implementarlo en nuestro artículo sobre esta opción de blogger.
Formatos recomendados: 468×60, 300×250 y 336×280
Bajo el header
Implementación:
* Transforma el código del anuncio a su equivalente en caracteres html. Puedes usar algún convertidor en linea.
* Busca <div id=’header-wrapper’>
* Pega el código convertido justo después.
Formatos recomendados: 728×90 y 728×15
Sobre la columna de entradas
Implementación:
* Transforma el código del anuncio a su equivalente en caracteres html.
* Busca <div id=’main-wrapper’>
* Pega el código convertido justo después.
Formatos recomendados: 460×68, 468×15 y 336×280
Bajo el título de la entrada (visible en todas las páginas)
Implementación:
* Transforma el código del anuncio a su equivalente en caracteres html.
* Expande plantilla de artilugios y busca <div class=’post-header-line-1′/> (sino lo encuentras búscalo sin /)
* Pega el código convertido justo después.
Formatos recomendados: 468×68 y 468×15
Bajo el título de la entrada (solo visibles en páginas de las entradas)
Implementación:
* Transforma el código del anuncio a su equivalente en caracteres html.
* Expande plantilla de artilugios y busca <div class=’post-header-line-1′/> (sino lo encuentras búscalo sin /)
* Pega el código convertido siguiendo este esquema:
dijo:
<b:if cond='data:blog.pageType == "item"'>
<!-- Aquí el código del anuncio -->
</b:if>
Formatos recomendados: 468x68 y 468x15
Al pie de la entrada
Implementación:
* Transforma el código del anuncio a su equivalente en caracteres html.
* Expande plantilla de artilugios y busca <p class='post-footer-line post-footer-line-3'/> (sino lo encuentras búscalo sin /)
* Pega el código convertido justo después.
Formatos recomendados: 468x68 y 468x15
En el cuerpo de la entrada (visible en todas las páginas)
Implementación:
* Transforma el código del anuncio a su equivalente en caracteres html.
* Expande plantilla de artilugios y busca <div class='post-body entry-content'> (sino lo encuentra busca <div class='post-body'> únicamente)
* Justo abajo pega el código transformado siguiendo este esquema:
dijo:<div style='float:right'>
<!-- Aquí el código del anuncio -->
</div>
Formatos recomendados: 125x125, 180x150, 120x240 y 200x200
En el cuerpo de la entrada (solo visibles en páginas de las entradas)
* Transforma el código del anuncio a su equivalente en caracteres html.
* Expande plantilla de artilugios y busca <div class='post-body entry-content'> (sino lo encuentra busca <div class='post-body'> únicamente)
* Justo abajo pega el código transformado siguiendo este esquema:
dijo:<b:if cond='data:blog.pageType == "item"'>
<div style='float:right'>
<!-- Aquí el código del anuncio -->
</div>
</b:if>
Formatos recomendados: 125x125, 180x150, 120x240 y 200x200
Entre post y comentarios (solo visibles en páginas de las entradas)
Implementación:
* Transforma el código del anuncio a su equivalente en caracteres html.
* Expande plantilla de artilugios y busca:</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
* Justo arriba pega el código transformado siguiendo este esquema:
dijo:<b:if cond='data:blog.pageType == "item"'>
<!-- Aquí el código del anuncio -->
</b:if>
Formatos recomendados: 468x60, 300x250 y 336x280
Al pie del blog
Implementación:
* Transforma el código del anuncio a su equivalente en caracteres html. Puedes usar algún convertidor en linea.
* Busca <div id='footer-wrapper'>
* Pega el código convertido justo después.
Formatos recomendados: 728x90 y 728x15. Via
0 comentarios:
Publicar un comentario
¡Gracias por comentar!