Si usted ha seleccionado un template de OPinTemplates y el mismo le presenta las páginas estáticas como un resúmen tipo magazine que debería funcionar con un "leer más" pero no lo hace, deberá encontrar en el código de su plantilla el siguiente código:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='summary' expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>
Y reemplazarlo por el siguiente:
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary-" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary-<data:post.id/>");</script>
<a class='leermas' expr:href='data:post.url'>Leer más »</a>
</b:if>
</b:if>
Leer más
6/23/2014
5/26/2014
Hace unos días a mi hijo se le ocurrió que los reproductores de música que pongo de fondo en algunos de mis blogs esté visible mediante un gadget que le permita a los visitantes apagar la música si la considera molesta.
Esto quiere decir que hay que evitar que el visitante ande de aquí para allá buscando dónde se nos ha ocurrido ocultar el widget.
Se me ocurrió que lo más fácil era combinar dos trucos que desde Ciudad Blogger se habían puesto a mi disposición.
El primero es el de anuncio flotante que permanece llamando la atención del visitante en la parte superior izquierda de la pantalla. El truco era suplantar ese anuncio por los reproductores de audio HTML5 que el mismo Potro había publicado un tiempo atrás.
En los reproductores se debe añadir la URL de tu canción en formato MP3 y otra URL de tu misma canción pero en formato OGG, ambas almacenadas en algún host del estilo de Dropbox. Son dos formatos porque algunos navegadores no admiten aun el formato MP3,
específicamente el navegador Opera pues según sé Firefox desde la
versión 21 ya admite MP3.
Hay
varios programas para PC y Mac que convierten archivos de audio y video
en formato OGG, pero además hay varios sitios en línea que también lo
hacen, uno de mis favoritos es media.io
En el código te facilito debes cambiar lo marcado en rojo por las URL de tus archivos de audio.
<audio controls>
<source src="URL del archivo mp3" type="audio/mpeg">
<source src="URL del archivo ogg" type="audio/ogg">
<embed src="URL de tu archivo mp3" type="audio/mp3" width="200"
height="100"/>
</audio>
Tambien puedes jugar con los atributos del elemento AUDIO y VIDEO que son: controls, autoplay, loop, muted, y preload
- controls permite que se muestren los controles y el reproductor en sí.
- autoplay hace que el archivo se reproduzca al cargar la página.
- loop reproducirá el archivo una y otra vez.
- muted quitará el audio del archivo.
- preload define si el reproductor se debe cargar cuando se cargue la página.
Leer más
5/02/2014
Frases cómicas, irónicas y para pensar se acumulan en el blog Tirando Piedras Mentales (http://piedrasmentales.blogspot.com.ar) del cual mantengo los Feed a la vista en varios de mis blogs. Lamentablemente con esa modalidad se muestra de manera permanente la misma frase hasta que se publique la siguiente.
Para hacer más dinámica y divertida esta entrega de humor es que implenté un widget que muestra de manera aleatoria una frase diferente cada vez que refresquemos la página o ingresemos nuevamente a nuestro blog.
Sólo debes copiar y pegar este código en un elemento HTML/Javascript de tu blog.
Leer más
4/09/2014
¿Alguna vez viste esos blogs que tiene un área de widget con pestañas en la barra lateral que consiste en perfil, popular, reciente y cuenta con puestos dentro de un solo clic ? Se conoce más comúnmente como widget de pestañas en jQuery , que le permite guardar una gran cantidad de espacio en la barra lateral manteniendo una interfaz amigable para sus usuarios mediante la combinación de 3 diferentes widgets en uno solo.
En este artículo, vamos a mostrar cómo añadir un Sidebar Widget jQuery con pestañas en Blogger.
¿Qué es un Widget con pestañas jQuery ?Habrás visto un montón de sitios web que tienen un widget con pestañas en la parte superior de su barra lateral donde mantiene tres cajas en un solo lugar y que te proporciona la posibilidad de seleccionar uno entre ellos.
No sólo le permite ahorrar un poco de espacio en la barra lateral , sino que también mantiene tu blog con un diseño limpio y profesional.
Una gran cantidad de los sitios web más populares llamados grandes, están utilizando la misma técnica para mostrar más widgets en menos espacio.
La primer cosa que hay que hacer es ir a Blogger Template >> >> Editar HTML y pegar el siguiente código CSS justo encima de la etiqueta ] ]> < / b: skin > . Si tienes un archivo de hoja de estilo CSS separada , entonces también puede añadir el siguiente CSS a la misma.
Ahora este paso depende enteramente de la codificación de la plantilla de blogger pues diferentes diseñadores tienen diferentes formas de codificar, pero lo más común que encontraremos en las plantillas nos indica lo siguiente. Hay que mirar en la parte superior del código de su área de widgets Sidebar . Debería encontrar ésta línea o una similar que cumple su función <div id='sidebar-wrapper'>, justo debajo de ella hay que pegar el siguiente fragmento de código.
Una vez realizados los dos pasos, guardar la plantilla pulsando "Guardar plantilla" en la parte superior. Ahora si vas a la zona de diseño podés ver tres áreas de widgets justo por encima de la barra lateral. Allí podés añadir widgets , preferentemente los que más espacio ocupan, como ser "Entradas populares" o "Etiquetas". La primer lengueta se reserva para un widget que ocupe poco espacio, como puede ser el Perfil sin datos (solo la foto) .
Suerte.
Tomado de
http://www.mybloggerlab.com/2014/04/how-to-add-jquery-tabbed-sidbar-widget-in-blogger.html
Leer más
3/22/2014
Cuando en tu blog haces referencia a diferentes páginas mediante el gadget "Lista de enlaces" puede que la lista se haga tan larga que te ocupe la totalidad de la página.
Esto ocurre con frecuencia en blogs de arte o fotografía donde se genera una lista agrupada por el nombre del artista y provee un link hacia la web del mismo o simplemente a la nota o post en el mismo blog.
Como nadie quiere tener ocupada la sidebar con una lista que ocupa todo el espacio, lo más recomendable es realizar un menú desplegable.
Si, ya sé que el gadget "Lista de enlaces" provee la opción de definir la cantidad de enlaces a mostrar, pero lamentablemente no aparece un botón que nos de la opción de "mostrar todos" o menos, como ocurre con el gadget "Lista de blogs".
Así que se me dio por experimentar un poco y aplicar a la lista de enlaces un menú desplegable.
Para ello debes entrar en el editor y buscar el gadget según el nombre que el mismo tenga. Para saberlo alcanza con ir a Diseño y colocar el cursor del mouse sobre el gadget sobre la palabra Editar. Al pie de página aparecerá el código que da nombre al gadget.
En base a eso buscalo en la plantilla y al expandir el artilugio verás las siguiente parte de código.
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
Eso deberás reemplazarlo por el siguiente código.
<center><br/>
<select class='menu-links' onchange='location=this.options[this.selectedIndex].value;'>
<option><h2>Listado desplegable de todos los artistas</h2></option>
<b:loop values='data:links' var='links'>
<option expr:value='data:links.target'><data:links.name/>
</option>
</b:loop>
</select>
</center>
Y listo, ya puedes verlo funcionar.
Con eso es suficiente, pero puedes cambiar el texto Listado desplegable de todos los artistas donde se indica y también puedes darle un poco de color para que se vea más acorde a la paleta de colores de tu página
]]></b:skin> este código:
.menu-links{Ahí puedes cambiar los colores donde se indica en verde.
background-color: #CEE3F6; /* Color de fondo */
color: #000000; /* Color del texto */
}
Suerte.
Leer más
2/05/2014
Fotos e imágenes se han convertido en una parte tan integral de los blogs que muchas imágenes son tan importantes como los textos. Ésto no solo es válido para los blogs de fotografía pues cualquier visitante podrá compartir la información de un post en base a la foto asociada al mismo.En el mundo moderno una imagen vale más que mil palabras .
En este post vamos a ver cómo utilizar las imágenes para conseguir que los visitantes compartan tu posts agregando botones de social bookmarking adheridos a las imágenes de tu blog e ir directamente a compartir la imagen (de ahí el post) en Facebook , Twitter , Pinterest y otras networks.
Para ello vamos a utilizar el gadget de SlingPic que ofrece un servicio para los usuarios de Blogger. péguele un vistazo a la demo a continuación , simplemente coloque el cursor sobre las imágenes para ver las opciones :
Añadir a Blogger
Usted puede recurrir al sitio web de SlingPic y allí elegir las opciones que más le gusten o utilizar las siguientes combinaciones pre-hechas.
Nota: Debe haber iniciado la sesión en tu Blogger para poder ingresar el widget.
Default Theme
Dark Theme
Light Theme
Advertencia: En muchos blogs al introducir este servicio se observa un cambio de posicionamiento de las imágenes. Hace más de tres meses que envié la pregunta al servicio de soporte técnico y no han respondido, así que aconsejo usarlo siempre y cuando no altere la alineación de las imágenes.
Suerte.
Fuente: http://www.spiceupyourblog.com
Leer más
12/22/2013
Creo que a muchos nos llega a molestar que el AdSense de Blogger no solo no nos rinda ninguna ganancia sino que además quede antiestético, no solo por sus dimensiones antojadizas, sino también porque resultan imposibles de alinear a nuestro gusto.
Muchos gadgets de Blogger solo pueden ser ajustados entrando en la plantilla y agregando código.
En mi caso centrar el AdSense resultó fácil gracias a una entrada de http://leperogeek.blogspot.com.ar
Sólo debe ingresar en el editor de la plantilla y buscar (Ctrl + F) la línea:
Muchos gadgets de Blogger solo pueden ser ajustados entrando en la plantilla y agregando código.
En mi caso centrar el AdSense resultó fácil gracias a una entrada de http://leperogeek.blogspot.com.ar
Sólo debe ingresar en el editor de la plantilla y buscar (Ctrl + F) la línea:
]]></b:skin>
Justo antes de la misma deberá ingresar el siguiente código, según el AdSense se encuentre en el area de widgets o entre las entradas.
/* centrar en barra lateral */
.AdSense {
text-align:center;
}
/* centrar entre entradas */
.inline-ad{
text-align: center;
}
En mi caso esto solucionó el problema. Espero que a usted también le sirva
Leer más
12/16/2013
No me diga que es de los que le gusta poner huevadas para decorar el blog para Navidad o Año Nuevo...¿En serio?
¿Cualquier cosa que brille o se mueva?
Mire, hay muchos lugares donde le ponen nieve que cae de una forma, o de otra, o de otra y usted, tal vez como yo, está sudando a 38 ºC en el living de su casa sin entender que gracia tiene esa nieve artificial en medio de tanto calor.
Ahora que si usted se encuentra en el hemisferio norte, seguramente con abrir un poco las cortinas podrá ver nieve real y no necesitará de artilugios tan falsos como los que le comenté.
¿Que igual quiere algo para poner en el blog?
¿En serio?
Bueno amigo, usted lo ha pedido.
Copie el siguiente código y péguelo en cualquier elemento HTML de su blog y listo, lucesitas que se prenden y apagan.
No pida mucho más...
Si tiene inconvenientes encopiarlo, le paso la dirección del creador original.
http://tester2.synthasite.com/christmas-lights-top.php
Leer más
12/04/2013
No le voy a negar que existen infinidad de herramientas para verificar el desempeño técnico de su blog o página web.
Por lo general se miden diversas variables que son útiles a la hora de seleccionar nuestros proveedores de servicios. Como en Blogger nuestros proveedores gratuitos son el propio Blogger (y Google) así como también Picassa, no tendremos mucho que analizar más que cambiar de proveedor de servicio de Internet.
¿Cuales son los factores que afectan la velocidad de mi blog?
Hosting
Sin duda el principal factor. Dónde está ubicado el servidor, la latencia del mismo, el número de saltos (tracert) hasta llegar al mismo, el tiempo de respuesta, la velocidad del disco duro que tiene instalado, los recursos del servidor (RAM, Procesadores, etc), tipo de tarjeta de red, Sistema Operativo, ancho de banda asignado, etc. Un hosting de calidad es necesario, a ser posible en el mismo país hacia el que va dirigida la web, con unas características suficientes y a ser posible dedicado (muy importante este detalle).
Red
No es lo mismo la red donde está conectado nuestro servidor, al igual que la red a la que se conectan nuestros clientes. Que tu centro de datos tenga contratada una red de calidad es muy recomendable, tanto por fiabilidad como por velocidad. A veces se redireccionan a otros nodos por averías en la red o mantenimiento, y pasamos de tener un tracert de 8 saltos a tener uno de 13 saltos. Cuanto menos nos pase, mejor. El operador de ADSL (o similares) con el que trabajen nuestros clientes también influirá en la velocidad a la que ellos cargarán nuestra página web, aunque este factor escapa totalmente a nuestro control .
Programación
Otro factor muy importante. En igualdad de condiciones, una web bien programada y optimizada, sobre todo en temas de diseño y consultas a bases de datos, correcto uso de la cache, etc, influye enormemente en la velocidad de carga de la misma. Hay que cuidar cada vez más estos detalles.
Una vez conocidos los factores que determinan el tiempo de carga de tu página web, es hora de ver las herramientas para poder hacer dicho proceso, pero para mí hoy en día hay na que me resulta eficiente y les vengo a recomendar sin dejar de lado a las otras:
Pingdom Tools es,
sin duda, la herramienta online mas completa para medir y mejorar la
velocidad de carga de tu página web. Su funcionamiento consiste en
testear tu página web por completo rastreando todo el contenido a través
del código HTML (es capaz de detectar imágenes, CSS, Javascripts, RSS,
Flash y frames/iframes).
De hecho, imita la manera en la cual se cargaría tu web normalmente. El funcionamiento es realmente sencillo, solo ingresamos la url y listo, le damos clic en “Test now!”, pero no todo queda ahí, ya que, de forma gratuita, te permite medir 3 bloques importantes de tu página web:
Click para probar tu blog |
De hecho, imita la manera en la cual se cargaría tu web normalmente. El funcionamiento es realmente sencillo, solo ingresamos la url y listo, le damos clic en “Test now!”, pero no todo queda ahí, ya que, de forma gratuita, te permite medir 3 bloques importantes de tu página web:
- Test total de la página web: Aparte de mostrarte el tiempo total de carga de la página web, te muestra individualmente cada uno de los elementos de tu pagina (en forma de grafico de barras), desde que hacen contacto con tu servidor hasta se descargan.
- Salud DNS: Comprobación rápida de la conexión con tu servidor, algo muy útil cuando tienes problemas de carga.
- Ping y Traceroute: Son comandos muy útiles que nos permiten acceder a información básica de nuestro equipo para poder, por ejemplo, comunicarnos vía remota o con otros equipos de la red.
Muy
util sin dudas ya que su gráfico de barras nos permite apreciar el
orden en que se cargan los elementos, su tiempo y su peso. Con esa información deberias poder decidir que puedes eliminar de tu blog para mejorar la carga y que no.
También
incluye un historial estadístico para ver el avance en la optimización
en el paso del tiempo, pero también requiere un dominio propio para que
no aparezcan resultados de otros blogs con la terminación .blogspot.com.
Fuente http://ignaciosantiago.com
Fuente http://ignaciosantiago.com
Leer más
11/22/2013
Oxitoxina es un maravilloso
template que OPINTEMPLATES entrega gratis para su uso comercial o
privado. Este limpio y claro template, usa el fabuloso Diapo Pixedelic
free jQuery slidesow, un slider con el que se pueden mostrar imágenes,
videos, botones o tablas, de manera muy simple.
Oxitoxina no es un template responsive, pero gracias a usar el ancho completo de la plantilla en cada post, resulta de fácil lectura en dispositivos móviles.
Si usted desea mantener algunos widgets siempre visibles, use el footer o el área social provista.
Oxitoxina esta basadoa en la misma plantilla que tanto éxito ha tenido durante tanto tiempo.
Descárguela y disfrute otra plantilla gratuita producida por OPINTEMPLATESPRO.
Oxitoxina no es un template responsive, pero gracias a usar el ancho completo de la plantilla en cada post, resulta de fácil lectura en dispositivos móviles.
Si usted desea mantener algunos widgets siempre visibles, use el footer o el área social provista.
Oxitoxina esta basadoa en la misma plantilla que tanto éxito ha tenido durante tanto tiempo.
Descárguela y disfrute otra plantilla gratuita producida por OPINTEMPLATESPRO.
Platform: Blogger / Blogspot
Release date : 22, Nov 2013
Author : www.opintemplatespro.blogspot.com
License : Creative Commons Attribution 3.0
Level :Template Premium Original
Stile : Magazine
Features : Two columns, fix, tree columns at foot
Color : Black, Yellow, White
correct operating
This Template is free to use and is not actively supported by the author, but will be monitored for serious bugs that may need correcting.
Creative Commons Attribution: You are free to use, distribute or adapt this template for your personal or commercial website. But, you must attribute the work to the author. Should not remove credit links.
Creative Commons Attribution: You are free to use, distribute or adapt this template for your personal or commercial website. But, you must attribute the work to the author. Should not remove credit links.
Leer más
11/08/2013
¿Cómo corregir un "Google-Code-Subversion-Repository" Password Request? la solución es simple !
Seguramente hoy ha encontrado un error en su blog tal como yo hace un tiempo. Debo confesarle que me tomó un buen tiempo averiguar lo que le había pasado a mi página.En primer lugar, si usted está utilizando una plantilla ajena es muy difícil encontrar exactamente dónde está el problema , ya que puede ser causado incluso por alguno de los widgets.Una manera simple de probar que está cambiando su plantilla es desactivar de a uno sus widgets y ver que va pasando con cada uno .Así es como normalmente aparece en los sitios web afectados por el error.El error se produce en forma de un cuadro de diálogo como se muestra en la siguiente figura y afirma
"El sitio dice : Usuario y contraseña son solicitados por http://reader-download.googlecode.com. El sitio dice: "Google Code Subversion Repository"
Solución 1
Busque el lugar en su página web HTML , donde hay una referencia a " googlecode.com " y retírela.
Esta simple acción suele dar resultados. Normalmente tiene un llamado a un archivo .js o una imagen que se encuentra en esa dirección. Usted podrá reemplazarla por otra que deberá almacenar en un sitio de su confianza.
Solución 2
Buscar en los widgets activos la referencia a la " googlecode.com " y retirarla.
Usted podrá reemplazarla por otra que deberá almacenar en un sitio de su confianza.
Espero les haya sido de utilidad.
Leer más
11/01/2013
Aquí les traigo un TOP 40 de Plantillas gratuitas para Blogger que corresponden a diseño Responsive o Adaptativo. Si usted está buscando una plantilla de este tipo y todavía no ha logrado decidirse por la mejor, esta lista le será de mucha utilidad.
Son 40 Plantillas que usted podrá ver mediante un test Responsive y verificar como se mostrará en cada dispositivo en particular.
También podrá descargarla en forma directa, así que simplemente es cuestión de ponerse a elegir cual es la que mejor le resultará.
Leer más
10/19/2013
Nuevo conjunto de iconos que está inspirado en el nuevo diseño plano que es tendencia UI. Los iconos son minimalistas con algunos detalles distintivos para darles un poco de vida . Se ofrecen en archivo de forma vectorial psd.
Leer más
10/13/2013
Cuando nos ponemos a trabajar en nuestros blogs se pone de manifiesto que para un buen diseño hace falta no solo un toque de buen gusto sino conocer bien que paleta de colores usaremos a la hora de colorear.
Los mismos generalmente obedecen a un criterio previo o a una imagen que hemos tomado como principal.
Así resulta que nos pasamos mucho tiempo tratando de encontrar los colores que corresponden a alguna imagen y así poder continuar con el diseño.
Todo esto se soluciona con un servicio gratuito anidado en la Red imgr.co nos pertime subir una imagen específica, sea un diseño o una captura de pantalla para luego encargarse de analizarla hasta darnos la paleta total de colores con su correspondiente código hexadecimal.
http://imgr.co/imgr.php
Espero les sea de utilidad
Leer más
9/27/2013
Desarrollo es una maravillosa y eficiente plantilla para Blogger
totalmente adaptativa o "responsive" diseñada por OPINTEMPLATES para regalárselas hoy a todos sus seguidores. Usando información de diferentes
fuentes hemos construido esta plantilla que se adapta a todos los
formatos de pantalla. Laptops, Tablets o celulares, mostrarán de una manera diferente y más eficiente la información de contenido de nuestros
blogs.
Desarrollo cuenta con un slider de post recientes, social share mediante AddThis integrado, y recomended post al final de cada entrada.
Su diseño en rojo, gris y blanco, resalta los textos mediante fuentes grandes y uso completo de la pantalla.
Desarrollo es recomendado para quienes quieren llegar con sus blogs de forma simple y clara a los usuarios de nuevos dispositivos.
Disfrute de este maravillo template que OPINTEMPLATES quiere compartir con usted
Les recomendamos registrarse en forma gratuita en AddThis y obtener el código del sistema Smart Layers y reemplazarlo en la plantilla, para de esta manera poder recibir los resúmenes de uso en su blog
Desarrollo cuenta con un slider de post recientes, social share mediante AddThis integrado, y recomended post al final de cada entrada.
Su diseño en rojo, gris y blanco, resalta los textos mediante fuentes grandes y uso completo de la pantalla.
Desarrollo es recomendado para quienes quieren llegar con sus blogs de forma simple y clara a los usuarios de nuevos dispositivos.
Disfrute de este maravillo template que OPINTEMPLATES quiere compartir con usted
Les recomendamos registrarse en forma gratuita en AddThis y obtener el código del sistema Smart Layers y reemplazarlo en la plantilla, para de esta manera poder recibir los resúmenes de uso en su blog
Template Name: Desarrollo by OPintemplates
Platform: Blogger / Blogspot
Release date : 18, Sep 2013
Author : www.opintemplatespro.blogspot.com
License : Creative Commons Attribution 3.0
Level :Template Premium Original
Stile : Magazine
Features : Two columns, responsive, tree columns at foot
Color : Red, Grey. White
correct operating
This Template is free to use and is not actively supported by the author, but will be monitored for serious bugs that may need correcting.
Creative Commons Attribution: You are free to use, distribute or adapt this template for your personal or commercial website. But, you must attribute the work to the author. Should not remove credit links.
Creative Commons Attribution: You are free to use, distribute or adapt this template for your personal or commercial website. But, you must attribute the work to the author. Should not remove credit links.
Leer más
Suscribirse a:
Entradas (Atom)