Mostrando entradas con la etiqueta Código PHP. Mostrar todas las entradas
Mostrando entradas con la etiqueta Código PHP. Mostrar todas las entradas

sábado, 23 de febrero de 2019

Código blogger para título (h1, h2, h3, etc.)

Aquí les dejamos el Código blogger para título (h1, h2, h3), en SEO blogger Cómo cambiar la etiqueta partida para un mejor SEO en Blogger
En el posionamiento de un blog son muchas las pautas que debemos tomar en cuenta para los buscadores y en este tutorial seo blogger voy a explicar la importancia de las etiquetas y como se debe de utilizar adecuademente estas etiquetas, tienen seis tamaños (h1,h2,h3,h4,h5,h6).

Código blogger para título tamaño

Códigos blogger para cambiar los tamaños de títulos 

Etiqueta h1: Es la etiqueta más importante y terminado con la etiqueta h6 la menos importante pero que tiene que ver esto con optimizar los titulos de blogger porque los titulos de los post blogger se catalogan en la etiqueta h3 cuando deberían  estar en la etiqueta h2

Ejemplos Seo blogger optimizar etiquetas blogger
De esta manera esta blogger solo vamos a ver dos aspectos de nos interesa.

<h1>Titulo de tu blog <h1> Los buscadores lo considerán importante

<h3>Titulo de las entradas <h3> menos importancia para los buscadores

Lo que haremos en este tutorial es cambiar de etiqueta los titulos de las entradas pasandolas h2.

¿Porque h2; 

y no h1 que es la más importante?porque la etiqueta h1
corresponde al titulo del blog por ende no puede haber dos etiquetas h1

por tal razón vamos a pasar los titulos de las entradas a la etiqueta h2

Ejemplo: optimizar etiquetas con H1, H2 en blogger para que me entiendan bien vamos a ilustrar con algunos ejemplos, un blog es como un libro solo puede haber un titulo y el otro será subtitulo.


titulo del blog

titulo del tema

titulo de la entrada

subtitulo del tema
Aquí se va desarrollar  el contenido del blog o libro 


Bueno creo que ya quedo claro ahora vamos a modificar las etiquetas en la planilla sigue los pasos como se indica

1.Ingresar a Blogger> Diseño> Edición de HTML

2.click 
3: Buscar el siguiente código


<b:if cond='data:post.title'>

      <h3 class='post-title entry-title'>

     <b:if cond='data:post.link'>

       <a expr:href='data:post.link'><data:post.title/></a>

     <b:else/>

        <b:if cond='data:post.url'>

          <a expr:href='data:post.url'><data:post.title/></a>

        <b:else/>

          <data:post.title/>

        </b:if>

     </b:if>

      </h3>

    </b:if> 

4.cambia donde h3 por h2 hecho esto procedemos a agregar el estilo css
5.busca lo siguiente
]]></b:skin>

Justo antes pegamos este otro código:

h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 {border-bottom:0px Dotted #000000;border-top:0px Dotted #000000;margin:.25em 0 0;padding:0 0 4px;font-size:150%;font-weight:normal;line-height:1.4em;color:#1c3c6f;}

5. Por ultimo no olvides guardar la plantilla.

Eso es todo lo que necesitas para optimizar los titulos de las entradas en blogger, ojalá les sea de gran ayuda.

viernes, 7 de marzo de 2014

Cómo colocar el Widget de Linkwithin dentro del post del blog

Hoy les enseñamos la manera de poner el widget Linkwithin solo dentro del post en blogger, en otras palabras como colocar y situar el código PHP del widget de Linkwithin solamente entre los posts, para aquellos blogs de blogger que tienen las entradas recortadas con el "Leer más" o "Read more" en su página principal y no quieren mostrar las entradas relacionadas en la primer página del blog.
Un truco sencillo y simple para personalizar tu blog y tener entradas o post relacionados de manera muy sencilla en menos de 5 minutos y tener así tu blog tuneado a tu gusto; para poder hacer esto tienen que seguir estos pasos :

Cómo colocar el Widget de Linkwithin dentro del post del blog


Cómo colocar el Widget de Linkwithin dentro del post del blog

1- Primero que nada instalar el widget de Enlaces relacionados de Linkwithin desde su pagina oficial www.linkwithin.com
Ponen su email, su blog, elegir la cantidad de sugerencia (posts relacionados) que quieren que aparezcan, elegir la plataforma, en este caso Blogger y le dan a obtener widget o get widget. Luego hacen click en install y lo en la ventana que se les abre lo agregan al diseño de su blog.

2- Una vez en la ventana de diseño, hacer clic en editar al widget de Linkwithin, y copiar el código y proceder a eliminarlo (asegurate de haber copiado el codigo, ya que si no tendrás que repetir el paso 1)

3- Vamos a edicion html, marcar expandir artilugios, buscar el siguiente código en el código de PHP de nuestro blog.

<b:includable id='comment-form' var='post'>

Justo debajo de esto, pegamos el código que habíamos copiado del Widget de Link Within.

4- Por ultimo guardamos los cambios y listo, tendremos las entradas relacionadas con sus miniaturas que serán visibles solamente cuando entramos a leer el post completo; en la página principal donde tenemos los fragmentos de los post o las entradas parciales, no tendrán enlaces relacionados!

lunes, 19 de agosto de 2013

Codigo para hacer un banner cambiante o rotador de banners en Blooger

Codigo PHP

Tienes varios banners para mostrar en tu blog y pocos espacios de públicidad disponibles?
Esta solución funciona y es ideal para esto, es un código de CiudadBlogger.com!
Se trata del código para hacer un banner cambiante, o rotador de banners en la plataforma Blogger!
Con unos pocos pasos, podrás hacer que los banners se cambien automáticamente cada cierto tiempo, y así podrás mostrar diferentes públicidades en un gadget de tu blog!

Codigo para hacer un banner cambiante o rotador de banners en Blooger

Primero que nada, deberás entrar a tu Plantilla | Edición de HTML y deberás copiar y pegar lo siguiente antes de </head> (el número 3000 en azul indíca el tiempo que tardará el banner en cambiar al próximo)

<script type='text/javascript'>
//<![CDATA[
window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
imgs = d.getElementById('rotator').getElementsByTagName('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
setTimeout(so_xfade,3000); }
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,3000);}
else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return; }
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}
//]]>
</script>

