Mostrando las entradas con la etiqueta elementos html. Mostrar todas las entradas
Mostrando las entradas con la etiqueta elementos html. Mostrar todas las entradas

sábado, 28 de diciembre de 2013

Como Añadir un Widget en la Cabecera En Blogger

Leave a Comment
Como añadir un widget en la cabecera de pagina de blogger en la parte superior o cabecera del blog, uno de los formatos mas famoso es el anuncio de  AdSense 468×60  – ejemplo:

Pero como añadir algo en la cabecera de blogger ,ya sea un anuncio de Adsense , una barra de busqueda, botones de social media  o un widget? Pues sencillamente añadiendo una seccion en la cabecera. Primero que nada, añadir un espacio extra para acomodar el widget,para esto nuestra cabecera de blogger debe ser ampliada.
 Ampliar la Cabecera de blogger
Paso1: Entrar en Panel de Blogger  > Plantilla > Editar HTML y hacer una copia de seguridad o backup de tu plantilla
Paso 2: Da Click en cualquier area del codigo y abrir caja de busqueda usando teclas CTRL + F :


Paso 3: Buscar este pedazo de codigo:
/* Header
———————————————– */
Nota: Si no lo encuentras, busca solo por primera linea:
/* Header

Paso 4: Reemplacelo con este codigo:
/* Header
———————————————– */
.header-left{
display: inline-block;
height: 35px;
width: 350px;
float: left;
}
.header-right {
display:inline-block;
float:right;
}
Cambia los pixels en rojo por el alto y el ancho de la imagen de la cabecera de blogger y cambia float: left; por float: right;si deseas cambiar la posicion de tu logo.
Paso 5: Encuentra el siguiente codigo:
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
Paso 6: Reemplazalo con el siguiente codigo:
<b:section class=’header header-left’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
Ahora “Preview” tu plantilla, notaras que el color de fondo de la cabecera de Blogger no es visible o no se encuentra. Para recuperarlo o reestablecerlo, necesitas añadir algunos codigos:
Paso 7. Encuentra el siguiente codigo:
    </div>
</div>
<div class=’header-cap-bottom cap-bottom’>
<div class=’cap-left’/>
Paso 8. Ahora antes del codigo anterior, pega lo siguente:
<div style=’clear:both;’/>
Nota: Si no puedes hallar el codigo del paso  7, busca el siguiente en su lugar:
      <b:include name=’description’/>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>
…y pega el codigo del paso 8 debajo de este.

Añadir una seccion extra para acomodar un gadget/widget a la Cabecera de Blogger
Let’s go one step forward and add an extra gadget section within Blogger header in new template designers.
Paso 9. Justo debajo del codigo del paso  8,pegue el siguiente codigo justo antes/arriba de este:
<b:section class=’header-right crosscol’ id=’header-right’ maxwidgets=’1′ showaddelement=’yes’/>
Paso 10. Ahora encuentra esta etiqueta:
]]></b:skin>
Paso 11. Pega arriba de ]]></b:skin> , este codigo de CSS :
.header-right {
display:inline-block;
float:right;
width:400px;
}
Cambia el ancho que esta marcado en color rojo.Aumenta o disminuye los pixels de acuerdo a tu necesidad y posicionamiento de la nueva seccion de la cabecera.
Paso 12. Guarda la Plantilla.
Paso 13. Luego todo lo que debes hacer es ir a Diseño y Añadir un Gadget  a la nueva seccion de cabecera en Blogger.

Que te entretengas.
Read More

domingo, 30 de junio de 2013

Como Hacer Tu Blog De Blogger SEO Amigable

2 comments
las mejores practicas y politicas de Seo

La Importancia de implementar las mejores practicas y politicas de Seo en tu blog de blogger para obtener una mejor posicion en los motores de busqueda.El objetivo de hacer nuestro blog amigable y facil de rastrear por los buscadores en la internet.

