0

Wallpapers » 2topics

0

Mensaje de error: Los ID de artilugio deben ser exclusivos

Últimamente muchos de nosotros hemos sufrido de este error cuando intentamos hacer "vista previa" o "guardar los cambios" en nuestra plantilla desde "Edición HTML".

Problema.

Como el error suele darse al intentar guardar cambios después de haber añadido algún código en la plantilla, muchos usuarios piensan que el problema es motivado por ese cambio que están intentando llevar a cabo.
En realidad es un problema de Blogger que se da casi siempre después de haber sustituido una plantilla por otra.

Blogger hace sin problemas aparentes el cambio de plantilla, pero mantiene algunos de los gadget de la plantilla anterior, lo que hace que algunos gadget aparezcan duplicados (con la misma ID). Esto pasará desapercibido hasta el momento en que intentamos guardar algún cambio posterior, entonces Blogger mostrará el mensaje de error del que estamos hablando:



Solución.

Si miramos el código de nuestra plantilla desde "Edición HTML" (sin expandir la plantilla de artilugios) veremos algo como esto:
<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:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
      </div>

 <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'/>
<b:widget id='NewsBar' locked='false' title='NOTICIAS' type='NewsBar'/>
<b:widget id='HTML1' locked='false' title='Suscribe' type='HTML'/>
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
      </div>
Cada una de esas líneas que empieza por <b:widget corresponde a un gadget de los que tenemos añadidos en el blog. Si nos fijamos en la ID de cada uno de ellos, vemos que hay dos gadget que llevan la misma ID (en el ejemplo están destacados en color naranja):

<b:widget id='HTML1' locked='false' title='' type='HTML'/>

<b:widget id='HTML1' locked='false' title='Suscribe' type='HTML'/>


Lo que haremos es cambiar la ID de uno de estos gadget y ponerle una ID que no se repita en ningún otro gadget de la plantilla, para asegurarnos podríamos ponerle un número elevado, por ejemplo, id='HTML30'.

Una vez hecho el cambio, guardamos la plantilla.

Si vamos entonces a la parte de "Edición" de nuestro panel podemos comprobar cual es el gadget que se había duplicado, ya que al pinchar en "Editar" del gadget, seguramente marcará error o aparecerá vacío de contenido.

Editar gadget
Gadget vacío

Podemos entonces eliminar sin problemas el gadget duplicado.

Quizás te interese saber algo más sobre los gadgets de Diseño.

0

San Valentín en tu blog

Febrero es el segundo mes del año y para muchos tiene un día especial "San Valentín" que se celebra el día 14, en algunos países se llama "Día de los Enamorados" y en otros "Día del Amor y la Amistad"
Para los que gusten de vestir su blog con algún tema especial aquí unos sitios para visitar.













0

Blogger optimiza las url de entradas

Una agradable noticia que he leído esta tarde mientras visitaba Oloblogger.

Y es que hasta ahora, teníamos que publicar la entrada y después volver a editarla para corregir su título y evitar que Blogger mostrara su url alterada.

caracteres especiales

Si usábamos eñes , tildes, exclamaciones, etc. en alguno de los títulos, los resultados de la url de la entrada eran desastrosos si no volvíamos a editarla, lo que hacía más difícil que alguien pudiera encontrarla en Google, por ejemplo.

Ahora podemos publicar la entrada directamente, sin necesidad de volver a editar su título.
La Ñ será sustituida por una N. Las exclamaciones, interrogaciones y tildes no aparecen en la url una vez publicada.

Todo un avance que Oloblogger a descubierto mientras visitaba El extraño mundo de Ro.

0

Sobre cursores


Continuamente vemos cursores pero no le prestamos atención quizás porque estamos familiarizados y se ha convertido en algo rutinario, el más conocido es "pointer" esa manito informando que nos encontramos ante un enlace.

En nuestro blog podemos observar dos tipos de cursores "pointer" para los enlaces y "move" en la plantilla de diseño para arrastrar las etiquetas de los gadgets, podemos cambiar el tipo de cursor a nuestro antojo incluso añadir alguno creado por nosotros pero antes debemos saber donde incluirlo.

En las hojas de estilo de nuestra plantilla ubicamos body allí se encuentran los estilos del cuerpo de la plantilla, color de fondo, texto, tipo de letra, tamaño, alineación...
Un poco más abajo tenemos los estilos de los enlaces.

a:link es el enlace tal y como lo vemos.
a:visited los enlaces visitados.
a:hover es el efecto de los enlaces al pasar el puntero.

Si deseamos cambiar el puntero de los enlaces tendríamos que añadir "cursor:tipo de cursor"

a:hover {
color:#940f04;
cursor:move;
}

"Este texto es un ejemplo de cursor move"

