0
[1] Tendremos que retirar cualquier elemento que tengamos colocado en el crosscol del blog, moviendolo a la sidebar de forma temporal y, una vez añadidas las tres columnas en el crosscol, volver a colocarlo en esa sección si así lo queremos.
[2] Nos situamos en "Edición HTML" de nuestro panel y sin expandir las plantillas de artilugios, localizamos la sección del crosscol:
[3] Sustituimos ese código por este otro:
Una vez guardados los cambios ya podremos volver a incluir en el crosscol los elementos que queremos mostrar en esa sección.
[4] Ahora ya solo nos queda añadirle unas líneas de CSS a la plantilla para conseguir controlar la separación de las columnas y añadirles además un color de fondo (blanco en el ejemplo) y un borde.
Pegamos estas líneas antes de ]]></b:skin>:
[5] Y tendríamos que conseguir entonces algo así:
Modificaciones
Para retirar el borde a los elementos, colocamos en border: 1px solid #60A9D1; el valor 1 en 0, o directamente borramos esa línea del código CSS.
Para cambiar el color de fondo, lo hacemos sustituyendo #fff por el código del color que vamos a usar.
El ancho de cada gadget está aplicado en porcentajes, podemos modificar la anchura de cada uno cambiando en width: el valor del porcentaje, cuidando que la suma del valor de los tres gadget juntos no sobrepase el 100%
Añadir tres columnas en la sección del crosscol
Después de haber publicado la manera de añadir tres columnas en la sección del footer, algunas personas me han estado consultando para conseguir la posibilidad de añadir mas gadget en distintas partes de sus plantillas, una de las zonas más demandadas para aprovecharla al máximo es, sin duda, el crosscol.
Antes de empezar tengo que aclarar que estás modificaciones están basadas en el código de las plantillas originales de Blogger que ya tienen incluido el crosscol en su código por defecto.
Para hacer esto mismo en una plantilla que no incluya en su diseño el código del crosscol tendríamos que saltarnos el paso [1] y [2].
Colocar el código del paso [3] justo antes de <div id='main-wrapper'> y aplicar el paso [4] tal como está.
Colocar el código del paso [3] justo antes de <div id='main-wrapper'> y aplicar el paso [4] tal como está.
[1] Tendremos que retirar cualquier elemento que tengamos colocado en el crosscol del blog, moviendolo a la sidebar de forma temporal y, una vez añadidas las tres columnas en el crosscol, volver a colocarlo en esa sección si así lo queremos.
[2] Nos situamos en "Edición HTML" de nuestro panel y sin expandir las plantillas de artilugios, localizamos la sección del crosscol:
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
[3] Sustituimos ese código por este otro:
<div id='crosscol-wrapper' style='text-align:center'>
<div style='clear:both;'/>
<div id='crosscol-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='crosscol' id='crosscol-bottom' preferred='yes'>
<b:widget id='Text3' locked='false' title='' type='Text'/>
</b:section>
</div>
<div id='crosscol-columna-contenedor'>
<div id='crosscol2' style='width: 30%; float: left; margin:0; text-align: center;'>
<b:section class='crosscol-column' id='crol1' preferred='yes' style='float:left;'/>
</div>
<div id='crosscol3' style='width: 40%; float: left; margin:0; text-align: center;'>
<b:section class='crosscol-column' id='crol2' preferred='yes' style='float:left;'/>
</div>
<div id='crosscol4' style='width: 30%; float: right; margin:0; text-align: center;'>
<b:section class='crosscol-column' id='crol3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
</div>
Una vez guardados los cambios ya podremos volver a incluir en el crosscol los elementos que queremos mostrar en esa sección.
[4] Ahora ya solo nos queda añadirle unas líneas de CSS a la plantilla para conseguir controlar la separación de las columnas y añadirles además un color de fondo (blanco en el ejemplo) y un borde.
Pegamos estas líneas antes de ]]></b:skin>:
#crol1{
background:#fff;
margin: 5px;
padding: 5px;
border: 1px solid #60A9D1;
}
#crol2{
background:#fff;
margin: 5px;
padding: 5px;
border: 1px solid #60A9D1;
}
#crol3{
background:#fff;
margin: 5px;
padding: 5px;
border: 1px solid #60A9D1;
}
#crosscol-columna-contenedor {
clear:both;
}
.crosscol-columna {
padding: 10px;
}
[5] Y tendríamos que conseguir entonces algo así:
Modificaciones
Para retirar el borde a los elementos, colocamos en border: 1px solid #60A9D1; el valor 1 en 0, o directamente borramos esa línea del código CSS.
Para cambiar el color de fondo, lo hacemos sustituyendo #fff por el código del color que vamos a usar.
El ancho de cada gadget está aplicado en porcentajes, podemos modificar la anchura de cada uno cambiando en width: el valor del porcentaje, cuidando que la suma del valor de los tres gadget juntos no sobrepase el 100%
0
Conseguir la captura de una página no requiere dedicar demasiado tiempo ni utilizar programita alguno de imágenes, con Thumbizy podemos hacerlo en un abrir y cerrar de ojos y lo que es mejor podemos escoger añadir esquinas redondeadas, sombra, reflejo, visualizar la página completa o sólo lo que se contempla en pantalla.
Los tamaños pueden ser 100px, 180px, 250px y 360px.
Thumbizy capturas de pantalla
Conseguir la captura de una página no requiere dedicar demasiado tiempo ni utilizar programita alguno de imágenes, con Thumbizy podemos hacerlo en un abrir y cerrar de ojos y lo que es mejor podemos escoger añadir esquinas redondeadas, sombra, reflejo, visualizar la página completa o sólo lo que se contempla en pantalla.
Los tamaños pueden ser 100px, 180px, 250px y 360px.
0
De ilusión también se vive
Conforme nos vamos familiarizando con el blog vamos adquiriendo soltura y perdemos el miedo que inicialmente teníamos a tocar cualquier cosa que no fuera el editor de entradas.
Un día es un detalle en los títulos, al otro un borde en las imágenes, al otro... queremos probar aquello que vemos en tal o cual blog.
Existe una curiosidad sana y ansiedad por descubrir que se esconde detrás de ese detalle que nos enamora. Nuestro aliado el código fuente, se une a nosotros intentado darnos el empujón.
Las páginas de diseño son mi perdición, es acceder a una y a otra y a otra.... y pasar el tiempo sin apenas darse cuenta, hago mil pruebas en mis sufridos blogs y a veces me he sorprendido sonriendo por la ilusión que produce conseguir algo que ha llamado mi atención.
Lo más curioso de todo es que no tengo ni la más remota idea de trabajar con imágenes y por más que me hago el propósito de dedicar un tiempo a aprender ese tiempo no llega nunca.
Pero sigo ahí erre que erre con la ilusión intacta y la sensación después de haber perdido un tiempo sin finalidad alguna.
Esto es una muestra de lo que me trae de cabeza ¿quieren perderse entre páginas conmigo? visiten la nube de etiquetas de CSSArtillery
0
Y este sería el resultado:
[2] Menú desplegable con opción "Ir".
Colocamos este código en un gadget HTMLJavascript:
Y este sería el resultado:
[3] Menú desplegable con enlaces que abren en "página nueva".
Colocamos este código en un gadget HTMLJavascript:
Y este sería el resultado:
Como veis los tres menús son sencillos de instalar y con distintas opciones según sean nuestras necesidades.
Supongo que os habréis fijado en que he destacado en negrita alguna parte de su código, en concreto son unas "clases" añadidas en cada menú para darles color mediante CSS.
En el primer menú, la clase añadida (class="combobox") controlará tanto la "cajita" como los enlaces una vez desplegados.
Si añadimos algo como esto en el CSS de nuestra plantilla (antes de ]]></b:skin>) "ordenamos" al menú que tenga un color de fondo y que su texto sea de color blanco:
.combobox {
background-color: #009900;
color: #ffffff;
}
El resultado sería este:
En el segundo menú, he mantenido la clase class="combobox" pero además he añadido una clase distinta a cada enlace, así que si añadimos algo como esto en el CSS de la plantilla, cada enlace del menú se mostrará de distinto color:
.azul {
background-color: #0000FF;
color: #ffffff;
}
.rojo {
background-color: #FF0000;
color: #ffffff;
}
.verde {
background-color: #009900;
color: #ffffff;
}
.amarillo{
background-color: #FFFF00;
color: #000000;
}
El resultado sería este:
En el tercer menú, lo que he hecho ha sido añadir una clase al botón imput (class="boton"), así que colocando estas líneas en el CSS, tendríamos un botón con el texto en negrita y de color amarillo, de fondo rojo y con un borde de color gris:
.boton {
color:yellow;
background-color:red;
font-weight: bold;
border: 2px solid #ddd;
}
Resultado:
Menú desplegable con color
Aunque hace tiempo que publiqué como hacer un menú desplegable para incluir enlaces, se me ha ocurrido gracias a un comentario de Friol que podría hacer esta entrada para explicar un poco como personalizar este tipo de menús.
[1] Menú desplegable sencillo.
Colocamos este código en un gadget HTMLJavascript:
<select onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" class="combobox" name="SiteMap" size="1">
<option selected/>TITULO
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
</select>
Y este sería el resultado:
[2] Menú desplegable con opción "Ir".
Colocamos este código en un gadget HTMLJavascript:
<script language="JavaScript">
function Ir_amigos(form) {var myindex=form.dest.selectedIndex
window.open(form.dest.options[myindex].value, target="_parent", "toolbar=yes,scrollbars=yes,location=yes"); }
</script>
<form name="mis_enlaces">
<select name="dest" class="combobox" SIZE=1>
<option class="amarillo" selected value="">BLOGS AMIGOS
<option class="rojo" value="URL DE LA PAGINA">LINK1
<option class="azul" value="URL DE LA PAGINA">LINK2
<option class="verde" value="URL DE LA PAGINA">LINK3
</select><input type="button" value="Ir" onClick="Ir_amigos(this.form)">
</form>
Y este sería el resultado:
[3] Menú desplegable con enlaces que abren en "página nueva".
Colocamos este código en un gadget HTMLJavascript:
<script language="JavaScript">
<!--
function sitios_enlaces(form) {
var myindex=form.destino.selectedIndex
window.open(form.destino.options[myindex].value,"main",""); }
//-->
</script>
<form name="miForma">
<select name="destino" size=1>
<option selected value=""> MIS FAVORITOS
<option value="URL DE LA PAGINA">LINK1
<option value="URL DE LA PAGINA">LINK2
<option value="URL DE LA PAGINA">LINK3
<option value="URL DE LA PAGINA">LINK4
<option value="URL DE LA PAGINA">LINK5
</select><input type="button" class="boton" value="Ir" onClick="sitios_enlaces(this.form)">
</form>
Y este sería el resultado:
Como veis los tres menús son sencillos de instalar y con distintas opciones según sean nuestras necesidades.
Supongo que os habréis fijado en que he destacado en negrita alguna parte de su código, en concreto son unas "clases" añadidas en cada menú para darles color mediante CSS.
En el primer menú, la clase añadida (class="combobox") controlará tanto la "cajita" como los enlaces una vez desplegados.
Si añadimos algo como esto en el CSS de nuestra plantilla (antes de ]]></b:skin>) "ordenamos" al menú que tenga un color de fondo y que su texto sea de color blanco:
.combobox {
background-color: #009900;
color: #ffffff;
}
El resultado sería este:
En el segundo menú, he mantenido la clase class="combobox" pero además he añadido una clase distinta a cada enlace, así que si añadimos algo como esto en el CSS de la plantilla, cada enlace del menú se mostrará de distinto color:
.azul {
background-color: #0000FF;
color: #ffffff;
}
.rojo {
background-color: #FF0000;
color: #ffffff;
}
.verde {
background-color: #009900;
color: #ffffff;
}
.amarillo{
background-color: #FFFF00;
color: #000000;
}
El resultado sería este:
En el tercer menú, lo que he hecho ha sido añadir una clase al botón imput (class="boton"), así que colocando estas líneas en el CSS, tendríamos un botón con el texto en negrita y de color amarillo, de fondo rojo y con un borde de color gris:
.boton {
color:yellow;
background-color:red;
font-weight: bold;
border: 2px solid #ddd;
}
Resultado:
0
Top comentaristas basado en los últimos 500 comentarios del blog.
Top comentaristas basado en los últimos 5000 comentarios del blog.
Sustituir la numeración de la lista por un icono.
Una vez colocado el gadget, su aspecto será como cualquier lista numerada (Imagen 1) pero podemos fácilmente sustituir los números de la lista por un icono (Imagen 2).
[1] Editamos el gadget donde hemos incluido el código para mostrar el Top de comentaristas, colocando todo el código en un <div>, es decir, ponemos
<div id="topcoment"> al comienzo del código y </div> al final.
Sustituimos en el código las etiquetas <ol> y </ol> por <ul> y </ul> respectivamente y guardamos los cambios en el gadget.
[2] Iremos entonces a "Edición HTML" de nuestro panel y en el CSS de la plantilla (antes de ]]></b:skin>) colocamos este código:
Aporte de J. Úbeda:
Para filtrar tu propio usuario cuando lleva alguna letra acentuada, es necesario codificarlo para que lo reconozca, por ejemplo J.Úbeda sería: filter:J. Úbeda
En esta web podéis ver al final de la página una tabla con la codificación de las entidades html más habituales.
Top comentaristas (Ganando enlaces)
Hace tiempo publiqué una entrada sobre como añadir una lista con los comentaristas más activos de nuestro blog (top de comentaristas).
En aquella ocasión el gadget funcionaba con una Pipe de Yahoo que yo misma había creado a base de "estudiar" las Pipes que otros habían hecho antes. El mayor inconveniente que ese gadget presentaba, era que el enlace de cada comentarista, llevaba a una página de Google donde se mostraban los comentarios de esa persona en concreto.
En esta ocasión os traigo un gadget que muestra el nombre de los que más comentan en el blog y que he encontrado en Blogger Widgets.
La diferencia con el anterior es que el enlace del nombre de cada comentarista lleva directamente a su perfil de Blogger o a su blog en el caso de que haya comentado con su url.
Tenéis que añadir el código en un gadget HTML-Javascript y cambiar donde dice elescaparatederosa por el nombre de vuestro blog.
El gadget muestra los 10 comentaristas más activos, si queréis mostrar más o menos, cambiáis donde dice &num=10 por el número que necesitéis.
Para que vuestro nombre no aparezca en la lista, lo colocáis (tal como lo usais en el blog) sustituyendo al mio (Rosa) en el código.
Si además queréis filtrar el nombre de algún otro comentarista, ponéis sus nombre a continuación del vuestro separados cada uno por una coma.
Hay que tener en cuenta que la carga de las Pipes no es demasiado rápida, por lo que es conveniente ser prudente con el número de comentaristas a mostrar en la lista.
Es también recomendable no usar el gadget en la parte superior de la sidebar, ya que si demora en cargar podría interrumpir la carga de esta.
Es también recomendable no usar el gadget en la parte superior de la sidebar, ya que si demora en cargar podría interrumpir la carga de esta.
Top comentaristas basado en los últimos 500 comentarios del blog.<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; if(obj.value.items[i].link == "") var item ="<li>" + obj.value.items[i].title + "</li>"; else var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=2351a7b3195ee95ef3643998bc8def5e&url=http%3A%2F%2Felescaparatederosa.blogspot.com&num=10&filter=Rosa" type="text/javascript"></script>
Top comentaristas basado en los últimos 5000 comentarios del blog.<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; if(obj.value.items[i].link == "") var item ="<li>" + obj.value.items[i].title + "</li>"; else var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a55cb97ebb368bb1b89b7f6bdeb35336&url=http%3A%2F%2Felescaparatederosa.blogspot.com&num=10&filter=Rosa" type="text/javascript"></script>
Sustituir la numeración de la lista por un icono.Una vez colocado el gadget, su aspecto será como cualquier lista numerada (Imagen 1) pero podemos fácilmente sustituir los números de la lista por un icono (Imagen 2).
[1] Editamos el gadget donde hemos incluido el código para mostrar el Top de comentaristas, colocando todo el código en un <div>, es decir, ponemos
<div id="topcoment"> al comienzo del código y </div> al final.
Sustituimos en el código las etiquetas <ol> y </ol> por <ul> y </ul> respectivamente y guardamos los cambios en el gadget.
[2] Iremos entonces a "Edición HTML" de nuestro panel y en el CSS de la plantilla (antes de ]]></b:skin>) colocamos este código:
#topcoment li{
padding-left: 30px;
background: url(URL_DEL_ICONO) no-repeat top left;
}
Aporte de J. Úbeda:
Para filtrar tu propio usuario cuando lleva alguna letra acentuada, es necesario codificarlo para que lo reconozca, por ejemplo J.Úbeda sería: filter:J. Úbeda
En esta web podéis ver al final de la página una tabla con la codificación de las entidades html más habituales.
Suscribirse a:
Entradas (Atom)