tag:blogger.com,1999:blog-25641616545251426362024-02-07T13:41:00.521+01:00Ayuda&KaosPilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.comBlogger3125tag:blogger.com,1999:blog-2564161654525142636.post-507504323145622282007-02-12T23:42:00.000+01:002008-12-12T04:22:21.037+01:00Página, Entrada... Arriba<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>s lo que he instalado hoy en el pié de mis entradas... a veces, cuando la entrada es muy larga, me eternizo subiendo la barra. <br />Así me resulta más fácil llegar al inicio.<br /><br />Es un código sencillo, a insertar en post. footer-line, mejor justo detrás de la tag "icons":<br /><br /><!-- to top of page and top of blog --><br /><br /><a href='javascript:scroll(0,0)' title='Scroll to top of this page'>Top of Page</a><br /><br /><a expr:onclick='"javascript:document.getElementById(\"post-" + data:post.id + "\").scrollIntoView(true);"' href='javascript:void(0);' title='Scroll to top of post'>Top of Post</a><br /><br /><br />Quien quiera, como yo he hecho, que cambie lo que quiera que aparezca en el "title" (tooltip) y a la vista, antes del cierre de la tag "a" <br /><br />Vía: <a href="http://beautifulbeta.blogspot.com/2006/10/blog-navigation-top-of-page-and-top-of.html">Beautiful Beta</a></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-14972760305096488552007-02-11T18:09:00.000+01:002008-12-12T04:22:21.281+01:00Tooltips con imagen<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;">C</span>reo que ya he comentado en alguna ocasión, acerca de estos "títulos" que salen en algunas expresiones de nuestros blogs, cuando pasamos el ratón por encima.<br />Algunos blogroll las utilizan también para mostrar, junto al link, una imagen de la web que recomiendan (queda muy guapo, pero pesa mucho... sobre todo si hay muchos links en el blogroll). Ahora, vamos a hacer una<br /><a class=Ntooltip href="">prueba:<span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmSvaEYYA3UYmCMeSEZw8PWXY4L2n_3YQAengI2hlB0ZRzSwcz3QcDZVeQo_vz5xaZs0_wwxOG6jz-pIis0XQA1YuL_-T-5JxcgrQ-27pmSgdVl0xkQzZNyH-Ac6qr1O1iNZ8_z1Q-AaY/s320/Acatar18.gif" alt="Internet Explorer"> </span></a><br />Como véis, al pasar el ratón sobre "prueba", sale un muñequín. Lo mismo podéis hacer especto de un link y su imagen o respecto de un texto cualquiera (insertando en la tooltip una palabra o una imagen, como queráis).<br />Las claves para que funcione tan estupendamente, las tiene <a href="http://vagabundia.blogspot.com/2006/11/tooltips-usando-css.html">Vagabundia</a>, así:<br /><br />1º.- Insertar el CSS de la tooltip en la edición de plantilla:<br />a.Ntooltip {<br />position: relative;<br />text-decoration: none !important; <br />color:#0080C0 !important; <br />font-weight:bold !important; <br />}<br /><br />a.Ntooltip:hover {<br />z-index:999; <br />background-color:#000000; <br />}<br /><br />a.Ntooltip span {<br />display: none; <br />}<br /><br />a.Ntooltip:hover span {<br />display: block; <br />position: absolute; <br />top:2em; left:2em; <br />width:250px; <br />padding:5px; <br />background-color: #0080C0; <br />color: #FFFFFF; <br />}<br /><br />("Ntooltip" es la denominación que jmiur le ha dado a la herramienta, para diferenciarla de otras posibles en la plantilla. Podéis cambiar todas las definiciones de colores, p.e.)<br /><br />2º.- Insertad la siguiente tag donde queráis que aparezca vuestra tooltip:<br /><a class=Ntooltip href="">prueba:( o un link)<span> <img src="URLIMAGEN" alt="TÍTULO"> </span></a><br /><br />(He utilizado la función "alt": en otro caso, la tooltip no me funcionaba)<br /><br />Como véis, es una especie de "lightbox". Solo que más ligera y con muchas posibilidades.</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-55312089427759158752007-01-31T21:40:00.000+01:002007-01-31T21:50:02.492+01:00Tooltip para etiquetas<span id="fullpost"><br /><p> <br /><span class="dropcap">P</span>asad el ratón sobre la etiqueta de una entrada: aparecerá un "cartelito" que dice "más entradas con esta etiqueta". <br /><br />Eso es una "tooltip". Y es facilísimo de insertar:<br /><br />Abrid y expanded la plantilla, para bajar hasta <br /><span class='post-labels'><br /><br /><b:if cond='data:post.labels'><br /><br /><data:postLabelsLabel/><br /><br /><b:loop values='data:post.labels' var='label'><br /><br /><a expr:href='data:label.url' <br /><br />Añadid, inmediatamente detrás: <br /><br />title='More posts on this topic' <br /><br />(poned en el título lo que os parezca bien)<br /><br />Y dejad el resto como lo tenéis...<br /><br />Vía: <a href="http://beautifulbeta.blogspot.com/2006/09/adding-tooltip-to-your-labels-links.html">Beautiful Beta</a></p><br /></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com0