LO QUE SE DE BLOGS: BLOGGERS

Mostrando entradas con la etiqueta BLOGGERS. Mostrar todas las entradas

domingo, 5 de febrero de 2023

Incrustar videos Responsivos de Youtube en Blogger (Blogspot)

¿Qué hago para que los videos se YouTube se puedan ver correctamente cuando se ingresa a mi blog de Blogger desde las tabletas y los teléfonos? ¿Cuándo un usuario ingrese a mi blog de Blogger desde un teléfono inteligente o un Tablet le muestre correctamente el video de YouTube optimizado? Para tener este truco de Blogger deberá seguir todas las instrucciones de este tutorial de Blogger. Debemos insertar un código en la plantilla de Blogger desde el Editor HTML, luego vamos a ingresar unas líneas de código junto con el código Embed el cual lleva el video, esto hará que el video de Youtube que usted publicó en su entrada de Blogger se haga totalmente Responsive y se visualice correctamente en un teléfono inteligente o en una Tableta.

¿Cómo hacer que los vídeos de YouTube se hagan totalmente Responsive en mi blog de Blogger?

Este es un Ejemplo de la optimización de un video de Youtube en una entrada de Blogger

Pude ver su demostración en el siguiente blog, disminuya su navegador o abra el demo desde su SmartPhone

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Plantilla”

3 Un clic en “Editar HTML”

Ahora se le abrirá el Editor HTML de su plantilla

En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

4 Busque este código

]]></b:skin>

Ingrese las siguientes líneas de código CSS justo arriba del código que encontró

/*-----Estilos CSS Smartphones y Tabletas Video de Youtube ----------*/

.video-container {

position:relative;

padding-bottom:56.25%;

padding-top:30px;

height:0;

overflow:hidden;

}

.video-container iframe, .video-container object, .video-container embed {

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

}

/*-----Fin de Estilos CSS Smartphones y Tabletas Video de Youtube ----------*/

5 Un clic en “Guardar plantilla”

6 Ahora diríjase a la Entrada, la cual tiene el Video de Youtube

7 Habilite la casilla “HTML” de su Entrada

Ingrese el siguiente código

<div class="video-container">Ingrese aquí el código Embed de Youtube</div>

Remplace donde dice Ingrese aquí el código Embed de Youtube por el código de inserción del video de Youtube

Por ejemplo le quedara de la siguiente manera:

Publique o actualice su Entrada

8 Eso es todo, ahora puede abrir su blog de Blogger desde un Teléfono y mirar la entrada, el video de Youtube se mostrara optimizado.

Nota: recuerde, si usted tiene algunos videos de Youtube insertados en varias entradas de su blog de Blogger, tendrá que repetir el proceso desde el paso 7.

martes, 20 de noviembre de 2018

Redireccionar en blogger codigo script

bueno muchachos hoy les enseñare como redireccionar con blogger con un codigo facilito o mejor dicho breve lo que debemos hacer es ir a blogger -->elegir nuestro blog-->diseño-->Añadir un gadget-->HTML/Javascript--> pondremos el siguiente codigo:


<script>
var pagina="http://informacional100.blogspot.com.co"
function redireccionar()
{
location.href=pagina
}
setTimeout ("redireccionar()", 500);
</script>

finalmente cambiamos lo que esta en rojo por la url de tu pagina web y listo guardamos

domingo, 18 de noviembre de 2018

Radio para blogger o web

Post de

Radio para blogger o web

La gran ventaja de este reproductor es que sirve cuando los visitantes acceden a la página a través de dispositivos móviles Android e iOS, si se hace desde una PC/Mac/Linux funciona con cualquier navegador. Su código es muy sencillo, solo deben agregar la url de la radio y listo. El código se debe agregar en modo HTML, o en un gadget HTML-Javascript. Si no quieren que la reproducción inicie automáticamente retiren la palabra "autoplay" de la primera línea del código.

Radio en un reproductor HTML para Android, iOS, PC y Linux.

------------------------------------

</audio>

------------------------------------

Por favor revisen luego de agregar la URL de la radio que no falte o sobre un caracter, por ejemplo que queden dos barras inclinadas al final de la URL, o falten o sobren unas comillas. Igualmente si la URL termina en .mp3 no es necesario agregar la parte de /;stream.nsv.

Para obtener la url de una emisora de radio deben ir a su página web, buscar su reproductor, y luego usando Chrome hacer clic derecho sobre él -a un lado del botón de play o pausa-, elegir Inspeccionar, y esto hará que salga una parte donde se visualizan los códigos que usa el reproductor -esto necesita práctica-. Les muestro un ejemplo con una página recomendada para obtener las url de las emisoras de radio. Cuando vayan a la página elijan el género musical que buscan para ver las emisoras.

Primero clic sobre popup para hacer salir el reproductor que trabaja con HTML.

Clic derecho al lado de la barra cómo se muestra en la imagen.

Clic sobre el triángulo que sale en la barra resaltada con azul,

hasta que salga la línea del jquery_jplayer_1

Abren la línea del jquery_jplayer_1 y ahí deberían visualizar la url.

