tag:blogger.com,1999:blog-25641616545251426362024-02-07T13:41:00.521+01:00Ayuda&KaosPilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.comBlogger64125tag:blogger.com,1999:blog-2564161654525142636.post-52197781396178596592007-02-25T18:52:00.000+01:002008-12-12T04:22:20.738+01:00Personalizar la fecha de las entradas<span id="fullpost"><br /><p style="text-align:justify;"><span style="float:left;background:khaki;border:1px solid darkkhaki;margin-right:5px;margin-top:5px;<br />color:darkred;font-size:100px;line-height:80px;padding-top:1px;padding-right:5px;font-family: times;">A</span>lgo parecido a ésto que tengo yo en el blog: en bloque, en lugar de en línea, con fondo y... distinto, en suma.<br />Pues bien... preprados para trabajar duro:<br /><br />Para empezar, si queréis vuestro propio estilo, tenéis que andar con el photoshop o lo que queráis para crear una especie de "banner" para cada día del mes, de cada mes, y para unos pocos años de aquí a... lo que penséis andar por el blog... un rollo... (al final, tendréis que diseñar cosa de cuarenta banners).<br /><br />Si se os pone el vello de punta de pensar en tal cantidad de trabajo-como a mí-no pasa nada: <a href="http://lastword.blogspot.com/2007/01/date-to-behold.html">The Last Word</a> nos salva nuestra poca paciencia con algo menos personal, pero más sencillo. Vamos a dar los pasos:</p><br /><br />1º.- Id a Opciones de vuestro blog. En FORMATO, cambiad el de FECHA de la entrada por éste: 25 febrero 2007. Es decir: día, més, año. Es la segunda opción de la tabla, empezando por abajo. Guardad.<br /><br />2º.- Id a Edición de plantilla y expandidla:<br /><br />.- Insertad el siguiente CSS, antes del cierre /skin, para darle el estilo a la fecha (podéis cambiar el color, el fondo, el bloque...):<br /><br /><DIV align="center"> <br /><div style="width:200px;height:159px;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;background:url(http://www.mandarindesign.com/images/monday.jpg)"><br /><p style="position:relative;"><br />div#post-date { display: block; float:left; /* set this to right if you want it go to the right */ padding: 1em; /* to keep the text away from the edges */ background-color: #555555; /* you can change this to hold a picture, will make it look nicer */ border: 3px double gray; /* a border to make it look nice */ } div#post-date span.theDate { display: block; /* to put this in a different line */ font-size: 3em; /* to make the date stand out */ background-color: transparent; /* to let the background show through */ color: white; } div#post-date span.theMonth { display: block; font-size: 1em; /* smaller compared to the date */ background-color: transparent; color: white; } div#post-date span.theYear { display: block; font-size: 1em; /* smaller compared to the date */ background-color: transparent; color: white; }<br /></p></div></DIV><br /><br />2º.- Insertad el siguiente script antes del cierre /head:<br /><br /><DIV align="center"> <br /><div style="width:200px;height:159px;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;background:url(http://www.mandarindesign.com/images/monday.jpg)"><br /><p style="position:relative;"><br /><script> function date_replace(d){ var da = d.split(' '); day = "<span class='theDate'>"+da[0]+"</span>"; mon = "<span class='theMonth'>"+da[1].slice(0,3)+"</span>"; year = "<span class='theYear'>"+da[2]+"</span>"; document.write(day+mon+year); } </script><br /></p></div></DIV><br /><br />3º.- Bajad vuestra plantilla hasta el elemento "Navigation". Poco más arriba debéis encontrar, un "b:loop values='data:posts' var='post'... y poco detrás, un <br /><b:if cond='data:post.dateHeader'><br /><br /><h2 class='date-header'><data:post.dateHeader/></h2><br /><br /></b:if> que va dentro del b:loop data.post<br /><br /><p style="font-family:Arial,Helvetica,sans-serif;color:red;" ><br />Bien: ahora colocad detrás lo siguiente:<br /><br /><DIV align="center"> <br /><div style="width:200px;height:159px;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;background:url(http://www.mandarindesign.com/images/monday.jpg)"><br /><p style="position:relative;"><br /> <div id='post-date'> <script>date_replace(&#39;<data:post.dateHeader/>&#39;);</script> </div><br /><br /></p></div></DIV>></p><br /><br />De manera que os quede así ese fragmento de la tag b: loop:<br /><br /><DIV align="center"> <br /><div style="width:200px;height:159px;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;background:url(http://www.mandarindesign.com/images/monday.jpg)"><br /><p style="position:relative;"><br /><b:if cond='data:post.dateHeader'><br /><br /> <div id='post-date'> <script>date_replace(&#39;<data:post.dateHeader/>&#39;);</script> </div><br /><br /></b:if><br /><br /></p></div></DIV>></p><br /><br /><br />No guardéis nada mientras no lo veáis todo perfecto desde "Vista Previa". ¡Suerte!<br /><br />Pd: He solucionado el "error" que daba en la página, si se sguían las instrucciones de The Last Wor para esta última parte de código: señala el autor que hay que SUSTITUIR el date.Header, y todo lo que se encuentre dentro de ese b:loop, por el código que propone, a excepción de las condicionales b:if. Pero no... porque si precisamente sustituímos ese condicional, que es donde se encuentra el date.header... es cuando nos da un error como un campano. Así que yo ni sustituyo, ni reeemplazo, ni elimino (A EXCEPCION DE LA TAG h2 /h2, que ha de eliminarse si ya no se quiere visualizar la fecha "antigüa"): me limito a colocar el código justo detrás.<br /><br />Y, solucionado el problema del "error 3n la página", encuentro otro: y es que no se visualiza el hack junto a algunos títulos de entradas... como no sé si se trata de entradas que he escrito el mismo día... pues tengo que comprobarlo, entre otras cosas.<br /><br />Y ¡OJO!: el hack lo he insertado sólo en la "main" o página principal de este blog: de manera que, desde otras páginas, se ve la fecha "habitual".<br /><br />PDII: Je... acabo de insertarlo también las otras páginas, además de la principal. Funciona bien... eso sí: queda un poco horroroso junto a mis "dropcaps"... tendré que cambiarlas por una inicial más grande, o algo así...<br /><br />Y otra cosa: Efectivamente, como me sospechaba, las entradas que "no" tienen el bloque de la fecha ... es porque son del mismo día...<br /><br /><p><image class="centered"alt="post-Firma" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTMRYLa8lGCnBgrBy_lK1lNaFPw9SmDqrvsjhTBLc3YBLXoFlFnVzwDeQZmgnZHdvijlTEW-nZWsIlPnXOA9zGWXLf3a6PYyFxzH-lPSoRIGcgHso-V7vrYRJdR29aOch1StrVKHgo4U8/s320/Junio2.png" /></p></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com0tag:blogger.com,1999:blog-2564161654525142636.post-34815159417551649742007-02-22T11:00:00.000+01:002008-12-12T04:22:20.798+01:00Elegir el Tema de la Plantilla (Swicht Theme)<span id="fullpost"><br /><p style="text-align:justify;"><span style="float:left;background:khaki;border:1px solid darkkhaki;margin-right:5px;margin-top:5px;<br />color:darkred;font-size:100px;line-height:80px;padding-top:1px;padding-right:5px;font-family: times;">L</span>o he dejado insertado hace un momento en la plantilla "Mínima Ochre" de <a href="http://eloculto.blogspot.com/">El Oculto</a>. La verdad es que se trata de un hack muy versátil y fabuloso para quienes, como yo, nos aburrimos enseguida de ver nuestro blog siempre con el mismo aspecto.<br />Para entender de qué hablo, sólo tenéis que ir a la página de "El Oculto" y pinchar en alguno de los botones del TEMA... enseguida veréis cómo cambia el aspecto.<br />La idea es de Dynamicdrive, y el hack es cosa de <a href="http://purplemoggy.blogspot.com/2006/12/pre-made-theme-switching-templates.html">PurpleMoggy</a>, quien ha preparado un montón de plantillas para insertar en ellas los temas y los widgets para cambiarlos.</p><br />Sólo hay que entrar en la página del hack y buscar si entre los temas de pantilla está el de nuestro blog. Si es así, sólo hay que examinar la "demo CSS" que propone Moggy e insertar en nuestra plantilla la pieza que hará funcionar el hack, y que podéis ver antes del cierre /head<br />En la "demo" del XML file correspondiente a nuestra plantilla, tenéis los widgets para insertar en la sidebar: escoged cual queréis mostrar para que, al pulsarlos, cambie el tema de la plantilla. En mi caso, escogí el "Radio Buttons".<br /><br />Y eso es todo. Sólo tenéis que insertar esa pieza de código tras el cierre /skin y antes del cierre /head, y -en la sidebar de la plantilla-el objeto para pulsar el cambio de tema.<br /><br />Suerte: que os salga bien y os guste el resultado.<br /><br /><br /><p><image class="centered"alt="post-Firma" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTMRYLa8lGCnBgrBy_lK1lNaFPw9SmDqrvsjhTBLc3YBLXoFlFnVzwDeQZmgnZHdvijlTEW-nZWsIlPnXOA9zGWXLf3a6PYyFxzH-lPSoRIGcgHso-V7vrYRJdR29aOch1StrVKHgo4U8/s320/Junio2.png" /></p></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com0tag:blogger.com,1999:blog-2564161654525142636.post-87956800447660721302007-02-21T09:49:00.000+01:002008-12-12T04:22:20.817+01:00Destacar texto<span id="fullpost"><br /><p style="text-align:justify;"><span style="float:left;background:khaki;border:1px solid darkkhaki;margin-right:5px;margin-top:5px;<br />color:darkred;font-size:100px;line-height:80px;padding-top:1px;padding-right:5px;font-family: times;">A</span>quí, en color amarillo: <p> <span style="background-color:yellow;">Puedes destacar el texto con sólo cambiar la definición antes del cierre "span"</span>. Detrás, se puede continuar escribiendo, dentro de la tag "code", sin marcar color;<code>(texto sin marcar)</code>Tras el cierre del "code", abierto un nuevo "span", vuelve a marcarse el color elegido.<span style="background-color:yellow;">Y vamos al código:</span>.<br /></p><br /></p><br /><DIV align="center"> <br /><div style="width:200px;height:159px;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;background:url(http://www.mandarindesign.com/images/monday.jpg)"><br /><p style="position:relative;"><p> <span style="background-color:yellow;">Puedes destacar el texto con sólo cambiar la definición antes del cierre "span"</span>. Detrás, se puede continuar escribiendo, dentro de la tag "code", sin marcar color;<code>(texto sin marcar)</code>Tras el cierre del "code", abierto un nuevo "span", vuelcve a marcarse el color elegido.<span style="background-color:yellow;">Y vamos al código:</span>.<br /><br /></p><br /></p><br /></div><br /></DIV><br /><br /><br /><p><image class="centered"alt="post-Firma" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTMRYLa8lGCnBgrBy_lK1lNaFPw9SmDqrvsjhTBLc3YBLXoFlFnVzwDeQZmgnZHdvijlTEW-nZWsIlPnXOA9zGWXLf3a6PYyFxzH-lPSoRIGcgHso-V7vrYRJdR29aOch1StrVKHgo4U8/s320/Junio2.png" /></p></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com0tag:blogger.com,1999:blog-2564161654525142636.post-67497111510436472452007-02-21T01:24:00.000+01:002008-12-12T04:22:20.834+01:00Definir de una vez los colores de los links... y con efecto mouseover...<span id="fullpost"><br /><p style="text-align:justify;"><span style="float:left;background:khaki;border:1px solid darkkhaki;margin-right:5px;margin-top:5px;<br />color:darkred;font-size:100px;line-height:80px;padding-top:1px;padding-right:5px;font-family: times;">E</span>so es lo que acabo de hacer... que ya me tenía hartita tanto elegir colores... para terminar haciéndome un lío.<br />Así que me preguntaba si no habría nada por ahí que me lo diera hecho, además de cambiarme el color cuando pasase el ratón por encima... <br />Y sí... <br />Quien quiera, que pase el ratón por encima de cualquiera de los vínculos de las entradas de este blog: "seguir", marcadores, etiquetas, página arriba y abajo, etc... veréis cómo cambia el color a un naranja oscuro, al posar el ratón encima.<br />Y mañana sigo, que ya tengo mucho sueño...<br />(Coime... acabo de darme cuenta de que este hack me interfiere con el blockquote de las comillas, porque éste se "esconde" ... anda... pues voy a tener que elegir...)<br />... Y... ahora no hay problema... será cosa del navegador... o de Google, qué sé yo. Bueno: aquí va el CSS de los links (antes del cierre de skin):<br /><br /><DIV align="center"> <br /><div style="width:200px;height:159px;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;background:url(http://www.mandarindesign.com/images/monday.jpg)"><br /><p style="position:relative;">a:link {<br />color:purple; /*Unvisited link color*/<br />text-decoration:none; <br />}<br />a:visited { /*visited link color*/<br />color:red;<br />text-decoration:none;<br />}<br />a:hover { /*color on mouseover*/<br />color:darkorange;<br />text-decoration:underline;<br />}<br /></p></div></DIV><br /><br /></p><br />PD: Detrás de la última definición de color (la del "hover") he añadido un fondo amarillo... así parece que el link esté "encerrado" en una caja. Creo que así se ve mejor el efecto. Y he sustituído el efecto "underline" (la línea que subraya el link) por un "none"... o sea, nada.<br />De manera que esta última definición queda así:<br /><br /><DIV align="center"> <br /><div style="width:200px;height:159px;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;background:url(http://www.mandarindesign.com/images/monday.jpg)"><br /><p style="position:relative;">a:hover { /*color on mouseover*/<br />color:darkorange;<br />background: yellow;<br />text-decoration:none;<br />}<br /></p></div></DIV><br /><br /><p><image class="centered"alt="post-Firma" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTMRYLa8lGCnBgrBy_lK1lNaFPw9SmDqrvsjhTBLc3YBLXoFlFnVzwDeQZmgnZHdvijlTEW-nZWsIlPnXOA9zGWXLf3a6PYyFxzH-lPSoRIGcgHso-V7vrYRJdR29aOch1StrVKHgo4U8/s320/Junio2.png" /></p></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com0tag:blogger.com,1999:blog-2564161654525142636.post-1643434465768018462007-02-21T00:03:00.000+01:002008-12-12T04:22:20.844+01:00Blockquote con imagen (comillas de apertura y cierre)<span id="fullpost"><br /><p style="text-align:justify;"><span style="float:left;background:khaki;border:1px solid darkkhaki;margin-right:5px;margin-top:5px;<br />color:darkred;font-size:100px;line-height:80px;padding-top:1px;padding-right:5px;font-family: times;">A</span><br />nda que no me ha costado el encontrar un "truqui" para que se vean las comillas de apertura y cierre a la vez... porque Mandarin sólo despliega una u otra... pero no las dos a la vez</p><br />Así que, dándole vueltas al tema, he encontrado la fórmula que buscaba... aunque no me haya quedado otro remedio que insertar en la plantilla una pieza diminuta de CSS:<br /><br /><blockquote class="withline"><br /><p><br />blockquote.withimage {<br />background: url(http://www.mandarindesign.com/images/quotefirebrick.gif) no-repeat;<br />text-align: justify;<br />padding-left:20px;}</p></blockquote><br /><br />Y un "combinado" en la ventana de creación de entrada:<br /><br /><blockquote class="withline"><br /><p><br /><blockquote class="withimage">Aquí se visualizan las comillas de apertura<//p> </blockquote><p><blockquote style="background:url(http://www.mandarindesign.com/images/quotefirebrick.gif)<br /><br />no-repeat;background-position:top left;padding-left:20px;text-align:justify;<br /><br />">He cambiado el color de las comillas al rojo... quien las quiera negras o azul marino, que visite la página de Mandarín: está entre mis Links<p style="background:url(http://www.mandarindesign.com/images/unquotefirebrick.gif) no-repeat; background-position:bottom right; padding-right:5px;">Fín del texto... se cierran comillas</p></blockquote></p></blockquote><br /><br /><blockquote class="withimage">Y lo vemos así(al menos yo lo veo): abre comillas.<//p> </blockquote><p><blockquote style="background:url(http://www.mandarindesign.com/images/quotefirebrick.gif)<br />no-repeat;background-position:top left;padding-left:20px;text-align:justify;<br />">Sigue insertando texto...<p style="background:url(http://www.mandarindesign.com/images/unquotefirebrick.gif) no-repeat; background-position:bottom right; padding-right:5px;">Fín del texto y cierre de comillas. No sin antes decir que... menudo lío para unas comillas de nada.</p></blockquote><br /><p><image class="centered"alt="post-Firma" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTMRYLa8lGCnBgrBy_lK1lNaFPw9SmDqrvsjhTBLc3YBLXoFlFnVzwDeQZmgnZHdvijlTEW-nZWsIlPnXOA9zGWXLf3a6PYyFxzH-lPSoRIGcgHso-V7vrYRJdR29aOch1StrVKHgo4U8/s320/Junio2.png" /></p></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com0tag:blogger.com,1999:blog-2564161654525142636.post-59984912678945106412007-02-20T10:52:00.000+01:002008-12-12T04:22:20.856+01:00Entrada combinada<span id="fullpost"><br /><p style="text-align:justify;"><br /><a href="http://groups.msn.com/_Secure/0RgDEDTcVDvc5QnyMGaUXuVnShy5ptvfF6yzAUFnkUwvsERaYaCqtZfkuJPsrFwYLi*0O9fINywEQYlF5BOz4EWSRN4CV4Yx!bOtxb6hToMA/Sirenas1.jpg?dc=4675506650386633083"><img style="float:left;border:solid 1px yellowgreen;padding:5px;margin-right:5px;" title="Otro estilo de Entrada" src="http://groups.msn.com/_Secure/0RgDEDTcVDvc5QnyMGaUXuVnShy5ptvfF6yzAUFnkUwvsERaYaCqtZfkuJPsrFwYLi*0O9fINywEQYlF5BOz4EWSRN4CV4Yx!bOtxb6hToMA/Sirenas1.jpg?dc=4675506650386633083" alt="Sirenas" border="0" width="110" height="85"></a> <br /> <br /><span style="float: left;font: normal 60pt/0.8em Georgia,Helvetica, Verdana, Arial, sans-serif;color: yellowgreen;margin-right: 3px;">E</span>sta entrada no necesita ningún añadido de CSS a la plantilla. Combina y equilibra una DropCap con una pullquote.<br /><br /><span style="width:30%;padding:10px;background-color:yellowgreen;color:#F5F5F5;float:right; font: bold 14pt/1em Arial, Helvetica, sans-serif;text-align:left;letter-spacing: 0.05em;margin:5px;clear: both;"> <br />Es fabuloso poder cambiar el CSS y obtener cualquier efecto... <br /></span> Todo gracias a un CSS externo, que sólo hay que integrar en la entrada en la que queramos ver el efecto. Ideal para quien no sabe usar archivos externos o para quien, como yo, no tiene ninguna gana de andar con ellos... ni de insertar más cosas en el estilo de la plantilla. Y es bastante el riesgo asumido al insertar scripts ajenos, como para andar "rabilando" en el "Google pages"... repletito de scripts malintencionados, con virus en su interior...<br /></p> <br /><p><image class="centered"alt="post-Firma" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTMRYLa8lGCnBgrBy_lK1lNaFPw9SmDqrvsjhTBLc3YBLXoFlFnVzwDeQZmgnZHdvijlTEW-nZWsIlPnXOA9zGWXLf3a6PYyFxzH-lPSoRIGcgHso-V7vrYRJdR29aOch1StrVKHgo4U8/s320/Junio2.png" /></p></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com0tag:blogger.com,1999:blog-2564161654525142636.post-19744575878498238742007-02-20T09:58:00.000+01:002008-12-12T04:22:20.867+01:00Blockquotes<span id="fullpost"><br /><blockquote class="withquote"><br /><p class="withunquote">Hay muchas posibilidades de obtener textos originales, combinando pullquotes, opacidades, blockquotes, tipos de letras...<br /><p style="text-align:justify;"><span style="float:left;background:firebrick;border:1px solid black;margin-right:5px;margin-top:5px;<br />color:darkkhaki;font-size:100px;line-height:80px;padding-top:1px;padding-right:5px;font-family: times;">C</span>on y sin CSS en Edición de plantilla. También puede terminarse con otra imagen, con sólo añadir otro gif... y cambiar el color del mismo, como hago yo en esta entrada. <br />Es cosa-y siempre lo ha sido- de <a href="http://www.mandarindesign.com/troops.html#blockquoteimage">Mandarin Design</a><br /></p></p> <br /></blockquote><br /> <p style="background:url(http://www.mandarindesign.com/images/unquotefirebrick.gif) no-repeat; background-position:bottom right; padding-right:5px;">Y creo que voy a dedicarme una temporada a terminar mi libro, dejando aquí tan sólo mis experimentos con el color y los textos. Me parece que ya es hora de cambiar de registro y dedicarme a otra cosa.</p><br /><br /><blockquote class="withline"><br /><p>También una blockquote con línea a la izquierda... se puede cambiar el color y el grueso, con sólo cambiar las definiciones</p></blockquote><br /><br /> <blockquote class="withborder"><br /><p>blockquotes con borde, como si se encerrasen en cajas... igualmente se pueden cambiar las definiciones de color y gruesos. </p><br /></blockquote> <br /><br /><p><image class="centered"alt="post-Firma" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTMRYLa8lGCnBgrBy_lK1lNaFPw9SmDqrvsjhTBLc3YBLXoFlFnVzwDeQZmgnZHdvijlTEW-nZWsIlPnXOA9zGWXLf3a6PYyFxzH-lPSoRIGcgHso-V7vrYRJdR29aOch1StrVKHgo4U8/s320/Junio2.png" /></p></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com1tag:blogger.com,1999:blog-2564161654525142636.post-62127969739048114222007-02-18T01:59:00.000+01:002008-12-12T04:22:20.901+01:00Mostrar foto-Imagen de su autor en un comentario<span id="fullpost"><br /><p style="text-align:justify;"><span style="float:left;background:khaki;border:1px solid darkkhaki;margin-right:5px;margin-top:5px;<br />color:darkred;font-size:100px;line-height:80px;padding-top:1px;padding-right:5px;font-family: times;">M</span>añana lo cuento...<br />Hoy sólo decir que si picáis en alguno de mis comentarios, podéis ver cómo funciona el hack (esperad una gotina: son unos segundos los que tarda en aparecer la foto junto al comentario).<br /><br />Es muy sencillo de insertar... lo complicado es elegir el "script"... porque yo he mirado tres antes de decidirme a incluir el hack en mi blog...<br /><br />Qué pereza me da explicar... en fín: Allá vamos:<br /><br />Decía que lo complicado era elegir el script... y es que hay tres posibles: el de <a href="http://purplemoggy.blogspot.com/2006/12/comment-author-photos.html">Purplemoggy</a>; el de <a href="http://singpolyma-tech.blogspot.com/2006/03/profile-photos-with-comments.html">Singpolyma</a> (estos son los originales); y el de <a href="http://betatrucos.blogspot.com/2007/02/comentarios-con-foto-del-autor.html">Trucos Blogger</a>.<br /><br />Personalmente, me he quedado con este último script: <br /><br /><blockquote class="withline"><br /><p><script src='http://leonelhack.googlepages.com/blogger_comment_photos.js' type='text/javascript'></script><br /><br /><script type='text/javascript'><br /><br />//<![CDATA[<br /><br />BloggerProfiles.noimage = 'http://img139.imageshack.us/img139/1011/defaultavatarad7.png'<br /><br />BloggerProfiles.imageWidth = 60;<br /><br />BloggerProfiles.imageHeight = 75;<br /><br />addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});<br /><br />//]]></script><br /></p></blockquote><br /><br />A incluir antes del cierre de la tag "head".<br /><br />2º.- Expandid la plantilla y hallad el bloque de los comentarios, para dejarlo así:<br /><br /><blockquote class="withline"><br /><p><dl id='comments-block'><br /><br /><b:loop values='data:post.comments' var='comment'><br /><br /><dt class='comment-author' expr:id='"comment-" + data:comment.id'><br /><br /><div class='commentphoto' style='float:right;'/><br /><br /><a expr:name='"comment-" + data:comment.id'/><br /><br /><b:if cond='data:comment.authorUrl'><br /><br /><a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br /><br /><b:else/><br /><br /><data:comment.author/><br /><br /></b:if><br /><br /><data:commentPostedByMsg/><br /><br /></dt><br /><br /><dd class='comment-body'><br /><br /><b:if cond='data:comment.isDeleted'><br /><br /><span class='deleted-comment'><data:comment.body/></span><br /><br /><b:else/><br /><br /><p><data:comment.body/></p><br /><br /></b:if><br /><br /></dd><br /><br /><dd class='comment-footer'><br /><br /><span class='comment-timestamp'><br /><br /><a expr:href='"#comment-" + data:comment.id' title='comment permalink'><br /><br /><data:comment.timestamp/><br /><br /></a><br /><br /><b:include data='comment' name='commentDeleteIcon'/><br /><br /></span><br /><br /></dd><br /><br /><div style='clear:both;'/><br /><br /></b:loop><br /><br /></dl><br /></p></blockquote><br /><br />Cuando apliqué el hack de PurpleMoggy, cambié el "right" a "left"... no sé por qué, pero me gustan las cosas alineadas a la izquierda. Prefiero no sacar conclusiones...<br /></p><br /><p><image class="centered"alt="post-Firma" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTMRYLa8lGCnBgrBy_lK1lNaFPw9SmDqrvsjhTBLc3YBLXoFlFnVzwDeQZmgnZHdvijlTEW-nZWsIlPnXOA9zGWXLf3a6PYyFxzH-lPSoRIGcgHso-V7vrYRJdR29aOch1StrVKHgo4U8/s320/Junio2.png" /></p></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com2tag:blogger.com,1999:blog-2564161654525142636.post-1904216973700551732007-02-18T01:42:00.000+01:002008-12-12T04:22:20.910+01:00Imagen del autor de la entrada<span id="fullpost"><br /><p style="text-align:justify;"><span style="float:left;background:khaki;border:1px solid darkkhaki;margin-right:5px;margin-top:5px;<br />color:darkred;font-size:100px;line-height:80px;padding-top:1px;padding-right:5px;font-family: times;">T</span>as el texto de la entrada, figura un "posted by "Fulanit@" o un "publicado por Menganit@". Yo quité el "publicado por" y dejé sólo mi nik. <br />Este nik puede ser reemplazado (o coexistir con él, como hice yo) por la imagen del autor-su foto, su avatar...- o por una imagen cualquiera que deseéis.<br /><br />Sólo hay que hacer lo siguiente:<br /><br />1º.- Id a Edición de plantilla y expandedla. Encontrad el post-footer-line post footer-line1:<br /><br /><DIV align="center"> <br /><div style="width:200px;height:159px;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;background:url(http://www.mandarindesign.com/images/monday.jpg)"><br /><p style="position:relative;"><br /><p class='post-footer-line post-footer-line-1'><br /><br /><span class='post-author'><br /><br /><b:if cond='data:top.showAuthor'><br /><br /><data:top.authorLabel/> <data:post.author/><br /><br /></b:if><br /><br /></span> <br /><br /></p></div>></DIV><br /><br />Eliminad el data: post.author/ de la cuarta línea (Label) si queréis que la imagen reemplace al nik... si no queréis eliminar el nik, sino sólo añadirle la imagen, dejadlo como está y sólo añadir detrás, lo siguiente (en ambos casos):<br /><br /><DIV align="center"> <br /><div style="width:200px;height:159px;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;background:url(http://www.mandarindesign.com/images/monday.jpg)"><br /><p style="position:relative;"><br /><br /><br /><a href="URL DE TU BLOG"><img src="URL DE TU IMAGEN" /></a></p></div>></DIV> <br /><br />Comprobad en "Vista Previa" que todo va bien y guardad. Listos.<br /><br />. </p><br /><p><image class="centered"alt="post-Firma" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTMRYLa8lGCnBgrBy_lK1lNaFPw9SmDqrvsjhTBLc3YBLXoFlFnVzwDeQZmgnZHdvijlTEW-nZWsIlPnXOA9zGWXLf3a6PYyFxzH-lPSoRIGcgHso-V7vrYRJdR29aOch1StrVKHgo4U8/s320/Junio2.png" /></p></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com0tag:blogger.com,1999:blog-2564161654525142636.post-18020687589735600442007-02-14T10:25:00.000+01:002008-12-12T04:22:21.002+01:00Tablón o "sticky note"<span id="fullpost"><br /><p style="text-align:justify;"><span style="float:left;background:khaki;border:1px solid darkkhaki;margin-right:5px;margin-top:5px;<br />color:darkred;font-size:100px;line-height:80px;padding-top:1px;padding-right:5px;font-family: times;">N</span>o está de más tener un "tablón de mensajes bajo el título, en el que poder insertar texto, imágenes, HTML-Java... lo que a uno le parezca bien en cada momento... <br />Esta es la idea que más me gusta (queda mejor que las anteriores que probé: incluso mejor que la que había "adoptado" para "Es-Tress", basándome en una idea de Dynamicdrive). Y bueno... ahí podéis verlo bajo el título del blog, sobre la barra de menú.<br /><br />Es tan fácil como editar en la plantilla los siguientes códigos, apuntados por <a href="http://beautifulbeta.blogspot.com/2006/09/adding-message-board-to-your-blog.html">Beautiful Beta</a>:<br /><br />1º.- Añadir una sección nueva a la plantilla (dentro del "content wrapper", p.e. o del "Header Wrapper", según gustos y necesidades):<br /><div id='message-board'><br /><br /><b:section class='msgbrd' id='msgbrd' maxwidgets='1' showaddelement='yes'/><br /><br /></div> <br /><br /><br />2º.- Añadir a la plantilla una nueva definición de Variable (evidentemente, en la sección "Definición de Variables"):<br /><Variable name="MsgBrdFont" description="Message Board Font" type="font" default="italic normal 100% Verdana, Arial, Sans-serif;" value="italic normal 100% Verdana, Arial, Sans-serif;"><br /><br /><Variable name="bgMsgBrd" description="Messageboard Background Color" type="color" default="#ffffff" value="#ffffcc"><br /><Variable name="borderMsgBrd" description="Messageboard Border Color"<br />type="color" default="#336699" value="#336699"><br /><Variable name="colMsgBrd" description="Messageboard Text Color"<br />type="color" default="#000000" value="#000000"><br /><br />3º.- Definiendo el CSS (a insertar dentro de la "skin"):<br />/* Messageboard */<br /><br />.msgbrd h2 {<br />display: none;<br />}<br /><br />.msgbrd .widget-content {<br />padding: 2px 2% 2px;<br />background-color: $bgMsgBrd;<br />border: 4px solid $borderMsgBrd;<br />color: $colMsgBrd;<br />font: $MsgBrdFont;<br />}<br /><br />4º.- Guardad la plantilla e id al Diseño de Plantilla: allí podréis ver que se ha creado un nuevo "Añadir Elemento de Página", sobre las "Entradas". Ahora podéis crear un nuevo elemento: de texto, imagen o lo que os apetezca poner en vuestro Tablón.</p><br /><p><image class="centered"alt="post-Firma" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTMRYLa8lGCnBgrBy_lK1lNaFPw9SmDqrvsjhTBLc3YBLXoFlFnVzwDeQZmgnZHdvijlTEW-nZWsIlPnXOA9zGWXLf3a6PYyFxzH-lPSoRIGcgHso-V7vrYRJdR29aOch1StrVKHgo4U8/s320/Junio2.png" /></p></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com0tag:blogger.com,1999:blog-2564161654525142636.post-73083968855788088732007-02-06T11:54:00.000+01:002008-12-12T04:22:21.573+01:00Firmando, que es gerundio<span id="fullpost"><br /><p style="text-align:justify;"><span style="float:left;background:khaki;border:1px solid darkkhaki;margin-right:5px;margin-top:5px;<br />color:darkred;font-size:100px;line-height:80px;padding-top:1px;padding-right:5px;font-family: times;">U</span>na firma para el final de las entradas...<br />ví la idea en <a href="http://bloggeruniversity.blogspot.com/2007/02/blogger-beta-post-signature.html">BlogU</a> y me he confeccionado una a mi manera, para insertarla a mi manera:</p><br /><p><image class="centered"alt="post-Firma" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh-HagttuZzgiXGkC9Lc3PhKjoyLDCSi1sYAMn62gY5Nh3msUX1xcVw4W1K7Ar0us7A6NrRBQ8UqcRxUhKPYEmobT1zgs4a0XTxoIY_dRXCfLkGP81jf-LZ6EQGQXjcM1IBRczzSm7diA/s320/Firma.png" /></p></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com0tag:blogger.com,1999:blog-2564161654525142636.post-44769832631422526622007-02-05T23:54:00.000+01:002007-02-22T08:15:11.859+01:00Efectos de página<span id="fullpost"><br /><p style="text-align:justify;"><span style="float:left;background:khaki;border:1px solid darkkhaki;margin-right:5px;margin-top:5px;<br />color:darkred;font-size:100px;line-height:80px;padding-top:1px;padding-right:5px;font-family: times;">H</span>ay un montón en <a href="http://www.dynamicdrive.com/dynamicindex3/document2.htm">Dynamicdrive</a><br /><br />Cada vez que el usuario cambia de página, se produce un efecto: de "cortina", "disolver", "ascensor", "círculo"... es decir: la página que se abandona forma un "dibujo" mientras desaparece, tras el que aparece la página escogida.<br /><br />La mejor manera de entenderlo es viéndolo (he insertado el efecto "Vertical blinds". Para más efectos y el código de cada uno, id a la página. Sólo hay que insertar el código antes del cierre skin, p.e.- eso hice yo-)</p><br /><br /><br />Pd: Funciona mejor con los códigos provistos por <a href="http://www.htmlbasix.com/pagetransitions.shtml?type=9&speed=2">HTMLBasik</a><br /></span>...</span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com2tag:blogger.com,1999:blog-2564161654525142636.post-12479453462653459702007-02-05T18:18:00.000+01:002008-12-12T04:22:21.870+01:00Bordes muy "bordes"<span id="fullpost"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDOxCowgGWPX3VVaPq_NkwvFbPR6-xaOz4_gQAqGJZFieosfBvOljgVN3Ff4aGGtT2hegUQglgPkodtMB-bybTGBdxqrUsAZbfNKWIQ-OsKB9S5xAaNMXcv9LWmtHl_OZxFWLRCunSqCs/s1600-h/Comillas.png"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDOxCowgGWPX3VVaPq_NkwvFbPR6-xaOz4_gQAqGJZFieosfBvOljgVN3Ff4aGGtT2hegUQglgPkodtMB-bybTGBdxqrUsAZbfNKWIQ-OsKB9S5xAaNMXcv9LWmtHl_OZxFWLRCunSqCs/s320/Comillas.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5025942321821852034" /></a>Comprobando si salen bordes en la imagen...<br />... Pues no.<br /><br />Pero en algunas plantillas sí que se ven las imágenes "enmarcadas"... cuando no nos interesa (sobre todo porque no hemos elegido el "encuadre").<br /><br />Pues nada: abrid la plantilla y fijáos, tras la definición de variables, en un "post. image" o "image", diseñado a "padding 4 px"... con un "bordercolor" como un templo. Eliminad el "bordercolor" y andando; o sustituidlo por un border:0px;<br />Así no vuelve a salir un solo borde, fijo</span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com0tag:blogger.com,1999:blog-2564161654525142636.post-73510413050829694512007-02-05T16:22:00.000+01:002007-02-05T16:28:54.067+01:00Flickr Fonts<a href="http://www.flickr.com/photos/bip/101796758/"><img src="http://farm1.static.flickr.com/28/101796758_480ff4fe93_s.jpg" width="50" height="50" alt="P" title ="P" style="border:none; margin: 5px;"/></a><a href="http://www.flickr.com/photos/bip/158153708/"><img src="http://farm1.static.flickr.com/48/158153708_9239e53002_s.jpg" width="50" height="50" alt="R" title ="R" style="border:none; margin: 5px;"/></a><a href="http://www.flickr.com/photos/bip/161899423/"><img src="http://farm1.static.flickr.com/74/161899423_bfc98417e4_s.jpg" width="50" height="50" alt="O" title ="O" style="border:none; margin: 5px;"/></a><a href="http://www.flickr.com/photos/bip/360398809/"><img src="http://farm1.static.flickr.com/146/360398809_d567f2b965_s.jpg" width="50" height="50" alt="B" title ="B" style="border:none; margin: 5px;"/></a><a href="http://www.flickr.com/photos/urbanmkr/371888972/"><img src="http://farm1.static.flickr.com/137/371888972_068f321306_s.jpg" width="50" height="50" alt="A" title ="A" style="border:none; margin: 5px;"/></a><a href="http://www.flickr.com/photos/bip/163756869/"><img src="http://farm1.static.flickr.com/71/163756869_5681838939_s.jpg" width="50" height="50" alt="N" title ="N" style="border:none; margin: 5px;"/></a><a href="http://www.flickr.com/photos/bip/195517365/"><img src="http://farm1.static.flickr.com/68/195517365_389d25c8bb_s.jpg" width="50" height="50" alt="D" title ="D" style="border:none; margin: 5px;"/></a><a href="http://www.flickr.com/photos/bip/328975430/"><img src="http://farm1.static.flickr.com/133/328975430_675e09e327_s.jpg" width="50" height="50" alt="O" title ="O" style="border:none; margin: 5px;"/></a><img src="http://www.flickr.com/images/spaceball.gif" width="50" height="50" alt=" " title =" " style="border:none; margin: 5px;"/><a href="http://www.flickr.com/photos/bip/113364040/"><img src="http://farm1.static.flickr.com/44/113364040_765127e451_s.jpg" width="50" height="50" alt="L" title ="L" style="border:none; margin: 5px;"/></a><a href="http://www.flickr.com/photos/monceau/372319182/"><img src="http://farm1.static.flickr.com/174/372319182_51d675dbbd_s.jpg" width="50" height="50" alt="A" title ="A" style="border:none; margin: 5px;"/></a><a href="http://www.flickr.com/photos/bip/180983412/"><img src="http://farm1.static.flickr.com/76/180983412_111cd678cb_s.jpg" width="50" height="50" alt="S" title ="S" style="border:none; margin: 5px;"/></a><img src="http://www.flickr.com/images/spaceball.gif" width="50" height="50" alt=" " title =" " style="border:none; margin: 5px;"/><a href="http://www.flickr.com/photos/bip/233518619/"><img src="http://farm1.static.flickr.com/82/233518619_be9078ea1a_s.jpg" width="50" height="50" alt="F" title ="F" style="border:none; margin: 5px;"/></a><a href="http://www.flickr.com/photos/bip/93312567/"><img src="http://farm1.static.flickr.com/21/93312567_50bd848a90_s.jpg" width="50" height="50" alt="U" title ="U" style="border:none; margin: 5px;"/></a><a href="http://www.flickr.com/photos/bip/269196859/"><img src="http://farm1.static.flickr.com/115/269196859_5cb9349558_s.jpg" width="50" height="50" alt="E" title ="E" style="border:none; margin: 5px;"/></a><a href="http://www.flickr.com/photos/reallystrangegirl/151182725/"><img src="http://farm1.static.flickr.com/17/151182725_b651784b3a_s.jpg" width="50" height="50" alt="N" title ="N" style="border:none; margin: 5px;"/></a><a href="http://www.flickr.com/photos/bip/180984015/"><img src="http://farm1.static.flickr.com/56/180984015_323baf6c7a_s.jpg" width="50" height="50" alt="T" title ="T" style="border:none; margin: 5px;"/></a><a href="http://www.flickr.com/photos/bip/269244486/"><img src="http://farm1.static.flickr.com/89/269244486_a610efe122_s.jpg" width="50" height="50" alt="E" title ="E" style="border:none; margin: 5px;"/></a><a href="http://www.flickr.com/photos/bip/293765078/"><img src="http://farm1.static.flickr.com/111/293765078_e7051becbd_s.jpg" width="50" height="50" alt="S" title ="S" style="border:none; margin: 5px;"/></a><img src="http://www.flickr.com/images/spaceball.gif" width="50" height="50" alt=" " title =" " style="border:none; margin: 5px;"/><a href="http://www.flickr.com/photos/bip/185874314/"><img src="http://farm1.static.flickr.com/65/185874314_50e03f40cc_s.jpg" width="50" height="50" alt="D" title ="D" style="border:none; margin: 5px;"/></a><a href="http://www.flickr.com/photos/bip/284856723/"><img src="http://farm1.static.flickr.com/107/284856723_4dd0a35be1_s.jpg" width="50" height="50" alt="E" title ="E" style="border:none; margin: 5px;"/></a><img src="http://www.flickr.com/images/spaceball.gif" width="50" height="50" alt=" " title =" " style="border:none; margin: 5px;"/><a href="http://www.flickr.com/photos/bip/161190216/"><img src="http://farm1.static.flickr.com/76/161190216_0f74d8a9a1_s.jpg" width="50" height="50" alt="F" title ="F" style="border:none; margin: 5px;"/></a><a href="http://www.flickr.com/photos/bip/167865525/"><img src="http://farm1.static.flickr.com/49/167865525_6d9c048435_s.jpg" width="50" height="50" alt="L" title ="L" style="border:none; margin: 5px;"/></a><a href="http://www.flickr.com/photos/bip/329385579/"><img src="http://farm1.static.flickr.com/124/329385579_45040db881_s.jpg" width="50" height="50" alt="I" title ="I" style="border:none; margin: 5px;"/></a><a href="http://www.flickr.com/photos/bip/153211308/"><img src="http://farm1.static.flickr.com/54/153211308_ad0bba9237_s.jpg" width="50" height="50" alt="C" title ="C" style="border:none; margin: 5px;"/></a><a href="http://www.flickr.com/photos/bip/139877063/"><img src="http://farm1.static.flickr.com/56/139877063_30fc1b16fc_s.jpg" width="50" height="50" alt="K" title ="K" style="border:none; margin: 5px;"/></a><a href="http://www.flickr.com/photos/bip/158153708/"><img src="http://farm1.static.flickr.com/48/158153708_9239e53002_s.jpg" width="50" height="50" alt="R" title ="R" style="border:none; margin: 5px;"/></a><p style="text-align:justify;"><span style="float:left;background:khaki;border:1px solid darkkhaki;margin-right:5px;margin-top:5px;<br />color:darkred;font-size:100px;line-height:80px;padding-top:1px;padding-right:5px;font-family: times;">P</span>ues mira... a mí ésto me marea, francamente...</p><br /><br />Quien quiera "transcribir" textos, o signos de puntuación o la letra primera de la entrada (esto ya es otra cosa) o números, <a href="http://ghill.customer.netspace.net.au/flickrfont/">AQUÍ</a>. Igual a alguien le interesa para crearse una cabecera...Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com0tag:blogger.com,1999:blog-2564161654525142636.post-66559180648178345352007-02-04T00:54:00.000+01:002007-02-04T01:00:24.091+01:00Imagen en Sombra<span id="fullpost"><br /><DIV align="center"><br /><div style="width:215px;filter:shadow(color:gray);"> <br /><img src="http://www.mandarindesign.com/images/megpicasso.jpg" width="200" height="238" style="border:1px solid black;"> <br /></div> <br /></DIV> <br /><p style="text-align:justify;"><span style="float:left;background:khaki;border:1px solid darkkhaki;margin-right:5px;margin-top:5px;<br />color:darkred;font-size:100px;line-height:80px;padding-top:1px;padding-right:5px;font-family: times;">C</span>omo no soy Picasso, casi que dejo esta imagen suya, y cada quien que escoja la propia.<br />Se puede ver la imagen sombreada en los bordes: original y, sobre todo... distinto.<br /><br />El Código:<br /><DIV align="center"><br /><br /><div style="width:215px;filter:shadow(color:gray);"> <br /><br /><img src="URL DE TU IMAGEN" width="200" height="238" style="border:1px solid black;"> <br /><br /></div> <br /><br /></DIV> <br /><br /><br /></p></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com0tag:blogger.com,1999:blog-2564161654525142636.post-50338171301736121602007-02-04T00:39:00.000+01:002007-02-04T00:49:44.295+01:00Shadows...<span id="fullpost"><br /><p style="text-align:justify;"><span style="float:left;background:khaki;border:1px solid darkkhaki;margin-right:5px;margin-top:5px;<br />color:darkred;font-size:100px;line-height:80px;padding-top:1px;padding-right:5px;font-family: times;">S</span>ombras...</p><br /><div style="width:250px;padding:10px;filter:shadow(color:gray);"><br /><div style="width:250px;text-align:left;padding:10px;background-color:#F5F5F5;border: 1px solid black;font-size:10px;"><br />Esta es una "Caja de sombras", en la que podéis cambiar cosas como el ancho-width": lo cambié de 350 a 250 px- color, etc... como en todo, para ajustarlo a vuestras preferencias. Pongo el código fuera de la caja. <br /></div> <br /></div> <br /><br /><div style="width:350px;padding:10px;filter:shadow(color:gray);"><br /><br /><div style="width:350px;text-align:left;padding:10px;background-color:#F5F5F5;border: 1px solid black;font-size:10px;"><br /><br />TU TEXTO AQUÍ. <br /><br /></div> <br /><br /></div> <br /><br /><br /></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com0tag:blogger.com,1999:blog-2564161654525142636.post-69377335852518260712007-02-04T00:30:00.000+01:002007-02-04T00:36:57.056+01:00"Petit point"<span id="fullpost"><br /><div style="margin:0px auto;BORDER: black 1px dashed;PADDING: 15px;FONT-SIZE: 12px;WIDTH: 200px;BACKGROUND-COLOR: white;TEXT-ALIGN: center"><br />COca-Cola<br /><br><br /><img height=133 width=50 alt="Coke Bottle" src="http://www.mandarindesign.com/images/coke.gif" ><br /></div><br /><p style="text-align:justify;"><span style="float:left;background:khaki;border:1px solid darkkhaki;margin-right:5px;margin-top:5px;<br />color:darkred;font-size:100px;line-height:80px;padding-top:1px;padding-right:5px;font-family: times;">Q</span>e noooooo: que no voy a mandar a nadie a bordar (aunque es más relajante que ir a freir espárragos, p.e., jajjaaaa). El título es por la caja de la Coca-Cola (si es que no me apetece buscar otra imagen)... como véis, diseñada en puntitos.<br />Me gustó y aquí está.<br />El código:<br /><div style="margin:0px auto;BORDER: black 1px dashed;PADDING: 15px;FONT-SIZE: 12px;WIDTH: 200px;BACKGROUND-COLOR: white;TEXT-ALIGN: center"><br /><br />NOMBRE DE LA IMAGEN<br /><br /><br><br /><br /><img height=133 width=50 alt="TITULO DE LA IMAGEN" src="http://URL DE LA IMAGEN.gif" ><br /><br /></div><br /></p></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com0tag:blogger.com,1999:blog-2564161654525142636.post-89858801654330241052007-02-03T23:45:00.000+01:002007-02-04T00:05:04.614+01:00Opaca y transparente pullquote<span id="fullpost"><br /><div style="width:80%;background:darksalmon;padding:10px;border:2px solid brown;"> <br /><h4>Pull opaca</h4><br /><div style="color:brown;width:150px;background:white;float:right;filter:alpha(opacity=20);-moz-opacity:.2;opacity:.2;margin:10px;font-family:Verdana, Arial, Helvetica;font-size: 28px;line-height:26px;text-align:right;"><br /> ...juega con los colores <br /><small> de tu página </small><br /><strong> para combinarlos <small>con el de la quote</small></strong><br /> Los resultados pueden ser otros.Y os remito a <a href="http://www.mandarindesign.com/troops.html#blockquoteimage">CSS Transparency: The Opacity Property <br />Brown on Darksalmon</a><br /><br><br /> </div><br /> <br /> <br /><p>Aunque parezca mentira, el opaco llama la atención sobre el texto que contiene</p> <br />El código trabaja entre "divs" <br /><p><br /><br /><b>El Texto aquí va en marrón y el fondo en blanco... para resaltar aquél</b><br><br />Por una vez, el resultado de este hack es mejor en IE que en otros navegadores-siempre que esté definido el fondo, claro-.<br />También vale para Mozilla. <br /></p> <br /></div> <br /><div style="clear:both;"></div></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com0tag:blogger.com,1999:blog-2564161654525142636.post-81347491749320882982007-02-03T23:16:00.000+01:002007-02-04T00:12:28.164+01:00Sombreado, flotante...<span id="fullpost"><br /><div width="100" style="filter:shadow(color:black);float:right;font-weight:bold;font-size:18pt;font-family:georgia;color:forestgreen;padding:10px;">Flotando a la derecha</div><br />Aunque se lea un poco confuso...<br /><p style="text-align:justify;"><span style="float:left;background:khaki;border:1px solid darkkhaki;margin-right:5px;margin-top:5px;<br />color:darkred;font-size:100px;line-height:80px;padding-top:1px;padding-right:5px;font-family: times;">E</span>vidente...<br />Y, ahora, el código para la entrada:<br /><div width="100" style="filter:shadow(color:black);float:right;font-weight:bold;font-size:18pt;font-family:georgia;color:forestgreen;padding:10px;">Float Right</div><br /><br />YOUR TEXT GOES HERE.<br /></p></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com0tag:blogger.com,1999:blog-2564161654525142636.post-24858300611866924022007-02-03T22:50:00.000+01:002007-02-03T22:56:20.314+01:00Drop Cap "bloques"<span id="fullpost"><br /><p style="text-align:justify;"><span style="float:left;background:khaki;border:1px solid darkkhaki;margin-right:5px;margin-top:5px;<br />color:darkred;font-size:100px;line-height:80px;padding-top:1px;padding-right:5px;font-family: times;">F</span>órmulas distintas... ésta en "bloques</p></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com0tag:blogger.com,1999:blog-2564161654525142636.post-67372040097830271552007-02-03T12:56:00.000+01:002007-02-03T13:19:20.444+01:00Revisión Drop Caps<span id="fullpost"><br /><p style="text-align:justify;"><span style="float:left;color:darkred;font-size:100px;line-height:80px;padding-top:1px;padding-right:5px;font-family: times;">P</span>or lo general, las Drop Caps son difíciles de hacer funcionar en algunos navegadores, porque se "despegan" del resto del texto, como algo al margen de la entrada. Con este código, probablemente, puedan verse "comme il faut".</p></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com0tag:blogger.com,1999:blog-2564161654525142636.post-86882165549965724792007-02-03T12:49:00.000+01:002007-02-03T12:54:05.180+01:00Superposición de Imágenes<span id="fullpost"><br /><div style="float:left;width:100px;height:100px;background: url(http://www.mandarindesign.com/images/ducksmall.gif) top left no-repeat;"> <br /> <div style="float:left;"><img src="http://www.mandarindesign.com/images/samtrans1.gif" width="100" height="100"> <br /> </div> <br /></div><br />Dos imágenes que se superponen para crear... "ésto" (cada quien, con tiempo y ganas, puede hacer algo mejor, je). Pero es un buen ejemplo de lo que se puede hacer en diseño para el blog. Es de <a href="http://www.mandarindesign.com/2004_12_01_archive.html#110226664252210132">Mandarin Design</a><br /><br /><br /></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com0tag:blogger.com,1999:blog-2564161654525142636.post-74586108724003269372007-02-03T11:43:00.000+01:002008-12-12T04:22:21.990+01:00Lightbox<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh50br8YivkaEStzmkGmMP4yviXOhFGTIBetbMnH4b-m2yOfIutUiw8U82O6-ai8pKZqPJIw5aX_VrFONeWG0k3iA7AGrxSxD4h0veo_lDeM5SLEyQfofzzw0WW8A5SIHhLbjkqLTtNVos/s320/asturias.gif" rel="lightbox">Asturias</a><br /><br />Funciona perfectamente: por obra y gracia de Leonel, de <a href="http://betatrucos.blogspot.com/2006/11/light-box-en-blogger-beta.html">Trucos Blogger</a><br /><br />Estupendo trabajo, sí señor... :)<br /><br />Para abrir la imagen, sólo tenéis que picar en "Asturias". Para cerrarla, picar en la "X" que véis debajo.<br /><br />(No explico el hack, porque os remito directamente a Leonel y su página. Lo único, decir que no puse nada en el HTML-Java de mi blog. Sencillamente el último código "rel=lightbox", lo inserté directamente en esta entrada, con la URL de mi imagen. Y el código de construcción y llamada de la lightbox, lo inserté antes del cierre skin, donde me pareció oportuno... y es que, en esta plantilla, no tengo referencia de *---- Footer----)<br /><br />Me gusta, me gusta...Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com2tag:blogger.com,1999:blog-2564161654525142636.post-37345473806627019602007-02-01T12:16:00.000+01:002007-02-01T12:18:59.174+01:00"Flashing" Tabla<span id="fullpost"><br /><p> <br /><span class="dropcap">P</span>odéis verla enmarcando el "ver reacción Blogs", en la cima de mi sidebar en "Clásica". <br />Sólo hay que configurar sus parámetros, a vuestra manera y gustos, en el código que ofrece <a href="http://www.dynamicdrive.com/dynamicindex11/other2.htm">dynamicdrive</a>:<br /><br /><textarea cols="30" wrap="off" class="codigo" onclick="this.select()"><table border="0" width="280" id="myexample" style="border:5px solid green"><br /><tr><br /><td>Insert anything you want into this table.<br>Insert anything you want into this table.<br>Insert anything you want into this table.<br></td><br /></tr><br /></table><br /><script language="JavaScript1.2"><br /><!--<br /><br />/*<br />Flashing Table Border Script- © Dynamic Drive (www.dynamicdrive.com)<br />Visit http://www.dynamicdrive.com for this script<br />Credit must stay intact for use<br />*/<br /><br />//configure interval btw flash (1000=1 second)<br />var speed=500<br /><br />function flashit(){<br />var crosstable=document.getElementById? document.getElementById("myexample") : document.all? document.all.myexample : ""<br />if (crosstable){<br />if (crosstable.style.borderColor.indexOf("green")!=-1)<br />crosstable.style.borderColor="red"<br />else<br />crosstable.style.borderColor="green"<br />}<br />}<br />setInterval("flashit()", speed)<br />//--><br /></script><br /></textarea><br /></p></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com0tag:blogger.com,1999:blog-2564161654525142636.post-43501375346436559312007-02-01T12:13:00.000+01:002007-02-01T12:16:14.381+01:00Efecto "reflejo"<span id="fullpost"><br /><p> <br /><span class="dropcap">T</span>omamos una imagen cualquiera y le creamos un "doble" invertido, para añadirle una ilusión de reflejo. Podéis ver el reflejo de "Carrera de Sirenas",de Waterhouse, en la parte de abajo de "Clásica".<br />Tan fácil como introducir la URL de la imagen que queráis en el "src=" de la primera parte del código que nos da <a href="http://www.dynamicdrive.com/dynamicindex4/reflect.htm">dynamicdrive</a>.<br /><br />Y éste es el código:<br /><br /><textarea cols="30" wrap="off" class="codigo" onclick="this.select()"><!--Change following reflection image to your own--><br /><img id="reflect" src="reflect.jpg"><br /><br><br /><script language="JavaScript1.2"><br /><br />/*<br />Image reflection script (Submitted by Savio, savio_d_souza@hotmail.com)<br />Permission granted to Dynamic Drive to feature script in archive<br />For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com<br />*/<br /><br />function f1(){<br />setInterval("mdiv.filters.wave.phase+=10",100);<br />}<br /><br />if (document.all){<br />document.write('<img id=mdiv src="'+document.all.reflect.src+'" style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()">')<br />window.onload=f1<br />}<br /><br /></script><br /></textarea><br /><br />¡Ojo!: Si insertáis el código en el Body de vuestra plantilla y ésta ya contiene algún "onload"... como que se darán de tortas (comprobado). Así que, para poder mostrar el resultado de la aplicación de este código, lo he insertado en el HTML-Java de "Añadir un Elemento de Página"</p></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com0