Luego pegarás el siguiente código justo antes de ]]></b:skin> (En esta parte del código, podrás cambiar las medidas : para ajustar el ancho cambia donde dice width y para cambiar el alto en height.)

/* BANNER CAMBIANTE
----------------------------------------------- */
{margin: 0; padding: 0;}
#rotator {
border: 1px solid #000000;
overflow: hidden;
margin: 0px ;
padding:2px;
position: relative;
width: 430px;
height: 60px;
}
#rotator img {
border: 0;
width: 430px;
height: 60px;
}

Por último, deberás entrar a Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y pegar lo siguiente (Recuerda cambiar los datos de la URL del enlace e imagen!)

<div id="rotator">
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
</div>

lunes, 12 de agosto de 2013

Como eliminar el "Suscribirse a: Entradas (Atom)"

codigo blogger

Si tienes eres un blogger de ley, seguramente te habrás topado varias veces con el enlace de Suscribirse a: Entradas (Atom), este no sirve para nada, y en mi caso hasta molestaba porque ya que el RSS no funciona, era un enlace roto para el blog.
Por eso, si aún tienes este enlace y quieres quitarte el problema de encima, aquí te mostramos como eliminar ese fastidioso "Suscribirse a: Entradas (Atom)".
Suscribirse a: Entradas (Atom) es un link para que tus lectores puedan suscribirse a tus post y estén actualizados con el contenido de tu blog a través del feed del sitio. En el pasado sólo desde ahí podían realizarse dichas suscripciones, pero con el tiempo y la creación de nuevas plantillas esta suscripción se hizo más dinámica con íconos, imágenes, links, botones y formularios. Así que el Suscribirse a: Entradas (Atom) se volvió un tanto obsoleto en cuanto a diseño.

Como eliminar el "Suscribirse a: Entradas (Atom)"

Primero que nada que hay que localizar el código que contiene este link de suscripción; entra a Plantilla ---> Edición de HTML y marcando la casilla Expandir plantillas de artilugios busca esto:

<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>

Si quieres como eliminar el "Suscribirse a: Entradas (Atom)", simplemente elimina todo lo que está en negrita y listo!

viernes, 1 de junio de 2012

Como colocar un banner entre el primer y segundo post (Blogger)

Como colocar un banner entre el primer y segundo post (Blogger)

Estaba busando algún código php para colocar en mi blog un banner propio después del primer post y encontré un tutorial muy simple y rápido que funciona muy bien.
Así que lo que haremos en esta entrada será mostrar un elemento debajo del primer post, esto quiere decir que debajo de las demás entradas no será visible. Esto queda muy bien cuando se usa algún sumario automático, aunque tampoco es requisito.
Bien, esto es realmente sencillo, usaremos la condicional isFirstPost para que dicho elemento sólo se aplique a la primera entrada; es la misma condicional que usamos para mostrar el primer post de manera diferente.
Si ustedes también utilizan Blogger y necesitan colocar algún código o públicidad entre posts, deberán hacer lo siguiente :

Como colocar un banner entre el primer y segundo post (Blogger)

Comencemos entrando a la Edición HTML de la plantilla, ahí marca la casilla Expandir plantillas de artilugios y busca esta línea:

<b:include data='post' name='post'/> 
Justo debajo de ella agrega esto:

<b:if cond='data:post.isFirstPost'>
<div align="center"
style="margin-top:0px; margin-bottom:10px;">
...Aquí el código del elemento que quieres mostrar...

</div>
</b:if>


Añade donde se indica el código del elemento que quieras poner. Antes de guardar usa la Vista Previa para asegurarte que todo está bien.

En color azul están los márgenes superior (margin-top) e inferior (margin-bottom), esto es por si quisieras que el elemento se acerque o se aleje más de las entradas, así mismo puedes añadir ahí cualquier estilo como un color de fondo, un borde, etc.

Fuente : Ciudad Blogger