Ahora solo deben hacer doble clic sobre la url para que quede seleccionada y la puedan copiar fácilmente.

El código quedaría para este ejemplo así (pueden notar que la url termina en stream pero aún así se le agrega la terminación en verde del tutorial):

------------------------------------

</audio>

------------------------------------

Todas las emisoras de Radio Online de Charkleons.com usan este código HTML.

Espero que esta información les sea muy útil.

Gracias.

martes, 30 de octubre de 2018

Como añadir Adsense In-feed a las plantilla de Blooger mobil

Información de:
How To Add Adsense In-feed Ad To Blogger Old Themes On Mobile
How To Add AdSense In-Feed Ad To Old Mobile Blogger Themes

If you have learned how to add Adsense in-feed ads to the blogger old themes and it’s not displaying on mobile view, that means you could lose some few bucks. Well, it is possible to add the in-feed ad to the mobile blogger old theme.

The following simple steps will show you how to allow in-feed ads display on blogger old theme mobile view. The trick behind this tweak is to copy few codes of the inline ads and place in the mobile HTML codes.

==> Go to your template 'Edit HTML'. Search for this line of codes <div class='mobile-index-comment'>.

.

==> Paste these codes below just after the second you will see.

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

<div class='inline-ad'>

<div style='text-align:center; margin:15px 0px;'>

IN-FEED

</div>

</div>

<data:adStart/>

</b:if>

==> Replace the words IN-FEED with your in-feed ad code.

==> Save Theme

That's all

Note: You can also add any ad network codes or affiliate code with this little tweak.

I hope it works.

jueves, 9 de febrero de 2017

Nuevo sitemap XML de serie en Blogger, Blogspot

Sitio de Referencia Nuevo sitemap XML de serie en Blogger

Esto es una sorpresita que hallé casualmente.

Para que la veas tú también teclea la URL principal de tu blog en la barra de direcciones de tu navegador y añádele /robots.txt. Lo que estás viendo es el fichero de texto que en un principio se usa para que los rastreadores web no visiten ciertas páginas de tu sitio. Su misión básica es indicar a las arañas que páginas pueden recuperar (Allow) y cuáles deben evitar (Disallow).

Si no habéis personalizado vuestro robots.txt desde la opción Preferencias para motores de búsqueda del panel de control, lo que os debería salir hoy día será algo como esto:

Sitemap XML para Blogger

Ahí podéis ver que se indica que no se deben indexar las direcciones que incluyan el parámetro /search y cómo por el contrario, sí que se deben recuperar todas las que cuelguen del dominio principal (/) (excepto las anteriores, claro).

El nuevo sitemap

Pero lo interesante que vemos ahí y que antes no estaba, es esa dirección que aparece al final con extensión .xml y que indica a los rastreadores cuál es la dirección de nuestro sitemap, una especie de mapa con el que los ayudamos a encontrar hasta el último rincón de nuestra web.

En realidad es una lista de todas las páginas del sitio (direcciones únicas) que incluye también algunos datos importantes como la fecha de actualización. Con esos datos los motores de búsqueda podrán conocer, a modo de índice, como es la organización del contenido para que rastreen de manera más eficiente.

Por tanto, enviar tu sitemap a los distintos buscadores es una parte importante de la optimización de tu sitio web, porque no sólo facilitarás que se encuentren fácilmente todas las páginas publicadas, sino que también se descargarán más rápido cuando estas cambien.

Pues bien, aunque yo no lo he visto anunciado, creo que todos ahora tenemos uno. El mío está actualizado según Herramientas para webmasters el día 16 de Diciembre pasado, así que no debe tener mucho tiempo el invento.

Añadir el nuevo sitemap a Herramientas para webmasters

En Herramientas para webmasters hay un apartado dedicado a los sitemaps que nos permite asegurarnos de que Google recibe correctamente toda la información que este tipo de ficheros contiene. Pero ojo con lo que se entiende, que "recibir" no es lo mismo que "indexar" y si bien es conveniente hacerlo, no nos garantiza nada.

Para añadir este nuevo que tenemos ahora sólo hay que acceder allí, seleccionar la página para la que vais a mandar el sitemap (si tenéis varias) y dentro del menú lateral buscar la opción con ese nombre dentro del apartado rastreo.

Enviar un sitemap con Herramientas para webmasters

Una vez allí pincháis en el botón Añadir o probar sitemap y en la ventana emergente tecleais "sitemap.xml", pues todo los ficheros se llaman igual y sólo cambia el dominio principal que ya sale automático. Con Enviar sitemap ya lo tendremos todo hecho y sólo nos queda esperar a que las arañas pasen... a veces unas horas, a veces algún día que otro.

Simultanear el formato Atom y el XML

Puede que en Herramientas para webmasters tengáis montado de antes algún sistema con Atom que sirve también como sitemap, construido con cadenas sucesivas como estas (*):

/atom.xml?redirect=false&start-index=1&max-results=500
/atom.xml?redirect=false&start-index=501&max-results=500
/atom.xml?redirect=false&start-index=1001&max-results=500
etc.

