tag:blogger.com,1999:blog-25641616545251426362024-02-07T13:41:00.521+01:00Ayuda&KaosPilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.comBlogger70125tag:blogger.com,1999:blog-2564161654525142636.post-79102929688475187662007-02-26T18:09:00.000+01:002016-12-18T05:08:17.749+01:00Etiquetas... ¡Arriba! (+ visualizarlas en Tabla de Contenidos)<span id="fullpost"><br /></span>
<div style="text-align: justify;">
<span id="fullpost"><span style="color: darkred; float: left; font-family: "times"; font-size: 100px; line-height: 80px; padding-right: 5px; padding-top: 1px;">T</span>an llenito de "cacharros" está el pie de mis entradas, que andaba dándole vueltas a la forma de "descargarlo" algo... colocando, p.e., alguno de los "chismes" en la cabecera de la entrada. Y pensé que bien podían ser las etiquetas... al menos es lo que yo suelo mirar en el pie de una entrada: lo demás me interesa... casi nada.<br />Pensé que debía ser una cosa fácil: tan sólo pensar, con un poco de sentido común, en qué lugar podía colocarse sin problemas. Y sí... la cosa era fácil. De manera que ahora reparto el peso de la entrada entre la cabecera y el pie. Así: </span></div>
<span id="fullpost"><br /><br />.- Fuí a Edición de Plantilla y la expandí. Bajé hasta la tag p class='post-footer-line post-footer-line-2', donde se encontraba el "span" de mi elemento "labels"-etiquetas"... y lo trasladé entero (desde la apertura del "span" hasta el cierre de ese "span") justo debajo de la tag b:loop values='data:posts' var='post' (quien enga en su plantilla el hack de "breadcrumbs", como yo, que coloque el span de las etiquetas bajo las breadcrumbs). Y ya está... Os quedará algo como ésto en la plantilla:<br /><br /><div align="center"><a name='more'></a>
<br />
<div style="-moz-opacity: 0.25; background: url("http://www.mandarindesign.com/images/monday.jpg"); filter: alpha(opacity = 25); height: 159px; opacity: 0.25; width: 200px;">
<br />
<div style="position: relative;">
<br /><b:loop values='data:posts' var='post'><br /><br />[AQUI LAS BREADCRUMBS, QUIEN LAS TENGA]<br /><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'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><br /><br /><b:if cond='data:label.isLast != "true"'>,</b:if><br /><br /> </b:loop><br /><br /> </b:if></div>
</div>
</div>
<br /><br />Facilín, ¿a que sí?.<br /><br />PD: <div style="color: red; font-family: "arial" , "helvetica" , sans-serif;">
Y... el truqui tiene uun "efecto secundario" sobre el hack de Contenidos que tengo insertado en este blog ( ¡¡¡¡jajjajaaa!!!... perdón: me río porque a ésto le llamo yo hacer " doble carambola" en la misma jugada): Y es que despliega las etiquetas (o "categorías", como las he apellidado) cuando se pica en la Tabla de Contenidos, en la Nube de Etiquetas o, en fín, en cualquier etiqueta: aparecen las entradas con la etiqueta en cuestión... con ésta y las otras etiquetas a las que ha sido asignada la entrada (p.e.: si una entrada está etiquetada como "blog", "Taller" y "Fecha", aparecen todas las etiquetas bajo las que he puesto la entrada, je... todas).<br /><br />No sé si alguien se armará un lío con esta "nueva" Tabla de Contenidos"... lo único que hay que hacer cuando se pica en una etiqueta, es, para ver la entrada, picar en el párrafo final... no sé si me explico: la ultima frase es el título de la entrada.<br /><br />Y si no... ya es hora de usar las Etiquetas Multi-Estilo... con lo que me encantan :D(gracias, Hackosphere)<br /><br />Bien... es distinto... y me gusta... </div>
<br /><br />PDII: Como siempre me queda la duda de si alguien se armará un lío, he procurado mejorar el diseño: ahora, cada vez que se pica en una etiqueta o en los "Contenidos-Entradas" del blog, y tras el aviso "contenidos", se despliegan:<br /><br />.- "Categoría": aquí figuran las etiquetas que asigné a la entrada en cuestión (puesto que mis entradas suelen estar asignadas a más de una etiqueta, insisto).<br /><br />.- La caja que contiene la(s) entrada(s) asociada(s) a la etiqueta. Al picar en esta caja de la entrada, se nos despliega la entrada completa.<br /><br />Es decir: Categoría, etiquetas; caja, entrada.<br /><br /><br />(Coime... tanta explicación... si lo más fácil es picar y ya está, ajajajjaaa)<br /><br /><image alt="post-Firma" class="centered" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTMRYLa8lGCnBgrBy_lK1lNaFPw9SmDqrvsjhTBLc3YBLXoFlFnVzwDeQZmgnZHdvijlTEW-nZWsIlPnXOA9zGWXLf3a6PYyFxzH-lPSoRIGcgHso-V7vrYRJdR29aOch1StrVKHgo4U8/s320/Junio2.png"></image></span>Pilar Lozano Santoshttp://www.blogger.com/profile/14417669816485875991noreply@blogger.com1tag: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-45103661561687527052007-02-24T04:49:00.000+01:002008-12-12T04:22:20.746+01:00Cambio de columna<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 decir: que he quitado la columna "sidebar2" que se veía a la izquierda de las Entradas, al lado de los "Links" y demás... y he creado una nueva columna "newsidebar" a la derecha, donde he colocado el contenido de la otra: los comentarios y el archivo del blog.<br />Y ya cuento mañana cómo, porque ha sido facilísimo... hasta que me he tenido que poner a cambiar anchos y paddings y gaitas... "vista previa" va... "vista previa" viene... qué mareo...</p><br /><br />... <br /><br />Sigo:<br /><br />1º.- Fuí a Edición de Plantilla, la expandí y comencé por el CSS (cada quien tiene sus manías), añadiendo mi nueva sidebar. Y como era nueva y las plantillas no "entienden" el español, pues le puse de nombre "newsidebar" y la hice flotar a la derecha, que es donde quería que se viera:<br /><br /><blockquote class="withline"><br /><p><br />#newsidebar-wrapper {<br /><br />width: ¿?px;<br />text-align: right; <br />float: right;<br />background:lightblue;<br />border-right: solid 4px darkblue;<br />word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br /><br />overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br /><br />}</p></blockquote><br /><br />Es decir: la configuración general, la misma que otras sidebar... sólo que cambiando el nombre y el "float"... si la hubiera querido a la izquierda, habría sido float: left;. En cuanto al ancho, pongo unas interrogaciones, porque ésto ha de cambiarlo cada quien a la medida de su plantilla.<br /><br />También le añadí color de fondo: background: lightblue;<br />y márgen a la derecha: border-right : solid 4 px darkblue.<br />Podéis cambiar el borde contínuo, por uno discontínuo- de puntitos-, como el que tengo "encerrando" las entradas, con sólo cambiar "solid" por "dotted". En cuanto a los píxeles, dependiendo de si lo queréis más o menos grueso, cambiáis el número.<br />Y el color, claro, cada quien elige el suyo.<br /><br />2º.- Crear la sidebar y elegir el sitio donde insertarla. <br />He escogido ponerla en la cima del blog, bajo el título y al lado de las entradas. De forma que, para que saliera justo ahí donde quería, inserté el "div" entre el "content-wrapper" y el "main-wrapper. Así:<br /><br /><blockquote class="withline"><br /><p><br /><br /><br /> <div id='content-wrapper'><br /><br /><div id='newsidebar-wrapper'><br /><br /><br /><br /><b:section class='sidebar' id='newsidebar' maxwidgets='20' showaddelement='yes'><br /><br /><b:widget id='' locked='false' title='' type=''><br /><br /><b:includable id='main'><br /><br /><br /><br /></b:includable><br /><br /></b:widget><br /><br /></b:section><br /><br /> </div><br /><br /><br /><br /><br /><br /> <div id='main-wrapper'></p></blockquote><br /><br />Poned los "maxiwidgets" al número que os venga bien... yo suelo poner unos cuantos de más siempre, jajajaaa...por que no sé la de chismes que voy a andar metiendo en la plantilla de mi blog. Total, en cualquier momento podéis cambiarlo, aumentando o suprimiendo.<br /><br />Y ahora viene lo bueno... echad una mirada a vuestro blog desde "vista previa" y ya podéis salir corriendo al CSS para cambiar los anchos. Lo más fácil es acudir al "outer-wrapper", bajo las "Variable definitions", y darle la suma del ancho de todas las sidebar, widebar y "main" del blog. Pero... a veces no funciona así... y no queda otro remedio que andar quitando y poniendo anchos "a ojo" hasta que todo se ve más o menos en su sitio desde "Vista Previa".<br />Esta es la parte tediosa y de verdadero trabajo, pues.<br /><br />Cuando terminéis de ajustar la plantilla y la veais estupenda en "Vista Previa", podéis guardar y mirar en Diseño de Plantilla: os habrá "aparecido" a la derecha de las Entradas del Blog una preciosísima sidebar con su "Añadir Elemento de Página".<br /><br />Si queréis la sidebar en otro sitio... pues cambiadla de nombre y lugar. Podéis ponerle de nombre, p.e. "sidebar2" y darle el estilo CSS, para luego colocarla donde más os guste... <br />Si queréis que aparezca bajo una sidebar que ya tenéis en el blog, pues insertad el "div" justo debajo del fín de esa sidebar ... en fín: la imaginación es libre.<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-20632363270907010592007-02-23T21:47:00.000+01:002008-12-12T04:22:20.756+01:00Nube de Etiquetas<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;">P</span>odéis verla a la izquierda, en la widebar.<br />Y la idea es de <a href="http://phydeaux3.blogspot.com/2006/09/code-for-beta-blogger-label-cloud.html">Phydeaux</a>. Vamos allá:</p><br /><br />1º.- Incluir en la plantilla expandida el estilo de la Nube, antes del cierre /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;">/* Label Cloud Styles<br />----------------------------------------------- */<br />#labelCloud {text-align:center;font-family:arial,sans-serif;}<br />#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}<br />#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}<br />#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}<br />#labelCloud a{text-decoration:none}<br />#labelCloud a:hover{text-decoration:underline}<br />#labelCloud li a{}<br />#labelCloud .label-cloud {}<br />#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}<br />#labelCloud .label-cloud li:before{content:"" !important}</p></div></DIV><br /><br />2º.- Incluid el "script" de configuración de la Nube, entrte el cierre de /skin y el cierre de /head:<br /><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 type='text/javascript'><br /><br />// Label Cloud User Variables<br /><br />var lcBlogURL = 'http://YOURBLOG.blogspot.com';<br /><br />var cloudMin = 1;<br /><br />var maxFontSize = 20;<br /><br />var maxColor = [0,0,255];<br /><br />var minFontSize = 10;<br /><br />var minColor = [0,0,0];<br /><br />var lcShowCount = false;<br /><br /></script><br /><br /></p></div></DIV> <br /><br />Aquí debéis cambiar la URL por la de vuestro blog.<br /><br />3º.- Ahora hay que crear el objeto-widget: <br />Bajad vuestraplantilla hasta encontrar, en la sección de sidebar, un b: widget: id="Label1" locked="false" title="Labels" tupe="Label".<br />Añadid el código del widget:<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:widget id='Label1' locked='false' title='Label Cloud' type='Label'><br /><br /><b:includable id='main'><br /><br /> <b:if cond='data:title'><br /><br /> <h2><data:title/></h2><br /><br /> </b:if><br /><br /><br /><br /> <div class='widget-content'><br /><br /> <div id='labelCloud'/><br /><br /><script type='text/javascript'><br /><br /><br /><br />// Don't change anything past this point -----------------<br /><br />// Cloud function s() ripped from del.icio.us<br /><br />function s(a,b,i,x){<br /><br /> if(a&gt;b){<br /><br /> var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)<br /><br /> }<br /><br /> else{<br /><br /> var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)<br /><br /> }<br /><br /> return v<br /><br /> }<br /><br /><br /><br /><br /><br />var c=[];<br /><br />var labelCount = new Array(); <br /><br />var ts = new Object;<br /><br /><b:loop values='data:labels' var='label'><br /><br />var theName = &quot;<data:label.name/>&quot;;<br /><br />ts[theName] = <data:label.count/>;<br /><br /></b:loop><br /><br /><br /><br />for (t in ts){<br /><br /> if (!labelCount[ts[t]]){<br /><br /> labelCount[ts[t]] = new Array(ts[t])<br /><br /> }<br /><br /> }<br /><br />var ta=cloudMin-1;<br /><br />tz = labelCount.length - cloudMin;<br /><br />lc2 = document.getElementById('labelCloud');<br /><br />ul = document.createElement('ul');<br /><br />ul.className = 'label-cloud';<br /><br />for(var t in ts){<br /><br /> if(ts[t] &lt; cloudMin){<br /><br /> continue;<br /><br /> }<br /><br /> for (var i=0;3 &gt; i;i++) {<br /><br /> c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)<br /><br /> } <br /><br /> var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);<br /><br /> li = document.createElement('li');<br /><br /> li.style.fontSize = fs+'px';<br /><br /> li.style.lineHeight = '1';<br /><br /> a = document.createElement('a');<br /><br /> a.title = ts[t]+' Posts in '+t;<br /><br /> a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';<br /><br /> a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);<br /><br /> if (lcShowCount){<br /><br /> span = document.createElement('span');<br /><br /> span.innerHTML = '('+ts[t]+') ';<br /><br /> span.className = 'label-count';<br /><br /> a.appendChild(document.createTextNode(t));<br /><br /> li.appendChild(a);<br /><br /> li.appendChild(span);<br /><br /> }<br /><br /> else {<br /><br /> a.appendChild(document.createTextNode(t));<br /><br /> li.appendChild(a);<br /><br /> }<br /><br /> ul.appendChild(li);<br /><br /> abnk = document.createTextNode(' ');<br /><br /> ul.appendChild(abnk);<br /><br /> }<br /><br /> lc2.appendChild(ul); <br /><br /></script><br /><br /><br /><br /><noscript><br /><br /> <ul><br /><br /> <b:loop values='data:labels' var='label'><br /><br /> <li><br /><br /> <b:if cond='data:blog.url == data:label.url'><br /><br /> <data:label.name/><br /><br /> <b:else/><br /><br /> <a expr:href='data:label.url'><data:label.name/></a><br /><br /> </b:if><br /><br /> (<data:label.count/>)<br /><br /> </li><br /><br /> </b:loop><br /><br /> </ul><br /><br /></noscript><br /><br /> <b:include name='quickedit'/><br /><br /> </div><br /><br /><br /><br /></b:includable><br /><br /></b:widget> <br /><br /></p></div></DIV><br /><br />Y ya está. Si en "vista previa" no véis aparecer la Nube de Etiquetas... es que hay algo mal hecho.<br /><br />Y... hay un "bug" (error) si todas las etiquetas sólo tienen una entrada... aviso. Así que estad seguros de que al menos una etiqueta tiene más de una entrada.<br /><br />Más:<br /><br />Podéis cambiar secciones de la configuración de la nube, en cuanto al tamaño y color de las etiquetas, p.e. Así que vamos a contar un poco para qué sirve cada una:<br /><br />.- var cloudMin= 1;<br />Muestra el número de etiquetas que desplegará tu Nube. Si quieres que se desplieguen todas, deja el "1". Si pones un número mñas alto, sólo se mostrarán las etiquetas hasta el número que hayas colocado.<br /><br />.- var maxFontSize = 20;<br />var maxColor = [0,0,255];<br />var minFontSize = 10;<br />var minColor = [0,0,0];<br />var lcShowCount = false;<br /><br />"MaxFonSize" representa, en píxeles, el tamaño de las etiquetas con más entradas. El "maxColor" representa el color de las etiquetas con más entradas.<br />Lo mismo representa la función "min", pero con las etiquetas con menos entradas.<br />Los colores están representados en formato RGB.<br /><br />Si no tienes más de tres etiquetas, la Nube no se ve bien... <br /><br />Si cambias el color de las etiquetas en la Nube, asegúrate de incluir el formato del color entre corchetes [] y los números separados por comas. ERl color por defecto es BLUE-azul- para las etiquetas con más entradas. El color por defecto para las etiquetas con menos entradas es el BLACK-negro.<br /><br />Si no sabes cómo cambiar el color con una carta RGB, entra <a href="http://www.pitt.edu/~nisg/cis/web/cgi/rgb.html">AQUÍ</a><br /><br /><br />.- lcShowCount:<br /><br />Puede ser "false" o "true": lo que hace es colocar el contador de entradas que contiene la etiqueta en "on" u "off": para que se vea o no.<br /><br />En cuanto al estilo-CSS:<br /><br />.- #labelCloud {text-align:center;font-family:arial,sans-serif;}<br /><br />Puedes cambiar las Fuentes y el centrado. Esto último puedes hacerlo de la siguiente forma:<br />text-align:justify;<br />text-align:right;<br />text-align:left;<br />(a la derecha, a la izquierda)<br /><br />.- #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}<br /><br />display:inline; puedes cambiarlo por display:block; para obtener el "peso" de cada etiqueta y frecuencia y mostrar la entrada en su línea, separada. SAi lo modificas, probablemente tengas que hacerlo desde el Elemento de Página (para ordenarlas alfabéticamente, p.e.)<br /><br />.- #labelCloud .label-count<br /><br />Si cambias a "tru" el contador del que hablé arriba-lcShowCount-, tendrás que cambiar también esta variable, para modificar el color y tamaño de las etiquetas en esta línea.<br /><br /><br />Y, ¡Hala!: paciencia. Si queréis cambiarlo todo, es que tenéis una moral a prueba de bomba.<br /><br />Pd: Pues no es tan complicado... he cambiado los colores y he activado el contador; también las he alineado a la izquierda...y he cambiado el tamaño de las "mini" (es que si no... no veo ni torta :( ); y el tipo de letra... y las he ordenado por frecuencia... y... he quitado el subrayado...y... espero no cambiar más cosas, jajajaaa.<br />Lo que no me gusta tanto es el cambio "iin line" a "block". Me gusta más el primero.<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-81631153457377143762007-02-23T10:40:00.000+01:002008-12-12T04:22:20.764+01:00Buscador de Hacks<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;">B</span>ueno... lo he visto y he querido probarlo (como siempre): Un servicio de Google para tener en una página todas las direcciones de los sitios que sueles visitar para encontrar lo que necesitas: hacks, noticias sobre salud, ciencia, vivienda... lo que uno prefiera. Sólo hay que entrar en la página y crear el propio. <br />Yo he hecho una prueba y sólo he metido mi dirección... si me gusta, iré incluyendo más. En caso contrario... me lo cargo, jajajjaaa.<br />De momento, dejo aquí-y entre los links de este Blog-mi <a href="http://www.google.com/coop/cse?cx=011104324003892517287%3Aeujkobxm-p4">Buscador de Hacks</a> para que veáis la idea (Y ya cuento más en otro momento... como mi "·Nube de Etiquetas"... es que ahora no tengo tiempo).<br /><br />Sigo...<br /><br />Hum... me gustaría saber si un "contributor" que acabo de ver es quien yo creo... por el mail: ¡es que te has apuntado como "Anónimo" !. Please: si lees este mensaje, ¿me lo confirmas?. Es que me dan un pco de miedo los anónimos...<br /><br />Quien quiera "contribuir", para que todos veamos sus hacks y hacer figurar su página en este buscador-y nole paerezca hacerse el suyo propio-... que se apunte y le incluyo. Pero, please... nada de "anónimos", que no están los tiempos como para dejar pasar a cualquiera...<br /><br />Bueno: quien primero ha comentado el tema y lo ha insertado en su web es <a href="http://hackosphere.blogspot.com/index.html">Hackosphere</a>. Y lo dicho: sigo observando y decidiendo...</p><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-10696971097023500712007-02-23T01:00:00.000+01:002008-12-12T04:22:20.772+01:00Cambiar el color de fondo...<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 más fácil del mundo:<br />yo voy a mi plantilla y añado un "background:" donde me parece del CSS: en la sidebar1, en la sidebar2, en la widebar o en el main-media. Y pongo el color que me apetece: "light" (suave" o "dark" (oscuro).<br />Así que, cada vez que me aburren los colores de mi blog, voy y cambio el background.<br />Ahora le ha "tocado" a la sidebar1: background: darkblue;<br />Y a la widebar: background: lightblue;<br />Y mañana... quizás le toque a la sidebar2... o a las Entradas... o al pie de página... o al Tablón de Mensajes...<br />Conforme me vaya aburriendo decidiré.</p><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-57315616483361806872007-02-22T23:28:00.000+01:002008-12-12T04:22:20.781+01:00Sobre "Entrada Permanente"<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 otra de las fórmulas de lo que llaman "Sticky post": es decir, una entrada que preside, inamovible permanente, todas las entradas del blog.<br />He querido ponerla para avisar de dónde se encuentran rodos los contenidos de este blog... al menos las entradas... porque hay tanto... que el "sticky post" se haría interminable.<br />Es otra alternativa al "Tablón de Mensajes" que tengo puesto bajo la imagen del Blog. Quien lo haya insertado en su página, ya tiene el "Añadir Elemento de Página" sobre las "Entradas del Blog" en su plantilla. Sólo le hace falta escribir el texto.<br /></p><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-33987074377591341602007-02-22T22:50:00.000+01:002008-12-12T04:22:20.789+01:00"Mágica" Navbar<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>e trata de esconder la navbar... no de eliminarla. <br />Con este hack queda "oculta" (no se ve así, a simple vista) pero no desaparece, puesto que al pasar el ratón por encima de donde se supone que estaba, aparecen en la barra inferior de nuestra pantalla, sus direcciones.<br />¿Cómo?: Pues insertando una sencilla pieza antes de las definiciones de CSS (en mi caso, la he colocado detrás de "Variables", antes de la definición del body:</p><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;">#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}<br />#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}<br /></p></div></DIV><br /><br />Es, simplemente, un "caso" de opacidad...<br />Vía: <a href="http://bloggeruniversity.blogspot.com/2006/10/peek-boo-blogger-navabar.html">BlogU</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-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-68618921438077582842007-02-19T17:09:00.000+01:002008-12-12T04:22:20.882+01:00Un Blog es un Libro...<span id="fullpost"><br /><p style="text-align:justify;"><span style="float:left;background:firebrick;border:1px solid black;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>uantas personas usan internet, ya sea los grupos de MSN o los blogs, para dejar en ellos sus experiencias personales: realidades e imaginación. <br />Un montón. Porque imaginar, escribir y describir son algunos de los mejores ejercicios de los que es capaz la mente humana.<br /><br />Pero... qué fea puede quedar nuestra historia en un blog al uso... por eso, nada como darle un formato distinto, más cercano a la portada de un libro impreso.<br /><br />Si queréis ver un ejemplo, mirad una de mis historias (que no soy capaz de terminar, ag) en <a href="http://eloculto.blogspot.com/">El Oculto</a>-<br /><br />Aunque hay una plantilla para descargarse con un formato parecido, yo he hecho todo el proceso "a mano", siguiendo- y no siguiendo... porque todo termina a mi manera- las instrucciones de <a href="http://betabloggerfordummies.blogspot.com/2007/01/post-book-in-new-blogger.html">Dummies</a>.<br /><br />Ya aviso, de antemano, que es algo complejo... sobre todo por el ttrabajo que implica. Pero quien quiera ver su obra en un blog, con un formato bonito, no puede dejar de hacerlo:<br /><br />1º.- Descargaros cualquier plantilla, aunque una "Mínima" queda bien. Y es que vuestro Libro será el único objeto del blog.<br /><br />2º.- Cread una Tabla de Contenidos:<br />Id a Edición de Plantilla, expandedla y hallad la siguiente tag:<br /><br /><blockquote class="withline"><br /><p><div id='main-wrapper'><br /><br /><b:section class='main' id='main' ></p></blockquote><br /><br />Detrás del "main" de la segunda línea, añadid: maxwidgets='2' showaddelement='yes'><br /><br /><br />Así tendréis otro "Elemento de Página" en la cima de vuestras Entradas del Blog.<br /><br />Acudid, entonces, a la Plantilla y añadid, en el nuevo Elemento de Página, un HTML con el siguiente contenido:<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 /><table border="0" bordercolor="#000000" cellpadding="0" width="100%" bgcolor="#000000"><tbody><tr><td><table border="40" bordercolor="#fbf5c1" cellpadding="0" width="100%" height="500" bgcolor="#ffffff"><tbody><tr><td><p align="center"><strong>Table of Contents</strong></p><br /><br /><center><br /><br /><table cellpadding="5" width="169"><!--DWLayoutTable--> <tbody><tr> <td width="121"> <div align="center"><br /><br /><pre><a href="http://newcastleofotranto.blogspot.com/2007/01/preface-to-first-edition.html">Preface to the First Edition</a></pre><br /><br /></div></td> </tr> <tr> <td><div align="center"><a href="http://newcastleofotranto.blogspot.com/2007/01/chapter-i.html">Chapter I</a> </div></td> </tr> <tr> <td><div align="center"><a href="http://newcastleofotranto.blogspot.com/2007/01/chapter-ii.html">Chapter II</a> </div></td> </tr> <tr> <td> <div align="center"><a href="http://newcastleofotranto.blogspot.com/2007/01/chapter-iii.html">Chapter III</a></div></td> </tr> <tr> <td><div align="center"><a href="http://newcastleofotranto.blogspot.com/2007/01/chapter-iv.html">Chapter IV</a> </div></td> </tr> <tr> <td><div align="center"><a href="http://newcastleofotranto.blogspot.com/2007/01/chapter-v.html">Chapter V</a><br /><br /></div></td> </tr> <tr> <td><br /><br /></td> </tr> </tbody></table><br /><br /></center><br /><br /></td></tr></tbody></table></td></tr></tbody></table><br /><br /><em>© 1765 by Horace Walpole</em></p></div></DIV><br /><br />¡OJO!: AQUI TENEIS QUE REEMPLAZAR LAS URL Y DATOS DEL LIBRO Y TABLA POR LAS VUESTRAS PROPIAS. Porque éstos son los datros del ejemplo de Dummies, con "El Castillo de Otranto" (una de mis obras favoritas, por cierto, de la literarura gótica. Os recomiendo leerla... yo la tengo en uno de mis grupos traducida al español).<br /><br />2º.- Añadir tags condicionales, para dejar en la vista del blog sólo la Tabla de Contenidos, sin desplegar los posts-entradas:<br /><br />Id a Edición de Plantilla y encontrad esta tag:<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;"><b:includable id='main' var='top'> <br /><br /><!-- posts --> <br /><br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br /><br /><div class='blog-posts'></p></div></DIV><br /><br />Sustituid las "xxxxxxxxx" por lo siguiente: <br /><br /><b:if cond='data:blog.pageType == "item"'> <br /><br /><br />Colocad un </b:if> detrás del cierre del primer "div"<br /><br />3º.- Expandid la plantilla y encontrad este widget:<br /><b:widget id='HTML1' locked='false' title='' type='HTML'><br /><br /><b:includable id='main'><br /><br />Añadid ésto, inmediatamente después de la segunda línea:<br /><br /><b:if cond='data:blog.url == data:blog.homepageUrl'><br /><br />Y añadid este cierre: </b:if> inemdiatamente antes del cierre del b: includable, de manera que el widget os quede así:<br /><br /><blockquote class="withline"><br /><p><b:widget id='HTML1' locked='false' title='' type='HTML'><br /><br /><b:includable id='main'><br /><br /><b:if cond='data:blog.url == data:blog.homepageUrl'><br /><br /><br /><br />WIDGET CODE<br /><br /><br /><br /></b:if> <br /><br /></b:includable><br /><br /></b:widget> <br /></p></blockquote><br /><br />Esto hará que la Tabla de Contenidos se vea sólo en la Página Principal-Main o como queráis llamarla.<br /><br />4º.- Para dejar "curiosa" la sidebar, con vuestro perfil y el del Libro, id a "Añadir un Elemento de Página-HTML-JAVA", e insertad lo siguiente, cuidando de reemplazar los datos del ejemplo por los vuestros. En mi caso, como "El Oculto" no está publicado, ni falta que le hace, no tengo imagen del Libro, por lo que la he sustituído por mi avatar, el del perfil:<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 /><h2 class="sidebar-title">About the Author</h2> <h2 class="sidebar-title">About Me</h2> <a href="http://www.blogger.com/profile/4709592"> <span class="profile-img"><img alt="My Photo" width="58" src="http://photos1.blogger.com/blogger/7384/574/320/horace.jpg" height="80"/> </span> </a> <strong></strong><span style="font-weight: bold;">Horace Walpole </span><strong style="font-weight: bold;"></strong><span style="font-weight: bold;"><br /><br />London, United Kingdom</span> <p class="profile-textblock"> I would have blogged this novel for NaNoWriMo if it had existed in 1765. Instead, I'm blogging posthumously. </p> <p class="profile-link"> <a href="http://www.blogger.com/profile/4709592">View my complete profile</a> </p><br /><br /><br /><br /><br /><br /><h2 class="sidebar-title">About the Book</h2><br /><br /><a href="http://newcastleofotranto.blogspot.com/"><br /><br /><span class="profile-img"><img width="110" src="http://photos1.blogger.com/blogger/7384/574/1600/otranto.jpg"/></span></a><br /><br /><p style="font-weight: bold;">The Castle of Otranto</p><br /><br /><p class="profile-textblock">Published in 1765, this work is considered the first gothic novel in the English language; its supernatural happenings and mysterious ambiance were widely emulated in the genre.</p><br /></p></div></DIV><br /><br />5º.- Para eliminar el "subscribe esta Entrada" (que queda muy feo en un Libro), id al cierre skin de vuestra plantilla, y colocad, inmediatamente antes, lo siguiente:<br /><br /> .feed-links { display:none; } <br /><br />6º.- Eliminar los "links de "entradas previas, entradas antigüas":<br />Bajad la plantilla hasta el elemento "Navigation" y eliminad ésto: <br /><br /><!-- navigation --><br /><br /><b:include name='nextprev'/> <br /><br /><br />7º.- Ahora vamos a colocar pestañas horizontales en la cabecera y el pie de nuestra plantilla y blog:<br /><br />Abrid y expandid la plantilla y encontrad ésto:<br /><br /><blockquote class="withline"><br /><p><div id='header-wrapper'><br /><br /><b:section class='header' id='header'><br /><br /><b:widget id='Header1' locked='true' title='VUESTRO TITULO (Header)' type='Header'/></p></blockquote> <br /><br />Cambiad la segunda línea por ésto:<br /><br /><blockquote class="withline"><br /><p><b:section class='header' id='header' maxwidgets='3' showaddelement='yes'><br /></p></blockquote><br /><br />Cambiad el "true" por "false".<br />Esto hará que podáis desplazaros a la cima del blog para insertar las pestañas. Id, entonces, al nuevo Elemento de Página y escoged "Etiquetas", para aladirlas a la cabecera de vuestro blog.<br /><br />Volved a Edición de plantilla, expandidla y encontrad lo siguiente:<br /><br /><b:widget id='Label1' locked='false' title='Labels' type='Label'><br /><br /><b:includable id='main'><br /><br />Añadid, detrás, ésto:<br /><br /><textarea class=code cols="40" rows="2" wrap="off"><br /><div id='tabsG'><br /><br /><ul><br /><li><a href='http://newcastleofotranto.blogspot.com/index.html' title='Home'><span>Home</span></a></li><br /><li><a href='http://newcastleofotranto.blogspot.com/2007/01/preface-to-first-edition.html' title='Preface'><span>Preface</span></a></li><br /><li><a href='http://newcastleofotranto.blogspot.com/2007/01/chapter-i.html' title='Chapter I'><span>Chapter I</span></a></li><br /><li><a href='http://newcastleofotranto.blogspot.com/2007/01/chapter-ii.html' title='Chapter II'><span>Chapter II</span></a></li><br /><li><a href='http://newcastleofotranto.blogspot.com/2007/01/chapter-iii.html' title='Chapter III'><span>Chapter III</span></a></li><br /><br /><li><a href='http://newcastleofotranto.blogspot.com/2007/01/chapter-iv.html' title='Chapter IV'><span>Chapter IV</span></a></li><br /><li><a href='http://newcastleofotranto.blogspot.com/2007/01/chapter-v.html' title='Chapter V'><span>Chapter V</span></a></li><br /></ul><br /></div><br /></textarea> <br /><br /><br />¡OJO!: LO MISMO DE SIEMPRE: REEMPLAZAD LOS DATOS Y URL DEL EJEMPLO POR LOS VUESTROS.<br /><br />8º.- Añadimos ahora el CSS de las pestañas a nuestra plantilla, antes del cierre 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;"><br />/*- Menu Tabs G--------------------------- */<br /><br />#tabsG {<br />float:left;<br />width:100%;<br />background:#666;<br />font-size:93%;<br />margin-top:15px;<br />margin-bottom:10px;<br />line-height:normal;<br />}<br />#tabsG ul {<br />margin:0;<br />padding:10px 10px 0 50px;<br />list-style:none;<br />}<br />#tabsG li {<br />display:inline;<br />margin:0;<br />padding:0;<br />}<br />#tabsG a {<br />float:left;<br />background:url("tableftG.gif") no-repeat left top;<br />margin:0;<br />padding:0 0 0 4px;<br />text-decoration:none;<br />}<br />#tabsG a span {<br />float:left;<br />display:block;<br />background:url("tabrightG.gif") no-repeat right top;<br />padding:5px 15px 4px 6px;<br />color:#FFF;<br />}<br />/* Commented Backslash Hack hides rule from IE5-Mac \*/<br />#tabsG a span {float:none;}<br />/* End IE5-Mac hack */<br />#tabsG a:hover span {<br />color:#FFF;<br />}<br />#tabsG a:hover {<br />background-position:0% -42px;<br />}<br />#tabsG a:hover span {<br />background-position:100% -42px;<br />}<br /></p></div></DIV><br /><br />9º.- Haced lo mismo para el "footer", es decir, la sidebar abajo del blog: añadirle un Elemento de Página "Etiquetas", y el "div" con las url de nuestro Libro que he comentado en el paso 7º.<br /><br />Complicadito, ¿a que sí?. Pues si queréis ahorraros todo este trabajo, descargaros la plantilla <a href="http://betabloggerfordummies.googlepages.com/CastleOfOtranto.xml">AQUÍ</a>. Y ya me gustaría que alguien me comentara qué tal le fue descargándola, porque no la he probado.</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-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-21895827084879755922007-02-18T01:07:00.000+01:002008-12-12T04:22:20.921+01:00"Entradas recientes" bajo 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;">P</span>ues eso mismo: cuando piquéis en una entrada para ver su contenido, bajo la misma, tras las etiquetas, marcadores y demás, aparecere "Ayu&Kaos Entradas recientes", con las últimas cinco entradas del blog.<br /><br />Y lo hice de la siguiente manera:<br /><br />1º.- Id a "Opciones-Feed" de vuestra plantilla y abrid el formato completo. En la ventana para añadir un feed que aparecerá en el pie de vuestras entradas, poned ésto:<br />http://EL NOMBRE DE TU BLOG.blogspot.com/feeds/posts/default?alt=rss<br />Aceptar y guardar.<br /><br />2º.- Convertid ese nuevo RSS en un script de java, acudiendo a alguna página al efecto como, p.e., <a href="http://itde.vccs.edu/rss2js/build.php">itde</a>, en la que tendréis que ingresar la URL que habéis guardado en el Feed de vuestro blog, y elegir entre las opciones de configuración que os dan. Picad en "vista previa" cuando esté todo listo y fijáos en que salga correctamente la lista de entradas de vuestro blog. Si no es así, es que algo está mal hecho...<br />Una vez que lo veáis todo correcto, picad en el generador de java, y guardad el código que allí aparece.<br /><br />3º.- Id a "Añadir un Elemento de Página" y escoged "HTML-JAVA": allí insertaréis el código anterior, pondréis un título (para reconocerlo más tarde) como "Entradas más recientes" o lo que os apetezca, y guardaréis el Elemento.<br /><br />4º.- Id a Edición de plantilla, y expandedla.<br /><br />a).- Encontrad el main-wrapper b: section class=main id= main, y añadid aquí detrás "maxwidgets="4" showaddelement=yes". <br /><br />b).- Encontrad en la sección "sidebar" el widget que habéis creado en "Añadir Elemento de Página HTML-Java" y quitadlo de esa ubicación para ponerlo bajo los entradas de vuestro blog. Es decir: bajad la plantilla hasta terminar todos los elementos de pie de entrada (marcadores, iconos, breadcrumbs...) e insertad el widget justo detrás del cierre del b: widget "entradas del Blog", que es el que contiene todos los elementos. <br />Detrás de vuestro widget "Entradas recientes" sólo debe quedar el cierre de "b: includable" y el cierre del "div"<br />Guardad y listos. Ahora tengo que comprobar si se actualizan las entradas recientes...<br />Vía: <a href="http://betabloggerfordummies.blogspot.com/2006/12/add-recent-posts-list-after-every-post.html">Dummies</a><br /><br /><br />PD: Este hack tiene un "bug"... es decir: que falla y, además, da error. Por eso he preferido eliminar el Elemento de Página con el código del conversor de RSS-script e introducir un nuevo Elemento de Página-Feed, con la URL de feed que hemos usado en este hack. Así, sencilla y directamente, tenemos nuestra ventana de Entradas Recientes. Luego, sólo hay que desplazar el widget detrás de las "Entradas del Blog" en la Edición de plantilla.</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-62222150179296159262007-02-16T10:55:00.000+01:002008-12-12T04:22:20.939+01:00Valorar las entradas ("Rate this post")<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;">P</span>odéis verlo en el pie de cada una de mis entradas. <br />Se trata de valorar, picando en las estrellitas, la entrada correspondiente: se abre una ventana nueva en la que se te pide valorar con las estrellas, así como el nombre de usuario y la contraseña. <br />Luego cuento más.... ahora no tengo tiempo.<br />Sigo: <br />Sólo hay que insertar en el post.footer-line-1 lo siguiente:<br />Rate this post: <script charset='utf-8' expr:src='"http://www.newsgator.com/ngs/ratings.aspx?rurl=" + data:post.url' type='text/javascript'/> (data provided from <a href="http://www.newsgator.com">NewsGator Online</a><br /><br /><br />Y cambiar, si se quiere, el "rate this post"<br /><br />Vía: <a href="http://web-messengers.blogspot.com/2007/02/newsgator-post-rating-system-for-new.html">Messengr.com</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-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-41076452278677710092007-02-14T01:59:00.000+01:002008-12-12T04:22:21.017+01:00Cómo poner "cosas" en la cabecera (las que pondrías normalmente al pie 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;">E</span>chad un vistazo en <a href="http://blogger-tricks.blogspot.com/2007/02/ways-of-putting-searchbar-adsense-ad.html">Ways of putting searchbar, AdSense ad units, link units, hyperlinks, text, etc in the Blog Header as well as above the post in every page</a> de <a href="http://blogger-tricks.blogspot.com/2007/02/ways-of-putting-searchbar-adsense-ad.html">Tips and Tricks</a><br /><br />Yo no he puesto Adsense-ni falta que me hace, je-en ninguno de mis blogs... pero me ha parecido muy curiosa la idea y la he "colocado" en uno de mis blogs de <a href="http://junio-menu.blogspot.com/">prueba</a>.<br />Tengo que mirarlo con más detenimiento...</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-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-13734972318703732252007-02-12T09:38:00.000+01:002008-12-12T04:22:21.046+01:00Marcador Google<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;">P</span>uestos a insertar marcadores (aunque ya lo tengo incluído en el "Social Bookmarking" de mi plantilla) ahí va también el "Social Bookmarking de Google". Podéis ver el simbolito antes de "Digg" y "Del.icio.us".<br />He marcado unas cuantas etiquetas para ver cómo funciona (si algún día tengo ganas, las marcaré todas). <br />Y lo hice así-siguiendo las directrices de <a href="http://beautifulbeta.blogspot.com/2006/12/adding-google-bookmarks-to-your.html">Beautiful Beta</a>-:<br /><br />.- Expandir la plantilla y añadir lo siguiente en la parte que tengáis los otros marcadores (normalmente, post-footer-line):<br /><br /><a expr:href='"http://www.google.com/bookmarks/mark?op=add&amp;bkmk=" + data:post.url + "&amp;title="+data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",19);"' target='_blank'><img alt='Google' src='http://home.planet.nl/~hansoosting/images/icon_sb_goo.gif'/></a><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-80546980258258646002007-02-12T00:37:00.000+01:002008-12-12T04:22:21.064+01:00Color de fondo para los comentarios<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>ira que soy osada... con la tarjeta gráfica pocha, que no me muestra ni un sólo color de fondo... me atrevo a cada cosa...<br />Pero, ya que en unos días voy a tener mi nuevo pc, pues así tengo parte del "trabajo" hecho, para cuando pueda ver bien todos los colores de mi blog. Así que he cambiado el CSS de mis comentarios, para que tengan un color de fondo distinto, dependiendo que sean del autor o de las visitas, siguiendo las instrucciones de <a href="http://stubborn-fanatic.blogspot.com/2006/12/add-background-colors-to-comments.html">Vivek Sanghi</a> De momento, mantengo los mismos colores que ella inserta en su blog, hasta que yo-¡por fín!- pueda ver los míos con una nueva tarjeta gráfica (qué más me da que me cuenten que son "grey" o "green"... si no puedo verlos ahora mismo, uf).<br />En esta ocasión, no pongo código alguno, pues depende de vuestras plantillas, de si tenéis insertado el hack de Hackosphere para "ilumnar" los comentarios de autor y.... mejor que acudáis a la fuente.</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-34665641459560388972007-02-12T00:01:00.000+01:002008-12-12T04:22:21.103+01:00Lo que llaman "colorear" los posts<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;">Y</span> que no es sino añadir dos marcadores (ya podéis verlos al final de mis entradas). <br />He escogido la fórmula de <a href="http://hackosphere.blogspot.com/2006/09/delicious-and-digg-hotlinks-for-your.html">Hackosphere</a> para integrarlos en mi blog (ay... todo lo tengo que probar...) y, claro está, no me ha quedado otra que añadir los botones de "Del.icio.us a mi navegador, para ver cómo funcionan, así como añadir que te añadir tags, para ver cómo queda (ya no me quedan ganas para Digg).<br /><br />El código de Hackosphere lo colocáis donde os plazca, pero sin saliros de los post-labels; post-footer-line (porque imagino que querréis colocarlo al final de cada una de vuestras entradas, ¿no?). Eso sí: he eliminado un /span que no pintaba nada al final de la tag:<br /><br /><a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>DiggIt!</a> <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Del.icio.us</a></span><br /><br />Ese /span es el que he suprmido a la hora de insertar el código en mi pantilla.<br /><br />Y ya está (voy a ver cómo funciona lo de las "Pipes" de Yahoo... parece divertido)</p><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-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-55174523323757603612007-02-10T05:43:00.000+01:002008-12-12T04:22:21.314+01:00Comentarios en la barra-menú<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>i sé cuánto tiempo llevo intentando que me "reaccione" mi feed de feedburner... pero parece que ya lo he conseguido. Al mismo tiempo, he estado buscando la fórmula para insertar los comentarios en el menú: Hacía tiempo que me preguntaba que si podía tener las entradas del blog ahí, a ver por qué no podía tener también los comentarios. Pero no conozco ningún blog con un hack semejante, así que... he tenido que apañármelas solita. No parecía tarea fácil, pero lo he conseguido; y de la manera más tonta:<br /><br />Puesto que tengo sólo tres comentarios, mal contados, y todos míos (je),y mi feed sólo me despliega las entradas más recientes, me las compuse para poder ver aquéllos en una ventana aparte.<br />Al insertar en el menú el apartado de "Comentarios", con la URL que todos conocemos ya de "nuestro blog/feeds/comments/full", me percaté de que se abre una ventana preguntando si queremos guardar el archivo... de forma que no se despliegan "automáticamente" los comentarios. Así que los guardé en un archivo nuevo y coloqué la URL del mismo como URL de mis "COmentarios" en el menú. Y andando... funciona muy bien.<br />Si alguien tiene alguna duda, que me pregunte.<br /><br />Pd: ¡Conseguido!. He integrado mis comentarios en Feedburner y ya los tengo a la vista, con su sindicación, en la barra-menú.<br />Sólo he tenido que que dar de alta en Feedburner "mi URL feeds/comments/full" e insertar la dirección del feed en mi menú.<br />¡Se acabó el andar mostrando los comentarios recientes en la sidebar!.<br />Y me ha llevado menos de cinco minutos, je... soy un fenómeno ;)</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.com2