// API callback
showpostcount({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$blogger":"http://schemas.google.com/blogger/2008","xmlns$georss":"http://www.georss.org/georss","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$thr":"http://purl.org/syndication/thread/1.0","id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831"},"updated":{"$t":"2019-08-04T18:22:39.927+02:00"},"category":[{"term":"Gadget"},{"term":"Trucos Blog"},{"term":"Plantillas"},{"term":"Blogger"},{"term":"Utilidades Online"},{"term":"Datos utiles"},{"term":"Trucos imagenes"},{"term":"Entradas"},{"term":"Links"},{"term":"Comentarios"},{"term":"Trucos Texto"},{"term":"Iconos"},{"term":"Cosas mias"},{"term":"RSS"},{"term":"Etiquetas"},{"term":"Menus"},{"term":"Twitter"},{"term":"Tutoriales"},{"term":"Marcadores sociales"},{"term":"Posicionamiento"},{"term":"Navidad"},{"term":"Buscadores"},{"term":"Navegadores"},{"term":"Scriptaculous"},{"term":"Favicon"},{"term":"FeedBurner"},{"term":"Apoyando"},{"term":"Traductores"},{"term":"Boton de enlace"},{"term":"Emoticonos"},{"term":"Musica"},{"term":"Facebook"},{"term":"Popup"},{"term":"Sorteos"},{"term":"Video"},{"term":"Blogger invitado"},{"term":"JQuery"},{"term":"Wallpapers"}],"title":{"type":"text","$t":"El Escaparate"},"subtitle":{"type":"html","$t":"Diseño blog, tutoriales, recursos e inspiración, todo para los blogs de Blogger. Ayuda desinteresada y personalizada."},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default?alt=json-in-script"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"},{"rel":"next","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default?alt=json-in-script\u0026start-index=26\u0026max-results=25"}],"author":[{"name":{"$t":"Rosa"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/04564116363926564176"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"31","src":"http:\/\/4.bp.blogspot.com\/_gcgjC6O3wCs\/S4_LamD0FOI\/AAAAAAAAAZA\/_5ZMvPnOtd4\/S220\/grafico09.jpg"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"752"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"25"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-818902205509730560"},"published":{"$t":"2011-01-17T12:04:00.000+01:00"},"updated":{"$t":"2011-01-17T12:04:01.784+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Gadget"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Links"}],"title":{"type":"text","$t":"Enlace a Seguidores"},"content":{"type":"html","$t":"Hace unos días que he colocado un enlace en el footer del Escaparate desde donde, quien así lo quiera, puede hacerse seguidor del blog:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003EAunque 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.\u003Cbr \/\u003E\u003Cbr \/\u003ESe 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.\u003Cbr \/\u003EPodemos hacerlo con un simple enlace de texto, una imagen o, como en mi caso, usando ambos.\u003Cbr \/\u003E\u003Cbr \/\u003EEl código iría colocado en un \u003Cb\u003EGadget HTML\u003C\/b\u003E en la sidebar, footer, etc.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"color: #990000;\"\u003E\u003Cb\u003ECon enlace de texto:\u003C\/b\u003E\u003C\/div\u003E\u003Cblockquote\u003E\u0026lt;a href=\"http:\/\/www.blogger.com\/follow-blog.g?blogID=\u003Cspan style=\"color: #cc0000;\"\u003EXXXXXXXXXXXX\u003C\/span\u003E\" target=\"_blank\"\u0026gt;\u003Cspan style=\"color: #cc0000;\"\u003E Seguir el Escaparate\u003C\/span\u003E\u0026lt;\/a\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cdiv style=\"color: #990000;\"\u003E\u003Cb\u003ECon enlace en una imagen:\u003C\/b\u003E\u003C\/div\u003E\u003Cblockquote\u003E\u0026lt;a href=\"http:\/\/www.blogger.com\/follow-blog.g?blogID=\u003Cspan style=\"color: #cc0000;\"\u003EXXXXXXXXXXXX\u003C\/span\u003E\" target=\"_blank\"\u0026gt;\u003Cspan style=\"color: #cc0000;\"\u003E\u0026lt;img src=\"AQUI LA URL DE LA IMAGEN\"\/\u0026gt;\u003C\/span\u003E\u0026lt;\/a\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cdiv style=\"color: #990000;\"\u003E\u003Cb\u003ECon enlace en texto e imagen:\u003C\/b\u003E\u003C\/div\u003E\u003Cblockquote\u003E\u0026lt;a href=\"http:\/\/www.blogger.com\/follow-blog.g?blogID=\u003Cspan style=\"color: #cc0000;\"\u003EXXXXXXXXXXXX\u003C\/span\u003E\" target=\"_blank\"\u0026gt;\u003Cspan style=\"color: #cc0000;\"\u003E\u0026lt;img src=\"AQUI LA URL DE LA IMAGEN\"\/\u0026gt; Seguir el Escaparate\u003C\/span\u003E\u0026lt;\/a\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003ENotas:\u003C\/b\u003E\u003Cbr \/\u003E\u003Cdiv class=\"recuadro\"\u003ELo que vemos resaltado en rojo, es en cada caso lo que hemos de modificar por nuestros datos.\u003Cbr \/\u003E\u003Cbr \/\u003EEn el caso de blogID, tenemos que colocar \u003Cb\u003Esustituyendo a las XXXXXXXXX\u003C\/b\u003E, 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:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cimg src=\"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/TIuLH16lslI\/AAAAAAAAIV8\/kNN4_hgC3us\/s640\/blogID.jpg\"\/\u003E\u003Cbr \/\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/818902205509730560\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2011\/01\/enlace-seguidores.html#comment-form","title":"0 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/818902205509730560"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/818902205509730560"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2011\/01\/enlace-seguidores.html","title":"Enlace a Seguidores"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/TSw6ckMpiaI\/AAAAAAAAIjA\/NLD_Bq-et0U\/s72-c\/Seguidores-elescaparatederosa.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-6975619158212800677"},"published":{"$t":"2011-01-07T20:32:00.000+01:00"},"updated":{"$t":"2011-01-07T20:32:46.831+01:00"},"title":{"type":"text","$t":"Fan Badge personalizada para tu página en Facebook"},"content":{"type":"html","$t":"\u003Cdiv class=\"recuadro\"\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/www.pasaralaunacional.com\/\" target=\"=_blank\"\u003E\u003Cimg 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\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003ENuestro amigo \u003Ca href=\"http:\/\/draft.blogger.com\/profile\/16457492585011084867\" target=\"=_blank\"\u003EFelipe\u003C\/a\u003E 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.\u003Cbr \/\u003E\u003Cbr \/\u003EEl mismo en su entrada, facilita tres modelos distintos y muy lindos además para elegir, que podemos empezar a utilizar siguiendo sus instrucciones:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cdiv class=\"enlaceEx\"\u003E\u003Cspan\u003EAÑADIR FAN BADGE:\u003C\/span\u003E\u003Ca href=\"http:\/\/www.pasaralaunacional.com\/2011\/01\/fb-social-graph-crea-una-fan-badge.html\" target=\"_blank\"\u003EBlog de la Nacho\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/6975619158212800677"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/6975619158212800677"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2011\/01\/fan-badge-personalizada-para-tu-pagina.html","title":"Fan Badge personalizada para tu página en Facebook"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/TSbhH9g8J2I\/AAAAAAAAIiw\/LpwNvDE-YA0\/s72-c\/blogdelancho-elescaparatederosa.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-7692396026117398631"},"published":{"$t":"2011-01-06T11:24:00.000+01:00"},"updated":{"$t":"2011-01-06T11:24:40.156+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Cosas mias"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Navidad"}],"title":{"type":"text","$t":"¡Feliz Día de Reyes!"},"content":{"type":"html","$t":"\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/7692396026117398631\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2011\/01\/feliz-dia-de-reyes.html#comment-form","title":"13 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/7692396026117398631"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/7692396026117398631"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2011\/01\/feliz-dia-de-reyes.html","title":"¡Feliz Día de Reyes!"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/TSWYItYKvpI\/AAAAAAAAIic\/0MjdDzGXP_U\/s72-c\/humor_reyes-magos-forges.JPG","height":"72","width":"72"},"thr$total":{"$t":"13"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-6935480516626758322"},"published":{"$t":"2011-01-05T12:40:00.000+01:00"},"updated":{"$t":"2011-01-05T12:40:09.904+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"}],"title":{"type":"text","$t":"Recibir las últimas novedades de Blogger  en tu correo"},"content":{"type":"html","$t":"Supongo que muchos de vosotros ya estaréis al tanto de la noticia que en \u003Ca href=\"http:\/\/buzz-es.blogspot.com\/2010\/11\/no-te-pierdas-el-newsletter-de-blogger.html\" target=\"_blank\"\u003EBlogger Buzz\u003C\/a\u003E se publicaba el día 25 de Noviembre.\u003Cbr \/\u003E\u003Cbr \/\u003EAllí 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.\u003Cbr \/\u003E\u003Cbr \/\u003ERecibir directamente en nuestro correo electrónico este Newsletter ( últimas novedades de Blogger) es muy sencillo.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Ve a tu \u003Cb\u003EEscritorio\u003C\/b\u003E, allí fíjate en un enlace que dice \u003Cb\u003EEditar notificaciones\u003C\/b\u003E:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E Pinchando en ese enlace, serás dirigido a una página donde deberás marcar la única opción disponible: \u003Cb\u003EAnuncios sobre funciones\u003C\/b\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[3]\u003C\/b\u003E Una vez marcada la opción, pinchas en \u003Cb\u003EGuardar\u003C\/b\u003E 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."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/6935480516626758322\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2011\/01\/recibir-las-ultimas-novedades-de.html#comment-form","title":"0 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/6935480516626758322"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/6935480516626758322"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2011\/01\/recibir-las-ultimas-novedades-de.html","title":"Recibir las últimas novedades de Blogger  en tu correo"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/TSRWaFqRrbI\/AAAAAAAAIiE\/_afQN7oUAvQ\/s72-c\/Escritorio-elescaparatederosa.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-5884207191516269628"},"published":{"$t":"2010-12-31T18:43:00.000+01:00"},"updated":{"$t":"2010-12-31T18:43:04.653+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Cosas mias"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Navidad"}],"title":{"type":"text","$t":"¡Feliz Año Nuevo!"},"content":{"type":"html","$t":"\u003Cdiv style=\"color: #660000;\"\u003E\u003Cspan style=\"font-size: large;\"\u003E\u003Cb\u003EQue 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.\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/5884207191516269628\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/12\/feliz-ano-nuevo.html#comment-form","title":"26 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/5884207191516269628"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/5884207191516269628"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/12\/feliz-ano-nuevo.html","title":"¡Feliz Año Nuevo!"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/_8PJ-pgoBhWQ\/TR2-hVjyFaI\/AAAAAAAAIfQ\/v3yuCCzawRc\/s72-c\/feliz%2Ba%25C3%25B1o%2B2011.jpg","height":"72","width":"72"},"thr$total":{"$t":"26"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-3139028260764865888"},"published":{"$t":"2010-12-30T11:34:00.001+01:00"},"updated":{"$t":"2010-12-30T11:38:10.857+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Gadget"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Marcadores sociales"}],"title":{"type":"text","$t":"Sharesidebar: Botones flotantes para compartir contenidos"},"content":{"type":"html","$t":"\u003Cdiv class=\"separator\" style=\"clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: left;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003EDesde la web de \u003Ca href=\"http:\/\/sharesidebar.com\/\" target=\"_blank\"\u003ESharesidebar\u003C\/a\u003E nos facilitan de forma muy sencilla, el añadir una barra flotante en nuestro blog desde la que nuestros visitantes pueden \u003Cb\u003Ecompartir en diferentes redes sociales los contenidos de nuestro sitio\u003C\/b\u003E.\u003Cbr \/\u003ELa aplicación incluye botones a redes sociales como \u003Cb\u003ETwitter, Facebook, Google Buzz, Delicious, Yahoo! Buzz, Reddit y Digg\u003C\/b\u003E; aunque podemos seleccionar \u003Cb\u003Esolo las que nos interese añadir\u003C\/b\u003E, además de escoger si la barra de iconos será visible a \u003Cb\u003Ederecha o izquierda\u003C\/b\u003E de nuestro blog.\u003Cbr \/\u003E\u003Cbr \/\u003EUna 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).\u003Cbr \/\u003E\u003Cbr \/\u003EEn \"Services\" marcamos las redes sociales a mostrar en la barra.\u003Cbr \/\u003E\u003Cbr \/\u003EIntroducimos después la dirección de nuestro email y la url de nuestro blog y pinchamos en \"Get the Code\".\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003ECopiamos y pegamos el código obtenido en nuestra plantilla desde \"Edición HTML\" justo antes de la etiqueta \u003Cb\u003E\u0026lt;\/body\u0026gt;\u003C\/b\u003E o incluso desde Diseño directamente en un \u003Cb\u003EGadget HTML\/Javascript\u003C\/b\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003ENota:\u003C\/b\u003E\u003Cbr \/\u003E\u003Cdiv class=\"recuadro\"\u003EComo 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.\u003Cbr \/\u003ENo 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.\u003Cbr \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cdiv class=\"enlaceEx\"\u003E\u003Cspan\u003EIR A:\u003C\/span\u003E\u003Ca href=\"http:\/\/sharesidebar.com\/\" target=\"_blank\" target=\"_blank\"\u003ESHARESIDEBAR\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/3139028260764865888\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/12\/sharesidebar-botones-flotantes-para.html#comment-form","title":"9 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/3139028260764865888"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/3139028260764865888"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/12\/sharesidebar-botones-flotantes-para.html","title":"Sharesidebar: Botones flotantes para compartir contenidos"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/_8PJ-pgoBhWQ\/TRxapkRe9xI\/AAAAAAAAIeo\/80O3C1fHRNM\/s72-c\/sharesidebar-elescaparatederosa.jpg","height":"72","width":"72"},"thr$total":{"$t":"9"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-5863144536010091736"},"published":{"$t":"2010-12-24T11:29:00.000+01:00"},"updated":{"$t":"2010-12-24T11:29:41.713+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Navidad"}],"title":{"type":"text","$t":"Feliz Navidad 2010"},"content":{"type":"html","$t":"\u003Cdiv style=\"color: #990000;\"\u003E\u003Cspan style=\"font-size: large;\"\u003E\u003Cb\u003E\"El secreto de la felicidad no esta en hacer siempre lo que se quiere sino en querer siempre lo que se hace.\"\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Cb\u003E\u003Ci\u003E - León Tolstoi -\u003C\/i\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/5863144536010091736\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/12\/feliz-navidad-2010.html#comment-form","title":"55 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/5863144536010091736"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/5863144536010091736"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/12\/feliz-navidad-2010.html","title":"Feliz Navidad 2010"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/TROFBvu4v7I\/AAAAAAAAIec\/dZvVxeCmXKQ\/s72-c\/el-escaparatederosa-feliz-navidad.gif","height":"72","width":"72"},"thr$total":{"$t":"55"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-4806620105910250510"},"published":{"$t":"2010-12-21T14:09:00.000+01:00"},"updated":{"$t":"2010-12-21T14:09:51.404+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Navidad"}],"title":{"type":"text","$t":"Guirnalda navideña de luces intermitentes"},"content":{"type":"html","$t":"\u003Cimg 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\" \/\u003E\u003Cbr \/\u003EEn \u003Ca href=\"http:\/\/snowysites.com\/\" target=\"_blank\"\u003ESnowy Sites\u003C\/a\u003E 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.\u003Cbr \/\u003E\u003Cbr \/\u003EPara 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 \u003Cb\u003E\u0026lt;\/head\u0026gt;\u003C\/b\u003E de nuestra plantilla:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;script type=\u0026quot;text\/javascript\u0026quot; src=\u0026quot;http:\/\/snowysites.com\/lights.js\u0026quot;\u0026gt;\u0026lt;\/script\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"enlaceEx\"\u003E\u003Cspan\u003EVER EJEMPLO:\u003C\/span\u003E\u003Ca href=\"http:\/\/rosadoprueba.blogspot.com\/\" target=\"_blank\"\u003EGuirnalda navideña de luces\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/4806620105910250510\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/12\/guirnalda-navidena-de-luces.html#comment-form","title":"46 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/4806620105910250510"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/4806620105910250510"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/12\/guirnalda-navidena-de-luces.html","title":"Guirnalda navideña de luces intermitentes"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/TQ6aQj-wszI\/AAAAAAAAIeA\/K-SA4piXjns\/s72-c\/luces-el-escaparate-de-rosa.JPG","height":"72","width":"72"},"thr$total":{"$t":"46"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-7297654046178294447"},"published":{"$t":"2010-12-19T19:28:00.000+01:00"},"updated":{"$t":"2010-12-19T19:28:46.730+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Navidad"}],"title":{"type":"text","$t":"Y más nieve en el blog"},"content":{"type":"html","$t":"En entradas anteriores vimos como incluir un efecto de nieve en el blog usando varios sistemas:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E-\u0026gt;\u003C\/b\u003E\u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2007\/12\/nieve-en-el-blog.html\"\u003ENieve usando la etiqueta marquee\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cb\u003E-\u0026gt;\u003C\/b\u003E\u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2008\/12\/nieve-en-el-blog-ii.html\"\u003ENieve usando un script externo.\u003C\/a\u003E\u003Cbr \/\u003E\u003Cb\u003E-\u0026gt;\u003C\/b\u003E\u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2009\/12\/nieve-que-se-acumula-al-final-de-la.html\"\u003ENieve que se va acumulando al final de la página\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003EEn esta entrada vamos a utilizar un script que solo tendremos que copiar y pegar -desde \u003Cb\u003EDiseño\u003C\/b\u003E- en un gadget \u003Cb\u003EHTML\/Javascript\u003C\/b\u003E.\u003Cbr \/\u003EMucho 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\".\u003Cbr \/\u003E\u003Cbr \/\u003EEl 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.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003ECódigo:\u003C\/b\u003E\u003Cbr \/\u003E\u003Cblockquote class=\"smallquote\"\u003E\u0026lt;script language=\"JavaScript\"\u0026gt;\u003Cbr \/\u003Eif ((document.getElementById) \u0026amp;\u0026amp;\u003Cbr \/\u003Ewindow.addEventListener || window.attachEvent){\u003Cbr \/\u003E(function(){\u003Cbr \/\u003E\u003Cbr \/\u003Evar numberOfSnows = 20; \u003Cbr \/\u003Evar snowSpeed = 0.9; \u003Cbr \/\u003Evar inTheFace = 5;\u003Cbr \/\u003Evar setTimeOutSpeed = 50; \u003Cbr \/\u003E\u003Cbr \/\u003Evar h,y,cy,cx,sy,sx,ref,field,oy1,oy2,ox1,ox2,iy1,iy2,ix1,ix2;\u003Cbr \/\u003Evar d = document;\u003Cbr \/\u003Evar domWw = (typeof window.innerWidth == \"number\");\u003Cbr \/\u003Evar domSy = (typeof window.pageYOffset == \"number\");\u003Cbr \/\u003Evar pi1 = 180\/3.14;\u003Cbr \/\u003Evar pi2 = 3.14\/180;\u003Cbr \/\u003Evar y = [];\u003Cbr \/\u003Evar x = [];\u003Cbr \/\u003Evar strs = [];\u003Cbr \/\u003Evar gro = [];\u003Cbr \/\u003Evar dim = [];\u003Cbr \/\u003Evar dfc = [];\u003Cbr \/\u003Evar vel = [];\u003Cbr \/\u003Evar dir = [];\u003Cbr \/\u003Evar acc = [];\u003Cbr \/\u003Evar dtor = [];\u003Cbr \/\u003Evar xy2 = [];\u003Cbr \/\u003Evar idx = document.getElementsByTagName('div').length;\u003Cbr \/\u003Evar zip = [];\u003Cbr \/\u003Evar pix = \"px\";\u003Cbr \/\u003Efor (i = 0; i \u0026lt; numberOfSnows; i++){\u003Cbr \/\u003Edocument.write('\u0026lt;div id=\"snows'+(idx+i)+'\"'\u003Cbr \/\u003E+' style=\"position:absolute;top:0px;left:0px;'\u003Cbr \/\u003E+'width:40px;height:40px;background-color:transparent;'\u003Cbr \/\u003E+'font-size:0px;\"\u0026gt;\u0026lt;img src=\"http:\/\/3.bp.blogspot.com\/_YG8aI6aU-bQ\/R1oZPy7XFVI\/AAAAAAAAAyE\/ybhMOZzH_i4\/s320\/snow2.gif\" class=\"snow\" width=\"20\"\/\u0026gt;\u0026lt;\/div\u0026gt;');\u003Cbr \/\u003E}\u003Cbr \/\u003Eif (domWw) ref = window;\u003Cbr \/\u003Eelse{\u003Cbr \/\u003Eif (d.documentElement \u0026amp;\u0026amp;\u003Cbr \/\u003Etypeof d.documentElement.clientWidth == \"number\" \u0026amp;\u0026amp;\u003Cbr \/\u003Ed.documentElement.clientWidth != 0)\u003Cbr \/\u003Eref = d.documentElement;\u003Cbr \/\u003Eelse{\u003Cbr \/\u003Eif (d.body \u0026amp;\u0026amp;\u003Cbr \/\u003Etypeof d.body.clientWidth == \"number\")\u003Cbr \/\u003Eref = d.body;\u003Cbr \/\u003E}\u003Cbr \/\u003E}\u003Cbr \/\u003Efunction win(){\u003Cbr \/\u003Evar mozBar = ((domWw) \u0026amp;\u0026amp;\u003Cbr \/\u003Eref.innerWidth != d.documentElement.offsetWidth)?20:0;\u003Cbr \/\u003Eh = (domWw)?ref.innerHeight:ref.clientHeight;\u003Cbr \/\u003Ew = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;\u003Cbr \/\u003Ecy = Math.floor(h\/2);\u003Cbr \/\u003Ecx = Math.floor(w\/2);\u003Cbr \/\u003Eoy1 = (75 * h \/ 100);\u003Cbr \/\u003Eoy2 = (oy1 \/ 2);\u003Cbr \/\u003Eox1 = (75 * w \/ 100);\u003Cbr \/\u003Eox2 = (ox1 \/ 2);\u003Cbr \/\u003Eiy1 = (18 * h \/ 100);\u003Cbr \/\u003Eiy2 = (iy1 \/ 2);\u003Cbr \/\u003Eix1 = (18 * w \/ 100);\u003Cbr \/\u003Eix2 = (ix1 \/ 2);\u003Cbr \/\u003Efield = (h \u0026gt; w)?h:w;\u003Cbr \/\u003E}\u003Cbr \/\u003Efunction rst(s){\u003Cbr \/\u003Evar cyx;\u003Cbr \/\u003Esy = (domSy)?ref.pageYOffset:ref.scrollTop;\u003Cbr \/\u003Esx = (domSy)?ref.pageXOffset:ref.scrollLeft;\u003Cbr \/\u003Eacc[s] = 0;\u003Cbr \/\u003Edim[s] = 1;\u003Cbr \/\u003Exy2[s] = 0;\u003Cbr \/\u003Ecyx = Math.round(Math.random() * 2);\u003Cbr \/\u003Eif (cyx == 0){\u003Cbr \/\u003Ey[s] = (cy - iy2) + Math.floor(Math.random() * iy1);\u003Cbr \/\u003Ex[s] = (cx - ix2) + Math.floor(Math.random() * ix1);\u003Cbr \/\u003E}\u003Cbr \/\u003Eelse{\u003Cbr \/\u003Ey[s] = (cy - oy2) + Math.floor(Math.random() * oy1);\u003Cbr \/\u003Ex[s] = (cx - ox2) + Math.floor(Math.random() * ox1);\u003Cbr \/\u003E}\u003Cbr \/\u003Edy = y[s] - cy;\u003Cbr \/\u003Edx = x[s] - cx;\u003Cbr \/\u003Edir[s] = Math.atan2(dy,dx) * pi1;\u003Cbr \/\u003Edfc[s] = Math.sqrt(dy*dy + dx*dx) ;\u003Cbr \/\u003Ezip[s] = 10 * (dfc[s] + inTheFace) \/ 100;\u003Cbr \/\u003Evel[s] = snowSpeed * dfc[s] \/ 100;\u003Cbr \/\u003Edtor[s] = (field - dfc[s]);\u003Cbr \/\u003Eif (dtor[s] \u0026lt; 1) dtor[s] = 1;\u003Cbr \/\u003Egro[s] = 0.003 * dtor[s] \/ 100;\u003Cbr \/\u003E}\u003Cbr \/\u003Efunction animate(){\u003Cbr \/\u003Efor (i = 0; i \u0026lt; numberOfSnows; i++){\u003Cbr \/\u003Ey[i] += vel[i] * Math.sin(dir[i] * pi2);\u003Cbr \/\u003Ex[i] += vel[i] * Math.cos(dir[i] * pi2);\u003Cbr \/\u003Eacc[i] = (vel[i] \/ (dfc[i] + (vel[i] * zip[i])) * vel[i]);\u003Cbr \/\u003Evel[i] += (acc[i]);\u003Cbr \/\u003Edim[i] += gro[i] + acc[i] \/ zip[i];\u003Cbr \/\u003Exy2[i] = dim[i] \/ 2;\u003Cbr \/\u003Eif (y[i] \u0026lt; 0 + xy2[i] ||\u003Cbr \/\u003Ex[i] \u0026lt; 0 + xy2[i] ||\u003Cbr \/\u003Ey[i] \u0026gt; h - xy2[i] ||\u003Cbr \/\u003Ex[i] \u0026gt; w - xy2[i]){\u003Cbr \/\u003Erst(i);\u003Cbr \/\u003E}\u003Cbr \/\u003Estrs[i].top = (y[i] - xy2[i]) + sy + pix;\u003Cbr \/\u003Estrs[i].left = (x[i] - xy2[i]) + sx + pix;\u003Cbr \/\u003Estrs[i].width = (strs[i].height = (Math.round(dim[i])) + pix);\u003Cbr \/\u003E}\u003Cbr \/\u003EsetTimeout(animate,setTimeOutSpeed);\u003Cbr \/\u003E}\u003Cbr \/\u003Efunction init(){\u003Cbr \/\u003Ewin();\u003Cbr \/\u003Efor (i = 0; i \u0026lt; numberOfSnows; i++){\u003Cbr \/\u003Estrs[i] = document.getElementById(\"snows\"+(idx+i)).style;\u003Cbr \/\u003Erst(i);\u003Cbr \/\u003E}\u003Cbr \/\u003Eanimate();\u003Cbr \/\u003E}\u003Cbr \/\u003Eif (window.addEventListener){\u003Cbr \/\u003Ewindow.addEventListener(\"resize\",win,false);\u003Cbr \/\u003Ewindow.addEventListener(\"load\",init,false);\u003Cbr \/\u003E}\u003Cbr \/\u003Eelse if (window.attachEvent){\u003Cbr \/\u003Ewindow.attachEvent(\"onresize\",win);\u003Cbr \/\u003Ewindow.attachEvent(\"onload\",init);\u003Cbr \/\u003E}\u003Cbr \/\u003E})();\u003Cbr \/\u003E}\/\/End.\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;style\u0026gt;\u003Cbr \/\u003E.snow {\u003Cbr \/\u003Efilter:alpha(opacity=50);\u003Cbr \/\u003E-moz-opacity: 0.5;\u003Cbr \/\u003Eopacity: 0.5;\u003Cbr \/\u003E-khtml-opacity: 0.5;\u003Cbr \/\u003E}\u003Cbr \/\u003Ehtml {\u003Cbr \/\u003Eoverflow-x:hidden;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003EConfiguración:\u003C\/b\u003E\u003Cbr \/\u003E\u003Cdiv class=\"recuadro\"\u003E\u003Cb\u003E-\u0026gt;\u003C\/b\u003E \u003Cb\u003Evar numberOfSnows = 20;\u003C\/b\u003E Cambiamos aquí el valor para mostrar mayor o menor número de copos.\u003Cbr \/\u003E\u003Cb\u003E-\u0026gt;\u003C\/b\u003E \u003Cb\u003Evar snowSpeed = 0.9;\u003C\/b\u003E Valor que controla la velocidad de desplazamiento de los copos.\u003Cbr \/\u003E\u003Cb\u003E-\u0026gt;\u003C\/b\u003E \u003Cb\u003Evar setTimeOutSpeed = 50;\u003C\/b\u003E Valor que controla la velocidad de aparición de los copos.\u003Cbr \/\u003E\u003Cb\u003E-\u0026gt;\u003C\/b\u003E 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\"):\u003Cbr \/\u003E\u003Cb\u003E\u0026lt;img src=\"http:\/\/3.bp.blogspot.com\/_YG8aI6aU-bQ\/R1oZPy7XFXI\/AAAAAAAAAyU\/k9q1UUaZIGE\/s320\/snow4.gif\" class=\"snow\" width=\"20\"\/\u0026gt;\u003C\/b\u003E \u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003ENota:\u003C\/b\u003E\u003Cbr \/\u003E\u003Cdiv class=\"recuadro\"\u003EEn las plantillas del \u003Cb\u003EDiseñador\u003C\/b\u003E de Blogger, funciona mal o directamente no funciona.\u003C\/div\u003E\u003Cbr \/\u003E\u003Cdiv class=\"enlaceEx\"\u003E\u003Cspan\u003EVER EJEMPLO:\u003C\/span\u003E\u003Ca href=\"http:\/\/rosadoprueba.blogspot.com\/\" target=\"_blank\"\u003EEstrellas de nieve\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/7297654046178294447\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/12\/y-mas-nieve-en-el-blog.html#comment-form","title":"27 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/7297654046178294447"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/7297654046178294447"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/12\/y-mas-nieve-en-el-blog.html","title":"Y más nieve en el blog"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"thr$total":{"$t":"27"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-5972011399400721724"},"published":{"$t":"2010-12-02T20:25:00.000+01:00"},"updated":{"$t":"2010-12-02T20:25:56.776+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Gadget"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Twitter"}],"title":{"type":"text","$t":"Fan Box de Twitter en la sidebar"},"content":{"type":"html","$t":"En uno de mis recorridos por los blogs que habitualmente suelo visitar, me encontré con este interesante gadget en \u003Ca href=\"http:\/\/ciudadblogger.com\/2010\/11\/agregar-un-fan-box-de-twitter.html\" target=\"blank\"\u003ECiudad Blogger \u003Cimg alt=\"Ciudad Blogger\" class=\"sin\" src=\"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/TO-khdCvTxI\/AAAAAAAAIcI\/l7XP4qKm6Uc\/s1600\/Ciudad-Blogger.JPG\" title=\"Ciudad Blogger\" \/\u003E\u003C\/a\u003E que nos permite mostrar el \u003Cb\u003Enúmero de seguidores total\u003C\/b\u003E que tenemos en Twitter, así como los \u003Cb\u003Eúltimos 10 seguidores que se han agregado\u003C\/b\u003E con sus avatares a la vista.\u003Cbr \/\u003E\u003Cbr \/\u003EEl gadget, una vez instalado, se mostrará con un diseño casi idéntico al conocido Fan Box de Facebook:\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003EPara añadirlo en nuestro blog, lo hacemos desde \u003Cb\u003EDiseño\u003C\/b\u003E añadiendo un \u003Cb\u003Enuevo gadget HTML\/Javascript\u003C\/b\u003E y colocando este código dentro:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div class=\u0026quot;textwidget\u0026quot;\u0026gt;\u003Cbr \/\u003E\u0026lt;script type=\u0026quot;text\/javascript\u0026quot; src=\u0026quot;http:\/\/s.moopz.com\/fanbox_init.js\u0026quot;\u0026gt;\u0026lt;\/script\u0026gt;\u0026lt;div id=\u0026quot;twitterfanbox\u0026quot;\u0026gt;\u003Cbr \/\u003E\u0026lt;script type=\u0026quot;text\/javascript\u0026quot;\u0026gt;fanbox_init(\u0026quot;\u003Cb\u003Eusuario\u003C\/b\u003E\u0026quot;);\u0026lt;\/script\u0026gt;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;style\u0026gt;\u003Cbr \/\u003E.FB_SERVER_IFRAME {\u003Cbr \/\u003Ewidth: 290px !important; \/* Ancho del gadget *\/\u003Cbr \/\u003Eheight: 250px !important; \/* Alto del gadget *\/\u003Cbr \/\u003E}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003ECambiamos donde dice \u003Cb\u003Eusuario\u003C\/b\u003E por nuestro nick en Twitter.\u003Cbr \/\u003ESi necesitamos cambiar el alto o el ancho del gadget para adaptarlo al espacio disponible en nuestra sidebar, lo hacemos en \u003Cb\u003Ewidth\u003C\/b\u003E (ancho) y en \u003Cb\u003Eheight\u003C\/b\u003E alto, cambiando el valor ahí por el que necesitemos.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"enlaceEx\"\u003E\u003Cspan\u003EVISTO EN:\u003C\/span\u003E\u003Ca href=\"http:\/\/ciudadblogger.com\" target=\"_blank\"\u003ECiudad Blogger\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/5972011399400721724\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/12\/fan-box-de-twitter-en-la-sidebar.html#comment-form","title":"64 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/5972011399400721724"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/5972011399400721724"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/12\/fan-box-de-twitter-en-la-sidebar.html","title":"Fan Box de Twitter en la sidebar"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/TO-khdCvTxI\/AAAAAAAAIcI\/l7XP4qKm6Uc\/s72-c\/Ciudad-Blogger.JPG","height":"72","width":"72"},"thr$total":{"$t":"64"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-4807809782785874303"},"published":{"$t":"2010-11-25T03:19:00.000+01:00"},"updated":{"$t":"2010-11-25T03:19:24.334+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Plantillas"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Trucos Texto"}],"title":{"type":"text","$t":"Nuevas fuentes disponibles en el Diseñador de Blogger"},"content":{"type":"html","$t":"\u003Ca 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;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/a\u003ESe anuncia en el blog de \u003Ca href=\"http:\/\/bloggerindraft.blogspot.com\/2010\/11\/more-fonts-means-more-choice.html\" target=\"_blank\"\u003EBlogger in Draft\u003C\/a\u003E que están disponibles 40 fuentes más para utilizar en nuestro blog, \u003Cb\u003Esiempre que estemos utilizando una plantilla del Diseñador de Blogger\u003C\/b\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003EPara poder utilizar las nuevas fuentes, hemos de acceder a nuestro escritorio de Blogger desde \u003Ca href=\"http:\/\/draft.blogger.com\/\" target=\"_blank\"\u003EBlogger in Draft\u003C\/a\u003E, pues aún están en periodo de pruebas.\u003Cbr \/\u003E\u003Cbr \/\u003EUna vez en nuestro escritorio, desde \u003Cb\u003EDiseño\u003C\/b\u003E vamos al \u003Cb\u003EDiseñador de plantillas\u003C\/b\u003E escogemos la opción \u003Cb\u003EAvanzado\u003C\/b\u003E 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...).\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/4807809782785874303\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/11\/nuevas-fuentes-disponibles-en-el.html#comment-form","title":"41 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/4807809782785874303"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/4807809782785874303"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/11\/nuevas-fuentes-disponibles-en-el.html","title":"Nuevas fuentes disponibles en el Diseñador de Blogger"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/TO3BJ80E5MI\/AAAAAAAAIbk\/KgH-AC6gneo\/s72-c\/fuentes.jpg","height":"72","width":"72"},"thr$total":{"$t":"41"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-2611379638562807651"},"published":{"$t":"2010-11-19T12:49:00.000+01:00"},"updated":{"$t":"2010-11-19T12:49:05.821+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Datos utiles"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Navegadores"}],"title":{"type":"text","$t":"Señalizar el código que añadimos en la plantilla"},"content":{"type":"html","$t":"\u003Cdiv class=\"separator\" style=\"clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: left;\"\u003E\u003Cimg border=\"0\" height=\"150\" src=\"http:\/\/3.bp.blogspot.com\/_8PJ-pgoBhWQ\/S9NrZwKvtLI\/AAAAAAAAH18\/2HzQjsPDBjk\/s200\/html.jpg\" width=\"200\" \/\u003E\u003C\/div\u003EHe 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.\u003Cbr \/\u003E\u003Cbr \/\u003ELa solución sería señalizar ese código en la plantilla para poder localizarlo posteriormente sin problemas.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003ETambié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.\u003Cbr \/\u003E\u003Cbr \/\u003EHay 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.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E¿Como distingo el CSS del HTML en la plantilla?\u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EEl CSS de nuestra plantilla es todo el código de la misma que está incluido entre las etiquetas \u003Cb\u003E\u0026lt;b:skin\u0026gt;\u0026lt;![CDATA[\/*\u003C\/b\u003E y \u003Cb\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/b\u003E. \u003Cbr \/\u003EDesde esta última etiqueta (]]\u0026gt;\u0026lt;\/b:skin\u0026gt;) hasta el final del código de la plantilla podríamos decir que eso es el código HTML.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003ESeñalizar lo que añadimos en el CSS\u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003ESupongamos 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í:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\/* Comments \u003Cbr \/\u003E------------------------------------------------------- *\/\u003C\/blockquote\u003E\u003Cbr \/\u003EEsto 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.\u003Cbr \/\u003E\u003Cbr \/\u003ESi 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 \u003Cb\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/b\u003E y colocaríamos ese código antes de la misma, de esta manera estaremos seguros de que va en el lugar correcto.\u003Cbr \/\u003ESi además es un código eventual o sencillamente nos gusta tener todo controlado, lo marcamos de la forma que antes indicaba.\u003Cbr \/\u003E\u003Cbr \/\u003ESupongamos, por ejemplo, que es algo para controlar el gadget de \"últimos comentarios\", podríamos poner a comienzo de ese código algo así:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\/* Gadget de últimos comentarios \u003Cbr \/\u003E------------------------------------------------------- *\/\u003C\/blockquote\u003E\u003Cbr \/\u003EE incluso algo menos complicado que servirá igualmente a nuestros propósitos:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\/* Gadget de ultimos comentarios *\/\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003ESeñalizar lo que añadimos en el HTML\u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EComo ya dijimos antes, desde la etiqueta ]]\u0026gt;\u0026lt;\/b:skin\u0026gt; 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 \u003Cb\u003Eno incluir nada entre las etiquetas \u0026lt;\/head\u0026gt; y \u0026lt;body\u0026gt;\u003C\/b\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003EPara señalizar cualquier cosa que queramos incluir en la parte del HTML, lo haríamos de esta manera:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;!-- Script de últimos comentarios --\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003EY para asegurarnos aún más de tenerlo bien controlado, incluso podrías marcar el código a comienzo y principio de este:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;!-- Inicio del script de últimos comentarios --\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003EAQUI IRIA EL CODIGO QUE AÑADIMOS NUEVO\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;!-- Final del script de últimos comentarios --\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003ELo hacemos así porque \u003Cb\u003Elos navegadores no interpretarán lo que esté incluido dentro de esas etiquetas\u003C\/b\u003E, es decir, no se mostrará en la \"vista real\" del blog.\u003Cbr \/\u003E\u003Cbr \/\u003EEsto 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.\u003Cbr \/\u003E\u003Cbr \/\u003EImaginemos 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.\u003Cbr \/\u003E\u003Cbr \/\u003ETendrí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:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u003Cb\u003E\u0026lt;!--\u003C\/b\u003E Inicio de enlace de comentarios a pie de entrada\u003Cbr \/\u003E\u003Cbr \/\u003EAQUI IRIA EL CODIGO ORIGINAL DEL ENLACE A COMENTARIOS\u003Cbr \/\u003E\u003Cbr \/\u003EFinal del enlace de comentarios a pie de entradas \u003Cb\u003E--\u0026gt;\u003C\/b\u003E\u003C\/blockquote\u003E\u003Cbr \/\u003EDe esta forma si alguna vez queremos \u003Cb\u003Erecuperar el enlace a comentarios\u003C\/b\u003E a pie de entradas solo tendríamos que \u003Cb\u003Eeliminar lo añadido\u003C\/b\u003E 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."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/2611379638562807651\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/11\/senalizar-el-codigo-que-anadimos-en-la.html#comment-form","title":"25 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/2611379638562807651"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/2611379638562807651"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/11\/senalizar-el-codigo-que-anadimos-en-la.html","title":"Señalizar el código que añadimos en la plantilla"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/_8PJ-pgoBhWQ\/S9NrZwKvtLI\/AAAAAAAAH18\/2HzQjsPDBjk\/s72-c\/html.jpg","height":"72","width":"72"},"thr$total":{"$t":"25"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-5735227929735308505"},"published":{"$t":"2010-11-11T23:11:00.000+01:00"},"updated":{"$t":"2010-11-11T23:11:36.942+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Plantillas"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Trucos Blog"}],"title":{"type":"text","$t":"Dividir la cabecera del blog en las plantillas de Diseño"},"content":{"type":"html","$t":"Habíamos visto hace algún tiempo \u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2008\/11\/dividir-la-cabecera-del-blog.html\"\u003Ecomo dividir el header (cabecera) del blog\u003C\/a\u003E para las plantillas anteriores a las del Nuevo Diseñador de Blogger.\u003Cbr \/\u003E\u003Cbr \/\u003EEn 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.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Colocamos unas líneas en el CSS de la plantilla, siempre antes de \u003Cb\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/b\u003E, y en este caso estaría bien localizar esto:\u003Cbr \/\u003E\u003Cblockquote\u003E\/* Header\u003Cbr \/\u003E----------------------------------------------- *\/\u003C\/blockquote\u003E\u003Cbr \/\u003EY justo debajo colocar el CSS necesario:\u003Cbr \/\u003E\u003Cblockquote\u003E.header {width:50%; \u003Cbr \/\u003Efloat: left; \u003Cbr \/\u003Emargin:0 auto 2% ;\u003Cbr \/\u003E}\u003Cbr \/\u003E.header2 {width:50%; \u003Cbr \/\u003Efloat: right; \u003Cbr \/\u003Emargin:0 auto 2%;\u003Cbr \/\u003E}\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E Vamos entonces bastante más abajo en el código de la plantilla y localizamos esta parte del código:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div class='region-inner header-inner'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:section class='header' id='header' maxwidgets='1' showaddelement='no'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:section\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003EAñadimos ahí lo que muestro destacado en negrita:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div class='region-inner header-inner'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:section class='header' id='header' maxwidgets='1' showaddelement='no'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:section\u0026gt;\u003Cbr \/\u003E\u003Cb\u003E\u0026lt;b:section class='header2' id='header2' showaddelement='yes'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;div style='clear: both;'\/\u0026gt;\u003C\/b\u003E\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003E[3]\u003C\/b\u003E Guardamos cambios y comprobamos la vista en Diseño, donde ya deberíamos ver la cabecera dividida en dos partes:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[4]\u003C\/b\u003E Una vez añadimos un nuevo gadget al lado del header, veremos algo como esto en la vista del blog:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[5]\u003C\/b\u003E 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 \u003Cb\u003E\"Avanzado\" - \"Titulo del blog\"\u003C\/b\u003E podemos ajustar el tamaño del título:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003EEl resultado sería entonces algo así:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003EEsto sucede porque lo que pretendemos es que los dos gadget, cabecera y el nuevo añadido, sean iguales en sus proporciones.\u003Cbr \/\u003ETambié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.\u003Cbr \/\u003E\u003Cbr \/\u003EEn caso de querer modificar las medidas de cualquiera de los dos gadget, lo haríamos en el CSS añadido en el \u003Cb\u003Epaso [1]\u003C\/b\u003E cambiando el valor de \u003Cb\u003Ewidth:50%; \u003C\/b\u003E 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."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/5735227929735308505\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/11\/dividir-la-cabecera-del-blog-en-las.html#comment-form","title":"38 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/5735227929735308505"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/5735227929735308505"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/11\/dividir-la-cabecera-del-blog-en-las.html","title":"Dividir la cabecera del blog en las plantillas de Diseño"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/_8PJ-pgoBhWQ\/TNwbgepq4dI\/AAAAAAAAIbA\/I052EdgDA_I\/s72-c\/Doble-header-dise%25C3%25B1o.jpg","height":"72","width":"72"},"thr$total":{"$t":"38"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-1273650513276349825"},"published":{"$t":"2010-11-02T11:53:00.000+01:00"},"updated":{"$t":"2010-11-02T11:53:14.036+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Gadget"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Utilidades Online"}],"title":{"type":"text","$t":"Apture Toolbar"},"content":{"type":"html","$t":"\u003Cdiv class=\"separator\" style=\"clear: right; float: right; margin-bottom: 1em; margin-left: 1em; text-align: center;\"\u003E\u003Cimg alt=\"Apture Toolbar\" border=\"0\" height=\"117\" src=\"http:\/\/1.bp.blogspot.com\/_gcgjC6O3wCs\/S9iyX-oe3FI\/AAAAAAAAAdk\/Xbvhpk_jCZA\/s320\/Apture-ToolBar-For-Your-Blo.jpg\" title=\"Apture Toolbar\" width=\"320\" \/\u003E\u003C\/div\u003EHace 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.\u003Cbr \/\u003E\u003Cbr \/\u003ESe llama \u003Cb\u003EApture\u003C\/b\u003E y en esta entrada veremos algunas de sus características y las instrucciones para incluirla en el blog.\u003Cbr \/\u003E\u003Cbr \/\u003ELa 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.\u003Cbr \/\u003E\u003Cbr \/\u003EDesde el botón correspondiente podremos compartir la página en la que estamos en FaceBook, Twitter y enviarla por correo.\u003Cbr \/\u003E\u003Cbr \/\u003EIncluye un buscador con jQuery, que facilita que nuestros visitantes no tengan que salir de la página cuando buscan otro contenido.\u003Cbr \/\u003E\u003Cbr \/\u003ECuando 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.\u003Cbr \/\u003E\u003Cbr \/\u003ESe 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.\u003Cbr \/\u003E\u003Cbr \/\u003EVeamos antes de nada un ejemplo de como funciona: \u003Ca href=\"http:\/\/elescaparates.blogspot.com\/\" target=\"_blank\"\u003EVer ejemplo online\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EConfiguración e instalación\u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Iremos a la página de \u003Ca href=\"http:\/\/www.apture.com\/\" target=_blank\"\u003Ewww.apture.com\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E Introducimos la url del blog y hacemos click en el botón en \"\u003Cb\u003EStart now\u003C\/b\u003E\".\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[3]\u003C\/b\u003E 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.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[4]\u003C\/b\u003E Los cambios los iremos viendo en una \"vista previa\". \u003Cbr \/\u003EUna vez estemos conformes con el resultado, pinchamos en \"\u003Cb\u003EGet My Bar\u003C\/b\u003E\" y copiamos el código obtenido.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[5]\u003C\/b\u003E En nuestro panel de Blogger vamos a Edición HTML y sin expandir artilugios localizamos la etiqueta \u003Cb\u003E\u0026lt;\/body\u0026gt;\u003C\/b\u003E.\u003Cbr \/\u003EPegamos el código obtenido sobre esa etiqueta.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EConsejo:\u003C\/b\u003E\u003Cbr \/\u003E\u003Cdiv class=\"recuadro\"\u003E\u003Ci\u003ENo 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.\u003C\/i\u003E\u003Cbr \/\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/1273650513276349825\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/11\/apture-toolbar.html#comment-form","title":"12 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/1273650513276349825"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/1273650513276349825"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/11\/apture-toolbar.html","title":"Apture Toolbar"}],"author":[{"name":{"$t":"Rosa"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/04564116363926564176"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"31","src":"http:\/\/4.bp.blogspot.com\/_gcgjC6O3wCs\/S4_LamD0FOI\/AAAAAAAAAZA\/_5ZMvPnOtd4\/S220\/grafico09.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/_gcgjC6O3wCs\/S9iyX-oe3FI\/AAAAAAAAAdk\/Xbvhpk_jCZA\/s72-c\/Apture-ToolBar-For-Your-Blo.jpg","height":"72","width":"72"},"thr$total":{"$t":"12"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-6353301819352027852"},"published":{"$t":"2010-10-20T23:44:00.000+02:00"},"updated":{"$t":"2010-10-20T23:44:24.405+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Scriptaculous"}],"title":{"type":"text","$t":"\"Subir\" y \"Bajar\" con efecto deslizante en las nuevas plantillas"},"content":{"type":"html","$t":"\u003Cdiv class=\"separator\" style=\"clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;\"\u003E\u003Cimg alt=\"Flechas\" src=\"http:\/\/lh3.ggpht.com\/_8PJ-pgoBhWQ\/TArjm8ChktI\/AAAAAAAAIHQ\/SwcZ9oxkoOc\/s128\/Flechas.jpg\" title=\"Flechas\" border=\"0\"\u003E\u003C\/div\u003EHace algún tiempo habíamos \u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2010\/06\/ir-arriba-e-ir-abajo-con-efecto.html\"\u003Evisto en una entrada anterior\u003C\/a\u003E, 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.\u003Cbr \/\u003E\u003Cbr \/\u003EEn esta entrada veremos como hacer lo mismo en las plantillas del \u003Cb\u003ENuevo Diseñador\u003C\/b\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Desde \u003Cb\u003EEdición HTML\u003C\/b\u003E de nuestro panel de Blogger localizamos la etiqueta \u003Cb\u003E\u0026lt;\/head\u0026gt;\u003C\/b\u003E en el código de nuestra plantilla y justo sobre ella pegamos esto:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;!-- Prototype y Scriptaculous--\u0026gt;\u003Cbr \/\u003E\u0026lt;script src=\u0026#039;http:\/\/www.google.com\/jsapi\u0026#039;\/\u0026gt;\u0026lt;script\u0026gt;\u003Cbr \/\u003Egoogle.load(\u0026quot;prototype\u0026quot;,\u0026quot;1.6.0.3\u0026quot;);\u003Cbr \/\u003Egoogle.load(\u0026quot;scriptaculous\u0026quot;, \u0026quot;1.8.2\u0026quot;);\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;!-- Prototype y Scriptaculous--\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003ENota:\u003C\/b\u003E\u003Cbr \/\u003E\u003Cdiv class=\"recuadro\"\u003ERecuerda que si ya estás usando este código (Scriptaculous) para cualquier otro efecto, no es necesario lo coloques de nuevo.\u003Cbr \/\u003EY recuerda también que si estás usando JQuery en la plantilla, no podrás usar Scriptaculous al mismo tiempo.\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E Prácticamente al final del código de nuestra plantilla localizamos la etiqueta \u003Cb\u003E\u0026lt;\/body\u0026gt;\u003C\/b\u003E  y sobre ella colocamos el código para las imágenes o flechitas de \"ir arriba\" e \"ir abajo\":\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;!--Flecha ir abajo --\u0026gt;\u003Cbr \/\u003E\u0026lt;a href=\u0026#039;#footer-wrapper\u0026#039; onclick=\u0026#039;new Effect.ScrollTo(\u0026quot;footer-wrapper\u0026quot;,{offset:-140}); return false\u0026#039;\u0026gt;\u0026lt;img alt=\u0026#039;Ir abajo\u0026#039; border=\u0026#039;0\u0026#039; src=\u0026#039;URL_DE_LA_IMAGEN_FLECHITA\u0026#039; style=\u0026#039;position:fixed; bottom:40px; right:0;margin-bottom: 5px;\u0026#039;\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;!--Flecha ir arriba --\u0026gt;\u003Cbr \/\u003E\u0026lt;a href=\u0026#039;#outer-wrapper\u0026#039; onclick=\u0026#039;new Effect.ScrollTo(\u0026quot;outer-wrapper\u0026quot;,{offset:-140}); return false\u0026#039;\u0026gt;\u0026lt;img alt=\u0026#039;Ir arriba\u0026#039; border=\u0026#039;0\u0026#039; src=\u0026#039;URL_DE_LA_IMAGEN_FLECHITA\u0026#039; style=\u0026#039;position:fixed; bottom:0; right:0;margin-top: 5px;\u0026#039;\/\u0026gt;\u0026lt;\/a\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003E[3]\u003C\/b\u003E Cambiamos donde dice \u003Cb\u003EURL_DE_LA_IMAGEN_FLECHITA\u003C\/b\u003E por la url de nuestras imágenes o iconos-flecha.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[4]\u003C\/b\u003E Tendremos ahora que localizar en la plantilla esta línea de código:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div class='body-fauxcolumns'\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003EY la cambiamos por esta:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div id='outer-wrapper' class='body-fauxcolumns'\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003E[5]\u003C\/b\u003E Nos toca ahora localizar esta otra línea de código:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div class='content-cap-bottom cap-bottom'\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003EY cambiarla por esta otra:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div id='footer-wrapper' class='content-cap-bottom cap-bottom'\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003E[6]\u003C\/b\u003E Guardamos los cambios."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/6353301819352027852\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/10\/subir-y-bajar-con-efecto-deslizante-en.html#comment-form","title":"43 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/6353301819352027852"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/6353301819352027852"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/10\/subir-y-bajar-con-efecto-deslizante-en.html","title":"\"Subir\" y \"Bajar\" con efecto deslizante en las nuevas plantillas"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/lh3.ggpht.com\/_8PJ-pgoBhWQ\/TArjm8ChktI\/AAAAAAAAIHQ\/SwcZ9oxkoOc\/s72-c\/Flechas.jpg","height":"72","width":"72"},"thr$total":{"$t":"43"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-6805782448315668757"},"published":{"$t":"2010-10-16T15:58:00.000+02:00"},"updated":{"$t":"2010-10-16T15:58:57.279+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutoriales"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Twitter"}],"title":{"type":"text","$t":"Como intregar Twitter en tu correo Gmail"},"content":{"type":"html","$t":"Vamos 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.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Abrimos nuestra cuenta de correo Gmail. En el menú superior a la derecha pinchamos en Configuración.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E Se abrirá una página donde en el menú destacado en color veremos un enlace que dice \"Labs\". Pinchamos ahí.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[3]\u003C\/b\u003E En la página siguiente habilitamos la opción \"\u003Cb\u003EAñadir cualquier gadget mediante URL\u003C\/b\u003E\" y abajo del todo pinchamos en \"\u003Cb\u003EGuardar cambios\u003C\/b\u003E\"\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[4]\u003C\/b\u003E 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.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[5]\u003C\/b\u003E Vemos ahora un campo para introducir un enlace, copiamos esta url: \u003Cbr \/\u003E\u003Cblockquote\u003E\u003Cb\u003Ehttps:\/\/twittergadget.appspot.com\/gadget-gmail.xml\u003C\/b\u003E\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003E[6]\u003C\/b\u003E La pegamos en el campo y pinchamos en \"\u003Cb\u003EAñadir\u003C\/b\u003E\".\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[7]\u003C\/b\u003E Nos fijamos ahora que en la sidebar de la derecha aparece un nuevo gadget. Pincharemos en el primer \"\u003Cb\u003Ehere\u003C\/b\u003E\".\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Login Twitter\" border=\"0\" height=\"142\" src=\"http:\/\/1.bp.blogspot.com\/_gcgjC6O3wCs\/TKS_EQSAeyI\/AAAAAAAAAeI\/0PFFfvJ1zZs\/s200\/Twitter.jpg\" title=\"Login Twitter\" width=\"200\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[8]\u003C\/b\u003E Nos solicitan entonces el permiso para que la aplicación pueda acceder a nuestra cuenta de Twitter, bastará con pinchar en \"\u003Cb\u003EPermitir\"\u003C\/b\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003EYa veremos enseguida un nuevo gadget en la sidebar, donde estaba el anterior, y desde donde podremos enviar nuestros updates a Twitter directamente.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003ESi además queremos interactuar con nuestros amigos allí, no tenemos más que pinchar en el nuevo gadget donde dice \"\u003Cb\u003ETwitter\u003C\/b\u003E\".\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/6805782448315668757\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/10\/como-intregar-twitter-en-tu-correo.html#comment-form","title":"38 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/6805782448315668757"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/6805782448315668757"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/10\/como-intregar-twitter-en-tu-correo.html","title":"Como intregar Twitter en tu correo Gmail"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/TKSx9SWvmlI\/AAAAAAAAIYo\/y8nP4b0bDbg\/s72-c\/Configuracion-Gmail.jpg","height":"72","width":"72"},"thr$total":{"$t":"38"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-5164535035661614476"},"published":{"$t":"2010-10-10T01:15:00.000+02:00"},"updated":{"$t":"2010-10-10T01:15:11.588+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Favicon"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Utilidades Online"}],"title":{"type":"text","$t":"IconJ: crear y alojar un favicon de forma sencilla"},"content":{"type":"html","$t":"\u003Cdiv class=\"separator\" style=\"clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;\"\u003E\u003Cimg alt=\"Favicon del Escaparate\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/TK8KQCuJ0DI\/AAAAAAAAIZg\/4uz5nhscf78\/s1600\/Favicon.jpg\" title=\"Favicon\" \/\u003E\u003C\/div\u003EEl Favicon es un pequeño icono que aparece junto a la dirección web en la parte superior de nuestro navegador.\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp;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.\u003Cbr \/\u003E\u003Cbr \/\u003ENuestra amiga \u003Ca href=\"http:\/\/fantasiajaponesa.blogspot.com\/\" target=\"_blank\"\u003EMalena\u003C\/a\u003E 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.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Accedemos a \u003Ca href=\"http:\/\/www.iconj.com\/index.php\" target=\"_blank\"\u003EIconJ\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E A la derecha de la página vemos un pequeño formulario en el que tenemos que pinchar en \"\u003Cb\u003EExaminar\"\u003C\/b\u003E para subir la imagen que vamos a utilizar desde nuestro PC.\u003Cbr \/\u003EUna vez subida, pinchamos en \"\u003Cb\u003EUpload Now\u003C\/b\u003E\".\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[3]\u003C\/b\u003E Vemos entonces una vista previa de nuestro favicon y un par de enlaces generados.\u003Cbr \/\u003ENos fijamos en el segundo (Direct Link) y lo copiamos.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[4]\u003C\/b\u003E Ya solo nos resta colocar esa línea de código que acabamos de copiar en nuestra plantilla. Lo hacemos entre las etiquetas \u0026lt;head\u0026gt; y \u0026lt;\/head\u0026gt; de la misma, por ejemplo antes de \u003Cb\u003E\u0026lt;b:skin\u0026gt;\u0026lt;![CDATA[\/*\u003C\/b\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003ENota:\u003C\/b\u003E\u003Cbr \/\u003E\u003Cdiv class=\"recuadro\"\u003ECon 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.\u003C\/div\u003E\u003Cbr \/\u003E\u003Cdiv class=\"enlaceEx\"\u003E\u003Cspan\u003ECREAR FAVICON:\u003C\/span\u003E\u003Ca href=\"http:\/\/www.iconj.com\/index.php\" target=\"_blank\"\u003EICONJ\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/5164535035661614476\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/10\/iconj-crear-y-alojar-un-favicon-de.html#comment-form","title":"48 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/5164535035661614476"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/5164535035661614476"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/10\/iconj-crear-y-alojar-un-favicon-de.html","title":"IconJ: crear y alojar un favicon de forma sencilla"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/TK8KQCuJ0DI\/AAAAAAAAIZg\/4uz5nhscf78\/s72-c\/Favicon.jpg","height":"72","width":"72"},"thr$total":{"$t":"48"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-8679197626875328350"},"published":{"$t":"2010-10-08T00:35:00.000+02:00"},"updated":{"$t":"2010-10-08T00:35:01.503+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Trucos Blog"}],"title":{"type":"text","$t":"Ocultar la Navbar en las nuevas plantillas de diseño"},"content":{"type":"html","$t":"Hace ya tiempo que habíamos visto \u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2007\/01\/ocultar-que-no-quitar-la-barra-de.html\"\u003Ecomo ocultar la barra de Blogger (Navbar)\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003ESe trata de colocar unas líneas de código CSS en la plantilla antes de \u003Cb\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/b\u003E:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E#navbar-iframe {\u003Cbr \/\u003Eheight:0px;\u003Cbr \/\u003Evisibility:hidden;\u003Cbr \/\u003Edisplay:none\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EMe han llegado bastantes consultas de personas que han intentado usar este mismo sistema para las plantillas del \u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2010\/06\/disenador-de-plantillas-en-blogger.html\"\u003ENuevo Diseñador\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003EEn 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.\u003Cbr \/\u003E\u003Cbr \/\u003EEn 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.\u003Cbr \/\u003E\u003Cbr \/\u003EPara retirar la Navbar en estas plantillas y evitar que quede el hueco, colocaremos antes de \u003Cb\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/b\u003E estas líneas de código CSS:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E#navbar{\u003Cbr \/\u003Eheight:0px;\u003Cbr \/\u003Evisibility:hidden;\u003Cbr \/\u003Edisplay:none\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003C\/blockquote\u003E\u003Cbr \/\u003EComo veis el código es casi idéntico, solo cambiamos #navbar-iframe por #navbar."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/8679197626875328350\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/10\/ocultar-la-navbar-en-las-nuevas.html#comment-form","title":"24 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/8679197626875328350"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/8679197626875328350"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/10\/ocultar-la-navbar-en-las-nuevas.html","title":"Ocultar la Navbar en las nuevas plantillas de diseño"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"thr$total":{"$t":"24"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-6414722709054222375"},"published":{"$t":"2010-10-01T01:17:00.000+02:00"},"updated":{"$t":"2010-10-01T01:17:51.448+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Comentarios"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Trucos Texto"}],"title":{"type":"text","$t":"Destacar el nombre del comentarista al responder"},"content":{"type":"html","$t":"He recibido varias consultas sobre como hago en mi blog para destacar el nombre del comentarista al responder a sus comentarios.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003ENo es algo demasiado complicado de lograr, aunque no es algo automático como algunos parecen creer.\u003Cbr \/\u003E\u003Cbr \/\u003EAunque 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 \u0026lt;a\u0026gt;\u0026lt;\/a\u0026gt;, \u0026lt;b\u0026gt;\u0026lt;\/b\u0026gt;,\u0026lt;i\u0026gt;\u0026lt;\/i\u0026gt;, \u0026lt;strong\u0026gt;\u0026lt;\/strong\u0026gt; y \u0026lt;em\u0026gt;\u0026lt;\/em\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003EEn este caso utilizaremos la etiqueta \u003Cb\u003E\u0026lt;em\u0026gt;\u0026lt;\/em\u0026gt;\u003C\/b\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Antes de comenzar, \u003Cb\u003Ehemos de tener añadido o añadirlo si es que no lo estamos usando\u003C\/b\u003E, el \"\u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2007\/11\/destacar-los-comentarios-del-autor-del.html\"\u003EDestacar los comentarios del autor del blog\u003C\/a\u003E\".\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003ENota:\u003C\/b\u003E\u003Cbr \/\u003E\u003Cdiv class=\"recuadro\"\u003ESi 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.\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E Colocaremos en el CSS de la plantilla (\u003Cb\u003Esiempre antes de ]]\u0026gt;\/b:skin\u0026gt;\u003C\/b\u003E) el código que controlará el aspecto del texto con el nombre del comentarista, sería algo así:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E.blog-author-comment em{\u003Cbr \/\u003Ecolor: #B32A32; \/* cambiamos aqui el color *\/\u003Cbr \/\u003Efont-size:15px; \/* cambiamos aqui el tamaño del texo *\/\u003Cbr \/\u003Epadding-right:5px; \/* separacion del nombre al texto del comentario *\/\u003Cbr \/\u003Efont-weight:bold; \/* fuente en negrita*\/\u003Cbr \/\u003E}\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[3]\u003C\/b\u003E Ahora y cada vez que queramos responder a un comentario destacando el nombre del comentarista, colocaremos su nombre al inicio del comentario entre \u0026lt;em\u0026gt; y \u0026lt;\/em\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/6414722709054222375\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/10\/destacar-el-nombre-del-comentarista-al.html#comment-form","title":"46 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/6414722709054222375"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/6414722709054222375"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/10\/destacar-el-nombre-del-comentarista-al.html","title":"Destacar el nombre del comentarista al responder"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/TKR3n3Nlx6I\/AAAAAAAAIYg\/aCzdq7tK3xU\/s72-c\/comentarista-destacado.jpg","height":"72","width":"72"},"thr$total":{"$t":"46"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-8305647465344195285"},"published":{"$t":"2010-09-27T00:32:00.000+02:00"},"updated":{"$t":"2010-09-27T00:32:24.276+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Iconos"}],"title":{"type":"text","$t":"Set de iconos para Tuenti"},"content":{"type":"html","$t":"Set de 4 iconos de \u003Ca href=\"http:\/\/www.tuenti.com\/?m=login\" target=\"_blank\"\u003ETuenti\u003C\/a\u003E disponibles en formato PNG, ICO y ICNS. \u003Cbr \/\u003EPresentados en tamaño de 256×256, 128×128, 48×48, 32×32 y 16×16 pixeles. \u003Cbr \/\u003ESon gratis para utilizar en cualquier proyecto no comercial.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca href=\"http:\/\/icontexto.com\/download.asp?file=icontexto-tuenti-kit.zip\"\u003E\u003Cimg class=\"sin\" src=\"http:\/\/3.bp.blogspot.com\/_8PJ-pgoBhWQ\/S_0J5F528xI\/AAAAAAAAH9Q\/7l4M1xvCpw4\/s1600\/boton_descargar.gif\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"enlaceEx\"\u003E\u003Cspan\u003EICONOS DE:\u003C\/span\u003E\u003Ca href=\"http:\/\/icontexto.blogspot.com\/\" target=\"_blank\"\u003EIconTexto\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/8305647465344195285\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/09\/set-de-iconos-para-tuenti.html#comment-form","title":"17 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/8305647465344195285"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/8305647465344195285"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/09\/set-de-iconos-para-tuenti.html","title":"Set de iconos para Tuenti"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/TJ_HpiH7JWI\/AAAAAAAAIYM\/uVlo6he04UU\/s72-c\/icontexto-tuenti-kit.jpg","height":"72","width":"72"},"thr$total":{"$t":"17"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-1489365511723307032"},"published":{"$t":"2010-09-25T00:08:00.000+02:00"},"updated":{"$t":"2010-09-25T00:08:05.255+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Gadget"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Trucos Blog"}],"title":{"type":"text","$t":"Mostrar la Lista de Blogs en movimiento"},"content":{"type":"html","$t":"Es 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.\u003Cbr \/\u003E\u003Cbr \/\u003EEs un efecto no muy complicado de conseguir, utilizando la etiqueta \"marquee\".\u003Cbr \/\u003EAntes de continuar con la explicación, podéis ver un ejemplo en \u003Ca href=\"http:\/\/script-nieve.blogspot.com\/\" target=\"_blank\"\u003Eeste blog de pruebas\u003C\/a\u003E, es el gadget que lleva por título \"Mi lista de blogs\".\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Antes de nada tendremos que añadir el gadget \"Lista de blogs\" y \u003Cb\u003Econfigurarlo tal como vemos en la imagen \u003C\/b\u003Epara añadir el código necesario, una vez conseguido el efecto del movimiento podremos editar el gadget de nuevo si así lo queremos.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E 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\".\u003Cbr \/\u003ETendremos que localizar el código del gadget y añadir el código necesarios tal como veis destacado en color:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote class=\"smallquote\"\u003E\u0026lt;b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:includable id='main'\u0026gt;\u003Cbr \/\u003E\u0026lt;!-- only display title if it's non-empty --\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:title != \u0026amp;quot;\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;h2 class='title'\u0026gt;\u0026lt;data:title\/\u0026gt;\u0026lt;\/h2\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;div class='widget-content'\u0026gt;\u003Cbr \/\u003E\u0026lt;div class='blog-list-container' expr:id='data:widget.instanceId + \u0026amp;quot;_container\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u003Cdiv style=\"color: #cc0000;\"\u003E\u003Cb\u003E\u0026lt;center\u0026gt;\u0026lt;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'\u0026gt;\u003C\/b\u003E\u003C\/div\u003E\u0026lt;ul expr:id='data:widget.instanceId + \u0026amp;quot;_blogs\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:loop values='data:items' var='item'\u0026gt;\u003Cbr \/\u003E\u0026lt;li expr:style='data:item.displayStyle'\u0026gt;\u003Cbr \/\u003E\u0026lt;div class='blog-icon'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:showIcon == \u0026amp;quot;true\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;input expr:value='data:item.blogIconUrl' type='hidden'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;div class='blog-content'\u0026gt;\u003Cbr \/\u003E\u0026lt;div class='blog-title'\u0026gt;\u003Cbr \/\u003E\u0026lt;a expr:href='data:item.blogUrl' target='_blank'\u0026gt;\u003Cbr \/\u003E\u0026lt;data:item.blogTitle\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;div class='item-content'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:showItemThumbnail == \u0026amp;quot;true\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:item.itemThumbnail'\u0026gt; \u003Cbr \/\u003E\u0026lt;div class='item-thumbnail'\u0026gt;\u003Cbr \/\u003E\u0026lt;a expr:href='data:item.blogUrl' target='_blank'\u0026gt;\u003Cbr \/\u003E\u0026lt;img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:showItemTitle == \u0026amp;quot;true\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;span class='item-title'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:item.itemUrl != \u0026amp;quot;\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;a expr:href='data:item.itemUrl' target='_blank'\u0026gt;\u003Cbr \/\u003E\u0026lt;data:item.itemTitle\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;b:else\/\u0026gt;\u003Cbr \/\u003E\u0026lt;data:item.itemTitle\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;\/span\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:showItemSnippet == \u0026amp;quot;true\u0026amp;quot;'\u0026gt; \u003Cbr \/\u003E\u0026lt;b:if cond='data:showItemTitle == \u0026amp;quot;true\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E-\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;span class='item-snippet'\u0026gt;\u003Cbr \/\u003E\u0026lt;data:item.itemSnippet\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/span\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:showTimePeriodSinceLastUpdate == \u0026amp;quot;true\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;div class='item-time'\u0026gt;\u003Cbr \/\u003E\u0026lt;data:item.timePeriodSinceLastUpdate\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;div style='clear: both;'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:loop\u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;b:if cond='data:numItemsToShow != 0'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:totalItems \u0026amp;gt; data:numItemsToShow'\u0026gt;\u003Cbr \/\u003E\u0026lt;div class='show-option'\u0026gt;\u003Cbr \/\u003E\u0026lt;span expr:id='data:widget.instanceId + \u0026amp;quot;_show-n\u0026amp;quot;' style='display: none;'\u0026gt;\u003Cbr \/\u003E\u0026lt;a href='javascript:void(0)' onclick='return false;'\u0026gt;\u0026lt;data:showNText\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/span\u0026gt;\u003Cbr \/\u003E\u0026lt;span expr:id='data:widget.instanceId + \u0026amp;quot;_show-all\u0026amp;quot;' style='margin-left: 5px;'\u0026gt;\u003Cbr \/\u003E\u0026lt;a href='javascript:void(0)' onclick='return false;'\u0026gt;\u0026lt;data:showAllText\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/span\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u003Cdiv style=\"color: #cc0000;\"\u003E\u003Cb\u003E\u0026lt;\/marquee\u0026gt;\u0026lt;\/center\u0026gt;\u003C\/b\u003E\u003C\/div\u003E\u0026lt;b:include name='quickedit'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:includable\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:widget\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EModificaciones:\u003C\/b\u003E\u003Cbr \/\u003E\u003Cdiv class=\"recuadro\"\u003E\u003Cb\u003Eheight='300'\u003C\/b\u003E Es el alto del gadget, a mayor valor, más altura y viceversa.\u003Cbr \/\u003E\u003Cb\u003Ewidth='260'\u003C\/b\u003E Es el ancho del gadget, a mayor valor, más anchura y viceversa.\u003Cbr \/\u003E\u003Cb\u003Ebgcolor = '#faf0e6'\u003C\/b\u003E 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.\u003Cbr \/\u003E\u003Cb\u003Eborder: #cdaf95 2px solid;\u003C\/b\u003E 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.\u003Cbr \/\u003E\u003Cb\u003Escrollamount='5'\u003C\/b\u003E Velocidad de desplazamiento, aumentamos o disminuimos el valor (5) para variar la velocidad.\u003Cbr \/\u003E\u003Cb\u003Edirection='up'\u003C\/b\u003E Dirección del desplazamiento, en este caso hacia arriba, si ponemos down en lugar de up, el desplazamiento será hacia abajo.\u003Cbr \/\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/1489365511723307032\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/09\/mostrar-la-lista-de-blogs-en-movimiento.html#comment-form","title":"49 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/1489365511723307032"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/1489365511723307032"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/09\/mostrar-la-lista-de-blogs-en-movimiento.html","title":"Mostrar la Lista de Blogs en movimiento"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/_8PJ-pgoBhWQ\/TJfTOEkiGcI\/AAAAAAAAIXw\/Yz4nidtskJo\/s72-c\/Lista+de+blogs.jpg","height":"72","width":"72"},"thr$total":{"$t":"49"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-1937701294904093401"},"published":{"$t":"2010-09-20T02:21:00.000+02:00"},"updated":{"$t":"2010-09-20T02:21:22.360+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Menus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutoriales"}],"title":{"type":"text","$t":"Menú en las nuevas plantillas de diseño"},"content":{"type":"html","$t":"Desde 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.\u003Cbr \/\u003E\u003Cbr \/\u003EA 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 \u003Cb\u003Etodas las plantillas del nuevo diseñador incluyen la posibilidad de usar su propio menú horizontal\u003C\/b\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003EEn 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.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ctable align=\"center\" cellpadding=\"0\" cellspacing=\"0\" class=\"tr-caption-container\" style=\"margin-left: auto; margin-right: auto; text-align: center;\"\u003E\u003Ctbody\u003E\u003Ctr\u003E\u003Ctd style=\"text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/td\u003E\u003C\/tr\u003E\u003Ctr\u003E\u003Ctd class=\"tr-caption\" style=\"text-align: center;\"\u003EAlgunos ejemplos de menús en distintas plantillas de Diseño\u003C\/td\u003E\u003C\/tr\u003E\u003C\/tbody\u003E\u003C\/table\u003E\u003Cbr \/\u003EHay 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.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Cspan style=\"font-size: large;\"\u003E\u003Cb\u003EIncluir el menú horizontal utilizando la Lista de Enlaces.\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Vamos a Diseño en nuestro panel y vemos que debajo de la cabecera hay una opción para incluir un gadget:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E Pinchamos para añadir un nuevo gadget y escogemos \"\u003Cb\u003ELista de enlaces\u003C\/b\u003E\".\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[3]\u003C\/b\u003E 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.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[4]\u003C\/b\u003E 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. \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Cspan style=\"font-size: large;\"\u003E\u003Cb\u003EIncluir el menú horizontal utilizando las Páginas estáticas.\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Desde \u003Cb\u003EDiseño\u003C\/b\u003E - \u003Cb\u003EEditar páginas\u003C\/b\u003E, añadimos las páginas nuevas que vamos a necesitar  que se mostrarán en el menú horizontal.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E Una vez editada la página estática, pinchamos en \"\u003Cb\u003EPublicar página\u003C\/b\u003E\" y se mostrará la pregunta \"\u003Cb\u003E¿Cómo te gustaría que apareciese el gadget Páginas?\u003C\/b\u003E\", tenemos que marcar entonces la opción \"\u003Cb\u003Epestañas del blog\u003C\/b\u003E\":\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E[3]\u003C\/b\u003E 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.\u003Cbr \/\u003EEn Diseño podremos ya ver el gadget \"Paginas\" debajo del header y desde allí podemos editarlo si lo necesitamos.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/1937701294904093401\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/09\/menu-en-las-nuevas-plantillas-de-diseno.html#comment-form","title":"42 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/1937701294904093401"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/1937701294904093401"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/09\/menu-en-las-nuevas-plantillas-de-diseno.html","title":"Menú en las nuevas plantillas de diseño"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/_8PJ-pgoBhWQ\/TJTeLzfbp4I\/AAAAAAAAIWo\/EOCnlQCva54\/s72-c\/tabs.jpg","height":"72","width":"72"},"thr$total":{"$t":"42"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-4793802791609530209"},"published":{"$t":"2010-09-12T00:56:00.000+02:00"},"updated":{"$t":"2010-09-12T00:56:48.366+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Comentarios"}],"title":{"type":"text","$t":"Añadir la función de responder a los comentarios"},"content":{"type":"html","$t":"Veremos como añadir un enlace en cada uno de los comentarios del blog que nos permita el responder a un comentarista concreto.\u003Cbr \/\u003E\u003Cbr \/\u003EEl 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.\u003Cbr \/\u003E\u003Cbr \/\u003ECuando 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.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003EUna 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 @.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Nos situamos en la pestaña \u003Cb\u003EDiseño\u003C\/b\u003E de nuestro panel de Blogger y vamos a \u003Cb\u003EEdición HTML\u003C\/b\u003E, ahí marcamos la opción de \"\u003Cb\u003EExpandir las plantilla de artilugios\u003C\/b\u003E\" para localizar esta línea en la plantilla:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;data:comment.author\/\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E Copiamos y pegamos este código justo a continuación:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;span class='comment-reply'\u0026gt;\u003Cbr \/\u003E\u0026lt;a expr:href='\u0026amp;quot;https:\/\/www.blogger.com\/comment.g?blogID=\u003Cb\u003EID_DEL_BLOG\u003C\/b\u003E\u0026amp;amp;postID=\u0026amp;quot; + data:post.id + \u0026amp;quot;\u0026amp;amp;isPopup=true\u0026amp;amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23\u0026amp;quot; + data:comment.anchorName + \u0026amp;quot;%22%3E\u0026amp;quot; + data:comment.author + \u0026amp;quot;%3C%2F%61%3E#form\u0026amp;quot;' onclick='javascript:window.open(this.href, \u0026amp;quot;bloggerPopup\u0026amp;quot;, \u0026amp;quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450\u0026amp;quot;); return false;'\u0026gt;\u003Cb\u003ERESPONDER\u003C\/b\u003E\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/span\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EDe esta manera se mostrará el texto \"RESPONDER\" al lado del nombre de cada comentarista.\u003Cbr \/\u003EPodemos cambiar ese texto por otro e incluso usar una imagen, \u003Cb\u003Esustituyendo el texto\u003C\/b\u003E por el código para mostrarla:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;img src=\"URL_DE_LA_IMAGEN_AQUI\"\/\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EDonde dice \u003Cb\u003EID_DEL_BLOG\u003C\/b\u003E 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\":\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" title=\"blogID\" alt=\"Ejemplo blogID\" src=\"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/TIuLH16lslI\/AAAAAAAAIV8\/kNN4_hgC3us\/s640\/blogID.jpg\" width=\"550\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EPara mostrar el \"Responder\" como yo lo uso en el Escaparate, en el \u003Cb\u003Efooter de cada comentario\u003C\/b\u003E, tendremos que localizar estas líneas en la plantilla y colocar el código justo debajo:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;b:include data='comment' name='commentDeleteIcon'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/span\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"enlaceEx\"\u003E\u003Cspan\u003EHABLARON ANTES DEL TEMA:\u003C\/span\u003E\u003Ca href=\"http:\/\/loseasi.blogspot.com\/2010\/04\/truco-para-poder-replicar-comentarios.html\" target=\"_blank\"\u003E¿Cómo se hace?\u003C\/a\u003E | \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/06\/agregar-reply-los-comentarios.html\" target=\"_blank\"\u003EVagabundia\u003C\/a\u003E |  \u003Ca href=\"http:\/\/blogger-dicasmamanunes.blogspot.com\/2010\/06\/colocar-widget-para-responder.html\" target=\"_blank\"\u003EMamanues (Portugués)\u003C\/a\u003E | \u003Ca href=\"http:\/\/www.blog-zone.info\/2010\/06\/how-to-add-reply-to-comment-widget.html\" target=\"_blank\"\u003EBlog Zone (Inglés)\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/4793802791609530209\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/09\/anadir-la-funcion-de-responder-los.html#comment-form","title":"99 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/4793802791609530209"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/4793802791609530209"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/09\/anadir-la-funcion-de-responder-los.html","title":"Añadir la función de responder a los comentarios"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/_8PJ-pgoBhWQ\/TH_K7eronUI\/AAAAAAAAIVs\/mK1tMNwHeG4\/s72-c\/Reply-comentario.jpg","height":"72","width":"72"},"thr$total":{"$t":"99"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-2832420969510654970"},"published":{"$t":"2010-09-07T15:12:00.000+02:00"},"updated":{"$t":"2010-09-07T15:12:55.980+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Gadget"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Iconos"}],"title":{"type":"text","$t":"Gadget de iconos fijo con opacidad"},"content":{"type":"html","$t":"Justo en la entrada anterior veíamos como \u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2010\/09\/gadget-de-iconos-fijo.html\"\u003Ecolocar un gadget de iconos fijo\u003C\/a\u003E en nuestro blog.\u003Cbr \/\u003E\u003Cbr \/\u003EEn un comentario de esa misma entrada, nuestra amiga \u003Ca href=\"http:\/\/petiteboulangerie.blogspot.com\/\" target=\"_blank\"\u003E*Eva*\u003C\/a\u003E me solicitaba si era posible el añadir a los iconos del gadget opacidad, tal como habíamos visto en el \u003Ca href=\"http:\/\/elescaparatederosa.blogspot.com\/2010\/06\/gadget-de-marcadores-sociales-en-la.html\"\u003Egadget de marcadores sociales en la sidebar\u003C\/a\u003E. \u003Cbr \/\u003E\u003Cbr \/\u003EEl procedimiento es el mismo, añadimos una clase a cada icono y, mediante ese dato, aplicamos el CSS necesario para conseguir la opacidad.\u003Cbr \/\u003EEl resultado podéis verlo \u003Ca href=\"http:\/\/rosadoprueba.blogspot.com\/\" target=\"_blank\"\u003Een el mismo blog de pruebas\u003C\/a\u003E donde había colocado los otros, pero en este caso el gadget con opacidad se muestra a la izquierda de la pantalla.\u003Cbr \/\u003E\u003Cbr \/\u003ECopiamos y pegamos el código en un gadget \u003Cb\u003EHTML\/Javascript\u003C\/b\u003E y hacemos los cambios necesarios tal como veíamos en la entrada anterior, para incluir nuestros datos.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div style=\u0026#039;position: fixed; bottom: 30%; right: 1%;\u0026#039;\/\u0026gt;\u003Cbr \/\u003E\u0026lt;a class=\u0026quot;twitter\u0026quot; href=\u0026quot;http:\/\/www.twitter.com\/TWITER USUARIO\/\u0026quot; target=\u0026quot;_blank\u0026quot;\u0026gt;\u0026lt;img src=\u0026quot;http:\/\/1.bp.blogspot.com\/_y7IGkRf9Tjc\/TH-NVpBeYlI\/AAAAAAAAAJY\/N9cU0sjsXFo\/s1600\/Twitter+2-32.png\u0026quot; \/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;br \/\u0026gt;\u003Cbr \/\u003E\u0026lt;a class=\u0026quot;facebook\u0026quot; href=\u0026quot;http:\/\/www.facebook.com\/FACEBOOK USUARIO\/\u0026quot; target=\u0026quot;_blank\u0026quot;\u0026gt;\u0026lt;img src=\u0026quot;http:\/\/3.bp.blogspot.com\/_y7IGkRf9Tjc\/TH-NT3Q89QI\/AAAAAAAAAJM\/9oVx-e6Mf7A\/s1600\/Facebook-32.png\u0026quot; \/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;br \/\u0026gt;\u003Cbr \/\u003E\u0026lt;a class=\u0026quot;rss\u0026quot; href=\u0026quot;http:\/\/feeds.feedburner.com\/FEEDBURNER ID\u0026quot; target=\u0026quot;_blank\u0026quot;\u0026gt;\u0026lt;img src=\u0026quot;http:\/\/3.bp.blogspot.com\/_y7IGkRf9Tjc\/TH-NU4Ev36I\/AAAAAAAAAJU\/FCWan00MH6o\/s1600\/RSS-32.png\u0026quot; \/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;br \/\u0026gt;\u003Cbr \/\u003E\u0026lt;a class=\u0026quot;rss-mail\u0026quot; href=\u0026quot;http:\/\/feedburner.google.com\/fb\/a\/mailverify?uri=FEEDBURNER ID\u0026amp;amp;loc=es_ES\u0026quot; target=\u0026quot;_blank\u0026quot;\u0026gt;\u0026lt;img src=\u0026quot;http:\/\/4.bp.blogspot.com\/_y7IGkRf9Tjc\/TH-h_UPGt0I\/AAAAAAAAAJc\/SwAYPF227fo\/s1600\/Mairssl_32.png\u0026quot; \/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;style type=\u0026#039;text\/css\u0026#039;\u0026gt;\u003Cbr \/\u003Ea.rss img {opacity:0.8;}\u003Cbr \/\u003Ea.rss:hover img {opacity:1;}\u003Cbr \/\u003Ea.twitter img { opacity:0.8;}\u003Cbr \/\u003Ea.twitter:hover img { opacity:1;}\u003Cbr \/\u003Ea.facebook img { opacity:0.8;}\u003Cbr \/\u003Ea.facebook:hover img { opacity:1;}\u003Cbr \/\u003Ea.rss img { opacity:0.8;}\u003Cbr \/\u003Ea.rss:hover img { opacity:1;}\u003Cbr \/\u003Ea.rss-mail img { opacity:0.8;}\u003Cbr \/\u003Ea.rss-mail:hover img { opacity:1;}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003ENota:\u003C\/b\u003E\u003Cbr \/\u003E\u003Cdiv class=\"recuadro\"\u003EEl gadget se mostrará a la derecha de la pantalla tal como el anterior, para cambiarlo a la izquierda tendremos que \u003Cb\u003Ecambiar right por left\u003C\/b\u003E (en la primera línea del código).\u003Cbr \/\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/2832420969510654970\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/09\/gadget-de-iconos-fijo-con-opacidad.html#comment-form","title":"28 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/2832420969510654970"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/2832420969510654970"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/09\/gadget-de-iconos-fijo-con-opacidad.html","title":"Gadget de iconos fijo con opacidad"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"thr$total":{"$t":"28"}},{"id":{"$t":"tag:blogger.com,1999:blog-8932650177070730831.post-3363820261199872457"},"published":{"$t":"2010-09-02T17:48:00.000+02:00"},"updated":{"$t":"2010-09-02T17:48:13.999+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Gadget"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Iconos"}],"title":{"type":"text","$t":"Gadget de iconos fijo"},"content":{"type":"html","$t":"\u003Cdiv style=\"clear: right; float: right; margin-bottom: 1em; margin-left: 1em;\"\u003E\u003Cimg 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\" \/\u003E\u003C\/div\u003EA solicitud de varias personas explicaré como colocar un gadget de iconos fijos en nuestro blog.\u003Cbr \/\u003EEl gadget se mostrará a la derecha de la pantalla y \u003Cb\u003Ese mantendrá fijo\u003C\/b\u003E mientras subimos y bajamos usando la barra de scroll para ver los contenidos del blog.\u003Cbr \/\u003E\u003Cbr \/\u003EEn el gadget \u003Cb\u003Eestán incluidas las imágenes\u003C\/b\u003E que podéis usar si así lo queréis, aunque será muy fácil utilizar otras que os gusten más.\u003Cbr \/\u003ELas que he utilizado (por si queréis añadir alguna más al gadget del mismo diseño) podéis encontrarlas en \u003Ca href=\"http:\/\/www.iconspedia.com\/pack\/social-and-web-2282\/\" target=\"_blank\"\u003EIconspedía\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[1]\u003C\/b\u003E Copiamos y pegamos el siguiente código en un nuevo gadget \u003Cb\u003EHTML\/Javascrip\u003C\/b\u003E:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div style='position: fixed; bottom: 30%; right: 1%;'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;a href=\"http:\/\/www.twitter.com\/\u003Cb\u003ETWITER USUARIO\u003C\/b\u003E\/\" target=\"_blank\"\u0026gt;\u0026lt;img src=\"\u003Cspan style=\"color: #6aa84f;\"\u003Ehttp:\/\/1.bp.blogspot.com\/_y7IGkRf9Tjc\/TH-NVpBeYlI\/AAAAAAAAAJY\/N9cU0sjsXFo\/s1600\/Twitter+2-32.png\u003C\/span\u003E\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;br \/\u0026gt;\u003Cbr \/\u003E\u0026lt;a href=\"http:\/\/www.facebook.com\/\u003Cb\u003EFACEBOOK USUARIO\u003C\/b\u003E\/\" target=\"_blank\"\u0026gt;\u0026lt;img src=\"\u003Cspan style=\"color: #6aa84f;\"\u003Ehttp:\/\/3.bp.blogspot.com\/_y7IGkRf9Tjc\/TH-NT3Q89QI\/AAAAAAAAAJM\/9oVx-e6Mf7A\/s1600\/Facebook-32.png\u003C\/span\u003E\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;br \/\u0026gt;\u003Cbr \/\u003E\u0026lt;a href=\"http:\/\/feeds.feedburner.com\/\u003Cb\u003EFEEDBURNER ID\u003C\/b\u003E\" target=\"_blank\"\u0026gt;\u0026lt;img src=\"\u003Cspan style=\"color: #6aa84f;\"\u003Ehttp:\/\/3.bp.blogspot.com\/_y7IGkRf9Tjc\/TH-NU4Ev36I\/AAAAAAAAAJU\/FCWan00MH6o\/s1600\/RSS-32.png\u003C\/span\u003E\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;br \/\u0026gt;\u003Cbr \/\u003E\u0026lt;a href=\"http:\/\/feedburner.google.com\/fb\/a\/mailverify?uri=\u003Cb\u003EFEEDBURNER ID\u003C\/b\u003E\u0026amp;amp;loc=es_ES\" target=\"_blank\"\u0026gt;\u0026lt;img src=\"\u003Cspan style=\"color: #6aa84f;\"\u003Ehttp:\/\/4.bp.blogspot.com\/_y7IGkRf9Tjc\/TH-h_UPGt0I\/AAAAAAAAAJc\/SwAYPF227fo\/s1600\/Mairssl_32.png\u003C\/span\u003E\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003E[2]\u003C\/b\u003E Cambiamos ahora las partes del código que he resaltado en negrita por nuestros datos:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003ETWITER USUARIO\u003C\/b\u003E El nombre\/nick que utilizamos en nuestra cuenta de Twitter.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EFACEBOOK USUARIO\u003C\/b\u003E El nombre o id de nuestra página en Facebook.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EFEEDBURNER ID\u003C\/b\u003E El nombre de nuestro Feed en FeedBurner. \u003Cbr \/\u003EEste dato aparece dos veces porque el último icono posibilita la suscripción por correo a nuestros entradas.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[3]\u003C\/b\u003E 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.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E[4]\u003C\/b\u003E 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.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"enlaceEx\"\u003E\u003Cspan\u003EVER EJEMPLO ONLINE:\u003C\/span\u003E\u003Ca href=\"http:\/\/rosadoprueba.blogspot.com\/\" target=\"_blank\"\u003EGADGET DE ICONOS FIJO\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/elescaparatederosa.blogspot.com\/feeds\/3363820261199872457\/comments\/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/09\/gadget-de-iconos-fijo.html#comment-form","title":"38 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/3363820261199872457"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/8932650177070730831\/posts\/default\/3363820261199872457"},{"rel":"alternate","type":"text/html","href":"http:\/\/elescaparatederosa.blogspot.com\/2010\/09\/gadget-de-iconos-fijo.html","title":"Gadget de iconos fijo"}],"author":[{"name":{"$t":"Anonymous"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/blank.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/_8PJ-pgoBhWQ\/TH-wjvzxA2I\/AAAAAAAAIVo\/7InyHn79LiA\/s72-c\/Gadet-iconos-fixed.jpg","height":"72","width":"72"},"thr$total":{"$t":"38"}}]}});