(*) Cada línea sirve sólo para 500 entradas como máximo.

Eso es lo único que teníamos en Blogger hasta ahora y por eso supongo que muchos lo tendréis ya. En cualquier caso no viene mal añadir ambos formatos.

La diferencia principal entre los que tienen el formato XML y los RSS/Atom es que los primeros detallan todas las URL que hay dentro de un sitio mientras que los segundos suelen incluir sólo las que tienen fecha de actualización más reciente. Por eso unos sirven para dar una información completa que se recorre más de tarde en tarde y los otros ayudan a que los cambios más recientes se actualicen antes.

Índice de sitemaps

Una última cosa. Si tenéis muchas entradas es posible que vuestro sitemap se haya dividido en varias páginas y entonces no veréis en él directamente la relación de todas vuestras URLs. En ese caso lo que veréis será un índice de sitemaps o relación de sitemaps parciales, dentro de cada uno de los cuales sí que podréis ver todas los artículos publicados:

http://www.oloblogger.com/sitemap.xml?page=1
http://www.oloblogger.com/sitemap.xml?page=2
http://www.oloblogger.com/sitemap.xml?page=3
etc.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

martes, 18 de octubre de 2016

Las Twitter Cards En Blogger

Este post es de http://www.lascronicasdelcesar.com/2015/08/como-instalar-las-twitter-cards-en.html

Introducción

Las Twitter Cards nos pueden ayudar mucho a la hora de compartir un link ya que gracias a ellas podemos hacer mas vistoso el tweet que enviamos a ojos de las personas que lleguen a ver nuestro tweet e incrementa las posibilidades de que interactúen con nuestro tweet y le den clic a el link compartido y así enviarlo a nuestro blog o página.

Concepto Básico

Podemos resumir que las Twitter Cards son diferentes maneras en las que un tweet con link se presenta dentro de Twitter.

Tipos de Twitter Cards

Resumen. En donde encontraremos el Titulo, Descripcion, Vista en Miniatura y la Cuenta de atribución.

Resumen con Imagen Grande. Similar a la de Resumen pero con una Imagen más Grande.

App. Para detallar una app para movil con link a descarga.

Reproductor. Para adjuntar un video/audio/multimedia.

En este link puedes ver más a detalle cada tipo de Twitter Card.

El tipo de Twitter Card que vamos a instalar es el de Resumen con Imagen Grande.

Post Relacionado

Pasos Para Instalar En Blogger

1.Tienes que accesar a blogger y elegir en blog en donde quieres instalar el código para las Twitter Cards.

2.Elegir "Plantilla" y despues "Editar HTML".

Buscamos la etiqueta </head> y justo antes de la etiqueta insertamos el siguiente código:

Dar clic para ver en grande

No te preocupes que el código te lo dejo mas abajo para que puedas copiar y pegar.

¿Cómo Modifico El Código Para Utilizarlo A Mis Necesidades?

En la primera parte del código (en la imagen) se muestra la un comentario que especifica que a partir de ahí hacia abajo inician el código de las Twitter Cards (este pedazo de código es opcional ya que solamente es un comentario).

La siguiente linea especifica el tipo de Twitter Card que vamos a querer, en este caso el de Resumen con Imagen Grande (summary_large_image)

La tercera y cuarta linea se especifica la cuenta en Twitter del sitio al que pertenece el link y la cuenta de la persona que escribió el post que estamos compartiendo. Como yo no tengo una cuenta aparte para éste blog (uso mi propia cuenta) la cuenta a especificar del sitio (twitter:site) es la misma que la del creador (twitter:creator). Estas 2 últimas lineas las puedes cambiar con tu cuenta de Twitter.

En la segunda parte del código se usa una etiqueta de condición de blogger para saber si el link que se esta compartiendo es el Index (la pagina principal del blog) o si es algún post u otra página.

Si es el index, lo que hace es poner como Titulo (en Twitter), el texto "Las Crónicas Del César". Como descripción (en Twitter), pone "No soy un adepto escribiendo, pero lo haré......". Pone una imagen para compartir que es ésta. Y en URL, pone la principal del blog. De aquí lo que puedes cambiar es el Titulo, la Descripción y la Imagen. La URL de tu blog la pone automáticamente.

Pero si no es el Index (por ejemplo una publicación o página estatica) hace lo siguiente:

Pone como URL la del post que estamos compartiendo. En titulo pone la del post que estamos compartiendo. Y en imagen pone la primera imagen que publicamos en nuestro post. De aquí no te recomiendo cambiar nada porque pone automáticamente la URL, Titulo e Imagen de tu publicación.

Dale clic para ver en grande

En la última parte del código se pregunta si el post tiene descripción (esto no se ve en el post actual, son etiquetas para el buscador de Google).

Si tiene, pone como descripción (en Twitter) la descripción que pusiste a la hora de escribir un post que esta situado en la parte derecha de tu editor para escribir post (ver imagen aqui).

Si no tiene, pone una descripción que tu hayas puesto, en este caso yo puse una descripción genérica: "Mira el post completo. Si te gusta.......", lo puedes cambiar por tu propia descripción genérica para tus publicaciones.