¿Podemos personalizarlo?
cursor:url('url-imagen')
(Donde url-imagen debemos añadir la url de nuestra imagen)

"Este texto es un ejemplo de cursor con imagen"

El tema navegadores nos lo pone complicado, hasta donde yo sé el único formato compatible con Firefox y Explorer es el formato .cur

Aquí unas referencias extraídas de Vagabundia
Internet Explores soporta CUR o ANI.
Firefox soporta imágenes PNG, JPG, CUR y GIF

Cuando se da el caso de usar cursores personalizados es conveniente añadir también un cursor estándar, de esa forma en caso de no poder mostrarse el cursor personalizado se mostrará el estándar.
cursor: url(url-imagen),pointer;



No debemos olvidar que la finalidad de los cursores es informar al usuario de lo que se encuentra detrás de ese elemento que estamos señalando y cada uno tiene un significado que todos conocemos,las visitas agradecerán una información clara no les hagamos jugar a las adivinanzas.
                                                                                                                                                                                                                                  
auto
Pasa el cursor
crosshair
Pasa el cursor
default
Pasa el cursor
pointer
Pasa el cursor
move
Pasa el cursor
e-resize
Pasa el cursor
ne-resize
Pasa el cursor
nw-resize
Pasa el cursor
n-resize
Pasa el cursor
se-resize
Pasa el cursor
sw-resize
Pasa el cursor
w-resize
Pasa el cursor
s-resize
Pasa el cursor
text
Pasa el cursor
wait
Pasa el cursor
progress
Pasa el cursor
help
Pasa el cursor


0

Estilos de Blockquotes (citas)

Los "blockquotes" son secciones de texto dentro de la entrada que generalmente se usan para resaltar citas de otras fuentes, aunque pueden usarse para destacar otro tipo de texto.
En mi caso por ejemplo, lo uso para destacar el código de los "trucos" que explico.

La mayoría de las plantillas de Blogger incluyen en su CSS un estilo definido para los blockquotes; para aplicarlo debemos seleccionar el texto a incluir en el blockquote y pinchar en el botón del editor de entradas que muestra unas comillas.

El resultado será algo como esto:


Vamos a ver unas cuantas formas de mostrar nuestras citas destacadas dentro de la entrada de una forma más original; para eso tendremos que cambiar o modificar el CSS que las plantillas de Blogger añaden por defecto.

En primer lugar localizamos este código en nuestra plantilla sin expandir artilugios:

.post blockquote {
  margin:1em 20px;
  }


[1] Cambiamos ese código por este otro y guardamos cambios:
.post blockquote{
margin:1em 20px;
border-left:4px double #704B0F;
border-right:4px double #704B0F;
padding-left:10px;
font-size:100%;
color:#333;
font:Arial Georgia Serif;
}
El resultado cada vez que apliquemos las comillas (blockquote) a una selección de texto será este:


[2] Cambiamos por este otro:
.post blockquote{
width:320px;
font:14px/22px normal helvetica,sans-serif;
margin-top:10px;
margin-bottom:10px;
margin-left:35px;
padding-left:15px;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
border-left:5px solid #27707F;
border-top:1px solid #27707F;
border-bottom:1px solid #27707F;
border-right:1px solid #27707F;
overflow:auto;
background:#ffffff url(http://bp1.blogger.com/_sbaQpFxeL1Q/R8yT9e_CdPI/AAAAAAAAAFw/4E0nxy2orrs/s400/code-bg.gif);
}
Como resultado obtendremos el blockquote del Escaparate:


En este caso como lo uso para mostrar códigos a veces demasiado extensos, lleva incluida una barra de desplazamiento que se aplica de forma automática si el contenido del blockquote supera su ancho (320px).

