A pedido de Alexis creamos esta tutorial para explicar los paso para agregar la opción de seguir en facebook en tu blog tal como esta en el nuestro.
Pasos
1. Guardar la siguiente imagen o una similar de las tantas que hay por la web
2. ir en tu blogger a Diseño / elementos de página /
3. Añadir un gadget/ Imagen
4. en el cuadro donde dice "enlace" completar con la dirección de su página en facebook
5. Subir la imagen previamente descargada y guardar los cambios
Mostrando entradas con la etiqueta diseño blogger. Mostrar todas las entradas
Mostrando entradas con la etiqueta diseño blogger. Mostrar todas las entradas
martes, 20 de abril de 2010
lunes, 22 de febrero de 2010
Ocultar el título de los gadgets
Cuando agregamos un gadgets y le ponemos un título, por defecto blogger lo muestra cuando uno lo visualiza con el navegador.
Pero en muchos casos uno quiere que no se vea el título Ej: uno copia el código de google analytics para llevar estadísticas y lo agrega en la plantilla como un gadget, este gadget es para uso de los administradores del blog por lo tanto no tiene sentido que los visitantes vean un título.
Ahora para este caso y muchos otros en que no queremos ver el título del gadget doy dos soluciónes
1. Darle un título al gadget , luego ir a Edición de HTML y tildar la opción "Expandir plantillas de artilugios"
2. Buscar un código similar al siguiente en donde en title este el título que le diste al gadget
3. Agregar al principio del código en rojo
4. Agregar al final del código en rojo
Si más adelante quieres mostrar el código alcanza con sacar lo que agregaste
Pero en muchos casos uno quiere que no se vea el título Ej: uno copia el código de google analytics para llevar estadísticas y lo agrega en la plantilla como un gadget, este gadget es para uso de los administradores del blog por lo tanto no tiene sentido que los visitantes vean un título.
Ahora para este caso y muchos otros en que no queremos ver el título del gadget doy dos soluciónes
- La primera es optar por no poner ningun título es decir dejar el campo de título en blanco. Está solución presenta el inconveniente que no nos permite identificar a los administradores los gadget en la opción de elementos de gadget
- La segunda es un poquitito más compleja pero mucho mejor porque permite ver el nombre del gadget en los elementos de página. Consiste en lo siguiente:
1. Darle un título al gadget , luego ir a Edición de HTML y tildar la opción "Expandir plantillas de artilugios"
2. Buscar un código similar al siguiente en donde en title este el título que le diste al gadget
<b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>3. Agregar al principio del código en rojo
<!4. Agregar al final del código en rojo
-->
Si más adelante quieres mostrar el código alcanza con sacar lo que agregaste
Etiquetas:
diseño blogger,
diseño web,
Tutoriales
miércoles, 17 de febrero de 2010
Paginá tu blog
Cuando uno empieza a tener muchas entradas en su blog se vuelve fundamental el organizar de forma clara y sencilla la información de un blog para una mejor navegación por parte de los lectores. Un elemento que colabora con esto es paginar el blog. Para los que no saben aún que es esto miren la imagen y se darán cuenta enseguida.
1. Primero inicias sesión en Blogger y luego vas a diseño-> edición de HTML
No olvidar descargar la plantilla como respaldo
2. Luego buscas la siguiente etiqueta en la plantilla
3. Inmediatamente después pega este código
4. Ahora hay que darle formato, para eso hay que buscar la siguiente etiqueta
7. Guardar los cambios
Como paginar tu blog
1. Primero inicias sesión en Blogger y luego vas a diseño-> edición de HTML
No olvidar descargar la plantilla como respaldo
2. Luego buscas la siguiente etiqueta en la plantilla
</body>3. Inmediatamente después pega este código
<!--PAGINATION-STARTS-->
<script type='text/javascript'>
var pageCount=10;
var displayPageNum=3;
var upPageWord ='Anterior';
var downPageWord ='Siguiente';
</script>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination1.js' type='text/javascript'/>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination2.js' type='text/javascript'/>
<!--PAGINATION-STOPS-->var pageCount=10 es el número de entradas por página y se puede variar a conveniencia
var displayPageNum=3 es el número de páginas que se mostrarán en el botón4. Ahora hay que darle formato, para eso hay que buscar la siguiente etiqueta
</head>5. Antes de la etiqueta pegar el siguiente código
<!--PAGINATION-STARTS-->
<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination2.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>
.showpage a:hover {
color: #FFFFFF;
background-color: #92416C;
}
// ESTILO DE DEL SELECTOR
.showpagePoint {
color: #FFFFFF;
background: #92416C;
border: 1px solid #92416C;
}
// ESTILO DE LOS NÚMEROS
.showpageNum a:link,.showpage a:link {
color: #000000 !important;
background-color: #92416C;
border: 1px solid #92416C;
}
// ESTILO HOVER DE LOS NÚMEROS
.showpageNum a:hover {
color: #FFFFFF !important;
background: #92416C !important;
border: 1px solid #92416C;
}
// ESTILO DEL BOTÓN DE PREV Y NEXT
.showpageArea a {
border: 1px solid #92416C;
}
// ESTILO HOVER DE LOS BOTONES DE PREV Y NEXT
.showpageArea a:hover {
border: 1px solid #92416C;
color: #FFFFFF !important;
background: #92416C !important;
}
</style>
<!--PAGINATION-STOPS-http://bloggerstop.net-->el número #92416C es el color de fondo de los recuadros en sistema hexadecimal y se puede cambiar y los mismo con el resto de los colores
7. Guardar los cambios
Etiquetas:
diseño blogger,
diseño web,
Tutoriales
viernes, 1 de enero de 2010
Resaltar los comentarios del autor del blog
Para los que quiera resaltar los comentarios del autor del blog de modo que sea de rápida identificación sigan los siguientes pasos.
1. Inicien sesión en blogger, vayan a diseño --> edición de HTML
2. descarguen su plantilla (sirve como respaldo)
3. Activen la opción Expandir plantillas de artilugios
4. En su plantilla peguen el siguiente código antes de
5. luego buscan el siguiente código
No es seguro de que en todas las plantillas esta parte sea igual, alcanza con que empiece y termine igual
6. Inmediatamente después pegan este
7. Buscan esto:
y seguido pegan:
8. Guardan la plantilla y listo!
1. Inicien sesión en blogger, vayan a diseño --> edición de HTML
2. descarguen su plantilla (sirve como respaldo)
3. Activen la opción Expandir plantillas de artilugios
4. En su plantilla peguen el siguiente código antes de
]]></b:skin>
.comment-body-author {
background: #E6E6E6; /*color del fondo*/
color: #000; /* color del texto*/
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;/*borde*/
margin:0;
padding:0 0 0 20px; /* posición*/
}
5. luego buscan el siguiente código
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
No es seguro de que en todas las plantillas esta parte sea igual, alcanza con que empiece y termine igual
6. Inmediatamente después pegan este
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
7. Buscan esto:
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
y seguido pegan:
</b:if>
8. Guardan la plantilla y listo!
jueves, 31 de diciembre de 2009
Colección de sitios útiles para un blogger
Les dejo un resumen de sitios útiles para cualquiera que tiene un sitio web o un blog, hay de todo tipo y todos fueron publicados anteriormente por nosotros y son gratuitos
Sitios útiles para...
Permite conocer datos sobre las páginas que te indexó google, el uso del atributo alt, las etiquetas h1 y mucho más
Sitios útiles para...
verificar enlaces rotos
Broken link checker muestra todos los enlaces que tiene la web y su estado.verificar la velocidad de carga de tu página
Pingdom Tools Nos indica detalladamente cuanto demora en cargar cada uno de los elementos que componen tu páginaanalizar como está optimizado tu sitio
http://websitegrader.comPermite conocer datos sobre las páginas que te indexó google, el uso del atributo alt, las etiquetas h1 y mucho más
publicar cualquier contenido
Embedit.in Publica pdf, documentos de word, excel, de power point, etcconocer la velocidad de nuestra conexión a internet
www.pingtest.net Podrás ver si tu proveedor de internet es bueno o nodescargar fuentes de letras
www.fontreactor.com para los que están aburridos de arial, time new roman y todas esas que vienen con tu sistema operativoconocer como está funcionamiento tu blog
http://www.ismyblogworking.comcrear una serch tab
www.pax.comcrear un formulario
www.emailmeform.com muy fácil de hacer y es totalmente personalizablecrear un foro
foroactivo.com,crear un contador de visitas
flagcounter existen muchas alternativas para esto, pero flagcounter nos permite conocer los visitantes por paíssubir una imagen y después utilizarla en nuestro sitio
www.imageshack.us/Agregar una sala chat
cboxLlevar estadisticas sobre el sitio web
google analyticsSubir archivos (no requiere registrarse)
http://depositfiles.com/es/Colocar un slideshow
www.imageloop.com
Etiquetas:
diseño blogger,
diseño web,
servicios online
miércoles, 30 de diciembre de 2009
¿Cómo redireccionar un blog?
Hace poco hablaba con mi hermano sobre las formas de redireccionar un blog y cuales son las que se consideran correctas.
Cuando digo redireccionar me refiero a que al entrar a un blog este te dirige a otro sitio de forma automática.
Una forma para hacer esto es agregar una linea de código en la plantilla con una etiquta meta. Veámoslo
Primero un ejemplo para que vean como funciona la cosa
Vayan a http://Google.BlogSpot.com y este los llevará a http://GoogleBlog.BlogSpot.com de forma automática. Noten como esto fue hecho en un propio blog de google para los que piensan que esto esta penalizado por el buscador, algo que no es así.
1.Iniciamos sesión en blogger, vamos a diseño/edición de html en el blog que queremos redireccionar
2. Buscamos el siguiente código
3. Justo después de este pegamos el siguiente
en donde dice elblogdedestiono se debe rempalzar por el blog al que será redireccionado
el 3 es el tiempo en segundos que demorará en hacerlo
Algunas razones para redireccionar de esta manera
-Tenemos dos blogs y queremos que todo el tráfico vaya hacia uno
-Nuestra página esta temporalmente en construcción, modificandose o con algún error y queremos mandar a nuestros visitantes a otro lado
-Cambiamos la dirección del blog
En BloggerStop.net (blog en ingles) encontré como redireccionar partes de un blog.
Sustituir por la entrada que se quiere redireccionar y por la entrada final
Cuando digo redireccionar me refiero a que al entrar a un blog este te dirige a otro sitio de forma automática.
Una forma para hacer esto es agregar una linea de código en la plantilla con una etiquta meta. Veámoslo
como redireccionar un blog
Primero un ejemplo para que vean como funciona la cosa
Vayan a http://Google.BlogSpot.com y este los llevará a http://GoogleBlog.BlogSpot.com de forma automática. Noten como esto fue hecho en un propio blog de google para los que piensan que esto esta penalizado por el buscador, algo que no es así.
1.Iniciamos sesión en blogger, vamos a diseño/edición de html en el blog que queremos redireccionar
2. Buscamos el siguiente código
<head>
3. Justo después de este pegamos el siguiente
<meta http-equiv="refresh" content="3; url=http://elblogdedestino/" />
en donde dice elblogdedestiono se debe rempalzar por el blog al que será redireccionado
el 3 es el tiempo en segundos que demorará en hacerlo
Algunas razones para redireccionar de esta manera
-Tenemos dos blogs y queremos que todo el tráfico vaya hacia uno
-Nuestra página esta temporalmente en construcción, modificandose o con algún error y queremos mandar a nuestros visitantes a otro lado
-Cambiamos la dirección del blog
En BloggerStop.net (blog en ingles) encontré como redireccionar partes de un blog.
Redireccionar todo un blog menos una entrada
Si quieres hacer esto debes pegar este código
<b:if cond='data:blog.url != "SPECIFIC_BLOG-POST_URL"'>
<meta http-equiv="refresh" content="3; url=http://blogdestino/" />
</b:if>
Redireccionar una entrada hacia otra entrada
Pegar este código y
<b:if cond='data:blog.url == "entradaaredireccionar"'>
<meta http-equiv="refresh" content="3; url=entrada de destino/" />
</b:if>
Sustituir por la entrada que se quiere redireccionar y por la entrada final
Etiquetas:
diseño blogger,
diseño grafico,
Tutoriales
martes, 29 de diciembre de 2009
¿Cómo hacer para que cada etiqueta tenga un feed propio?
Un mismo blog puede tratar sobre muchos temas sin embargo a muchos de los visitantes les puede interesar un tema en particular de los tantos que tiene, en nuestro caso podrían ser que les interese las tutoriales, nuestros artículos de opinión o los servicios que recomendamos.
En entradas anteriores comentamos sobre los feeds y la importancia que tiene posibilitar a los visitiantes de suscribirse a nuestras publicaciones. Pero cuando uno se suscribe a un sitio recibirá toda la información de este y como escribí antes puede que solo le interese un tema específico de él.
La solución para esto es crear un feed propio para cada etiqueta. Entonces si la información esta correctamente agrupada el visitante elegirá los temas a los que le interese estar subscripto
1. Ve a edición de html en tu blogger
2. Selecciona Expandir plantillas de artilugios
3. Busca el siguiente código
4. Justo antes de ese pega el siguiente
5. Guarda lo cambios para finalizar
En entradas anteriores comentamos sobre los feeds y la importancia que tiene posibilitar a los visitiantes de suscribirse a nuestras publicaciones. Pero cuando uno se suscribe a un sitio recibirá toda la información de este y como escribí antes puede que solo le interese un tema específico de él.
La solución para esto es crear un feed propio para cada etiqueta. Entonces si la información esta correctamente agrupada el visitante elegirá los temas a los que le interese estar subscripto
Como hacer el feed por etiquetas
1. Ve a edición de html en tu blogger
2. Selecciona Expandir plantillas de artilugios
3. Busca el siguiente código
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>4. Justo antes de ese pega el siguiente
<a expr:href='data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name'><img src='http://i284.photobucket.com/albums/ll35/observadorweb/rss.png' style='float: right; padding-right: 10px;'/></a>
5. Guarda lo cambios para finalizar
Etiquetas:
diseño blogger,
diseño grafico,
Tutoriales
viernes, 18 de diciembre de 2009
15 tutoriales para blogs nuevos
Ya se termina el año y que mejor oportunidad que esta para hacer una recopilación de las 15 tutoriales más útilies y básicas que todo blogger que recién comienza necesitaría leer
Conocer fácilmente cada parte de la plantilla de tu blog
Publica cualquier tipo de contenido en tu blog
¿Cómo hacer que mi página aparezca en los resultados de Google
Agregar un formulario a tu blog o página web
¿Cómo colocar una imagen de cabecera en un blog?
¿Cómo crear un foro?
¿Cómo crear un menu con iconos para tu blog?
colocar un buen Slideshow en tu webMarquesina Sencilla en HTML
Contador de visitas por país con Flag Counter
Agregar chat a un blog con Cbox
Agregar Música al blog o página con eSnips
Agregar código javascript o HTML en Blogger
Crear un contador de visitas con 99counters
Quitar Navbar (Barra de blogger)
¿Cómo coloco un buscador en mi sitio web?
Conocer fácilmente cada parte de la plantilla de tu blog
Publica cualquier tipo de contenido en tu blog
¿Cómo hacer que mi página aparezca en los resultados de Google
Agregar un formulario a tu blog o página web
¿Cómo colocar una imagen de cabecera en un blog?
¿Cómo crear un foro?
¿Cómo crear un menu con iconos para tu blog?
colocar un buen Slideshow en tu webMarquesina Sencilla en HTML
Contador de visitas por país con Flag Counter
Agregar chat a un blog con Cbox
Agregar Música al blog o página con eSnips
Agregar código javascript o HTML en Blogger
Crear un contador de visitas con 99counters
Quitar Navbar (Barra de blogger)
¿Cómo coloco un buscador en mi sitio web?
Etiquetas:
diseño blogger,
diseño grafico,
Empezar con tu blogger,
Tutoriales
viernes, 11 de diciembre de 2009
Los blogs también tienen quien los analice
Analisis de mi blog
Ayer publiqué una entrada recomendando un sitio web que analizaba el tuyo proporiconando muchos datos interesantes. Pues bien ahora les dejo uno específico para los blogs del mismo estilo que el primero. Utilizar ambos es una muy buena idea
La dirección es
http://bloggrader.com/
Si todaviá no probarón el anterior
Analisis de tu web o blog al detalle
También te recomiendo leer
Llevar Estadisticas web con Google Analytics
Etiquetas:
diseño blogger,
servicios online
jueves, 10 de diciembre de 2009
Analisis de tu web o blog al detalle
Si queres saber al dedillo como le va tu blog o tu web, que cosas necesitarias mejorar, como le va a los que tienen sitios similares al tuyo, que cosas deberiás hacer que no estas haciendo, te recomiendo visitar la web http://websitegrader.com
De forma gratuita y sencilla te proporciona muchisimos datos que esta bueno conocer. De todas las paginas que conozco esta es la mejor .
Una última recomendación no creas que porque tienes google analytics esta página no te va a servir porque es un grave error. Pruébala!
Etiquetas:
diseño blogger,
Empezar con tu blogger,
servicios online
lunes, 7 de diciembre de 2009
Las tendencias de posicionamiento ya no son las mismas
Los hermanoscarlos no somos especialistas en posicionamiento pero si cuando tenemos un tiempito nos gusta leer e informarnos sobre el mismo. Hoy por hoy cuando en el mundo existen millones de páginas y donde muchas veces los contenidos son semejantes, si uno quiere "existir" en la red tiene que estar bien posicionado en los buscadores, esto no es ninguna novedad.
Ahora bien podrían decirse que existen dos maneras de posicionar un sitio. La manera tradicional en la cual se logra con el manejo de palabras claves, optimización del sitio, etc etc. Y después tenemos las maneras más modernas que es propia de la web 2.0
La web ha evolucionado con el transcurso del tiempo desde una red donde solo se presentaba contenido textual y unilateral, a una red mucho más interactiva y multimedia. Las redes sociales, los portales de video, radios online abundan en internet.
Estos cambios también generan nuevas oportunidades y formas de posicionamiento. Quien quiera tener una ubicación de privilegio en los buscadores debe aprovechar estas tendencias cuanto antes si aún no lo hace.
Creo que cualquier sitio hoy en dia debería seguir estos tips como mínimo:
Ahora bien podrían decirse que existen dos maneras de posicionar un sitio. La manera tradicional en la cual se logra con el manejo de palabras claves, optimización del sitio, etc etc. Y después tenemos las maneras más modernas que es propia de la web 2.0
La web ha evolucionado con el transcurso del tiempo desde una red donde solo se presentaba contenido textual y unilateral, a una red mucho más interactiva y multimedia. Las redes sociales, los portales de video, radios online abundan en internet.
Estos cambios también generan nuevas oportunidades y formas de posicionamiento. Quien quiera tener una ubicación de privilegio en los buscadores debe aprovechar estas tendencias cuanto antes si aún no lo hace.
Creo que cualquier sitio hoy en dia debería seguir estos tips como mínimo:
Tips de posicionamiento aprovechando la web 2.0
- Tener una cuenta de twitter y hacer un uso adecuado de la misma
- Crear una página en Facebook
- Brindar a los usuarios la posibilidad de seguirlos por medio de RSS
- Generar contenido en videos y promocionarlos en sitios como youtube, yahoo videos, vimeo, etc
- Permitir que los visitantes compartan sus opiniones
Etiquetas:
diseño blogger,
Empezar con tu blogger,
Posicionamiento
jueves, 26 de noviembre de 2009
Conocer fácilmente cada parte de la plantilla de un blog
En esta entrada voy a presentar una solución para conocer cada una de las partes que compone una plantilla.
Header, sidebar, footer son partes que se repiten en casi todas las plantillas, pero muchas veces hay partes que no son tan fáciles de identificar. Lo que propongo hacer es lo siguiente:
Tomar una hoja y anotar 30 o 40 colores en código hexadecimal ayudandose con un programa como Photoshop o Dreamweaver y darle un nombre a cada color. Asi por ejemplo: #AE3DD2 Verde Oscuro. Un consejo que se tomen colores diversos y bien diferenciables uno de otro ya que esto nos será de provecho en el siguiente paso.
Luego de preparada la lista vamos a la plantilla de nuestro blog y primero que nada la descargamos (esto es obligatorio) porque le haremos algunas modificaciones.
Cuando ya este la plantilla descargada lo que hay que hacer es: cada vez que encontremos un color en formato hexadecimal cambiarlo por uno de los de nuestra lista y anotar en ella junto al nombre del color a que se le puso el mismo
Así por ejemplo si en la plantilla aparece esto
cuerpo{ background:#AAAAAA}
yo cambio el color por verde oscuro quedando asi
cuerpo{ background:#AE3DD2}
y luego en mi lista de colores escribo verde oscuro=cuerpo
Una vez terminado el cambio de todo los colores hay que guardar los cambios de la plantilla y visualizarla. Nuestra plantilla tendrá mútliples colores que nos permitirán conocer todas las partes que conforman la plantilla asi como el nombre de cada una de ellas.
Después de tener una idea clara de la misma (sería bueno hacer un boceto) cargamos la plantilla descargada para que todo vuelva a como estaba antes
Si te gustó también te invito a leer:
¿Cómo colocar una imagen de cabecera en un blog?
¿Cómo cambiar la plantilla del blog?
Header, sidebar, footer son partes que se repiten en casi todas las plantillas, pero muchas veces hay partes que no son tan fáciles de identificar. Lo que propongo hacer es lo siguiente:
Tomar una hoja y anotar 30 o 40 colores en código hexadecimal ayudandose con un programa como Photoshop o Dreamweaver y darle un nombre a cada color. Asi por ejemplo: #AE3DD2 Verde Oscuro. Un consejo que se tomen colores diversos y bien diferenciables uno de otro ya que esto nos será de provecho en el siguiente paso.
Luego de preparada la lista vamos a la plantilla de nuestro blog y primero que nada la descargamos (esto es obligatorio) porque le haremos algunas modificaciones.
Cuando ya este la plantilla descargada lo que hay que hacer es: cada vez que encontremos un color en formato hexadecimal cambiarlo por uno de los de nuestra lista y anotar en ella junto al nombre del color a que se le puso el mismo
Así por ejemplo si en la plantilla aparece esto
cuerpo{ background:#AAAAAA}
yo cambio el color por verde oscuro quedando asi
cuerpo{ background:#AE3DD2}
y luego en mi lista de colores escribo verde oscuro=cuerpo
Una vez terminado el cambio de todo los colores hay que guardar los cambios de la plantilla y visualizarla. Nuestra plantilla tendrá mútliples colores que nos permitirán conocer todas las partes que conforman la plantilla asi como el nombre de cada una de ellas.
Después de tener una idea clara de la misma (sería bueno hacer un boceto) cargamos la plantilla descargada para que todo vuelva a como estaba antes
Si te gustó también te invito a leer:
¿Cómo colocar una imagen de cabecera en un blog?
¿Cómo cambiar la plantilla del blog?
Etiquetas:
diseño blogger,
diseño web,
Empezar con tu blogger,
Plantilla,
Tutoriales
miércoles, 25 de noviembre de 2009
Redimensionar de forma manual los videos de youtube
Es un recurso muy común publicar videos de youtube sin embargo muchas veces las dimensiones que tiene el objeto video no son las que sirven cuando lo publicamos en un blog o una página
Puede ocurrir que el video se escape de la zona de publicación por ejemplo.
Para solucionarlo alcanza con editar el código del objeto, reudiciendo o aumentando los pixeles.
Aquí les dejo una demostración
Tomaré un video cualquiera de youtube en este caso elegí el títulado "La historia de Internet en 8 minutos (subtítulos en Español)
Su código para visualizarlos en otra web es:
y el video se ve así
Pero como yo deseo que se vea más pequeño tendré que cambiar el width(ancho) y el height(alto)
Para eso busco los valores width="425" y heigh="344" y los remplazo por el número de pixeles que quiero que tengan. Para mantener la proporción se recomienod que restemos o sumemos el mismo número de pixeles al widh y al height. Para este ejemplo restaré 200 a cada uno.
Asi que el codigo se verá así:
y el video queda de este tamaño
Puede ocurrir que el video se escape de la zona de publicación por ejemplo.
Para solucionarlo alcanza con editar el código del objeto, reudiciendo o aumentando los pixeles.
Aquí les dejo una demostración
Tomaré un video cualquiera de youtube en este caso elegí el títulado "La historia de Internet en 8 minutos (subtítulos en Español)
Su código para visualizarlos en otra web es:
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/YPc3ghd8Kas&hl=es_ES&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YPc3ghd8Kas&hl=es_ES&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
y el video se ve así
Pero como yo deseo que se vea más pequeño tendré que cambiar el width(ancho) y el height(alto)
Para eso busco los valores width="425" y heigh="344" y los remplazo por el número de pixeles que quiero que tengan. Para mantener la proporción se recomienod que restemos o sumemos el mismo número de pixeles al widh y al height. Para este ejemplo restaré 200 a cada uno.
Asi que el codigo se verá así:
<object width="225" height="144"><param name="movie" value="http://www.youtube.com/v/YPc3ghd8Kas&hl=es_ES&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YPc3ghd8Kas&hl=es_ES&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="225" height="144"></embed></object>
y el video queda de este tamaño
Etiquetas:
diseño blogger,
diseño web,
Tutoriales,
videos
Publica cualquier tipo de contenido en tu blog con embedit.in
Entre los archivos se encuentran:
documentos de: word, excel, powerPoint
archivos de texto: txt, rtf, csv
vectores gráficos: api, eps, ps
códigos: html, sql, js
imágenes: gif, jpeg, png, tiff, bmp, psd
también páginas web y url's
Publicar es muy fácil, sigue estos pasos:
1. Ve a la página
2. Da clic en "select Files..."
3. Elige el archivo
4. Copia el código que aparece en el recuadro y pégalo en una entrado en tu blog
También te puede interesar
Agregar Música al blog o página con eSnipsAgregar código javascript o HTML en Blogger
Subir archivos doc o pdf al blog con Scribd
Crear contador de visitas con Histats.com
Etiquetas:
diseño blogger,
Empezar con tu blogger,
servicios online,
Tutoriales
miércoles, 4 de noviembre de 2009
¿Cómo colocar una imagen panorámica o fotografía panorámica en tu web o blog?
Cargar fotografías panorámicas en un sitio web
Todos hemos visto el buen efecto que tiene entrar en una web y ver una imagen panorámica... Pues se me ocurrió que deberíamos saber como colocar una imagen panorámica en nuestro blog.Lo primero a tener en cuenta es saber como hacer una imagen panóricamica. Para quienes manejan photoshop este puede ser una buena opción, para quienes prefieren un programa más sencillo y fácil para crear panorámicas, les digo que hay varios en la web, a mí me gustó este: (que además es free o gratis)
Microsoft ICE
Lo puden descargar en varios lugares, yo aquí les dejo una opción.
El proceso es muy sencillo luego de sacar varias fotografías de todos los planos de nuestra paisaje o lugar del que se quiere crear la panorámica, se abren dichos archicos de las distintas imágenes tomdas con este programa y él mismo se encarga de unirlas todas, luego realizamos el recorte deseado y listo , ya tienen la panorámica...
Ahora una vez que tenemos nuestra panorámica la pregunta es : ¿Cómo cargamos o subimos la fotografía panorámica el sitio web?
Encontre varías opciones, algunas más complejas como:
El Mundo de las panorámicas
con el beneficio de ser en español
Y otra más sencilla e intuitiva pero en inglés (no teman es fácil)
www.clevr.com
Una vez realizado el registro te permite subir tus fotos panorámicas y te da un código para poderlas pegar en tu web...
(Atención: cuando la intenten pegar un post o publicación de vuestro blog les dara que no acepta la etiqueta embed no hagan caso la publica igual y se ve muy bien)
Aquí les dejo el ejemplo:
Espero les guste y les sirva...
De todos modos vamos a seguir investigando sobre el tema pues hay mucho más al respecto por descubrir...
Astillero Gijón
Etiquetas:
diseño blogger,
diseño web,
recursos para tu web,
servicios online
viernes, 30 de octubre de 2009
Agregar nuevos formatos o fuentes de letras
Como hacer para agregar un nuevo tipo de letra
Como agregar fuentes
Es muy sencillo, aquí dejo los pasos:
1. Clic en Inicio y, a continuación, haga clic en Ejecutar.
2. Escriba %windir%\fonts y haga clic en Aceptar.
3. En el menú Archivo, haga clic en Instalar nueva fuente.
4. Se abrirá una carpeta que contiene todo las fuentes actuales en ella pegar el archivo de la nueva fuente bajada
7. Haga clic en Aceptar.
8. Listo
A continuación dejo un muy buen sitio donde se pueden descargar fácilmente varias fuentes:
www.fontreactor.com
Etiquetas:
diseño blogger,
diseño web,
servicios online,
Tutoriales
jueves, 29 de octubre de 2009
¿Cómo hacer que mi página aparezca en los resultados de Google?
Todo aquel que tenga una página web o un blog y quiera darse conocer no puede permitirse el lujo de no aparecer en los resultados de Google ¿De que otra forma pues las personas llegarían al sitio? Seguro hay otras formas pero estar indexado en un buscador como Google es de vital importancia.
Si quieres aparecer en la lista de resultados, necesitas hacer un par de cositas para que Google te encuentre. Puede ser que Google ya te haya encontrado a ti primero, si aún no sabes como es tu situación o tienes dudas te recomiendo este truco, asi podrás saber si su sitio aparece o no, en caso que no aparezca tranquilo, aquí te explicare como lograr que aparezcas.
Para sacarte la dudas lo que debes hacer es poner en la barra de busquedas de Google los siguiente: site:midirecciónweb y apretar enter, así de sencillo "midirecciónweb" es la dirección completa de tu sitio (no no necesitas agregar http://) si tu página se ecuentra ya indexado aparecerán resultados, te recomiendo también que pruebes algunas variantes como tu página pero sin www adelante y cosas así porque puede que indexado de otra forma
Otra manera si tienes un blog es ir a http://www.ismyblogworking.com escribir tu dirección y el sitio se encargará de proporcionarte esa información tal como explico en la entrada Conocé si tu blog funciona bien
Muy bien si descubriste que tu sitio no esta indexado has lo siguiente.

1. Debes ir a http://www.google.com/intl/es/addurl.html
2. Una vez allí completas los datos que te piden. En el campo URL escribe la dirección de la página principal de tu sitio, también puedes agregar un comentario si lo deseas.
Estos son todos los pasos, pero sin embargo de esta forma Google puede demorar meses en indexarte, incluso puede que ni lo hagan como ellos mismo te dicen en su página. Pero no te precupes lee los consejos que te dejo a continuación y te aseguro que en cuestión de horas tu sitio estará entre los resultados del gigante de la web Google
Antes que nada bien vale una explicación de como funciona Google así tu mismo también podrás entender como agilizar el proceso.
Google utiliza unos robots llamados googlebots que son como muchos dicen una especie de arañitas que recorren la red recogiendo datos de las páginas. Estos robots cuando se encuentran con un enlace lo siguen hasta donde los lleven y nuevamente empiezan a recorrer la nueva página hasta que se encuentren con otro enlace que los lleve a otro lugar y asi sucesivamente. Lo fantástico de esto es que cuando recorran una página que tenga un enlace hacia la tuya, este los llevará y así te encontran.
Ya he explicado brevemente como funciona un buscador, ahora paso a las recomendaciones
Leer más
Si quieres aparecer en la lista de resultados, necesitas hacer un par de cositas para que Google te encuentre. Puede ser que Google ya te haya encontrado a ti primero, si aún no sabes como es tu situación o tienes dudas te recomiendo este truco, asi podrás saber si su sitio aparece o no, en caso que no aparezca tranquilo, aquí te explicare como lograr que aparezcas.
Para sacarte la dudas lo que debes hacer es poner en la barra de busquedas de Google los siguiente: site:midirecciónweb y apretar enter, así de sencillo "midirecciónweb" es la dirección completa de tu sitio (no no necesitas agregar http://) si tu página se ecuentra ya indexado aparecerán resultados, te recomiendo también que pruebes algunas variantes como tu página pero sin www adelante y cosas así porque puede que indexado de otra forma
Otra manera si tienes un blog es ir a http://www.ismyblogworking.com escribir tu dirección y el sitio se encargará de proporcionarte esa información tal como explico en la entrada Conocé si tu blog funciona bien
Muy bien si descubriste que tu sitio no esta indexado has lo siguiente.
Pasos para indexar tu página en Google
1. Debes ir a http://www.google.com/intl/es/addurl.html
2. Una vez allí completas los datos que te piden. En el campo URL escribe la dirección de la página principal de tu sitio, también puedes agregar un comentario si lo deseas.
Estos son todos los pasos, pero sin embargo de esta forma Google puede demorar meses en indexarte, incluso puede que ni lo hagan como ellos mismo te dicen en su página. Pero no te precupes lee los consejos que te dejo a continuación y te aseguro que en cuestión de horas tu sitio estará entre los resultados del gigante de la web Google
Recomendaciones para aparecer en un buscador en cuestión de horas
Antes que nada bien vale una explicación de como funciona Google así tu mismo también podrás entender como agilizar el proceso.
Google utiliza unos robots llamados googlebots que son como muchos dicen una especie de arañitas que recorren la red recogiendo datos de las páginas. Estos robots cuando se encuentran con un enlace lo siguen hasta donde los lleven y nuevamente empiezan a recorrer la nueva página hasta que se encuentren con otro enlace que los lleve a otro lugar y asi sucesivamente. Lo fantástico de esto es que cuando recorran una página que tenga un enlace hacia la tuya, este los llevará y así te encontran.
Ya he explicado brevemente como funciona un buscador, ahora paso a las recomendaciones
Leer más
Etiquetas:
diseño blogger,
diseño grafico,
Posicionamiento,
Tutoriales
viernes, 23 de octubre de 2009
Conocé si tu blog funciona bien
Encontré un página http://www.ismyblogworking.com que permite conocer algunos datos sobre nuestro blog o página.
Entre los datos que ofrece:
Entre los datos que ofrece:
- La dirección del servidor
- Si el sitio fue indexado por Google
- Si el sitio fue indexado por Bing
- El tamaño de la página
- Tiempos de acceso
- y más...
Escribir entradas con un Software de edición

Para los que quieren escribir entradas en su blog sin tener que acceder a la página de blogger o wordpress les recomiendo Zoundry Raven una poderosa aplicación de edición, totalmente en español y gratuita.
La ventaja que presenta esta aplicación frente a otras del mismo estilo es la opción que ofrece de instalarlo de forma portable.
También permite visualizar y editar entradas escritas anteriormente.
Con este software se podrá manejar las entradas como si estuviéramos en la página.
Zoundry Raven permite además administrar más de un blog a la vez. Soporta Wordpress, Wordpress.com, Blogger, Windows Live Spaces, Moveable Type, TypePad y LiveJournal
Otra ventaja de este programa es que las imagenes las sube al servidor imageshack lo que permite ahorrar espacio del blog
El programa es muy recomendable, ahora mismo estoy escribiendo desde él
Descargar Zoundry Raven
Otra entradas que te pueden ser de interés
Dreamweaver 8 Portable en Español
Etiquetas:
diseño blogger,
diseño web,
Empezar con tu blogger,
programas,
recursos para tu web
viernes, 16 de octubre de 2009
La solución para subir archivos a mi blog
Muchas veces puedes necesitar publicar un archivo de word o un PDF en tu blog, también pueden ser algún MP3 o archivo comprimido, o de cualquier otro formato. Pero como sabemos blogger no nos permite subir esa clase de archivos. Para poder hacer esto es necesario crear una cuenta en algún servidor que nos permita subir archivos y luego publicar la ruta del archivo en nuestro blog. Pero yo te voy a dar otra solución, que desde mi punto de vista es mucho mejor.
La forma es crear una página web con google site, lo cual es muy fácil. Si necesitas ayuda con eso accede a nuestra entrada en que lo explicamos ¿Cómo crear una página con google sites?
Cuando hayas creado el sitio subes el archivo a nuestro sitio de google, pegamos el enlace en nuestro blog y listo.
La solución me parece mucho mejor que recurrir a otra clase de servidores,
Primero porque las descargas se hacen directamente desde el blog si la necesidad de ir a otra página
Segundo porque los sitios de google nos permiten cambiarle el diseño, y modificarlos a gusto con lo que podrás hacer que tu blog y el sito de google funcionen coordinadamente tal como muchos hacen cuando agregan foros externos. Los visitantes sentirán que todo es el mismo sitio
Además en el sitio de google puedes organizar todo los archivos que maneja tu blog
¡pruébalo!
los hermanos carlos en google site
Post Relacionados
Agregar un formulario a tu blog o página web
¿Cómo crear un foro?
Agregar Música al blog o página con eSnips
Subir archivos doc o pdf al blog con Scribd
La forma es crear una página web con google site, lo cual es muy fácil. Si necesitas ayuda con eso accede a nuestra entrada en que lo explicamos ¿Cómo crear una página con google sites?
Cuando hayas creado el sitio subes el archivo a nuestro sitio de google, pegamos el enlace en nuestro blog y listo.
La solución me parece mucho mejor que recurrir a otra clase de servidores,
Primero porque las descargas se hacen directamente desde el blog si la necesidad de ir a otra página
Segundo porque los sitios de google nos permiten cambiarle el diseño, y modificarlos a gusto con lo que podrás hacer que tu blog y el sito de google funcionen coordinadamente tal como muchos hacen cuando agregan foros externos. Los visitantes sentirán que todo es el mismo sitio
Además en el sitio de google puedes organizar todo los archivos que maneja tu blog
¡pruébalo!
los hermanos carlos en google site
Post Relacionados
Agregar un formulario a tu blog o página web
¿Cómo crear un foro?
Agregar Música al blog o página con eSnips
Subir archivos doc o pdf al blog con Scribd
Etiquetas:
diseño blogger,
diseño web,
servicios online,
Servidores
Suscribirse a:
Entradas (Atom)
