Dale clic para ver en grande

Una vez hecho esto procedemos a la validación en Twitter en el siguiente link:

https://cards-dev.twitter.com/validator

Pegamos nuestra dirección del blog en la caja para validar. En nuestra dirección hay que cambiar .mx por .com y volverlo a validar para que sin importar cual compartamos (con .mx o .com) nos aparezcan las Twitter Cards en la timeline.

Esta es la vista previa del link en Twitter:

Y de un link en Twitter:

Código para copiar y pegar.

Referencias:

https://dev.twitter.com/cards/overview

https://dev.twitter.com/cards/getting-started

http://blogger-hints-and-tips.blogspot.mx/2013/09/how-to-set-up-twitters-view-summary.html

Si te gusto el post, dale +1, Tuitealo, Like y Compartelo en tus redes sociales, de verdad me ayuda mucho. No olvides comentar en la sección de abajo.

¿Te ha gustado la publicación?

Suscribete aqui para recibir en tu correo publicaciones como esta.

También puedes darme like en Facebook, Seguirme en Twitter o agregarme a tus Circulos en Google+.

Si tienes alguna duda o sugerencia puedes contactarme mandándome un correo aquí o comentar en esta misma publicación, no te olvides de compartir

martes, 24 de marzo de 2015

Modificar las plantillas móviles de Blogger

Desde que Blogger habilito la versión móvil de nuestras paginas, solo podíamos seleccionar algunas plantillas predeterminadas y nada mas. Ahora desde el blog de desarrolladores de Blogger nos indican que es posible modificar y seleccionar algunas cosas en esa versión móvil que se muestra automáticamente al acceder desde un dispositivo móvil a nuestras paginas.

La primera opción es poder seleccionar que widget queremos que se vean en la versión móvil y cuales no queremos que se vean, para ello solo deberemos acceder a la edición de nuestra plantilla y añadir las siguientes etiquetas:

Esto es lo que tenemos habitualmente

<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>

Si queremos que se vea ese widget en concreto le añadimos

<b:widget id='BlogArchive1' title='Blog Archive' mobile='yes' type='BlogArchive'>

Si no queremos que se vea le añadiremos

<b:widget id='BlogArchive1' title='Blog Archive' mobile='no' type='BlogArchive'>

Si queremos que se vea solo en la versión móvil, pondremos

<b:widget id='BlogArchive1' title='Blog Archive' mobile='only' type='BlogArchive'>

También es posible añadir el condicional <b:if cond="data:mobile"> en los códigos de los widget por si queremos mostrar una cosa u otra dependiendo de que la versión sea vista móvil o no.

Os dejo el ejemplo

<div class="widget-content">

<b:if cond="data:mobile">



<a href="http://www.blogger.com">

Powered By Blogger

</a>

<b:else/>



<a href="http://www.blogger.com">

<img expr:src="data:fullButton" alt="Powered By Blogger"/>

</a>

</b:if>

</div>

También es posible modificar las plantillas mediante CSS pero es algo más complejo y lo explicaremos mas adelante

Como poner Adsense en vista móvil para blogger

Vito en: Como poner Adsense en vista móvil para blogger
Bien en esta entrada os voy a enseñar a poner un banner de adsense para la vista móvil en blogger justo debajo del título. Tenemos 2 opciones, una fácil con problemas que luego explicaré más adelante y otra un poco más complicada pero con óptimos resultados.

Antes de todo debemos habilitar la vista móvil en blogger/plantilla y donde pone móvil pulsamos abajo y la ventana que se nos abre la dejamos de la siguiente manera

Opción 1

Con esta opción debemos localizar el gadget o widget que queremos que sea visible para la vista móvil y añadiendo los atributos en HTML podremos elegir entre:

mobile='yes' para que sea visible tanto en vista de escritorio como en móvil

mobile='no' para que no sea visible en vista móvil

mobile='only' visible solo en vista móvil

Supongamos que queremos que el widget Adsense sea visible en vista móvil también, pues nos vamos a plantilla/editar HTML localizamos el widget y añadimos mobile='yes'

<b:widget id='Label1' mobile='yes' locked='false' title='Adsense' type='Label'/>

Recuerda que donde pone Label1 es el numero del widget y donde pone title es el nombre.

El problema de esto es que a la hora de poner mobile='only' para que sea visible solo desde la vista móvil, el widget desaparece del diseño y cuando queramos cambiar algo dará el error bX-7d26hw al guardar los cambios.

Opción 2

Para poner Adsense debajo de la descripción de nuestro blog para que quede de esta manera

Lo aremos con el siguiente condicional <b:if cond='data:blog.isMobile'> visible solo en vista móvil </b:if> de esta manera a la hora de cargar la página, le estamos diciendo a blogger que esa parte la queremos que sea visible solo en vista móvil. Entonces al lío.

Nos vamos a plantilla/editar HTML y pulsamos Ctrl+F para abrir el buscador y escribimos </header> justo debajo ponemos lo siguiente:



<b:if cond='data:blog.isMobile'>

