tag:blogger.com,1999:blog-89326501770707308312024-03-27T19:43:11.391+01:00El EscaparateDiseño blog, tutoriales, recursos e inspiración, todo para los blogs de Blogger. Ayuda desinteresada y personalizada.Rosahttp://www.blogger.com/profile/04564116363926564176noreply@blogger.comBlogger752125tag:blogger.com,1999:blog-8932650177070730831.post-8189022055097305602011-01-17T12:04:00.000+01:002011-01-17T12:04:01.784+01:00Enlace a SeguidoresHace unos días que he colocado un enlace en el footer del Escaparate desde donde, quien así lo quiera, puede hacerse seguidor del blog:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Seguir al Escaparate" border="0" height="50" src="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/TSw6ckMpiaI/AAAAAAAAIjA/NLD_Bq-et0U/s400/Seguidores-elescaparatederosa.jpg" title="Seguir al Escaparate" width="204" /></div><br />
Aunque no es nada nuevo, ya que puede encontrarse como hacerlo en varios "blogs de ayuda Blogger", voy a explicarlo en esta entrada ya que varias personas me han preguntado sobre esto.<br />
<br />
Se trata de añadir un enlace que de la posibilidad a nuestras visitas de hacerse seguidor de nuestro blog, sin necesidad de mostrar el gadget de Seguidores.<br />
Podemos hacerlo con un simple enlace de texto, una imagen o, como en mi caso, usando ambos.<br />
<br />
El código iría colocado en un <b>Gadget HTML</b> en la sidebar, footer, etc.<br />
<br />
<div style="color: #990000;"><b>Con enlace de texto:</b></div><blockquote><a href="http://www.blogger.com/follow-blog.g?blogID=<span style="color: #cc0000;">XXXXXXXXXXXX</span>" target="_blank"><span style="color: #cc0000;"> Seguir el Escaparate</span></a></blockquote><br />
<div style="color: #990000;"><b>Con enlace en una imagen:</b></div><blockquote><a href="http://www.blogger.com/follow-blog.g?blogID=<span style="color: #cc0000;">XXXXXXXXXXXX</span>" target="_blank"><span style="color: #cc0000;"><img src="AQUI LA URL DE LA IMAGEN"/></span></a></blockquote><br />
<div style="color: #990000;"><b>Con enlace en texto e imagen:</b></div><blockquote><a href="http://www.blogger.com/follow-blog.g?blogID=<span style="color: #cc0000;">XXXXXXXXXXXX</span>" target="_blank"><span style="color: #cc0000;"><img src="AQUI LA URL DE LA IMAGEN"/> Seguir el Escaparate</span></a></blockquote><br />
<br />
<b>Notas:</b><br />
<div class="recuadro">Lo que vemos resaltado en rojo, es en cada caso lo que hemos de modificar por nuestros datos.<br />
<br />
En el caso de blogID, tenemos que colocar <b>sustituyendo a las XXXXXXXXX</b>, la ID de nuestro blog, es decir, el número que se muestra en la url del navegador cuando estamos dentro de nuestro panel de Blogger en la pestaña Diseño:<br />
<br />
<img src="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/TIuLH16lslI/AAAAAAAAIV8/kNN4_hgC3us/s640/blogID.jpg"/><br />
</div>Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-8932650177070730831.post-69756191582128006772011-01-07T20:32:00.000+01:002011-01-07T20:32:46.831+01:00Fan Badge personalizada para tu página en Facebook<div class="recuadro"><div class="separator" style="clear: both; text-align: center;"><a href="http://www.pasaralaunacional.com/" target="=_blank"><img border="0" height="53" width="400" title="Blog de la Nacho" alt="Blog de la Nacho" src="http://4.bp.blogspot.com/_8PJ-pgoBhWQ/TSbhH9g8J2I/AAAAAAAAIiw/LpwNvDE-YA0/s400/blogdelancho-elescaparatederosa.jpg" /></a></div><br />
Nuestro amigo <a href="http://draft.blogger.com/profile/16457492585011084867" target="=_blank">Felipe</a> nos explica paso a paso, utilizando las herramientas para desarrolladores que ofrece Facebook, como añadir una Fan Badge o medalla personalizada que muestre el número de fans de nuestra página en Facebook.<br />
<br />
El mismo en su entrada, facilita tres modelos distintos y muy lindos además para elegir, que podemos empezar a utilizar siguiendo sus instrucciones:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" height="92" width="400" title="Fan Badge" alt="Fan Badge" src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/TSbjPk66h3I/AAAAAAAAIi4/FRgV6bkGUcg/s400/badgefacebook-elescaparatederosa.jpg" /></div></div><br />
<div class="enlaceEx"><span>AÑADIR FAN BADGE:</span><a href="http://www.pasaralaunacional.com/2011/01/fb-social-graph-crea-una-fan-badge.html" target="_blank">Blog de la Nacho</a></div>Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-8932650177070730831.post-76923960261173986312011-01-06T11:24:00.000+01:002011-01-06T11:24:40.156+01:00¡Feliz Día de Reyes!<div class="separator" style="clear: both; text-align: center;"><img border="0" height="279" width="400" title="Dia de Reyes" alt="Dia de Reyes" src="http://4.bp.blogspot.com/_8PJ-pgoBhWQ/TSWYItYKvpI/AAAAAAAAIic/0MjdDzGXP_U/s400/humor_reyes-magos-forges.JPG" /></div>Anonymousnoreply@blogger.com13tag:blogger.com,1999:blog-8932650177070730831.post-69354805166267583222011-01-05T12:40:00.000+01:002011-01-05T12:40:09.904+01:00Recibir las últimas novedades de Blogger en tu correoSupongo que muchos de vosotros ya estaréis al tanto de la noticia que en <a href="http://buzz-es.blogspot.com/2010/11/no-te-pierdas-el-newsletter-de-blogger.html" target="_blank">Blogger Buzz</a> se publicaba el día 25 de Noviembre.<br />
<br />
Allí nos decían que ya estaba disponible el Newsletter de Blogger en español (entre otros idiomas) ya que hasta entonces solo estaba disponible en inglés.<br />
<br />
Recibir directamente en nuestro correo electrónico este Newsletter ( últimas novedades de Blogger) es muy sencillo.<br />
<br />
<b>[1]</b> Ve a tu <b>Escritorio</b>, allí fíjate en un enlace que dice <b>Editar notificaciones</b>:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" height="186" width="400" title="Editar notificaciones" alt="Editar notificaciones" src="http://4.bp.blogspot.com/_8PJ-pgoBhWQ/TSRWaFqRrbI/AAAAAAAAIiE/_afQN7oUAvQ/s400/Escritorio-elescaparatederosa.jpg" /></div><br />
<b>[2]</b> Pinchando en ese enlace, serás dirigido a una página donde deberás marcar la única opción disponible: <b>Anuncios sobre funciones</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" height="162" width="400" title="Anuncios sobre funciones" alt="Anuncios sobre funciones" src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/TSRXT5HNpeI/AAAAAAAAIiM/uQ0gYFjUenM/s400/Anuncios-sobre-funciones-elescaparatederosa.jpg" /></div><br />
<b>[3]</b> Una vez marcada la opción, pinchas en <b>Guardar</b> y desde ese momento recibirás en el correo electrónico (el que usas en tu cuenta de Blogger) todas las novedades y nuevas funciones que vayan apareciendo en Blogger.Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-8932650177070730831.post-58842071915162696282010-12-31T18:43:00.000+01:002010-12-31T18:43:04.653+01:00¡Feliz Año Nuevo!<div style="color: #660000;"><span style="font-size: large;"><b>Que la lluvia de la Paz, la Esperanza, la Felicidad y el Amor os pille con el paraguas roto y salpique a todos los que están a vuestro alrededor.</b></span></div><div class="separator" style="clear: both; text-align: center;"><img alt="Feliz 2011" border="0" class="sin" height="321" src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/TR2-hVjyFaI/AAAAAAAAIfQ/v3yuCCzawRc/s400/feliz%2Ba%25C3%25B1o%2B2011.jpg" title="Feliz 2011" width="400" /></div>Anonymousnoreply@blogger.com26tag:blogger.com,1999:blog-8932650177070730831.post-31390282607648658882010-12-30T11:34:00.001+01:002010-12-30T11:38:10.857+01:00Sharesidebar: Botones flotantes para compartir contenidos<div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: left;"><img alt="Sharesidebar" border="0" height="320" src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/TRxapkRe9xI/AAAAAAAAIeo/80O3C1fHRNM/s320/sharesidebar-elescaparatederosa.jpg" title="Sharesidebar" width="64" /></div><br />
Desde la web de <a href="http://sharesidebar.com/" target="_blank">Sharesidebar</a> nos facilitan de forma muy sencilla, el añadir una barra flotante en nuestro blog desde la que nuestros visitantes pueden <b>compartir en diferentes redes sociales los contenidos de nuestro sitio</b>.<br />
La aplicación incluye botones a redes sociales como <b>Twitter, Facebook, Google Buzz, Delicious, Yahoo! Buzz, Reddit y Digg</b>; aunque podemos seleccionar <b>solo las que nos interese añadir</b>, además de escoger si la barra de iconos será visible a <b>derecha o izquierda</b> de nuestro blog.<br />
<br />
Una vez hemos accedido a la web, se nos muestra un sencillo formulario, donde hemos de marcar si queremos la barra a derecha (right) o a izquierda (left).<br />
<br />
En "Services" marcamos las redes sociales a mostrar en la barra.<br />
<br />
Introducimos después la dirección de nuestro email y la url de nuestro blog y pinchamos en "Get the Code".<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Formulario Sharesidebar" border="0" height="223" src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/TRxc0XdjX6I/AAAAAAAAIes/v0Es8zPklFU/s400/sharesidebar-elescaparatederosa-form.jpg" title="Formulario Sharesidebar" width="400" /></div><br />
Copiamos y pegamos el código obtenido en nuestra plantilla desde "Edición HTML" justo antes de la etiqueta <b></body></b> o incluso desde Diseño directamente en un <b>Gadget HTML/Javascript</b>.<br />
<br />
<b>Nota:</b><br />
<div class="recuadro">Como se ve en la imagen de ejemplo, al final de la barra de botones se muestra un botón pequeño que al pinchar nos lleva a la web de Sharesidebar.<br />
No es molesto y además permitirá a quienes quieran obtener la barra el acceso a la web de Sharesidebar, además de agradecer de esta forma el servicio que nos prestan.<br />
</div><br />
<div class="enlaceEx"><span>IR A:</span><a href="http://sharesidebar.com/" target="_blank" target="_blank">SHARESIDEBAR</a></div>Anonymousnoreply@blogger.com9tag:blogger.com,1999:blog-8932650177070730831.post-58631445360100917362010-12-24T11:29:00.000+01:002010-12-24T11:29:41.713+01:00Feliz Navidad 2010<div style="color: #990000;"><span style="font-size: large;"><b>"El secreto de la felicidad no esta en hacer siempre lo que se quiere sino en querer siempre lo que se hace."</b></span></div><div style="text-align: center;"><b><i> - León Tolstoi -</i></b></div><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="El Escaparate de Rosa Feliz Navidad" border="0" class="sin" height="153" src="http://4.bp.blogspot.com/_8PJ-pgoBhWQ/TROFBvu4v7I/AAAAAAAAIec/dZvVxeCmXKQ/s400/el-escaparatederosa-feliz-navidad.gif" title="El Escaparate de Rosa Feliz Navidad" width="400" /></div>Anonymousnoreply@blogger.com55tag:blogger.com,1999:blog-8932650177070730831.post-48066201059102505102010-12-21T14:09:00.000+01:002010-12-21T14:09:51.404+01:00Guirnalda navideña de luces intermitentes<img border="0" class="sin" title="luces de navidad" alt="luces de navidad" src="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/TQ6aQj-wszI/AAAAAAAAIeA/K-SA4piXjns/s1600/luces-el-escaparate-de-rosa.JPG" /><br />
En <a href="http://snowysites.com/" target="_blank">Snowy Sites</a> nos muestran de forma muy sencilla como colocar en la parte superior de nuestra página una bonita guirnalda de luces navideñas que se apagan y encienden de forma intermitente.<br />
<br />
Para que la guirnalda de luces se muestre en nuestro blog, no tenemos más que copiar y pegar está línea de código, antes del <b></head></b> de nuestra plantilla:<br />
<br />
<blockquote><script type="text/javascript" src="http://snowysites.com/lights.js"></script></blockquote><br />
<br />
<div class="enlaceEx"><span>VER EJEMPLO:</span><a href="http://rosadoprueba.blogspot.com/" target="_blank">Guirnalda navideña de luces</a></div>Anonymousnoreply@blogger.com46tag:blogger.com,1999:blog-8932650177070730831.post-72976540461782944472010-12-19T19:28:00.000+01:002010-12-19T19:28:46.730+01:00Y más nieve en el blogEn entradas anteriores vimos como incluir un efecto de nieve en el blog usando varios sistemas:<br />
<br />
<b>-></b><a href="http://elescaparatederosa.blogspot.com/2007/12/nieve-en-el-blog.html">Nieve usando la etiqueta marquee</a>.<br />
<b>-></b><a href="http://elescaparatederosa.blogspot.com/2008/12/nieve-en-el-blog-ii.html">Nieve usando un script externo.</a><br />
<b>-></b><a href="http://elescaparatederosa.blogspot.com/2009/12/nieve-que-se-acumula-al-final-de-la.html">Nieve que se va acumulando al final de la página</a>.<br />
<br />
En esta entrada vamos a utilizar un script que solo tendremos que copiar y pegar -desde <b>Diseño</b>- en un gadget <b>HTML/Javascript</b>.<br />
Mucho mejor si después de añadir el gadget lo movemos al pie del blog, nos será más fácil así el localizarlo después para retirar la "nieve".<br />
<br />
El script utiliza una imagen "copo de nieve", pero podrá cambiarse fácilmente por una estrellita, una bolita de árbol de Navidad... cualquier icono apropiado para estas fechas.<br />
<br />
<b>Código:</b><br />
<blockquote class="smallquote"><script language="JavaScript"><br />
if ((document.getElementById) &&<br />
window.addEventListener || window.attachEvent){<br />
(function(){<br />
<br />
var numberOfSnows = 20; <br />
var snowSpeed = 0.9; <br />
var inTheFace = 5;<br />
var setTimeOutSpeed = 50; <br />
<br />
var h,y,cy,cx,sy,sx,ref,field,oy1,oy2,ox1,ox2,iy1,iy2,ix1,ix2;<br />
var d = document;<br />
var domWw = (typeof window.innerWidth == "number");<br />
var domSy = (typeof window.pageYOffset == "number");<br />
var pi1 = 180/3.14;<br />
var pi2 = 3.14/180;<br />
var y = [];<br />
var x = [];<br />
var strs = [];<br />
var gro = [];<br />
var dim = [];<br />
var dfc = [];<br />
var vel = [];<br />
var dir = [];<br />
var acc = [];<br />
var dtor = [];<br />
var xy2 = [];<br />
var idx = document.getElementsByTagName('div').length;<br />
var zip = [];<br />
var pix = "px";<br />
for (i = 0; i < numberOfSnows; i++){<br />
document.write('<div id="snows'+(idx+i)+'"'<br />
+' style="position:absolute;top:0px;left:0px;'<br />
+'width:40px;height:40px;background-color:transparent;'<br />
+'font-size:0px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAKiuySuWtEpX4yaT80n7MiOc8cv38w2YSjcR7uLMiajjPkmdnTrmTm6SGZVrym5W5xVn7bYr6zqIl-661BGOd1e3HP5X-tcnpwRCmZNBoM11ioBYuVMR2CaxH-jHUZeZelf0BgfsNw1E8/s320/snow2.gif" class="snow" width="20"/></div>');<br />
}<br />
if (domWw) ref = window;<br />
else{<br />
if (d.documentElement &&<br />
typeof d.documentElement.clientWidth == "number" &&<br />
d.documentElement.clientWidth != 0)<br />
ref = d.documentElement;<br />
else{<br />
if (d.body &&<br />
typeof d.body.clientWidth == "number")<br />
ref = d.body;<br />
}<br />
}<br />
function win(){<br />
var mozBar = ((domWw) &&<br />
ref.innerWidth != d.documentElement.offsetWidth)?20:0;<br />
h = (domWw)?ref.innerHeight:ref.clientHeight;<br />
w = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;<br />
cy = Math.floor(h/2);<br />
cx = Math.floor(w/2);<br />
oy1 = (75 * h / 100);<br />
oy2 = (oy1 / 2);<br />
ox1 = (75 * w / 100);<br />
ox2 = (ox1 / 2);<br />
iy1 = (18 * h / 100);<br />
iy2 = (iy1 / 2);<br />
ix1 = (18 * w / 100);<br />
ix2 = (ix1 / 2);<br />
field = (h > w)?h:w;<br />
}<br />
function rst(s){<br />
var cyx;<br />
sy = (domSy)?ref.pageYOffset:ref.scrollTop;<br />
sx = (domSy)?ref.pageXOffset:ref.scrollLeft;<br />
acc[s] = 0;<br />
dim[s] = 1;<br />
xy2[s] = 0;<br />
cyx = Math.round(Math.random() * 2);<br />
if (cyx == 0){<br />
y[s] = (cy - iy2) + Math.floor(Math.random() * iy1);<br />
x[s] = (cx - ix2) + Math.floor(Math.random() * ix1);<br />
}<br />
else{<br />
y[s] = (cy - oy2) + Math.floor(Math.random() * oy1);<br />
x[s] = (cx - ox2) + Math.floor(Math.random() * ox1);<br />
}<br />
dy = y[s] - cy;<br />
dx = x[s] - cx;<br />
dir[s] = Math.atan2(dy,dx) * pi1;<br />
dfc[s] = Math.sqrt(dy*dy + dx*dx) ;<br />
zip[s] = 10 * (dfc[s] + inTheFace) / 100;<br />
vel[s] = snowSpeed * dfc[s] / 100;<br />
dtor[s] = (field - dfc[s]);<br />
if (dtor[s] < 1) dtor[s] = 1;<br />
gro[s] = 0.003 * dtor[s] / 100;<br />
}<br />
function animate(){<br />
for (i = 0; i < numberOfSnows; i++){<br />
y[i] += vel[i] * Math.sin(dir[i] * pi2);<br />
x[i] += vel[i] * Math.cos(dir[i] * pi2);<br />
acc[i] = (vel[i] / (dfc[i] + (vel[i] * zip[i])) * vel[i]);<br />
vel[i] += (acc[i]);<br />
dim[i] += gro[i] + acc[i] / zip[i];<br />
xy2[i] = dim[i] / 2;<br />
if (y[i] < 0 + xy2[i] ||<br />
x[i] < 0 + xy2[i] ||<br />
y[i] > h - xy2[i] ||<br />
x[i] > w - xy2[i]){<br />
rst(i);<br />
}<br />
strs[i].top = (y[i] - xy2[i]) + sy + pix;<br />
strs[i].left = (x[i] - xy2[i]) + sx + pix;<br />
strs[i].width = (strs[i].height = (Math.round(dim[i])) + pix);<br />
}<br />
setTimeout(animate,setTimeOutSpeed);<br />
}<br />
function init(){<br />
win();<br />
for (i = 0; i < numberOfSnows; i++){<br />
strs[i] = document.getElementById("snows"+(idx+i)).style;<br />
rst(i);<br />
}<br />
animate();<br />
}<br />
if (window.addEventListener){<br />
window.addEventListener("resize",win,false);<br />
window.addEventListener("load",init,false);<br />
}<br />
else if (window.attachEvent){<br />
window.attachEvent("onresize",win);<br />
window.attachEvent("onload",init);<br />
}<br />
})();<br />
}//End.<br />
</script><br />
<style><br />
.snow {<br />
filter:alpha(opacity=50);<br />
-moz-opacity: 0.5;<br />
opacity: 0.5;<br />
-khtml-opacity: 0.5;<br />
}<br />
html {<br />
overflow-x:hidden;<br />
}<br />
</style></blockquote><br />
<b>Configuración:</b><br />
<div class="recuadro"><b>-></b> <b>var numberOfSnows = 20;</b> Cambiamos aquí el valor para mostrar mayor o menor número de copos.<br />
<b>-></b> <b>var snowSpeed = 0.9;</b> Valor que controla la velocidad de desplazamiento de los copos.<br />
<b>-></b> <b>var setTimeOutSpeed = 50;</b> Valor que controla la velocidad de aparición de los copos.<br />
<b>-></b> En esta línea del script, podemos sustituir la url de la imagen por la que vamos a utilizar en nuestro caso y controlar su tamaño (width="20"):<br />
<b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip1PEKOr6xlMe2DPgH9gZxd_Z2-iFWNd7jKPnR5wR9HCOE8uEIzQj8hzm5SUMyqpFdboKpw6vMdc6nWAGsP2u5JSk-NRy88KWOS3yOGZnldRkZwgj_RRcbbWAqAaQrLcxtKfy0x9tkjWpb/s320/snow4.gif" class="snow" width="20"/></b> </div><br />
<b>Nota:</b><br />
<div class="recuadro">En las plantillas del <b>Diseñador</b> de Blogger, funciona mal o directamente no funciona.</div><br />
<div class="enlaceEx"><span>VER EJEMPLO:</span><a href="http://rosadoprueba.blogspot.com/" target="_blank">Estrellas de nieve</a></div>Anonymousnoreply@blogger.com27tag:blogger.com,1999:blog-8932650177070730831.post-59720113994007217242010-12-02T20:25:00.000+01:002010-12-02T20:25:56.776+01:00Fan Box de Twitter en la sidebarEn uno de mis recorridos por los blogs que habitualmente suelo visitar, me encontré con este interesante gadget en <a href="http://ciudadblogger.com/2010/11/agregar-un-fan-box-de-twitter.html" target="blank">Ciudad Blogger <img alt="Ciudad Blogger" class="sin" src="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/TO-khdCvTxI/AAAAAAAAIcI/l7XP4qKm6Uc/s1600/Ciudad-Blogger.JPG" title="Ciudad Blogger" /></a> que nos permite mostrar el <b>número de seguidores total</b> que tenemos en Twitter, así como los <b>últimos 10 seguidores que se han agregado</b> con sus avatares a la vista.<br />
<br />
El gadget, una vez instalado, se mostrará con un diseño casi idéntico al conocido Fan Box de Facebook:<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Fan Box Twitter" border="0" height="258" src="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/TO-ivh6-r9I/AAAAAAAAIcA/w1lhiNaGsY0/s320/FanBox-Twitter.jpg" title="Fan Box Twitter" width="304" /></div><br />
Para añadirlo en nuestro blog, lo hacemos desde <b>Diseño</b> añadiendo un <b>nuevo gadget HTML/Javascript</b> y colocando este código dentro:<br />
<br />
<blockquote><div class="textwidget"><br />
<script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script><div id="twitterfanbox"><br />
<script type="text/javascript">fanbox_init("<b>usuario</b>");</script></div><br />
</div><br />
<br />
<style><br />
.FB_SERVER_IFRAME {<br />
width: 290px !important; /* Ancho del gadget */<br />
height: 250px !important; /* Alto del gadget */<br />
}<br />
</style></blockquote><br />
Cambiamos donde dice <b>usuario</b> por nuestro nick en Twitter.<br />
Si necesitamos cambiar el alto o el ancho del gadget para adaptarlo al espacio disponible en nuestra sidebar, lo hacemos en <b>width</b> (ancho) y en <b>height</b> alto, cambiando el valor ahí por el que necesitemos.<br />
<br />
<div class="enlaceEx"><span>VISTO EN:</span><a href="http://ciudadblogger.com" target="_blank">Ciudad Blogger</a></div>Anonymousnoreply@blogger.com64tag:blogger.com,1999:blog-8932650177070730831.post-48078097827858743032010-11-25T03:19:00.000+01:002010-11-25T03:19:24.334+01:00Nuevas fuentes disponibles en el Diseñador de Blogger<a href="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/TO3BJ80E5MI/AAAAAAAAIbk/KgH-AC6gneo/s1600/fuentes.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Fuentes" border="0" height="200" src="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/TO3BJ80E5MI/AAAAAAAAIbk/KgH-AC6gneo/s200/fuentes.jpg" title="Fuentes" width="136" /></a>Se anuncia en el blog de <a href="http://bloggerindraft.blogspot.com/2010/11/more-fonts-means-more-choice.html" target="_blank">Blogger in Draft</a> que están disponibles 40 fuentes más para utilizar en nuestro blog, <b>siempre que estemos utilizando una plantilla del Diseñador de Blogger</b>.<br />
<br />
Para poder utilizar las nuevas fuentes, hemos de acceder a nuestro escritorio de Blogger desde <a href="http://draft.blogger.com/" target="_blank">Blogger in Draft</a>, pues aún están en periodo de pruebas.<br />
<br />
Una vez en nuestro escritorio, desde <b>Diseño</b> vamos al <b>Diseñador de plantillas</b> escogemos la opción <b>Avanzado</b> y allí veremos las nuevas fuentes disponibles, así como usarlas en la parte de nuestro blog que nos interese (Título de entradas, título del blog, pestañas, etc...).<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" title="Diseñador de Plantillas" alt="Diseñador de Plantillas" src="http://4.bp.blogspot.com/_8PJ-pgoBhWQ/TO3HE7wivJI/AAAAAAAAIbw/2PgnKX5C0yM/s640/Dise%25C3%25B1ador+de+plantillas.jpg" width="550" /></div>Anonymousnoreply@blogger.com41tag:blogger.com,1999:blog-8932650177070730831.post-26113796385628076512010-11-19T12:49:00.000+01:002010-11-19T12:49:05.821+01:00Señalizar el código que añadimos en la plantilla<div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: left;"><img border="0" height="150" src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/S9NrZwKvtLI/AAAAAAAAH18/2HzQjsPDBjk/s200/html.jpg" width="200" /></div>He comprobado que muchas veces después de colocar un código en la plantilla para añadir cualquier efecto en el blog, algunas personas tienen problemas para retirarlo una vez quieren prescindir del efecto añadido.<br />
<br />
La solución sería señalizar ese código en la plantilla para poder localizarlo posteriormente sin problemas.<br />
<br />
<br />
También he visto a menudo emplear esta señalización en las plantillas de forma incorrecta. Muchos cometen un error que si bien Blogger a veces admite (guarda los cambios sin aparente problema) en ocasiones puede provocar que ciertas cosas en el blog dejen de funcionar correctamente.<br />
<br />
Hay dos formas de marcar cualquier cosa que añadamos en la plantilla para reconocerla después, una que se emplea solamente en la parte del CSS y otra que se usa en la parte de HTML.<br />
<br />
<b>¿Como distingo el CSS del HTML en la plantilla?</b><br />
<br />
El CSS de nuestra plantilla es todo el código de la misma que está incluido entre las etiquetas <b><b:skin><![CDATA[/*</b> y <b>]]></b:skin></b>. <br />
Desde esta última etiqueta (]]></b:skin>) hasta el final del código de la plantilla podríamos decir que eso es el código HTML.<br />
<br />
<br />
<b>Señalizar lo que añadimos en el CSS</b><br />
<br />
Supongamos que voy a añadir unas líneas de código en la parte del CSS, si nos fijamos en una plantilla original de Blogger vemos que, por ejemplo, cuando comienza la parte de comentarios hay algo así:<br />
<br />
<blockquote>/* Comments <br />
------------------------------------------------------- */</blockquote><br />
Esto es una señal que nos indica que ahí es donde está incluido todo el código CSS que necesitamos manejar para el diseño de los comentarios.<br />
<br />
Si estamos siguiendo una entrada para incluir cualquier cambio en el blog y se nos indica "colocar en la parte del CSS", localizaríamos entonces la etiqueta <b>]]></b:skin></b> y colocaríamos ese código antes de la misma, de esta manera estaremos seguros de que va en el lugar correcto.<br />
Si además es un código eventual o sencillamente nos gusta tener todo controlado, lo marcamos de la forma que antes indicaba.<br />
<br />
Supongamos, por ejemplo, que es algo para controlar el gadget de "últimos comentarios", podríamos poner a comienzo de ese código algo así:<br />
<br />
<blockquote>/* Gadget de últimos comentarios <br />
------------------------------------------------------- */</blockquote><br />
E incluso algo menos complicado que servirá igualmente a nuestros propósitos:<br />
<br />
<blockquote>/* Gadget de ultimos comentarios */</blockquote><br />
<br />
<br />
<b>Señalizar lo que añadimos en el HTML</b><br />
<br />
Como ya dijimos antes, desde la etiqueta ]]></b:skin> hasta el final del código de la plantilla podríamos decir que eso es el código HTML, aunque con la única precaución de <b>no incluir nada entre las etiquetas </head> y <body></b>.<br />
<br />
Para señalizar cualquier cosa que queramos incluir en la parte del HTML, lo haríamos de esta manera:<br />
<br />
<blockquote><!-- Script de últimos comentarios --></blockquote><br />
Y para asegurarnos aún más de tenerlo bien controlado, incluso podrías marcar el código a comienzo y principio de este:<br />
<br />
<blockquote><!-- Inicio del script de últimos comentarios --><br />
<br />
AQUI IRIA EL CODIGO QUE AÑADIMOS NUEVO<br />
<br />
<!-- Final del script de últimos comentarios --></blockquote><br />
<br />
Lo hacemos así porque <b>los navegadores no interpretarán lo que esté incluido dentro de esas etiquetas</b>, es decir, no se mostrará en la "vista real" del blog.<br />
<br />
Esto podría sernos también muy útil si, por ejemplo, queremos trasladar algo de sitio en la plantilla de forma que después podamos recuperar la posición original.<br />
<br />
Imaginemos que quiero colocar el enlace a "comentarios" debajo del título de mis entradas, pero no quiero perderlo al pie de las mismas por si algún día me interesa volver a mostrarlo ahí de nuevo.<br />
<br />
Tendríamos entonces que localizar el código que corresponde al enlace y copiarlo para pegarlo donde nos interesa, pero antes marcamos el código original de esta manera:<br />
<br />
<blockquote><b><!--</b> Inicio de enlace de comentarios a pie de entrada<br />
<br />
AQUI IRIA EL CODIGO ORIGINAL DEL ENLACE A COMENTARIOS<br />
<br />
Final del enlace de comentarios a pie de entradas <b>--></b></blockquote><br />
De esta forma si alguna vez queremos <b>recuperar el enlace a comentarios</b> a pie de entradas solo tendríamos que <b>eliminar lo añadido</b> para que este se volviera a mostrar en su sitio, ya que lo único que habríamos hecho sería evitar que el navegador lo interprete y lo muestre en el blog.Anonymousnoreply@blogger.com25tag:blogger.com,1999:blog-8932650177070730831.post-57352279297353085052010-11-11T23:11:00.000+01:002010-11-11T23:11:36.942+01:00Dividir la cabecera del blog en las plantillas de DiseñoHabíamos visto hace algún tiempo <a href="http://elescaparatederosa.blogspot.com/2008/11/dividir-la-cabecera-del-blog.html">como dividir el header (cabecera) del blog</a> para las plantillas anteriores a las del Nuevo Diseñador de Blogger.<br />
<br />
En esta entrada veremos como hacer lo mismo para las plantillas del Nuevo Diseñador, lo que nos permitirá conservar el header del blog y al mismo tiempo, disponer de un espacio para añadir un gadget a su izquierda, que servirá para incluir un buscador, un banner de publicidad, enlaces a redes sociales, etc.<br />
<br />
<b>[1]</b> Colocamos unas líneas en el CSS de la plantilla, siempre antes de <b>]]></b:skin></b>, y en este caso estaría bien localizar esto:<br />
<blockquote>/* Header<br />
----------------------------------------------- */</blockquote><br />
Y justo debajo colocar el CSS necesario:<br />
<blockquote>.header {width:50%; <br />
float: left; <br />
margin:0 auto 2% ;<br />
}<br />
.header2 {width:50%; <br />
float: right; <br />
margin:0 auto 2%;<br />
}</blockquote><br />
<b>[2]</b> Vamos entonces bastante más abajo en el código de la plantilla y localizamos esta parte del código:<br />
<br />
<blockquote><div class='region-inner header-inner'><br />
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br />
<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/><br />
</b:section><br />
</div></blockquote><br />
Añadimos ahí lo que muestro destacado en negrita:<br />
<br />
<blockquote><div class='region-inner header-inner'><br />
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br />
<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/><br />
</b:section><br />
<b><b:section class='header2' id='header2' showaddelement='yes'/><br />
<div style='clear: both;'/></b><br />
</div></blockquote><br />
<b>[3]</b> Guardamos cambios y comprobamos la vista en Diseño, donde ya deberíamos ver la cabecera dividida en dos partes:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Doble header vista Diseño" border="0" src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/TNwbgepq4dI/AAAAAAAAIbA/I052EdgDA_I/s640/Doble-header-dise%25C3%25B1o.jpg" title="Doble header" width="550" /></div><br />
<b>[4]</b> Una vez añadimos un nuevo gadget al lado del header, veremos algo como esto en la vista del blog:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Doble header en vista del blog" border="0" src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/TNwcNBAG1II/AAAAAAAAIbE/vS4W9_dQoxM/s640/Doble-header-dise%25C3%25B1o-blog.jpg" title="Doble header blog" width="550" /></div><br />
<b>[5]</b> Como vemos en esta imagen de ejemplo, el título del blog al tener un tamaño de texto muy grande, se ve en dos líneas. Corregimos esto desde el Diseñador de Blogger, donde pinchando en <b>"Avanzado" - "Titulo del blog"</b> podemos ajustar el tamaño del título:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Tamaño del título en el doble header" border="0" src="http://4.bp.blogspot.com/_8PJ-pgoBhWQ/TNwd2b0Vk0I/AAAAAAAAIbI/gppZioxl9_g/s640/Doble-header-dise%25C3%25B1o-texto.jpg" title="Tamaño título" width="550" /></div><br />
El resultado sería entonces algo así:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" title="Título en doble header" alt="Título adaptado en doble header" src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/TNweqUyHPdI/AAAAAAAAIbM/m19HteQ1UAw/s640/Doble-header-dise%25C3%25B1o-texto-blog.jpg" width="550" /></div><br />
Esto sucede porque lo que pretendemos es que los dos gadget, cabecera y el nuevo añadido, sean iguales en sus proporciones.<br />
También podríamos necesitar que uno de los dos tuviese mayor tamaño que el otro, según lo que vamos a colocar ahí, si por ejemplo el gadget header va a ser mayor que el gadget header2, quizá no necesitemos reducir el tamaño del texto desde el Diseñador.<br />
<br />
En caso de querer modificar las medidas de cualquiera de los dos gadget, lo haríamos en el CSS añadido en el <b>paso [1]</b> cambiando el valor de <b>width:50%; </b> y teniendo en cuenta las proporciones, es decir, si al header le damos un width mayor, reducimos en header2 el mismo porcentaje que hemos añadido en header o viceversa.Anonymousnoreply@blogger.com38tag:blogger.com,1999:blog-8932650177070730831.post-12736505132763498252010-11-02T11:53:00.000+01:002010-11-02T11:53:14.036+01:00Apture Toolbar<div class="separator" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em; text-align: center;"><img alt="Apture Toolbar" border="0" height="117" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyLWf8XHhBvSme8QvcNCi5Whi__QP77SKx7q6ZGVBvjMLPBC6BxGLZ8iNr3ugzfGLX2ej0Zpnpam1CGspnRsdu6ILewUfO5WCK3J1QVICYySqX0g9YKFZmRhelR-6mA6Gk0A7ewxEramai/s320/Apture-ToolBar-For-Your-Blo.jpg" title="Apture Toolbar" width="320" /></div>Hace tiempo que tengo instalada en un blog de pruebas una barra de herramientas con algunas utilidades muy interesantes, ademas de un diseño nada "molesto" para el blog.<br />
<br />
Se llama <b>Apture</b> y en esta entrada veremos algunas de sus características y las instrucciones para incluirla en el blog.<br />
<br />
La barra se mostrará en la parte superior de la pantalla y permanecerá oculta hasta que no se utilice la barra de desplazamiento (scroll), con lo que puede usarse sin problemas aún estando utilizando la Nabvar de Blogger.<br />
<br />
Desde el botón correspondiente podremos compartir la página en la que estamos en FaceBook, Twitter y enviarla por correo.<br />
<br />
Incluye un buscador con jQuery, que facilita que nuestros visitantes no tengan que salir de la página cuando buscan otro contenido.<br />
<br />
Cuando el visitante selecciona con el ratón una palabra o una parte del texto de la entrada, aparecerá un pequeño botón que dice "Search" (Buscar), cuando pinche ahí los resultados se mostrarán en la ventana del buscador de la barra.<br />
<br />
Se puede personalizar con nuestro propio logotipo (no más ancho de 35 pixeles) o incluir un texto con el título o lo que queramos de nuestro blog.<br />
<br />
Veamos antes de nada un ejemplo de como funciona: <a href="http://elescaparates.blogspot.com/" target="_blank">Ver ejemplo online</a><br />
<br />
<br />
<b>Configuración e instalación</b><br />
<br />
<b>[1]</b> Iremos a la página de <a href="http://www.apture.com/" target=_blank">www.apture.com</a>.<br />
<br />
<b>[2]</b> Introducimos la url del blog y hacemos click en el botón en "<b>Start now</b>".<br />
<br />
<b>[3]</b> En la página siguiente tendremos que añadir algunos datos, escoger el color de la barra y subir el logo desde nuestro PC si vamos a añadirlo.<br />
<br />
<b>[4]</b> Los cambios los iremos viendo en una "vista previa". <br />
Una vez estemos conformes con el resultado, pinchamos en "<b>Get My Bar</b>" y copiamos el código obtenido.<br />
<br />
<b>[5]</b> En nuestro panel de Blogger vamos a Edición HTML y sin expandir artilugios localizamos la etiqueta <b></body></b>.<br />
Pegamos el código obtenido sobre esa etiqueta.<br />
<br />
<br />
<b>Consejo:</b><br />
<div class="recuadro"><i>No añadas a tu blog todo lo que ves porque te parezca bonito, piensa lo que es útil para ti o estrictamente necesario, evitarás muchos problemas añadidos y la carga del blog será mucho más rápida.</i><br />
</div>Rosahttp://www.blogger.com/profile/04564116363926564176noreply@blogger.com12tag:blogger.com,1999:blog-8932650177070730831.post-63533018193520278522010-10-20T23:44:00.000+02:002010-10-20T23:44:24.405+02:00"Subir" y "Bajar" con efecto deslizante en las nuevas plantillas<div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img alt="Flechas" src="http://lh3.ggpht.com/_8PJ-pgoBhWQ/TArjm8ChktI/AAAAAAAAIHQ/SwcZ9oxkoOc/s128/Flechas.jpg" title="Flechas" border="0"></div>Hace algún tiempo habíamos <a href="http://elescaparatederosa.blogspot.com/2010/06/ir-arriba-e-ir-abajo-con-efecto.html">visto en una entrada anterior</a>, como colocar unas flechas en el blog para ir a la parte superior del mismo y bajar a la parte inferior, con un suave efecto deslizante usando Scriptaculous.<br />
<br />
En esta entrada veremos como hacer lo mismo en las plantillas del <b>Nuevo Diseñador</b>.<br />
<br />
<br />
<b>[1]</b> Desde <b>Edición HTML</b> de nuestro panel de Blogger localizamos la etiqueta <b></head></b> en el código de nuestra plantilla y justo sobre ella pegamos esto:<br />
<br />
<blockquote><!-- Prototype y Scriptaculous--><br />
<script src='http://www.google.com/jsapi'/><script><br />
google.load("prototype","1.6.0.3");<br />
google.load("scriptaculous", "1.8.2");<br />
</script><br />
<!-- Prototype y Scriptaculous--></blockquote><br />
<b>Nota:</b><br />
<div class="recuadro">Recuerda que si ya estás usando este código (Scriptaculous) para cualquier otro efecto, no es necesario lo coloques de nuevo.<br />
Y recuerda también que si estás usando JQuery en la plantilla, no podrás usar Scriptaculous al mismo tiempo.</div><br />
<b>[2]</b> Prácticamente al final del código de nuestra plantilla localizamos la etiqueta <b></body></b> y sobre ella colocamos el código para las imágenes o flechitas de "ir arriba" e "ir abajo":<br />
<br />
<blockquote><!--Flecha ir abajo --><br />
<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img alt='Ir abajo' border='0' src='URL_DE_LA_IMAGEN_FLECHITA' style='position:fixed; bottom:40px; right:0;margin-bottom: 5px;'/></a><br />
<br />
<!--Flecha ir arriba --><br />
<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img alt='Ir arriba' border='0' src='URL_DE_LA_IMAGEN_FLECHITA' style='position:fixed; bottom:0; right:0;margin-top: 5px;'/></a></blockquote><br />
<b>[3]</b> Cambiamos donde dice <b>URL_DE_LA_IMAGEN_FLECHITA</b> por la url de nuestras imágenes o iconos-flecha.<br />
<br />
<b>[4]</b> Tendremos ahora que localizar en la plantilla esta línea de código:<br />
<br />
<blockquote><div class='body-fauxcolumns'></blockquote><br />
Y la cambiamos por esta:<br />
<br />
<blockquote><div id='outer-wrapper' class='body-fauxcolumns'></blockquote><br />
<b>[5]</b> Nos toca ahora localizar esta otra línea de código:<br />
<br />
<blockquote><div class='content-cap-bottom cap-bottom'></blockquote><br />
Y cambiarla por esta otra:<br />
<br />
<blockquote><div id='footer-wrapper' class='content-cap-bottom cap-bottom'></blockquote><br />
<b>[6]</b> Guardamos los cambios.Anonymousnoreply@blogger.com43tag:blogger.com,1999:blog-8932650177070730831.post-68057824483156687572010-10-16T15:58:00.000+02:002010-10-16T15:58:57.279+02:00Como intregar Twitter en tu correo GmailVamos a ver en esta entrada como integrar nuestra cuenta de Twitter en nuestro correo de Gmail, lo que nos permitirá desde la misma página donde vemos nuestro correo acceder a la cuenta de Twitter.<br />
<br />
<b>[1]</b> Abrimos nuestra cuenta de correo Gmail. En el menú superior a la derecha pinchamos en Configuración.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Configuracion Gmail" border="0" src="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/TKSx9SWvmlI/AAAAAAAAIYo/y8nP4b0bDbg/s640/Configuracion-Gmail.jpg" title="Configuracion Gmail" width="550" /></div><br />
<b>[2]</b> Se abrirá una página donde en el menú destacado en color veremos un enlace que dice "Labs". Pinchamos ahí.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Pestaña Labs" border="0" src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/TKSz-NmpvyI/AAAAAAAAIYs/xP0Ta18IaZE/s640/Labs.jpg" title="Pestaña Labs" width="550" /></div><br />
<b>[3]</b> En la página siguiente habilitamos la opción "<b>Añadir cualquier gadget mediante URL</b>" y abajo del todo pinchamos en "<b>Guardar cambios</b>"<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Habilitar gadget" border="0" src="http://4.bp.blogspot.com/_8PJ-pgoBhWQ/TKS23UiYXKI/AAAAAAAAIY0/qtMhBTodUqw/s640/Habilitar-gadget.jpg" title="Habilitar gadget" width="450" /></div><br />
<b>[4]</b> La página se recargará y veremos ahora que en el menú de color anterior aparece una nueva pestaña llamada "Gadgets". Pinchamos en ella.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Pestaña Gadgets" border="0" src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/TKS40eRlhDI/AAAAAAAAIY4/8HwLm6vcVjg/s640/Gadgets.jpg" title="Pestaña Gadgets" width="550" /></div><br />
<b>[5]</b> Vemos ahora un campo para introducir un enlace, copiamos esta url: <br />
<blockquote><b>https://twittergadget.appspot.com/gadget-gmail.xml</b></blockquote><br />
<b>[6]</b> La pegamos en el campo y pinchamos en "<b>Añadir</b>".<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Url del gadget" border="0" src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/TKS6xvWfVYI/AAAAAAAAIY8/ltTy_3iiFCw/s640/Url-del-gadget.jpg" title="Url del gadget" width="450" /></div><br />
<b>[7]</b> Nos fijamos ahora que en la sidebar de la derecha aparece un nuevo gadget. Pincharemos en el primer "<b>here</b>".<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Login Twitter" border="0" height="142" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0zH_OdW8At9RM9mY1Qb6zDnldbCce3Vj76tDHgekSt0IWIb5xScTASem45QTAhcL31UGtQW5Z5Bx8QUl2-i6hLDz2en7fR-WoJHZmTvJPKg7s46ORNgcnUDUULOrT044VgyVG5pHZkKnS/s200/Twitter.jpg" title="Login Twitter" width="200" /></div><br />
<b>[8]</b> Nos solicitan entonces el permiso para que la aplicación pueda acceder a nuestra cuenta de Twitter, bastará con pinchar en "<b>Permitir"</b>.<br />
<br />
Ya veremos enseguida un nuevo gadget en la sidebar, donde estaba el anterior, y desde donde podremos enviar nuestros updates a Twitter directamente.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Twitter integrado en Gmail" border="0" height="171" src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/TKTweSz7i-I/AAAAAAAAIZA/V0plj5sOaM0/s200/Twitter-Gmail.jpg" title="Twitter integrado en Gmail" width="200" /></div><br />
Si además queremos interactuar con nuestros amigos allí, no tenemos más que pinchar en el nuevo gadget donde dice "<b>Twitter</b>".<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Twittear desde Gmail" border="0" src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/TKTxRNIsYxI/AAAAAAAAIZE/ydzGd9D3jtM/s640/Twittear-Gmail.jpg" title="Twittear desde Gmail" width="550" /></div>Anonymousnoreply@blogger.com35tag:blogger.com,1999:blog-8932650177070730831.post-51645350356616144762010-10-10T01:15:00.000+02:002010-10-10T01:15:11.588+02:00IconJ: crear y alojar un favicon de forma sencilla<div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img alt="Favicon del Escaparate" border="0" src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/TK8KQCuJ0DI/AAAAAAAAIZg/4uz5nhscf78/s1600/Favicon.jpg" title="Favicon" /></div>El Favicon es un pequeño icono que aparece junto a la dirección web en la parte superior de nuestro navegador.<br />
<br />
Ha de estar en formato ICO y se llama FavIcon por ser la abreviatura de "icono de favoritos", por lo que además de en las pestañas del navegador se mostrará en la pestaña de favoritos o marcadores.<br />
<br />
Nuestra amiga <a href="http://fantasiajaponesa.blogspot.com/" target="_blank">Malena</a> ha tenido la gentileza de compartir con todos nosotros una web, donde de forma rápida y sencilla, podemos obtener un favicon para nuestro sitio.<br />
<br />
<b>[1]</b> Accedemos a <a href="http://www.iconj.com/index.php" target="_blank">IconJ</a>.<br />
<br />
<b>[2]</b> A la derecha de la página vemos un pequeño formulario en el que tenemos que pinchar en "<b>Examinar"</b> para subir la imagen que vamos a utilizar desde nuestro PC.<br />
Una vez subida, pinchamos en "<b>Upload Now</b>".<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" height="140" title="Crear Favicon" alt="Crear Favicon" src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/TK8L35ATDAI/AAAAAAAAIZk/VKxSNesviXI/s320/Crear-Favicon.jpg" width="320" /></div><br />
<b>[3]</b> Vemos entonces una vista previa de nuestro favicon y un par de enlaces generados.<br />
Nos fijamos en el segundo (Direct Link) y lo copiamos.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" height="108" title="Favicon link directo" alt="Favicon link directo" src="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/TK8MeUsrLII/AAAAAAAAIZo/MAtxwXrrrBE/s320/Favicon-link-directo.jpg" width="320" /></div><br />
<b>[4]</b> Ya solo nos resta colocar esa línea de código que acabamos de copiar en nuestra plantilla. Lo hacemos entre las etiquetas <head> y </head> de la misma, por ejemplo antes de <b><b:skin><![CDATA[/*</b>.<br />
<br />
<b>Nota:</b><br />
<div class="recuadro">Con esto no tendremos que preocuparnos de encontrar un alojamiento para nuestro favicon, solo hay que tener en cuenta que si nuestro blog no recibe ninguna visita en el espacio de 30 días, el favicon es eliminado de IconJ y dejará de mostrarse.</div><br />
<div class="enlaceEx"><span>CREAR FAVICON:</span><a href="http://www.iconj.com/index.php" target="_blank">ICONJ</a></div>Anonymousnoreply@blogger.com48tag:blogger.com,1999:blog-8932650177070730831.post-86791976268753283502010-10-08T00:35:00.000+02:002010-10-08T00:35:01.503+02:00Ocultar la Navbar en las nuevas plantillas de diseñoHace ya tiempo que habíamos visto <a href="http://elescaparatederosa.blogspot.com/2007/01/ocultar-que-no-quitar-la-barra-de.html">como ocultar la barra de Blogger (Navbar)</a>.<br />
<br />
Se trata de colocar unas líneas de código CSS en la plantilla antes de <b>]]></b:skin></b>:<br />
<br />
<blockquote>#navbar-iframe {<br />
height:0px;<br />
visibility:hidden;<br />
display:none<br />
}<br />
</blockquote><br />
<br />
Me han llegado bastantes consultas de personas que han intentado usar este mismo sistema para las plantillas del <a href="http://elescaparatederosa.blogspot.com/2010/06/disenador-de-plantillas-en-blogger.html">Nuevo Diseñador</a>.<br />
<br />
En las plantillas del Nuevo Diseñador la Navbar se oculta usando ese mismo código situado en el mismo sitio de la plantilla, el problema que se presenta es que en el lugar que ocupaba la Navbar queda el espacio vacío.<br />
<br />
En algunas de estas plantillas, el hueco no es tan apreciable por su diseño, pero en las llamadas Simple de Josh Peterson por ejemplo, el espacio que queda afea bastante su diseño.<br />
<br />
Para retirar la Navbar en estas plantillas y evitar que quede el hueco, colocaremos antes de <b>]]></b:skin></b> estas líneas de código CSS:<br />
<br />
<blockquote>#navbar{<br />
height:0px;<br />
visibility:hidden;<br />
display:none<br />
}<br />
</blockquote><br />
Como veis el código es casi idéntico, solo cambiamos #navbar-iframe por #navbar.Anonymousnoreply@blogger.com24tag:blogger.com,1999:blog-8932650177070730831.post-64147227090542223752010-10-01T01:17:00.000+02:002010-10-01T01:17:51.448+02:00Destacar el nombre del comentarista al responderHe recibido varias consultas sobre como hago en mi blog para destacar el nombre del comentarista al responder a sus comentarios.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Ejemplo de comentarista destacado" border="0" src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/TKR3n3Nlx6I/AAAAAAAAIYg/aCzdq7tK3xU/s640/comentarista-destacado.jpg" title="Comentarista destacado" width="500" /></div><br />
No es algo demasiado complicado de lograr, aunque no es algo automático como algunos parecen creer.<br />
<br />
Aunque Blogger no permite incluir determinado código html en los comentarios sin pasarlo antes a texto plano, si es posible utilizar en ellos algunas etiquetas html como <a></a>, <b></b>,<i></i>, <strong></strong> y <em></em><br />
<br />
En este caso utilizaremos la etiqueta <b><em></em></b>.<br />
<br />
<br />
<b>[1]</b> Antes de comenzar, <b>hemos de tener añadido o añadirlo si es que no lo estamos usando</b>, el "<a href="http://elescaparatederosa.blogspot.com/2007/11/destacar-los-comentarios-del-autor-del.html">Destacar los comentarios del autor del blog</a>".<br />
<br />
<b>Nota:</b><br />
<div class="recuadro">Si solo vamos a usar el efecto para destacar al comentarista y no queremos destacar los comentarios de autor de otra manera, empleamos solo el paso [1] de esa entrada.</div><br />
<br />
<b>[2]</b> Colocaremos en el CSS de la plantilla (<b>siempre antes de ]]>/b:skin></b>) el código que controlará el aspecto del texto con el nombre del comentarista, sería algo así:<br />
<br />
<blockquote>.blog-author-comment em{<br />
color: #B32A32; /* cambiamos aqui el color */<br />
font-size:15px; /* cambiamos aqui el tamaño del texo */<br />
padding-right:5px; /* separacion del nombre al texto del comentario */<br />
font-weight:bold; /* fuente en negrita*/<br />
}</blockquote><br />
<br />
<b>[3]</b> Ahora y cada vez que queramos responder a un comentario destacando el nombre del comentarista, colocaremos su nombre al inicio del comentario entre <em> y </em><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" title="Respondiendo al comentarista" alt="Respondiendo al comentarista" src="http://4.bp.blogspot.com/_8PJ-pgoBhWQ/TKSBWHluolI/AAAAAAAAIYk/jbFgrFYt7Ws/s640/respondiendo-comentarista-destacado.jpg" width="350" /></div>Anonymousnoreply@blogger.com46tag:blogger.com,1999:blog-8932650177070730831.post-83056474653441952852010-09-27T00:32:00.000+02:002010-09-27T00:32:24.276+02:00Set de iconos para TuentiSet de 4 iconos de <a href="http://www.tuenti.com/?m=login" target="_blank">Tuenti</a> disponibles en formato PNG, ICO y ICNS. <br />
Presentados en tamaño de 256×256, 128×128, 48×48, 32×32 y 16×16 pixeles. <br />
Son gratis para utilizar en cualquier proyecto no comercial.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" title="Iconos Tuenti" alt="Iconos Tuenti" src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/TJ_HpiH7JWI/AAAAAAAAIYM/uVlo6he04UU/s320/icontexto-tuenti-kit.jpg" width="320" /></div><div style="text-align: center;"><a href="http://icontexto.com/download.asp?file=icontexto-tuenti-kit.zip"><img class="sin" src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/S_0J5F528xI/AAAAAAAAH9Q/7l4M1xvCpw4/s1600/boton_descargar.gif" /></a></div><br />
<br />
<br />
<div class="enlaceEx"><span>ICONOS DE:</span><a href="http://icontexto.blogspot.com/" target="_blank">IconTexto</a></div>Anonymousnoreply@blogger.com17tag:blogger.com,1999:blog-8932650177070730831.post-14893655117233070322010-09-25T00:08:00.000+02:002010-09-25T00:08:05.255+02:00Mostrar la Lista de Blogs en movimientoEs algo que me han preguntado en varias ocasiones y que siempre respondía de forma personal a cada uno. Estos últimos días he vuelto a recibir más consultas sobre esto mismo, hacer que el gadget Lista de Blogs se muestre en movimiento.<br />
<br />
Es un efecto no muy complicado de conseguir, utilizando la etiqueta "marquee".<br />
Antes de continuar con la explicación, podéis ver un ejemplo en <a href="http://script-nieve.blogspot.com/" target="_blank">este blog de pruebas</a>, es el gadget que lleva por título "Mi lista de blogs".<br />
<br />
<b>[1]</b> Antes de nada tendremos que añadir el gadget "Lista de blogs" y <b>configurarlo tal como vemos en la imagen </b>para añadir el código necesario, una vez conseguido el efecto del movimiento podremos editar el gadget de nuevo si así lo queremos.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Configurar Lista de blogs" border="0" src="http://4.bp.blogspot.com/_8PJ-pgoBhWQ/TJfTOEkiGcI/AAAAAAAAIXw/Yz4nidtskJo/s640/Lista+de+blogs.jpg" title="Configurar Lista de blogs" width="390" /></div><br />
<b>[2]</b> Una vez añadido y configurado el gadget de esta manera, vamos a Diseño - Edición HTML y marcamos la opción de "Expandir las plantillas de artilugios".<br />
Tendremos que localizar el código del gadget y añadir el código necesarios tal como veis destacado en color:<br />
<br />
<blockquote class="smallquote"><b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'><br />
<b:includable id='main'><br />
<!-- only display title if it's non-empty --><br />
<b:if cond='data:title != &quot;&quot;'><br />
<h2 class='title'><data:title/></h2><br />
</b:if><br />
<br />
<div class='widget-content'><br />
<div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'><br />
<div style="color: #cc0000;"><b><center><marquee direction='up' height='300' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='5' bgcolor = '#faf0e6' style='border: #cdaf95 2px solid;padding-left: 10px;' width='260'></b></div><ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'><br />
<b:loop values='data:items' var='item'><br />
<li expr:style='data:item.displayStyle'><br />
<div class='blog-icon'><br />
<b:if cond='data:showIcon == &quot;true&quot;'><br />
<input expr:value='data:item.blogIconUrl' type='hidden'/><br />
</b:if><br />
</div><br />
<div class='blog-content'><br />
<div class='blog-title'><br />
<a expr:href='data:item.blogUrl' target='_blank'><br />
<data:item.blogTitle/></a><br />
</div><br />
<div class='item-content'><br />
<b:if cond='data:showItemThumbnail == &quot;true&quot;'><br />
<b:if cond='data:item.itemThumbnail'> <br />
<div class='item-thumbnail'><br />
<a expr:href='data:item.blogUrl' target='_blank'><br />
<img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/><br />
</a><br />
</div><br />
</b:if><br />
</b:if><br />
<b:if cond='data:showItemTitle == &quot;true&quot;'><br />
<span class='item-title'><br />
<b:if cond='data:item.itemUrl != &quot;&quot;'><br />
<a expr:href='data:item.itemUrl' target='_blank'><br />
<data:item.itemTitle/></a><br />
<b:else/><br />
<data:item.itemTitle/><br />
</b:if><br />
</span><br />
</b:if><br />
<b:if cond='data:showItemSnippet == &quot;true&quot;'> <br />
<b:if cond='data:showItemTitle == &quot;true&quot;'><br />
-<br />
</b:if><br />
<span class='item-snippet'><br />
<data:item.itemSnippet/><br />
</span><br />
</b:if><br />
<b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'><br />
<div class='item-time'><br />
<data:item.timePeriodSinceLastUpdate/><br />
</div><br />
</b:if><br />
</div><br />
</div><br />
<div style='clear: both;'/><br />
</li><br />
</b:loop><br />
</ul><br />
<br />
<b:if cond='data:numItemsToShow != 0'><br />
<b:if cond='data:totalItems &gt; data:numItemsToShow'><br />
<div class='show-option'><br />
<span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'><br />
<a href='javascript:void(0)' onclick='return false;'><data:showNText/></a><br />
</span><br />
<span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'><br />
<a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a><br />
</span><br />
</div><br />
</b:if><br />
</b:if><br />
<div style="color: #cc0000;"><b></marquee></center></b></div><b:include name='quickedit'/><br />
</div><br />
</div><br />
</b:includable><br />
</b:widget></blockquote><br />
<br />
<b>Modificaciones:</b><br />
<div class="recuadro"><b>height='300'</b> Es el alto del gadget, a mayor valor, más altura y viceversa.<br />
<b>width='260'</b> Es el ancho del gadget, a mayor valor, más anchura y viceversa.<br />
<b>bgcolor = '#faf0e6'</b> Color de fondo del gadget. Si no queremos usarlo eliminamos ese código (bgcolor = '#faf0e6'). Para cambiar el color, sustituimos el código del color (#faf0e6) por el escogido.<br />
<b>border: #cdaf95 2px solid;</b> El borde del gadget. Si no queremos borde, ponemos su valor (2px) en 0, si lo queremos más o menos ancho, aumentamos o disminuimos ese valor. Para cambiar su color, colocamos en #cdaf95, el código del color escogido.<br />
<b>scrollamount='5'</b> Velocidad de desplazamiento, aumentamos o disminuimos el valor (5) para variar la velocidad.<br />
<b>direction='up'</b> Dirección del desplazamiento, en este caso hacia arriba, si ponemos down en lugar de up, el desplazamiento será hacia abajo.<br />
</div>Anonymousnoreply@blogger.com49tag:blogger.com,1999:blog-8932650177070730831.post-19377012949040934012010-09-20T02:21:00.000+02:002010-09-20T02:21:22.360+02:00Menú en las nuevas plantillas de diseñoDesde que Blogger introdujo en nuestro panel la opción de utilizar las nuevas plantillas de diseño, recibo constantes consultas solicitando la forma de incluir un menú horizontal en las mismas.<br />
<br />
A menudo lo que solicitáis es el poder incluir uno de los menús que yo explico en mi blog para las plantillas anteriores, esto me ha hecho darme cuenta de que muchos de vosotros no sabéis que <b>todas las plantillas del nuevo diseñador incluyen la posibilidad de usar su propio menú horizontal</b>.<br />
<br />
En realidad las nuevas plantillas incluyen todo el código necesario para utilizar un menú, incluido el CSS que hará que el menú se adapte perfectamente al diseño del blog.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="Menu en las nuevas plantillas" border="0" src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/TJTeLzfbp4I/AAAAAAAAIWo/EOCnlQCva54/s640/tabs.jpg" style="margin-left: auto; margin-right: auto;" title="Menu en las nuevas plantillas" width="450" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Algunos ejemplos de menús en distintas plantillas de Diseño</td></tr>
</tbody></table><br />
Hay dos maneras de incluir el menú horizontal en las nuevas plantillas, utilizando las nuevas Páginas Independientes de Blogger o usando la Lista de enlaces.<br />
<br />
<div style="text-align: center;"><span style="font-size: large;"><b>Incluir el menú horizontal utilizando la Lista de Enlaces.</b></span></div><br />
<b>[1]</b> Vamos a Diseño en nuestro panel y vemos que debajo de la cabecera hay una opción para incluir un gadget:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Añadir gadget" border="0" src="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/TJTmztpRy7I/AAAAAAAAIWw/RVWJlGBA3G0/s640/tabs-a%C3%B1adir-gadget.jpg" title="Añadir gadget" width="550" /></div><br />
<b>[2]</b> Pinchamos para añadir un nuevo gadget y escogemos "<b>Lista de enlaces</b>".<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Lista de enlaces" border="0" height="115" src="http://4.bp.blogspot.com/_8PJ-pgoBhWQ/TJTnZwsSicI/AAAAAAAAIW4/GK0NSPqklns/s400/tabs-lista.jpg" title="Lista de enlaces" width="400" /></div><br />
<b>[3]</b> Configuramos el gadget tal como veis en la imagen, dejando vacío el título y el número de enlaces a mostrar y añadiendo los enlaces que se mostrarán en el menú. Podríamos añadir un enlace con la url del blog y el texto "Inicio" por ejemplo y en los demás podremos enlazar una entrada, otro blog o lo que queramos.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Configurar lista de enlaces" border="0" src="http://4.bp.blogspot.com/_8PJ-pgoBhWQ/TJToPaMoJ4I/AAAAAAAAIXA/mxLig0Q6-TA/s640/tabs-lista-configurar.jpg" title="Configurar lista de enlaces" width="450" /></div><br />
<b>[4]</b> Guardamos los cambios al gadget y ya podremos ver como ha quedado el menú. Para añadir más enlaces, lo haríamos editando el gadget que acabamos de configurar y que se mostrará en Diseño debajo del header. <br />
<br />
<br />
<div style="text-align: center;"><span style="font-size: large;"><b>Incluir el menú horizontal utilizando las Páginas estáticas.</b></span></div><br />
<b>[1]</b> Desde <b>Diseño</b> - <b>Editar páginas</b>, añadimos las páginas nuevas que vamos a necesitar que se mostrarán en el menú horizontal.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Páginas estáticas" border="0" src="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/TJUlUURNqZI/AAAAAAAAIXI/pr3pFmA9glI/s640/tabs-paginas-estaticas.jpg" title="Páginas estáticas" width="550" /></div><br />
<b>[2]</b> Una vez editada la página estática, pinchamos en "<b>Publicar página</b>" y se mostrará la pregunta "<b>¿Cómo te gustaría que apareciese el gadget Páginas?</b>", tenemos que marcar entonces la opción "<b>pestañas del blog</b>":<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Opción pestañas del blog" border="0" height="200" src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/TJUmktan3kI/AAAAAAAAIXQ/qiJEb6qH_IQ/s200/tabs-pesta%C3%B1as.jpg" title="Pestañas del blog" width="189" /></div><br />
<b>[3]</b> Añadimos tantas páginas como pestañas tendrá nuestro menú y ya será visible en el blog el menú horizontal que mostrará además un diseño acorde con nuestra plantilla.<br />
En Diseño podremos ya ver el gadget "Paginas" debajo del header y desde allí podemos editarlo si lo necesitamos.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Gadegt-menú páginas estáticas" border="0" height="134" src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/TJUnbrNdGeI/AAAAAAAAIXY/8rSfvZGyycs/s640/tabs-paginas.jpg" title="Gadegt-menú páginas estáticas" width="550" /></div>Anonymousnoreply@blogger.com42tag:blogger.com,1999:blog-8932650177070730831.post-47938027916095302092010-09-12T00:56:00.000+02:002010-09-12T00:56:48.366+02:00Añadir la función de responder a los comentariosVeremos como añadir un enlace en cada uno de los comentarios del blog que nos permita el responder a un comentarista concreto.<br />
<br />
El resultado podéis verlo en El Escaparate, donde muestro un icono/flechita a la derecha de la fecha de cada comentario, aunque podría incluirse por ejemplo a la derecha del avatar de cada comentarista.<br />
<br />
Cuando pinchemos sobre el enlace se abrirá una ventana pop-up como la de los antiguos comentarios, donde ya vemos incluido el enlace al comentario que queremos responder y el nombre del autor del comentario.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Responder comentario" border="0" src="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/TH_K7eronUI/AAAAAAAAIVs/mK1tMNwHeG4/s400/Reply-comentario.jpg" title="Responder comentario" width="300" /></div><br />
Una vez respondido, el comentario aparecerá en el blog como todos los demás, con el nombre del comentarista al que va dirigida la respuesta precedido de una @.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Ejemplo de comentario respondido" border="0" src="http://4.bp.blogspot.com/_8PJ-pgoBhWQ/TH_MB-BUk3I/AAAAAAAAIVw/D_7Pt-NhpQE/s640/Reply-hormiguita.jpg" title="Comentario respondido" width="550" /></div><br />
<br />
<b>[1]</b> Nos situamos en la pestaña <b>Diseño</b> de nuestro panel de Blogger y vamos a <b>Edición HTML</b>, ahí marcamos la opción de "<b>Expandir las plantilla de artilugios</b>" para localizar esta línea en la plantilla:<br />
<br />
<blockquote><data:comment.author/></blockquote><br />
<b>[2]</b> Copiamos y pegamos este código justo a continuación:<br />
<br />
<blockquote><span class='comment-reply'><br />
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=<b>ID_DEL_BLOG</b>&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><b>RESPONDER</b></a><br />
</span></blockquote><br />
<br />
De esta manera se mostrará el texto "RESPONDER" al lado del nombre de cada comentarista.<br />
Podemos cambiar ese texto por otro e incluso usar una imagen, <b>sustituyendo el texto</b> por el código para mostrarla:<br />
<br />
<blockquote><img src="URL_DE_LA_IMAGEN_AQUI"/></blockquote><br />
<br />
Donde dice <b>ID_DEL_BLOG</b> debemos colocar precisamente eso, el número id que identifica a nuestro blog y que es el que se muestra en la url del navegador cuando estamos dentro de nuestro panel de Blogger en la pestaña Diseño, a continuación de "blogID":<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" title="blogID" alt="Ejemplo blogID" src="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/TIuLH16lslI/AAAAAAAAIV8/kNN4_hgC3us/s640/blogID.jpg" width="550" /></div><br />
<br />
Para mostrar el "Responder" como yo lo uso en el Escaparate, en el <b>footer de cada comentario</b>, tendremos que localizar estas líneas en la plantilla y colocar el código justo debajo:<br />
<br />
<blockquote><b:include data='comment' name='commentDeleteIcon'/><br />
</span></blockquote><br />
<br />
<div class="enlaceEx"><span>HABLARON ANTES DEL TEMA:</span><a href="http://loseasi.blogspot.com/2010/04/truco-para-poder-replicar-comentarios.html" target="_blank">¿Cómo se hace?</a> | <a href="http://vagabundia.blogspot.com/2010/06/agregar-reply-los-comentarios.html" target="_blank">Vagabundia</a> | <a href="http://blogger-dicasmamanunes.blogspot.com/2010/06/colocar-widget-para-responder.html" target="_blank">Mamanues (Portugués)</a> | <a href="http://www.blog-zone.info/2010/06/how-to-add-reply-to-comment-widget.html" target="_blank">Blog Zone (Inglés)</a></div>Anonymousnoreply@blogger.com99tag:blogger.com,1999:blog-8932650177070730831.post-28324209695106549702010-09-07T15:12:00.000+02:002010-09-07T15:12:55.980+02:00Gadget de iconos fijo con opacidadJusto en la entrada anterior veíamos como <a href="http://elescaparatederosa.blogspot.com/2010/09/gadget-de-iconos-fijo.html">colocar un gadget de iconos fijo</a> en nuestro blog.<br />
<br />
En un comentario de esa misma entrada, nuestra amiga <a href="http://petiteboulangerie.blogspot.com/" target="_blank">*Eva*</a> me solicitaba si era posible el añadir a los iconos del gadget opacidad, tal como habíamos visto en el <a href="http://elescaparatederosa.blogspot.com/2010/06/gadget-de-marcadores-sociales-en-la.html">gadget de marcadores sociales en la sidebar</a>. <br />
<br />
El procedimiento es el mismo, añadimos una clase a cada icono y, mediante ese dato, aplicamos el CSS necesario para conseguir la opacidad.<br />
El resultado podéis verlo <a href="http://rosadoprueba.blogspot.com/" target="_blank">en el mismo blog de pruebas</a> donde había colocado los otros, pero en este caso el gadget con opacidad se muestra a la izquierda de la pantalla.<br />
<br />
Copiamos y pegamos el código en un gadget <b>HTML/Javascript</b> y hacemos los cambios necesarios tal como veíamos en la entrada anterior, para incluir nuestros datos.<br />
<br />
<blockquote><div style='position: fixed; bottom: 30%; right: 1%;'/><br />
<a class="twitter" href="http://www.twitter.com/TWITER USUARIO/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjny0Yl60ssoBJEkK5LHwGe-UXBXMHp9SpMEeW7brA-Fw8WFdDCGVkHjaVaz0daF9-9-GIPSMf4u_1GEvHG5O1SbvMzRObLEpkRfjE3WBVhwBWBbQEL0cBm8LihM_icEzASREh3pj40LB9o/s1600/Twitter+2-32.png" /></a><br /><br />
<a class="facebook" href="http://www.facebook.com/FACEBOOK USUARIO/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFh2GrgiqHkUfzC35bvvddbtEuNM2bgKqTjY0t_Bg4iP7ZQTN_YNffktR80F7hCDcmRtD0W1TsGboQCcfyN1DDDHpnKFjOHq0AaUHU7lEQtsLtn1ary7oOxwU_KsAx7QY8fK6yCgiLM6OE/s1600/Facebook-32.png" /></a><br /><br />
<a class="rss" href="http://feeds.feedburner.com/FEEDBURNER ID" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHgzAtnGicgyovrSkJIC55hl8KDqiS1hPVlGjJv53HPzmqo_muYhzLScdTXEOTVcgPwHH1B_iMJIRm8b0y_bSz_ObEKQuB8O707dAaddw2FE1xrGM-3xWj2hbjWGa9NteeweLrY9EXF4Lw/s1600/RSS-32.png" /></a><br /><br />
<a class="rss-mail" href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER ID&amp;loc=es_ES" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg32_GqQWYEY-bysoZzgyXWdzbKwgo-dyMQDZQnsMnSiRQ3PTvAVMt2wy0D7lyBHJDcJkyNVDNeiDgInLUv-ehXU2Ln_wzb0x_trbrgYfkRYNe5Mem07Y3u_YZ93xlb0Q6g04op_MUlxVs7/s1600/Mairssl_32.png" /></a></div><br />
<style type='text/css'><br />
a.rss img {opacity:0.8;}<br />
a.rss:hover img {opacity:1;}<br />
a.twitter img { opacity:0.8;}<br />
a.twitter:hover img { opacity:1;}<br />
a.facebook img { opacity:0.8;}<br />
a.facebook:hover img { opacity:1;}<br />
a.rss img { opacity:0.8;}<br />
a.rss:hover img { opacity:1;}<br />
a.rss-mail img { opacity:0.8;}<br />
a.rss-mail:hover img { opacity:1;}<br />
</style></blockquote><br />
<b>Nota:</b><br />
<div class="recuadro">El gadget se mostrará a la derecha de la pantalla tal como el anterior, para cambiarlo a la izquierda tendremos que <b>cambiar right por left</b> (en la primera línea del código).<br />
</div>Anonymousnoreply@blogger.com27tag:blogger.com,1999:blog-8932650177070730831.post-33638202611998724572010-09-02T17:48:00.000+02:002010-09-02T17:48:13.999+02:00Gadget de iconos fijo<div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Gadget de iconos fijos" border="0" height="200" src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/TH-wjvzxA2I/AAAAAAAAIVo/7InyHn79LiA/s200/Gadet-iconos-fixed.jpg" title="Gadget de iconos fijos" width="67" /></div>A solicitud de varias personas explicaré como colocar un gadget de iconos fijos en nuestro blog.<br />
El gadget se mostrará a la derecha de la pantalla y <b>se mantendrá fijo</b> mientras subimos y bajamos usando la barra de scroll para ver los contenidos del blog.<br />
<br />
En el gadget <b>están incluidas las imágenes</b> que podéis usar si así lo queréis, aunque será muy fácil utilizar otras que os gusten más.<br />
Las que he utilizado (por si queréis añadir alguna más al gadget del mismo diseño) podéis encontrarlas en <a href="http://www.iconspedia.com/pack/social-and-web-2282/" target="_blank">Iconspedía</a>.<br />
<br />
<br />
<b>[1]</b> Copiamos y pegamos el siguiente código en un nuevo gadget <b>HTML/Javascrip</b>:<br />
<blockquote><div style='position: fixed; bottom: 30%; right: 1%;'/><br />
<a href="http://www.twitter.com/<b>TWITER USUARIO</b>/" target="_blank"><img src="<span style="color: #6aa84f;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjny0Yl60ssoBJEkK5LHwGe-UXBXMHp9SpMEeW7brA-Fw8WFdDCGVkHjaVaz0daF9-9-GIPSMf4u_1GEvHG5O1SbvMzRObLEpkRfjE3WBVhwBWBbQEL0cBm8LihM_icEzASREh3pj40LB9o/s1600/Twitter+2-32.png</span>" /></a><br /><br />
<a href="http://www.facebook.com/<b>FACEBOOK USUARIO</b>/" target="_blank"><img src="<span style="color: #6aa84f;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFh2GrgiqHkUfzC35bvvddbtEuNM2bgKqTjY0t_Bg4iP7ZQTN_YNffktR80F7hCDcmRtD0W1TsGboQCcfyN1DDDHpnKFjOHq0AaUHU7lEQtsLtn1ary7oOxwU_KsAx7QY8fK6yCgiLM6OE/s1600/Facebook-32.png</span>" /></a><br /><br />
<a href="http://feeds.feedburner.com/<b>FEEDBURNER ID</b>" target="_blank"><img src="<span style="color: #6aa84f;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHgzAtnGicgyovrSkJIC55hl8KDqiS1hPVlGjJv53HPzmqo_muYhzLScdTXEOTVcgPwHH1B_iMJIRm8b0y_bSz_ObEKQuB8O707dAaddw2FE1xrGM-3xWj2hbjWGa9NteeweLrY9EXF4Lw/s1600/RSS-32.png</span>" /></a><br /><br />
<a href="http://feedburner.google.com/fb/a/mailverify?uri=<b>FEEDBURNER ID</b>&amp;loc=es_ES" target="_blank"><img src="<span style="color: #6aa84f;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg32_GqQWYEY-bysoZzgyXWdzbKwgo-dyMQDZQnsMnSiRQ3PTvAVMt2wy0D7lyBHJDcJkyNVDNeiDgInLUv-ehXU2Ln_wzb0x_trbrgYfkRYNe5Mem07Y3u_YZ93xlb0Q6g04op_MUlxVs7/s1600/Mairssl_32.png</span>" /></a></div></blockquote><br />
<b>[2]</b> Cambiamos ahora las partes del código que he resaltado en negrita por nuestros datos:<br />
<br />
<b>TWITER USUARIO</b> El nombre/nick que utilizamos en nuestra cuenta de Twitter.<br />
<br />
<b>FACEBOOK USUARIO</b> El nombre o id de nuestra página en Facebook.<br />
<br />
<b>FEEDBURNER ID</b> El nombre de nuestro Feed en FeedBurner. <br />
Este dato aparece dos veces porque el último icono posibilita la suscripción por correo a nuestros entradas.<br />
<br />
<b>[3]</b> Destacadas en color verde están las urls de las imágenes que he utilizado, solo hay que cambiar cada url por la de la imagen que queramos utilizar.<br />
<br />
<b>[4]</b> Para cambiar la posición del gadget (mostrarlo más arriba o más abajo y más separado del borde de la pantalla) Nos fijamos en esta parte de la primera línea del código: bottom: 30%; right: 1%; donde bottom sería la distancia del gadget a la parte de abajo de la pantalla y right sería la distancia o separación al borde de la misma.<br />
<br />
<div class="enlaceEx"><span>VER EJEMPLO ONLINE:</span><a href="http://rosadoprueba.blogspot.com/" target="_blank">GADGET DE ICONOS FIJO</a></div>Anonymousnoreply@blogger.com38