[3] Cambiamos por este:
.post blockquote {
background: url(http://4.bp.blogspot.com/_8PJ-pgoBhWQ/SNrz0aBqzFI/AAAAAAAAETQ/qepjbVkuPek/s320-R/link.png) left top no-repeat;
padding: 3px 22px 10px;
text-align: left;
color:#1a0603;
border:1px solid #9e8e91;
margin:8px 10px;
}

Resultado:


[4] Cambiamos por este:
.post blockquote {
float:left;
color:#777;
width:200px;
padding:6px;
margin-right:10px;
position:relative;
font-size:15px;
text-align:left;
font-style: italic;
border-top:4px solid #3096E9;
border-bottom:4px solid #3096E9;
}
Resultado:


[5] Cambiamos por este:
.post blockquote {
   width:250px;
   margin: 10px 0 10px 50px;
   padding: 10px;
   text-align: justify;
   font-size:15px;
   color: #BA0033;
   background: transparent;
   border-left: 5px solid #BA0033;
}
Resultado:


[6]Cambiamos por este:
.post blockquote {
   width:250px;
   margin: 10px 0 10px 50px;
   padding: 10px;
   text-align: justify;
   font-size:15px;
   color: #fff;
   background: #000;
   border-left: 4px solid #BA0033;
   border-bottom: 3px solid #BA0033;
}
Resultado:


Como veis las posibilidades son muchas, solo hay que "jugar" un poco con el CSS...

0

Menú vertical Accordion de jQuery


Añadir un menú no es tarea sencilla no lo digo porque sea complicado sino por la tarea de escoger el menú adecuado o que más se adapte a nuestras necesidades y gustos.

Este menú resulta vistoso y da mucho juego, requiere utilizar un alojamiento externo para los script pero no es tarea difícil hacerlo.

Descargamos el archivo ddaccordion.js "Y lo alojamos en el servidor que solemos usar"

Nos ubicamos justo antes de </head> y añadimos:





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

<script src='aqui-url-archivo-ddaccordion.js' type='text/javascript'/>

En aqui-url-archivo-ddaccordion.js lo sustituimos por la url de nuestro archivo.

A continuación copiamos el contenido de este archivo y lo pegamos justo después de los scripts.

Por último y justo después añadimos los estilos [+/-]


<style type="text/css">
.applemenu{
margin: 5px 0;
padding: 0;
width: 215px; /*ancho del menú*/
border: 1px solid #9A9A9A; /*color de borde*/
}
.applemenu div.silverheader a{ /*títulos-barras del menú*/
background: black url(aquí-url-imagen-gris) repeat-x center left;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: #FFF; /*color títulos barras gris*/
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 5px 0;
padding-left: 8px;
text-decoration: none;
}
.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
color: white;
}
.applemenu div.selected a, .applemenu div.silverheader a:hover{
background-image: url(aquí-url-imagen-azul);
color: #FFF;/*color texto barra azul*/
}
.applemenu div.submenu{ /*contenido del menú- altura*/
background-color:#F4F4F4;;/*color de fondo*/
padding: 5px;
height: 300px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
}
</style>


Estas son las imágenes del menú que podemos sustituir por otras o utilizarlas.

En cualquier entrada de Blogger podemos subirlas para conseguir la url que añadimos donde dice aquí-url-imagen-azul y aquí-url-imagen-gris

Guardamos los cambios y nos dirigimos a plantilla de diseño donde añadiéremos un nuevo gadget escogiendo la pestaña HTML/Javascript

En su interior añadimos lo que mostráremos en el menú, enlaces, imágenes o cualquier contenido [+/-]


<div class="applemenu">
<div class="silverheader"><a href="Url-Enlace">Título 1 y enlace</a></div>
<div class="submenu">
Primer contenido<br/>
</div>

<div class="silverheader"><a href="Url-Enlace">Título 2 y enlace</a></div>
<div class="submenu">
Segundo contenido<br/>
</div>

<div class="silverheader"><a href="Url-Enlace">Título 3 ó enlace</a></div>
<div class="submenu">
Tercer contenido<br/>
</div>

<div class="silverheader"><a href="Url-Enlace">Título 4 y enlace</a></div>
<div class="submenu">
Cuarto contenido<br/>
</div>

<div class="silverheader"><a href="Url-Enlace">Título 5 y enlace</a></div>
<div class="submenu">
Quinto contenido<br/>
</div>

<div class="silverheader"><a href="Url-Enlace">Título 6 y enlace</a></div>
<div class="submenu">
Sexto contenido<br/>
</div>

<div class="silverheader"><a href="Url-Enlace">Título 7 y enlace</a></div>
<div class="submenu">
Séptimo contenido<br/>
<br/>
</div></div>


He añadido color en las partes que podemos modificar y texto para localizarlas.
Una observación, cada barra del menú puede usarse a la vez de enlace.


» Visto en : Dynamic Drive donde podéis ver el original.


0

Al loro con el loro




No hay nada como comenzar la semana sonriendo.
Visto en El rincón de Rampael


0

Transparencias l l

Hace algún tiempo me quitaba una espinita que tenía clavada, era sobre el tema "Transparencias" y sobre ese tema tenía una entrada pendiente que Sidhe and Darky me recordaba el otro día.
Se trataba de añadir transparencia a todo el contenido del blog en lugar de hacerlo en main y sidebar como en la otra ocasión.
La cuestión es simple si antes añadíamos dos columnas de transparencia ahora lo haríamos con una.
Lo primero de todo es añadir una imagen de fondo, en Edición de HTML localizamos body { y añadimos la imagen de esta forma: background:url('url-imgen');
El resultado sería algo así:


Vamos a cubrir main y sidebar con la misma transparencia y nos vamos a situar justo antes de ]]></b:skin> para añadir lo siguiente:

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background:#0873dd/* color de la transparencia */
opacity: 0.25;   /* aumentar-disminuir transparencia */
-moz-opacity: 0.25;  /* aumentar-disminuir transparencia */
filter:alpha(opacity=25);   /* For IE6&7 */ /* aumentar-disminuir transparencia */
}
.container {
position: relative;
float: left;
}
.content {
position: relative;   /* Fixes the z-index */
float: left;
}