<div align='center'>

Tu código Adsense en texto plano aquí

</div>

</b:if>



Para pasar adsense en texto plano

Una vez hecho esto, guardamos cambios y probamos la vista móvil, recuerdo que debes añadir /?m=1 de tal forma www.tublog.com/?m=1 para hacer visible la vista móvil desde el escritorio.

Explicación de lo que hemos hecho

</header> es el cierre de la cabecera donde va el título del blog

 para localizar el widget facilmente ya que lo que escribamos dentro de  no es visible

<b:if cond='data:blog.isMobile'> le estamos diciendo que sea visible solo en vista móvil

<div align='center'> que esté centrado en la pantalla

y los correspondientes cierres de cada atributo </div> </b:if>

domingo, 28 de abril de 2013

URL del feed de Blogger

Importante

Después de ajustar la configuración del feed del sitio, el blog ya estará listo para que todos lo sigan. Simplemente introduce una de las siguientes URL en tu lector de feeds favorito, donde se entregará y actualizará automáticamente el contenido de tu blog.
Nota: asegúrate de sustituir "nombredelblog" por la dirección correcta del blog y "nombredeetiqueta" por la etiqueta que te interesa. Los feed del sitio no funcionan con blogs privados o alojados en FTP.

Feed del sitio completo:


Atom 1.0: http://nombredelblog.blogspot.com/feeds/posts/default


RSS 2.0: http://nombredelblog.blogspot.com/feeds/posts/default?alt=rss

Nota:

protocolo PubSubHubbub

Feed de comentarios exclusivamente:

Atom 1.0: http://nombredelblog.blogspot.com/feeds/comments/default



RSS 2.0: http://nombredelblog.blogspot.com/feeds/comments/default?alt=rss

Feed de sitio específico de etiquetas:

Atom 1.0: http://www.googleblog.blogspot.com/feeds/posts/default/-/privacy



RSS 2.0: http://www.googleblog.blogspot.com/feeds/posts/default?alt=rss/-/privacy

Feed de comentario de entrada individual:


Atom 1.0: http://nombredelblog.blogspot.com/feeds/postId/comments/default


RSS 2.0: http://nombredelblog.blogspot.com/feeds/postId/comments/default?alt=rss

Nota:

¡Sí, claro! Si un blog que sueles leer emplea etiquetas y también tiene activada la función de feeds del sitio, puedes seleccionar a qué temas deseas suscribirte. El siguiente es el formato de los feeds para etiquetas:

http://nombredelblog.blogspot.com/feeds/posts/default/-/nombredelaetiqueta.

Tienes que reemplazar nombredelblog por la dirección correcta del blog y nombredelaetiqueta por la etiqueta que te interesa. Y no olvides colocar el guión ("-") en la URL. ¡No es un error tipográfico!

Ten en cuenta que una URL con este formato sólo funcionará si el blog en cuestión utiliza esta etiqueta específica y tiene activada la función feeds del sitio. Sin embargo, no es necesario que tenga ninguna configuración especial de feeds del sitio. Siempre que la función básica de feeds del sitio para entradas esté activada (ya sea con descripciones completas o abreviadas), bastará para que los feeds de etiqueta funcionen.

miércoles, 21 de septiembre de 2011

Configurar tu domino Blogger en Namecheap

Fuente: http://www.silverspear.me/2011/07/how-to-setup-blogger-custom-domain-with.html

As promised on previous post, here are the screenshots showing the process to setup custom domain on Blogger with NameCheap.

I guess if you found this page, you already know what Blogger custom domain is and the important of using a custom domain instead of Blogger standard address.

So, let's proceed with the setup. (Click images for larger version)

Setting on NameCheap Control Panel

Click "All Host Records" under Host Management.
Host Name: www, IP Adress/URL: ghs.google.com. (include "." and the end of .com). By default, NameCheap has inserted some value in the text box. Just overwrite with the given value.
Sub-Domain Settings

@/216.239.32.21/A (Address)
@/216.239.34.21/A (Address)
@/216.239.36.21/A (Address)
@/216.239.38.21/A (Address)

Finally, "Save Changes" to save your setting.

Setting on Blogger Dashboard

Click "Settings" and under "Basic",
Click "+Add acustom domain".

Click "Switch to advanced settings"

Enter your domain name with "www".
Click "Save" to save your settings.

Click the checkbox to redirect your naked domain to domain with "www".
Finally, click "Save" again to save your settings.
Wait a few minutes for the domain to propagate. Sometime it can take longer than that. If it takes longer than 48 hours, you have done something wrong. Please check back your settings and make sure they are correct. If problem still persist, contact your domain registrar.

viernes, 24 de septiembre de 2010

Como agregar meta Tags y Meta Descripcion a blogger

Agregar etiquetas META en Blogger

Como ya hemos comentado en Como utilizar los Metatags los metatags son muy importantes para indicar a los buscadores el contenido de nuestra web. Veamos como agregar metatags en blogger de manera sencilla.