En un articulo anterior fui en detalles sobre lo que es SEO (Search Engine Optimization) este es la base de cada blog,sin este no podrias decir que nuestro es un blog commercial/professional.La posicion que ocupes en google grandemente depende  en la practica de SEO .La posicion en Google,significara que mas personas veran y leeran tus articulos.

Por lo tanto es esencial y hacer todo lo que este a nuestro alcance  hacer nuestro blog o pagina web mas amigable practicas de SEO .Preguntaras como se hace esta practica amigable SEO ? SEO es un tema amplio y que tiene muchas vertientes que hay que atender a medida que aquirimos experiencia en estructurar una pagina web o blog.Pero existen maneras y estas son multiples para mejorar tu blog.

1.Tales como añadir Etiquetas Meta o Meta Tags.
2.Manten el numero correcto de caracteres en el titulo del articulo
3. Añade alt tags a todas las imagenes y muchas otras cosas adicionales.

Pero en este tutorial tocare ademas unos topicos importantes sobres cosas adicionales para hacer tu blog de blogger mas Seo Amigable.

1. Haz todos tus enlaces externos abran en una nueva ventana o pestaña.
Haciendo esto reducira el porcentaje de bounce rate, este aumenta el numero de paginas vistas en tu blog y el trafico de tu blog traffic no sera transferido debido a un enlace.

2. Haz que tus enlaces externos nofollow
Por defecto todos los enlaces son dofollow lo que significa que Google los rastreara y una cantidad considerable de la posicion de la pagina se perdera. Asi que para prevenir que esto suceda deberas añadir la etiqueta  nofollow a todos los enlaces externos.

3. Añadir etiquetas alternas a todas las imagenes
Las Etiquetas alternas en una imagen la describen y los motores de busqueda como  Google mostraran las imagenes de tu blog cuando la gente busque sobre el tema de tu blog. Esto ayuda a conseguir mas visitantes a tu  blog y mejora el SEO grandemente.
Pensaras que esto es mucho trabajo o como hacer todas estas cosas?
Hacerlo Manualmente tomara mucho tiempo y podria ser imposible para los blogs con una cantidad inmensa de articulos hacer esta tarea.He aqui un super truco que hara el trabajo mas facil y a ahorrar tiempo un codigo de JavaScript lo hara por ti.

Como Añadir codigo amigable de SEO a tu blog de Blogger

1. Entra en tu cuenta de Blogger y busca el blog donde deseas añadir este codigo → Plantilla → Editar HTML y añade el codigo de abajo antes de la siguiente etiqueta </head>



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>//<![CDATA[
jQuery('a').each(function(){// Let's make external links open in a new tab. var href=jQuery(this).attr('href');if (typeof href !='undefined' && href !="" && (href.indexOf('http://') !=-1 || href.indexOf('https://') !=-1) && href.indexOf(window.location.hostname)==-1){jQuery(this).attr("target", "_blank");}});//]]></script>

<script type='text/javascript'>//<![CDATA[
jQuery('a').each(function(){// Let's make external links nofollow. var href=jQuery(this).attr('href');if (typeof href !='undefined' && href !="" && (href.indexOf('http://') !=-1 || href.indexOf('https://') !=-1) && href.indexOf(window.location.hostname)==-1){jQuery(this).attr("rel", "nofollow");}});//]]></script>

<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){$('img').each(function(){var $img=$(this);var filename=$img.attr('src') $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));});});//]]></script>

Nota:Si tu blog ya tiene el siguiente plugin de JQuery debes remover el codigo en rojo sino añade el codigo completo para que el script funcione..

2.Una vez hayas añadido el codigo guarda la plantilla.Toda esta finalizado.. Ahora podras ver las etiquetas alternas ( alt tags)en tus imagenes, la etiqueta Nofollow en los Enlaces Externos y Abrira los enlaces externosen una nueva pestaña. Te recomendaria a cada blogger añadir este codigo pues un pequeño esfuerzo puede mejorar el Seo de tu blog SEO considerablemente.
Read More