#column-1 {   /* ampliar transparencia */
width: 780px;   
}
#column-1 .content {  /* contenido de la transparencia */
padding: 20px;
width: 800px;
}
/* Let's compensate for IE6's inability to interpret top: 0; and bottom: 0; */
* html #column-1 .overlay { 
height:expression(document.getElementById("column1").offsetHeight); }
* html #column-2 .overlay { 
height:expression(document.getElementById("column2").offsetHeight); }

A continuación  nos situamos en <div id='header-wrapper'> justo antes añadimos:
<div class='container' id='column-1'>
<div class='overlay'/>
<div class='content'>

Por último nos vamos al final de la plantilla y justo antes de </body> añadimos:
</div>
</div>

Con eso lo que hicimos fue crear un bloque desde el header hasta el final de body ese bloque será el que contiene la transparencia y el color que añadiremos.


Si miráis en vista previa seguramente estará todo deformado eso es porque no coinciden las medidas y  hay que modificarlas porque como es lógico todas las plantillas no son iguales.
La que puse para el ejemplo tiene width:800px; en outer-wrapper.

Lo que haremos será mirar nuestra plantilla y la misma medida que tiene en outer-wrapper añadirla en #column-1 .content { ¿por qué? porque es el total del contenido, si añadiéramos más empujaría el contenido de nuestra sidebar y se desplazaría hasta perderse. Si añadimos menos no le dejamos espacio y la desplazaría hasta abajo. De todas formas no hay números exactos podéis probar y mirar en vista previa el resultado.

En #column-1 { hay de width: 780px; su trabajo es extender la transparencia hasta cubrir el contendido de main y sidebar lo calculamos considerando la suma de main-wrapper y sidebar-wrapper incrementando por ejemplo 80 para los extremos.
Un ejemplo sería:
main-wrapper:width:410px + sidebar-wrapper:width:220 + 80px = column-1:width: 710px;

0

Iconos en los enlaces del gadget listas "LinkList"

Gamal me pregunta en un comentario como agregar iconos o imágenes a cada elemento de un LinkList.

Solamente será necesario añadir unas líneas de código en el CSS, como siempre os digo ha de añadirse antes de ]]></b:skin>:


.LinkList a {
padding-left: 13px;
background: url (Url_del_icono) no-repeat scroll left 50%;
}
En "padding-left" tendréis que poner un valor igual al ancho que tiene el icono.

También podemos hacer que al colocar el puntero del ratón sobre el enlace, la imagen que se muestre sea diferente.
Colocáis entonces debajo de ese código, este otro:

.LinkList a:hover {
padding-left: 13px;
background: url (Url_del_icono) no-repeat scroll left 50%;
}

Si además (como podeís ver en los enlaces del Escaparate), queréis que en los enlaces que ya han sido visitados se vea un icono diferente, añadimos debajo otro código más:

.LinkList a:visited {
padding-left: 13px;
background: url (Url_del_icono) no-repeat scroll left 50%;
}

0

Cellar Heat para Blogger

Las plantillas estilo Magazine han entrado con fuerza en mi opinión es una plantilla que por su diseño no queda bien en cualquier blog la veo indicada en sitios cuya temática sean noticias, ventas, publicidad, descargas... en un blog personal por ejemplo encuentro que le resta personalidad. Es cuestión de gustos...

No hace mucho J.Miur nos mostraba un completo tutorial para entender el funcionamiento de estas plantillas, en "Jugando con los post Magazine" nos enseñaba como acceder a algunos datos y manejarlos de forma clara y con ejemplos 1 - 2 - 3 - 4



Simultáneamente Pizcos nos deleitaba con nuevos cambios añadiendo a su blog un estilo actual y completamente distinto al que nos tenía habituados. No faltaron las explicaciones para que todos nos pongamos manos a la obra.




Plantilla Minima-Magazine
Plantilla Minima Fotoblog
Post Resumidos - 2- 3 - 4 - 5




Si no tienes tiempo o sencillamente prefieres ir por la vía rápida también puedes disponer de una plantilla Magazine en este caso hay dos temas muy elegantes disponibles para Blogger.

Cellar Heat es un tema de WordPress creado por Evan Eckard diseñado para Smashing Magazine y ahora la podemos disfrutar en Blogger gracias a MagzNetwork.

En MagzNetwork podemos realizar la descarga del archivo así como seguir las instrucciones para la instalación.

Cellar Heat Premium

Cellar Heat Gallery

Cellar Heat Light

Cellar Heat Ligth Gallery