Normalmente se deberían agregar un description y keywords por cada página de nuestro blog, pero solo agregaremos los metatags a la página principal de nuestro blog. En las páginas que no tengan metatags los buscadores generarán automáticamente el description basado en el texto de la página.

Código para los Metatags en Blogger

Entonces utilizando la sintaxis condicional en Blogger, tendríamos el siguiente código para mostrar los metatags en el home de nuestro blog. Este código debe ser colocado justo antes del tag </head>.

<b:if cond='data:blog.pageType == "index"'>
<meta name='keywords' content='keywords, separados, por, comas' />

<meta name='description' content='Descripcion del sitio web' />
</b:if>

Ejemplo Practico

Entonces para nuestro blog de ejemplo creado en Blogger tendríamos nuestros metatags personalizados con el siguiente código:

<b:if cond='data:blog.pageType == "index"'>
<meta name='keywords' content='tips, wordpress, blogger, twitter, html, css' />

<meta name='description' content='Tips, tutoriales, ejemplos y descargas para personalizar tu web.' />
</b:if>

Sencillo pero les ayudará mucho a posicionar su blog en los buscadores.

Tambien ver: Como agregar Meta keywords & meta description

Como sabrán hay varias meta tags que puedes añadir a tu blog, y estas son de alguna manera importante para el posicionamiento en los buscadores esta vez solo hablaremos de como agregar las meta tags: <keywords> y <description>

Lo se tendría que hacer es añadir meta keywords y meta description sólo para la página de inicio, con condicionales. De esta forma, Google no detecta meta keywords y description duplicados.

Para ello, buscar (también al inicio de la plantilla):

<b:skin><![CDATA[/*

Y añadir el siguiente código antes:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta name="description" content="La descripción de tu blog" />
<meta name="keywords" content="keyword1, keyword2, keyword3, keyword4, keyword5" />
</b:if>

Solo falta editar ese codigo, poniendo la descripción del blog y donde dice: keyword1, keyword2, keyword3, keyword4, keyword5 escribirás logicamente las palabras claves que quieras y de lo que trate tu blog.

Como ves es muy facil, aplicalo a tu blog y obtendrás beneficios a largo plazo. Espero que se haya entendido todo.

martes, 26 de enero de 2010

Otro metodo mas Poner barra de menú en blogger

Gracias a

COSMICA: Poner barra de menú en blogger

Este tutorialito, es para hacer una barra de menú en blogger como la mía, ya van varias veces que me preguntan cómo hacerlo, y pues aquí les va mi guía. Antes de empezar guarda un backup de tu plantilla por si algo sale mal la puedas recuperar sin problemas.

El objetivo es lograr algo como esto para tu blog:

Para empezar, tienes que tener la opción de añadir más elementos de página en la sección del header, así:

Blogger no nos lo permite por default, pero eso se resuelve fácil, vas a editar HTML de tu plantilla y buscas lo siguiente:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Donde cambiarás maxwidgets a 2 y showaddelement a yes. Quedando así:

<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>

Eso va a permitirnos añadir otro elemento arriba o bajo el header.

Lo que sigue es pegar un código en la plantilla para el menú. Esto lo vas a pegar antes de <head>

<style type='text/css'>
.barrademenu {
margin: 0;
padding: 0;
float: left; width: 100%;
font-family: Tahoma;
font-size:13px;
font-weight: bold;
margin-top: 0px;
border-bottom: 2px solid black;
border-top: 2px solid black;
background: #990000;
}
.barrademenu li {display: inline;}
.barrademenu li a, .solidblockmenu li a:visited {
float: left;
padding: 4px 15px;
text-decoration: none;
color: white;
border-right: 2px solid black;
outline: none;
}
.barrademenu li a:hover {
color: #ffffff;
background: #000000;
outline: none;
}
</style>

En ese código se incluye el estilo que va a tener el menú, puedes alterarle los colores si quieres que son los numeros de 6 dígitos (#000000, ver links al final del post), o usando nombres comunes de colores en inglés (white, blue, pink). Con el código así como está obtienes un menú igual al mio. Trata de jugar con los colores para crear uno que vaya con tu diseño.

Ya que pegaste el código, guardas los cambios y vas a agregar elementos de página, agregas un nuevo gadget tipo HTML/Javascript y en el vas a pegar lo siguiente:

<ul class="barrademenu">
 <li><a title="Kozmica.com" href="http://www.kozmica.com">Inicio</a></li>
 <li><a title="Informacion" href="http://www.kozmica.com">Acerca
de</a></li>

 <li><a title="Contáctame" href="http://www.kozmica.com">Contacto</a></li>
</ul>

Claro que cambias la dirección a la de tu blog. Con eso te saldrán 3 “pestañas” o espacios en el menú, para agregar una más sólo es necesario agregar otro de estos:

 <li><a title="Contáctame" href="http://www.kozmica.com">Otro menu</a></li>

¡Genial!

Si has hecho todo correctamente hasta ahora tendrás una barra de menú que se ve muy bien, sólo hay un último detalle, todos los enlaces dirigen a el inicio del blog, ¿cómo agregar las secciones?

En blogger no se puede hacer una página estática, pero podemos simular una con una entrada vieja en nuestro blog. ¿Cómo?, puedes editar entradas viejas transformándolas en el Acerca de, Contacto y demás o puedes crear una nueva entrada para cada sección y cambiarle la fecha hacia atrás para que no aparezca en la portada cuando la publiques.

La fecha la cambias clickeando en Opciones de entrada e introduces la fecha y hora que desees.

Es buena idea guardar los posts de las secciones antes de tus primeras entradas (puedes revisar la fecha que esas tienen) así cuando alguien esté navegando por tu blog no se topará con los post del menú entre el contenido. También puedes elegir entre permitir o no comentarios.

Ya que hayas creado tus entradas puedes empezar a añadir el acceso a ellas desde el recién agregado menú. Lo que tienes que hacer es colocar la dirección de cada post que hiciste de secciones en el código del menú. Por ejemplo, mi sección de Sobre mí así se ve el código en mi menú:

 <li><a title="Conóceme" href="http://www.kozmica.com/2008/04/sobre-m.html">Sobre mí</a></li>

Creas tantas entradas y espacios de menú como necesites.

NOTAS:

Para buscar y encontrar algo fácilmente en la plantilla usa Control+F.

Cualquier duda, cosita en la que no me haya explicado bien o no funcione me comentas aquí mismo.

Te puede servir:

Web Color Chart / Para cambiar los colores del menú, no olvides el # antes de el código del color.

HTML color codes / Otra web con códigos de color

jueves, 28 de mayo de 2009

El formulario de comentarios (forma sencilla) si tu plantilla es muy antigua

Habíamos visto anteriormente como implementar el formulario de comentarios en las plantillas que llevaban tiempo online o con bastantes modificaciones.

El problema surge cuando algunos modelos de plantilla no tienen incorporado el código que debemos localizar en la explicación anterior (es el caso de la Aspire por ejemplo, o de muchas de las plantillas adaptadas de Wordpress).

Hay otro método aún más sencillo y que parece funcionar sin problemas:

[1] Localizamos esta línea de código en la plantilla con los artilugios expandidos:

<b:include data='post' name='comments' />

[2] Justo después pegamos esta otra línea de código:

<b:include data='post' name='comment-form'/>

[3] Guardamos cambios.

miércoles, 27 de mayo de 2009

Como colocar el Formulario de comentarios Blogger si tu plantilla es antigua

Ya podemos incluir en nuestro blog un formulario de comentarios "incrustado" en el pie de nuestras entradas al final de los comentarios.

De momento esta opción solamente está disponible en Blogger in Draft que, como ya casi todos sabréis es una especie de "laboratorio de pruebas", donde el equipo de Blogger va añadiendo nuevas funcionalidades que los usuarios podemos probar antes de incluirlas en el Blogger "normal".

Actualización:

La opción ya está incluida en la "Configuración" del panel de Blogger "normal", aunque sigue siendo necesario en algunas plantillas, seguir los pasos de esta entrada para mostrar el formulario.

Disponer de esta opción en nuestros blogs es, de entrada, bastante sencillo:

[1] Accedemos a nuestro panel de Blogger a través de Blogger in Draft.

[2] Una vez allí, pinchamos en la pestaña "Configuración" de nuestro menú y después en "comentarios".

[3] Veremos entonces una nueva opción que dice "Ubicación del formulario de comentarios", ahí marcaremos "Entrada incrustada a continuación":

[4] Si todo ha ido según lo previsto, el formulario debería verse ya debajo de los comentarios de cada entrada:

El formulario será así de sencillo de implementar en los blogs de nueva creación o en los blogs que no hayan personalizado ciertos aspectos de la plantilla.

Si hemos modificado estas partes del código de la plantilla como es mi caso, entonces seguramente aunque habilitemos la opción para mostrar el formulario, este no funcionará.

Como podéis comprobar acabo de implementarlo en El Escaparate y, de momento, parece funcionar correctamente sin necesidad de hacer grandes cambios en el código de la plantilla.

La forma de implementarlo sin necesidad de cambios demasiado complicados, la he encontrado esta tarde guiándome por Blogger Buster, y digo guiándome porque mi plantilla está tan modificada que el código que Amanda nos muestra apenas coincidía con el mio.

Aún así y tomando las debidas precauciones (guardar una copia de la plantilla es imprescindible) no pude resistirme a probarlo.

Os explico como Amanda ha logrado incluir el formulario en su plantilla previamente modificada:

[1] En primer lugar es imprescindible marcar la opción en "Configuración - Comentarios" que ya expliqué al comienzo de esta entrada.

[2]Una vez habilitada la opción y comprobado que el formulario no aparece en nuestro blog, vamos a la parte de "Edición html" de nuestro panel y marcamos la casilla para expandir las plantillas de artilugios.

Tendremos que localizar este código:

<p class='comment-footer'> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </p> </b:if>

[3] Una vez localizado tendremos que cambiarlo por este otro:

<p class='comment-footer'> <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> </p></b:if>

Notas: Tened en cuenta lo que ya os comentaba antes:

el código que Amanda nos indica no estará igual en una plantilla con modificaciones previas pero si aún así decidís probarlo como hice yo, no os será demasiado difícil encontrar el código correcto si os fijáis bien e incluso si recordáis alguno de los cambios que hicisteis antes en esa zona.

Si habéis incluido la forma de mostrar el antiguo formulario de Blogger debajo de las entradas, tendréis que volver a la configuración original antes de implementar el formulario nuevo.

Por si os sirve de referencia os diré que yo había incluido ahí la imagen con un lápiz que sustituía al "Publicar un comentario en la entrada" y que mi código se veía así:

<p class='comment-footer'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><img alt='Enlace para comentar' src='http://2.bp.blogspot.com/_sbaQpFxeL1Q/R_4XR7UekbI/AAAAAAAAAJU/rhqHxL2mMLI/s400/

nombrenndn7.jpg' title='Deja tu comentario'/></a> </p> </b:if>

Una vez incluido el nuevo formulario en el blog podemos hacerle algunas mejoras de diseño.

martes, 19 de mayo de 2009

Adicionar espacios extra en la zona de entradas

Entrada sacada de El Escaparate de Rosa

Vamos a ver paso a paso, como incluir una nueva sección sobre y debajo de las entradas dividida en dos columnas. El resultado será algo como esto:

Como siempre habrá quien quiera añadir los nuevos espacios solo en la parte de arriba o solo en la de abajo, vamos a ver como hacerlo por separado:

[1] Una vez en nuestro panel de Blogger vamos a la pestaña de Diseño y si tenemos algún gadget añadido sobre o debajo de la zona de entradas, lo retiramos para evitar problemas a la hora de modificar el código, más tarde podemos volver a colocarlos en su sitio de nuevo.

[2] Guardamos cambios.

[3] Vamos a la pestaña de Edición HTML y localizamos el código que pertenece a la sección de las entradas:

<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>

[4] Colocamos el código necesario para la nueva sección de dos columnas en la parte de abajo de las entradas.

Lo haremos en el código anterior de esta manera (el código que hay que añadir está destacado en color verde):

<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 id='main-footer-contenedor'>
<div id='main2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col1' preferred='yes' style='float:left;'/>
</div>
<div id='main3' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
</div>

[5] Guardamos los cambios y comprobamos el resultado en la parte de Diseño del panel.

[6] Si lo que queremos es una nueva sección de dos columnas en la parte superior de las entradas, volvemos a situarnos en el código de la plantilla que pertenece a las entradas ( paso [3] ) y añadimos el código necesario (destacado en colo rojo):

<div id='main-wrapper'>

<div id='main-top-contenedor'>

<div id='main-top1' style='width: 50%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top1' preferred='yes' style='float:left;'/>

</div>

<div id='main-top2' style='width: 50%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top2' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div>

[7] Guardamos los cambios y comprobamos el resultado en la parte de Diseño del panel.

miércoles, 6 de mayo de 2009

News: Starting Your First Blog? 29 Tips, Tutorials and Resources for New Bloggers

Link Original: Problogger

Are you starting your first blog? Looking for some tips and advice for new bloggers?

I just received a tweet from @MillerMosaicLLC asking for some links to posts about starting a blog so I thought instead of just replying to her I’d compile the list here as a post for new bloggers. There are literally thousands of posts in the ProBlogger archives for bloggers starting out - but these would be a good place to start.

Posts on Starting a Blog

There is a lot to think about before and during the process of starting your first blog. These tips and tutorials attempt to give you some questions to think about and some advice on how to practically move forward:

Writing Blog Content

At the core of every successful blog is great content - without it starting a new blog is almost pointless. How you define ‘great’ content will vary from person to person but I generally put it down to content that is unique and useful. Here are a few other tutorials and tips on creating this type of content on your first blog.

Blog Promotion/Finding Readers

When starting a your first blog one of the most challenging things is that it is hard to find readers. We all want to be read - here are a few tips on how to make this happen and then how to keep those new readers:

Making Money from Blogs

Not all bloggers choose to try to make money from their blogs (I think this is a good thing). But if you’re one that does want to make money from your new blog then here are a few tips and articles for you to start with:

domingo, 5 de febrero de 2023

martes, 20 de noviembre de 2018

domingo, 18 de noviembre de 2018

martes, 30 de octubre de 2018

jueves, 9 de febrero de 2017

Sitemap XML para Blogger

martes, 18 de octubre de 2016

martes, 24 de marzo de 2015

domingo, 28 de abril de 2013

Feed del sitio completo:

Feed de comentarios exclusivamente:

Feed de sitio específico de etiquetas:

Feed de comentario de entrada individual:

miércoles, 21 de septiembre de 2011

viernes, 24 de septiembre de 2010

martes, 26 de enero de 2010

jueves, 28 de mayo de 2009

miércoles, 27 de mayo de 2009

martes, 19 de mayo de 2009

miércoles, 6 de mayo de 2009

Posts on Starting a Blog

Writing Blog Content

Blog Promotion/Finding Readers

Making Money from Blogs

Further Reading and Resources on Starting a New Blog