tag:blogger.com,1999:blog-11164158112378227882024-03-05T12:22:50.510-08:00cosas para el blogCosas que voy haciendo en mis blogs.Uno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.comBlogger22125tag:blogger.com,1999:blog-1116415811237822788.post-62607090783103181092010-09-17T06:14:00.000-07:002010-09-17T06:14:07.087-07:00No se ven los seguidores, solución mágica<div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX6Bx2C1jQ68cix-TTNtfurVJA0PvUJDVEq8pYd43Gy-S7BX2_RlHklhYv_70TXv1b4NgaaM4acVIl7F7tR_Ahyphenhyphen9RA9ITgZsrf7DcqZ5EJkzOHI1a3MD6SmdUVJDHSL8Bt38xg2ahawrha/s1600/Seguidores+115.png" /></div><br />
A muchos les habrá pasado en blogspot ke, de un día para el otro, sin intervención alguna el cuadro de "Seguidores" o "Friend Connect" dejo de andar, caput, desapareció.. Intenté arreglarlo preguntando en el foro de Ayuda de Blogger sin solución. Ahora de casualidad <a href="http://www.blogdelujo.com/2010/03/solucion-problema-gadget-seguidores-no.html">encuentro la respuesta</a>, <i>esto les pasa a los ke usan el Script.aculo.us y/o prototype</i> llamandolo desde las librerías de google. Osea tinendo en la plantilla (Diseño⇒Edición HTML) agregado esto:<br />
<br />
<br />
<code><br />
<script src='http://www.google.com/jsapi'/><br />
<br />
<script><br />
<br />
google.load("prototype","1.6.0.3");<br />
<br />
google.load("scriptaculous", "1.8.2");<br />
<br />
</script><br />
</code><br />
<br />
<br />
Para solucionarlo tan solo hay ke pegar un código, entre medio,despues del google.load("prototype") pero antes del google.load("scriptacolous") de la siguiente manera:<br />
<br />
<br />
<code><br />
<script src="http://www.google.com/jsapi"><br />
<br />
<script><br />
<br />
google.load("prototype","1.6.0.3");<br />
<br />
<span style="color: lime;">window.JSON = {</span><br style="color: lime;" /> <br style="color: lime;" /><span style="color: lime;"> parse: function (st) { return st.evalJSON(); },</span><br style="color: lime;" /> <br style="color: lime;" /> <span style="color: lime;"> stringify: function(obj) { return Object.toJSON(obj); }</span><br style="color: lime;" /> <br style="color: lime;" /><span style="color: lime;"> };</span><br />
<br />
google.load("scriptaculous", "1.8.2");<br />
<br />
</script><br />
</code><br />
<br />
<br />
► Si usas Scriptaculous con la llamada al script (sin cargarlo desde la plantilla), hay que colocar el código antes que lo cargue:<br />
<code><br />
<br />
<script><br />
<br />
window.JSON = {<br />
<br />
parse: function (st) { return st.evalJSON(); },<br />
<br />
stringify: function(obj) { return Object.toJSON(obj); }<br />
<br />
};<br />
<br />
</script><br />
<br />
</code>Uno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.com5tag:blogger.com,1999:blog-1116415811237822788.post-79306426502938140662009-07-13T15:30:00.000-07:002009-07-24T06:50:02.354-07:00Texto a voz, en cualquier lugar del post [Vozme y sonowebs]Hace tiempo uso unos cositos al final del post que te 'traducen' todo el post a una voz computarizada, ahi acabo de agregar uno a este blog tambien, fijate en 'el pie' de este post y otro al costado en la columna derecha del blog donde dice "<i>Seleccioná un texto y clic aquí para oírlo</i>".<br />
<br />
Es algo que esta bueno, uno puede escuchar el post mientras ve otras cosas.. Estuve buscando opciones en google y las mejores que encontré son estas dos (las que estoy usando, si alguien sabe otra digame!!):<br />
<li><a href="http://vozme.com/">Vozme</a></li><li><a ref="http://www.sonowebs.com/">sonowebs</a></li><br />
<br />
En la página web de cada uno explica muy bien como agregarlos, en cualquier lado. <br />
<br />
Como el de sonowebs suena mucho mejor y no genera un popup, es el que mas me interesa, el problema que tenia era que el reproductor muchas veces lee cosas que uno no quiere que se lean, como códigos html, enlaces, textos que no interesan, y en la web la unica opción que nos da es ponerlo bajo el post o bajo el título. Para leer textos específicos hay que usarlo como dice <a href="http://www.sonowebs.com/php.php">acá</a>.<br />
Y asi usando el <span style="color: yellow;">script y el div</span> que dice ahi, se pueden leer textos especificos como este<br />
<script type="text/javascript">
Leemelafrasevo("holaquetal")
</script><br />
<div id="holaquetal" style="text-align: center;">Hola que tal, soy tu lector de textos.</div><br />
Pero como es una cosa que voy a usar mucho en blogs como <a href="http://selecciondefrases.blogspot.com/">este</a> o <a href="http://videosinteresantes.com.ar/">este</a> donde pueden ver ejemplos,<br />
Con lo poco que se de java hice esto:<br />
<br />
Puse el script en la plantilla del blog <span style="color: yellow;">antes del /head</span>, pero lo modifiqué un poquito asi:<br />
<code><br />
<script src='http://www.sonowebs.com/scripts/sonowebs.js' type='text/javascript'/><br />
<script type='text/javascript'><br />
function Leemelafrase(id) {<br />
var id = id;<br />
var cualq = new printPlayer("flash","black","Escuchar Noticia","center","","es",id,"","","","","","","","",232,20);<br />
}<br />
</script><br />
</code><br />
<br />
El id es lo que le paso y Leelafrase es el nombre de la función que lo agarra y lo usa, ese id no es otra cosa que el "sonowebs_audio_xx" que dicen en la página, tambien se le puede pasar el color del reproductor, el "Escuchar Noticia" y la posición donde esta (left,center o right) como dice en la pagina de sonowebs que puse antes, pero como no lo necesito no lo hice.<br />
<br />
Despues de agregar el codigo anterior para usarlo hay que tan solo poner lo siguiente:<br />
Llamar al script asi, donde se pone esto se muestra el reproductor:<br />
<code><br />
<script type="text/javascript"> Leemelafrase("ID_A_CAMBIAR_PARA_CADA_REPRODUCTOR")</script><br />
</code><br />
Y lo siguiente en el texto que se quiere leer:<br />
<br />
<code> <br />
<div id="ID_A_CAMBIAR_PARA_CADA_REPRODUCTOR"><br />
Texto a leer<br />
</div><br />
</code>Uno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.com7tag:blogger.com,1999:blog-1116415811237822788.post-54198814297042175022009-03-21T17:06:00.000-07:002009-03-21T17:17:28.911-07:00SlideShow, transición de imágenes de PicasaHace poco cree <a href="http://selecciondefrases.blogspot.com/">un nuevo blog</a> para compartir frases que me gusten y quería que ademas de frases se muestren imágenes del autor de la misma, y encontré una forma bastante linda y fácil, se le agrega una dirección feed donde estén las imágenes y listo se ve algo asi:<br />
<div id="slideShowej" style="height: 250px; width: 400px;">Cargando ...</div><script type="text/javascript">
function LoadSlideShow() {
var feed = "http://picasaweb.google.es/data/feed/base/user/Juan.Fritzler/albumid/5314550202187889569?alt=rss&kind=photo&hl=es";
var options = {displayTime:2000, transistionTime:600, scaleImages:false, maintainAspectRatio : false,fullControlPanel : true,
fullControlPanelSmallIcons : true,pauseOnHover : true,fullControlPanelCursor:true};
var ss = new GFslideShow(feed, "slideShowej", options);
}
google.load("feeds", "1");
google.setOnLoadCallback(LoadSlideShow);
</script><br />
<br />
Para usarlo hay que hacer esto:<br />
<br />
Primero, necesitamos el <span style="font-style: italic;">script</span> que llamamos desde la plantilla (antes del /head), desde un <span style="font-style: italic;">post</span> o desde algún elemento HTML que agregamos. En todos los casos, escribimos:<br />
<code><br />
<script src="<a class="linkification-ext" href="http://www.google.com/jsapi" title="Linkification: http://www.google.com/jsapi">http://www.google.com/jsapi</a>" type="text/javascript"></script><br />
<script src="<a class="linkification-ext" href="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" title="Linkification: http://www.google.com/uds/solutions/slideshow/gfslideshow.js">http://www.google.com/uds/solutions/slideshow/gfslideshow.js</a>" type="text/javascript"></script><br />
</code><br />
<br />
Segundo, en el post o donde se quiera poner el cuadro, hay que implementar un DIV con un ID, el ID es para diferenciarlo si usamos varios en la misma página.<br />
Tercero, agregar la llamada al script, con todas las opciones. Esto se puede agregar junto con el DIV o en otra parte, el cuadro se muestra donde esta el DIV.<br />
<br />
<br />
El código para usarlo sería algo asi:<br />
<code><br />
<div id="slideShow" style="width:160px;height:160px;">Cargando ...</div><br />
</code><code><br />
<script type="text/javascript"><br />
function LoadSlideShow() {<br />
var feed = "URL_delFeed";<br />
var options = {displayTime:2000, transistionTime:600, scaleImages:true};<br />
var ss = new GFslideShow(feed, "slideShow", options);<br />
}<br />
google.load("feeds", "1");<br />
google.setOnLoadCallback(LoadSlideShow);<br />
</script><br />
<br />
</code><br />
Yo uso el Feed que te da la web de Picassa, ya que uso el software de Picassa para subir las imágenes.<br />
Antes de usarlo, si se quiere se puede configurar el slideshow para personalizarlo un poco, en la <a href="http://translate.google.com/translate?hl=es&u=http%3A%2F%2Fwww.google.com%2Fuds%2Fsolutions%2Fslideshow%2Freference.html">web de google</a> se explican todas las opciones pero está en inglés, si querés y no sabes inglés podes intentar leer <a href="http://www.google.com/uds/solutions/slideshow/reference.html">la versión traducida</a>.<br />
algunas de las opciones (se agregan separadas con coma en 'var options') son:<br />
<br />
<ul><li>la cantidad de imágenes: <span style="font-weight: bold;">numResults:<span style="color: yellow;">cantidad</span></span></li>
<li>mantener o no la relación ancho/alto: <span style="font-weight: bold;">scaleImages:<span style="color: yellow;">true|false</span></span> (por defecto es <span style="font-weight: bold;">true</span>)</li>
<li>o bien <span style="font-weight: bold;">maintainAspectRatio:<span style="color: yellow;">true|false</span></span></li>
<li>el tiempo que permanecen visibles: <span style="font-weight: bold;">displayTime:<span style="color: yellow;">valor</span></span> (en milisegundos, por defecto <span style="font-weight: bold;">3000</span>)</li>
<li>el tiempo que dura la transición: <span style="font-weight: bold;">transitionTime:<span style="color: yellow;">valor</span></span> (en milisegundos, por defecto <span style="font-weight: bold;">1000</span>)</li>
<li>transformar o no las imágenes en enlaces: <span style="font-weight: bold;">linkTarget:<span style="color: yellow;">google.feeds.LINK_TARGET_BLANK</span></span> (por defecto no)</li>
<li>habilitar o deshabilitar pausa con mouseover: <span style="font-weight: bold;">pauseOnHover:<span style="color: yellow;">true|false</span></span> (por defecto es <span style="font-weight: bold;">true</span>)</li>
<li>habilitar panel de control: <span style="font-weight: bold;">fullControlPanel:<span style="color: yellow;">true</span></span></li>
<li>panel de control con íconos pequeños: <span style="font-weight: bold;">fullControlPanelSmallIcons:<span style="color: yellow;">true</span></span></li>
</ul><div style="text-align: justify;">El tamaño de las miniaturas puede establecerse con estas opciones:</div><ul><li><span style="font-weight: bold;">thumbnailSize: <span style="color: yellow;">GFslideShow.THUMBNAILS_SMALL</span></span></li>
<li><span style="font-weight: bold;">thumbnailSize: <span style="color: yellow;">GFslideShow.THUMBNAILS_MEDIUM</span></span></li>
<li><span style="font-weight: bold;">thumbnailSize: <span style="color: yellow;">GFslideShow.THUMBNAILS_LARGE <br />
</span></span></li>
</ul><span style="font-size: x-small;">Fuente: <a href="http://vagabundia.blogspot.com/2009/02/creando-slideshows-con-ajax-feed-api.html">Vagabundia</a></span>Uno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.com7tag:blogger.com,1999:blog-1116415811237822788.post-49745439189559460652009-02-09T11:21:00.000-08:002009-12-15T17:20:31.189-08:00Botones con imágenes. (Cambiar imagen al pasar el mouse y al hacer click)<div class="separator" style="clear: both; text-align: center;"><a href="http://z5atgw.bay.livefilestore.com/y1pY1bTGm5rnVbiv0Cq9Ohmm-l61SOOWYltdyev36tBXMp7SECRb-KhQaStYnxDUXuLyNzPhSe9oMg/mejoresprogramas.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>Hace exactamente dos entradas publiqué <a href="http://cosasparaelblog.com.ar/2009/02/cambiar-de-imagen-al-pasar-el-mousse.html">como cambiar imágenes al pasar el mouse</a>, pero noté que habia un problema con las imágenes que no son muy pequeñas.. <b>tarda en cargar la segunda imágen</b>.. y aveces tarda tanto que uno ni se da cuenta que al pasar el mouse se cambiaba de imágen... traté de solucionarlo con <a href="http://vagabundia.blogspot.com/2007/09/precargar-imgenes-con-css.html">una precarga de imágenes</a> pero no mejoró casi nada. <br />
<br />
La solución y mejora a esto esta en utilizar lo que se llama botón, que no es otra cosa que una imágen con tres funciones:<br />
<span id="fullpost"><span style="font-weight: bold;">inactivo</span>: Primera imágen, que aparece<br />
</span><span id="fullpost"><span style="font-weight: bold;">over</span>: Segunda imágen (cuando se coloca el puntero del ratón sobre él</span>)<br />
<span id="fullpost"><span style="font-weight: bold;">activo</span>: Tercera imágen (cuando se hace <span style="font-style: italic;">click</span>)<br />
<span style="font-weight: bold;"></span></span><br />
<span id="fullpost"><br />
Si bien hablo de tres imágenes el secreto esta en que es una sola, <b>eso es lo que evita que tarde en cargar.</b><br />
<br />
El código para hacer esto sería el siguiente:<br />
<br />
</span><br />
<code><br />
<a href="URL IMAGEN" style="background:transparent url(URL IMAGEN) no-repeat left top; width:ANChOpx; /* la mitad o la tercera parte del ancho de la imagen */ height:ALTOpx; /* el alto de la imagen */ display: block; text-decoration: none"<br />
onmouseout="this.style.backgroundPosition='left top';"<br />
onclick="this.style.backgroundPosition='right top';"<br />
onmouseover="this.style.backgroundPosition='center top';"><br />
</a><br />
</code><br />
El & # 160 ; (sin espacios) supuestamente es para que los navegadores no confundan la etiqueta con una vacia pero no importa, hay que agregarlo antes del <code></a><br />
</code>, eso es lo importante a saber<br />
<br />
Les dejo un ejemplo de como carga más rápido:<br />
Efecto mouseover con dos imágnes separadas(mas lento, tu explorador no tiene que haber cargado ya esta imagen para notar el efecto):<br />
<br />
<a href="http://mejoresprogramas.com.ar/"><img onmouseout="javascript:this.src='http://z5atgw.bay.livefilestore.com/y1p4Kkfl3He8gWMh4mAckLB9sgJ2SYZjXuE1VGYcxUjH4hPQT0AWIIW5_fPyBHRdH92rtPa_oM9U2s/linux-mac-windows.jpg';" onmouseover="javascript:this.src='http://z5atgw.bay.livefilestore.com/y1prxJRKF8Qg6yq-6SR222vKr6Y_PJeFl1OOdrsY4AvKLP1v3PylriKr2Q31lWpVHwa5-vhDWjTUFg/linux-mac-windowsclaro.jpg';" src="http://z5atgw.bay.livefilestore.com/y1p4Kkfl3He8gWMh4mAckLB9sgJ2SYZjXuE1VGYcxUjH4hPQT0AWIIW5_fPyBHRdH92rtPa_oM9U2s/linux-mac-windows.jpg" /></a><br />
<br />
Efecto boton, con una imagen dividida en tres(mas rapido :-) aparte de evitarnos usar Javascript:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://z5atgw.bay.livefilestore.com/y1pY1bTGm5rnVbiv0Cq9Ohmm-l61SOOWYltdyev36tBXMp7SECRb-KhQaStYnxDUXuLyNzPhSe9oMg/mejoresprogramas.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="66" src="http://z5atgw.bay.livefilestore.com/y1pY1bTGm5rnVbiv0Cq9Ohmm-l61SOOWYltdyev36tBXMp7SECRb-KhQaStYnxDUXuLyNzPhSe9oMg/mejoresprogramas.PNG" width="200" /></a></div><br />
<br />
<a href="http://mejoresprogramas.com.ar/" onclick="this.style.backgroundPosition='right top';" onmouseout="this.style.backgroundPosition='left top';" onmouseover="this.style.backgroundPosition='center top';" style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; background: transparent url(http://z5atgw.bay.livefilestore.com/y1pY1bTGm5rnVbiv0Cq9Ohmm-l61SOOWYltdyev36tBXMp7SECRb-KhQaStYnxDUXuLyNzPhSe9oMg/mejoresprogramas.PNG) no-repeat scroll left top; display: block; height: 255px; text-decoration: none; width: 255px;"><br />
</a><br />
<br />
<br />
Tambien se puede hacer este mismo efecto con un texto agregado, esto se hace creando un bloque div antes del código.. pero como todavía no lo use les dejo <a href="http://vagabundia.blogspot.com/2007/05/un-poco-ms-all-de-las-imgenes-2-parte.html?showComment=1234212060000#c3497525435548741567">el enlace al blog de J.Miur</a> donde lo ví para el que lo quieraUno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.com7tag:blogger.com,1999:blog-1116415811237822788.post-28167975327267089182009-02-05T17:02:00.000-08:002009-08-14T09:53:02.460-07:00Ampliar imágenes al pasar con el mouse o hacer clickSigo con otra entrada sobre efectos en imágenes.<br />
<br />
Para ampliarla con un click y reducirla con dos click, de esta forma:<br />
<img onclick="javascript:this.height=255;this.width=255" ondblclick="javascript:this.width=100;this.height=100" src="http://z5atgw.bay.livefilestore.com/y1pbPtJKpxsVnxdweUmh5N9RwSpPsow73YoYBaRFJx9e84I5Ji3czlCk5FM20SwSa71eBcF5sM96nI/blogger_logo.png" width="100" /> <br />
<br />
<br />
hay que usar este código, reemplazando lo necesario:<br />
<blockquote><code><br />
</code></blockquote><code></code><br />
<code></code><br />
<code><blockquote><img</blockquote><blockquote>src="URL DE LA IMAGEN"</blockquote><blockquote>width="ANCHO DE IMÁGEN REDUCIDA"</blockquote><blockquote>onclick="javascript:this.height=ALTO IMAGEN AMPLIADA;this.width=ANCHO IMAGEN AMPLIADA"</blockquote><blockquote>ondblclick="javascript:this.width=ANCHO IMAGEN REDUCIDA;this.height=ALTO IMAGEN REDUCIDA"/></blockquote></code><br />
<blockquote></blockquote><br />
<br />
<div>Para ampliarla al pasar el mouse:<br />
<div><img ></img ></div><img onmouseout="javascript:this.width=100;this.height=100" onmouseover="javascript:this.height=155;this.width=155" src="http://z5atgw.bay.livefilestore.com/y1pbPtJKpxsVnxdweUmh5N9RwSpPsow73YoYBaRFJx9e84I5Ji3czlCk5FM20SwSa71eBcF5sM96nI/blogger_logo.png" width="100" /><br />
<br />
<div></div><div>Hay que usar este:<br />
<blockquote><code><br />
</code></blockquote><code></code><br />
<code></code><br />
<code><blockquote><img </blockquote><blockquote>src="URL IMAGEN" </blockquote><blockquote>width="ANCHO IMAGEN REDUCIDA"</blockquote><blockquote>onmouseover="javascript:this.height=ALTURA IMAGEN AMPLIADA;this.width=ANCHO IMAGEN AMPLIADA"</blockquote><blockquote>onmouseout="javascript:this.width=ANCHO IMAGEN REDUCIDA;this.height=ALTO IMAGEN REDUCIDA"/></blockquote></code><br />
<blockquote></blockquote>También puede combinarse con otros scripts de java <a href="http://cosasparaelblog.com.ar/2009/02/cambiar-de-imagen-al-pasar-el-mousse.html">como el anterior </a> y quedaría por ejemplo algo asi (tarda en cargar, la solución para que cargue mas rápido <a href="http://cosasparaelblog.com.ar/2009/02/botones-con-imagenes-cambiar-imagen-al.html">esta aca</a>):<br />
<br />
<span style="font-family: '-webkit-monospace'; font-size: 13px; white-space: pre-wrap;"><img onmouseout="javascript:this.width=100;this.height=100; this.src='http://z5atgw.bay.livefilestore.com/y1pbPtJKpxsVnxdweUmh5N9RwSpPsow73YoYBaRFJx9e84I5Ji3czlCk5FM20SwSa71eBcF5sM96nI/blogger_logo.png';" onmouseover="javascript:this.height=155;this.width=155; this.src='http://z5atgw.bay.livefilestore.com/y1pOXaRPdNtm77YkLIaameGQUvH87sC7Pc7KDU1Vh0v9i6-atfozXsg9dy4mqHa1C4kTy5gLOMZJTA/blogger_logoclaro.png';" src="http://z5atgw.bay.livefilestore.com/y1pbPtJKpxsVnxdweUmh5N9RwSpPsow73YoYBaRFJx9e84I5Ji3czlCk5FM20SwSa71eBcF5sM96nI/blogger_logo.png" width="100" /></span><br />
Cualquier duda pregunta que no hay drama, saludos.<br />
<br />
<span style="font-size: x-small;">Visto en:</span><a href="http://santyweb.blogspot.com/2008/08/ampliar-imgenes-con-mouse.html"><span style="font-size: x-small;">http://santyweb.blogspot.com/2008/08/ampliar-imgenes-con-mouse.html</span></a></div></div>Uno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.com5tag:blogger.com,1999:blog-1116415811237822788.post-66856144445364249742009-02-05T16:49:00.000-08:002009-02-05T17:02:19.880-08:00Cambiar de imágen al pasar el mousse (Mouseover)Estuve buscando esto bastante rato, sabía que era algo sencillo pero no lo sabia hacer asi que puede que tambien le sirva a alguien mas..<br />
<br />
Lo usé para hacer tipo como un menú en <a href="http://expresandome.com.ar/">http://expresandome.com.ar</a>, donde se puede acceder a cualquiera de mis blogs :).<br />
<br />
El efecto es el siguiente:<br />
<span style="font-family: '-webkit-monospace'; font-size: 13px; white-space: pre-wrap;"><img onmouseout="javascript:this.src='http://z5atgw.bay.livefilestore.com/y1p_dP0QKDYvHHBX_9u4vR-VLuv-0WLkjpjmhnlg5P721DVf4xZkBiI2RpNPtccRYD8Qv1il_JNAHVh423Pd-ugig/My%20Videos%20-%20My%20Movies%20Folder.png';" onmouseover="javascript:this.src='http://z5atgw.bay.livefilestore.com/y1pAQbHPirUaqIChizjGSH2WT-bUGiGLOHkZxssonEYYHAvWpKvfZhj66S88stTXGeODn_mY3NLAOnjBgnhLLAGvQ/videosinteresantes2.png';" src="http://z5atgw.bay.livefilestore.com/y1p_dP0QKDYvHHBX_9u4vR-VLuv-0WLkjpjmhnlg5P721DVf4xZkBiI2RpNPtccRYD8Qv1il_JNAHVh423Pd-ugig/My%20Videos%20-%20My%20Movies%20Folder.png" /> </span><span style="font-family: '-webkit-monospace'; font-size: 13px; white-space: pre-wrap;"><img onmouseout="javascript:this.src='http://z5atgw.bay.livefilestore.com/y1p1Eb4Xg8i3JeT4yOj0ZKvxdANZWEtEDRMNQZAAg8jyPUD5H8V072_wPBn-TGVkpcKRed8M3NiDAA/My%20Computer%202.png';" onmouseover="javascript:this.src='http://z5atgw.bay.livefilestore.com/y1pvH66kwQJ6S_nm-H6por54P0X6lqRjD7fGdDWiOH5EyhoK3rpgqNtyMixvNVxBhOdSRaDOVV6zYY/My%20Computer.png';" src="http://z5atgw.bay.livefilestore.com/y1p1Eb4Xg8i3JeT4yOj0ZKvxdANZWEtEDRMNQZAAg8jyPUD5H8V072_wPBn-TGVkpcKRed8M3NiDAA/My%20Computer%202.png" /> </span><br />
Se pueden usar imágenes de diferentes tamaños y formatos<br />
<br />
El código es el siguiente:<br />
<blockquote><code><br />
</code></blockquote><code></code><br />
<code><blockquote><img <br />
src="ENLACE DE PRIMERA IMÁGEN" </blockquote><blockquote>onmouseover="javascript:this.src='ENLACE SEGUNDA IMÁGEN';" </blockquote><blockquote>onmouseout="javascript:this.src='ENLAE DE PRIMERA IMÁGEN U OTRA';"/></blockquote></code><br />
<blockquote></blockquote><span style="font-size: x-small;">Visto en: </span><a href="http://santyweb.blogspot.com/2008/08/ampliar-imgenes-con-mouse.html"><span style="font-size: x-small;">http://santyweb.blogspot.com/2008/08/ampliar-imgenes-con-mouse.html</span></a><br />
<div></div>Uno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.com0tag:blogger.com,1999:blog-1116415811237822788.post-41761591182462964632009-01-22T06:40:00.000-08:002009-01-22T07:07:43.179-08:00Traductor para tu blog<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinChm1QViJ-Cx8durJ47a-UEq1j6cToU86K4ePNkG64cEuf4tLh7NFzKmaQclkyRqvq_EReg9ZKpPMGK0xxcyoaNK-YiGmUF1787zG57LsmHLbgWrulY8bBKjsDJUGuNYxjpaMfplRihAS/s1600-h/traductor.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinChm1QViJ-Cx8durJ47a-UEq1j6cToU86K4ePNkG64cEuf4tLh7NFzKmaQclkyRqvq_EReg9ZKpPMGK0xxcyoaNK-YiGmUF1787zG57LsmHLbgWrulY8bBKjsDJUGuNYxjpaMfplRihAS/s320/traductor.PNG" /></a></div><br />
Tan solo hay que elegir y despues añadir como un nuevo gadget Java/Hml desde la pestaña de diseño en blogger el traductor que nos ofrece Google.<br />
<blockquote><a aiotarget="false" aiotitle="Enlace al traductor" href="http://www.google.com/ig/directory?synd=open&source=gghp&num=24&url=http://www.google.com/ig/modules/translatemypage.xml&output=html%29">Enlace al traductor</a></blockquote><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsUGfZo-Xa6mh6fbnHbOrR5Plxd0WZvUQ3i_XG_GwzsjHzl6HDFkJlGPwx1X9f33kmjxhKfnVW0PYZvDBuJ7rjsYE2wP3C55nF01iznYfNFBcI7Q72z56oNp6fidzJbb4WHVtAotoYIVFK/s1600-h/english.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br />
</a></div>También podemos crear nuestro traductor con banderitas para hacerles click directamente, esto se hace facilmente tan solo hay que buscar una banderita y ponerle como enlace la url del traductor de google.<br />
<code><br />
<div style="text-align: center;"><a href="URL Del Traductor><img alt="IDIOMA A TRADUCIR" src="URL DE LA BANDERITA"><br />
</code><br />
<br />
Pero esta forma no me gusta porque no se traduce automáticamente la web sino que hay que copiar el enlace en la web de traduccion, cuando encuentre un sitio que lo haga directamente puede que cambie de opción.Uno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.com2tag:blogger.com,1999:blog-1116415811237822788.post-56129045237957231402009-01-21T11:41:00.000-08:002009-01-21T11:59:04.187-08:00El tamaño de las etiquetas por relevancia, "nube" de etiquetas.<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieHrvLZwdp4FwWM6KiPArVgeZjvDgwrsHLKnwduHHIhuYs8d9bqIzxk5-cZFUyIf6GMpfVr6WhX4wfLKdc6etTh76A1j8Z9jGuyMmq5X0pFe9RU0momqIRo9woOvg9vOzWtdMmCzXLqdOJ/s1600-h/Oksoft.es+0008.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div> Acá les dejo un tutorial que me funciono 100% para realizar la popular forma de nube de etiquetas, como esta:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieHrvLZwdp4FwWM6KiPArVgeZjvDgwrsHLKnwduHHIhuYs8d9bqIzxk5-cZFUyIf6GMpfVr6WhX4wfLKdc6etTh76A1j8Z9jGuyMmq5X0pFe9RU0momqIRo9woOvg9vOzWtdMmCzXLqdOJ/s1600-h/Oksoft.es+0008.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieHrvLZwdp4FwWM6KiPArVgeZjvDgwrsHLKnwduHHIhuYs8d9bqIzxk5-cZFUyIf6GMpfVr6WhX4wfLKdc6etTh76A1j8Z9jGuyMmq5X0pFe9RU0momqIRo9woOvg9vOzWtdMmCzXLqdOJ/s320/Oksoft.es+0008.jpg" /></a></div><blockquote><code><br />
Una nube de etiquetas es una representación visual de las “etiquetas” o palabras clave usadas en un sitio web. Generalmente este listado de palabras se ordena alfabéticamente y con diferente tamaño según su relevancia.<br />
<br />
Para empezar a poner nuestra nube de etiquetas en el blog tenemos que etiquetar todos nuestros post.<br />
<br />
1. Ir a diseño de la plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios y tendrás que pegar entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>).<br />
/* Label Cloud Styles<br />
----------------------------------------------- */<br />
#labelCloud {text-align:center;font-family:arial,sans-serif;}<br />
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}<br />
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}<br />
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}<br />
#labelCloud a{text-decoration:none}<br />
#labelCloud a:hover{text-decoration:underline}<br />
#labelCloud li a{}<br />
#labelCloud .label-cloud {}<br />
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}<br />
#labelCloud .label-cloud li:before{content:"" !important}<br />
<br />
2. Después agregar el siguiente código entre ]]></b:skin> y </head>. Preferible que lo pegues casi al final (antes de </head>).<br />
<script type='text/javascript'><br />
// Label Cloud User Variables<br />
var lcBlogURL = 'http://cosasparaelblog.com.ar';<br />
var maxFontSize = 20;<br />
var maxColor = [0,0,255];<br />
var minFontSize = 10;<br />
var minColor = [0,0,0];<br />
var lcShowCount = false;<br />
</script><br />
<br />
3. Buscar el widget con el id Label1 y con el title Etiquetas. Esto lo encuentras donde dice:<br />
<div id='sidebar-wrapper'><br />
<b:section class='sidebar' id='sidebar' preferred='yes'><br />
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'><br />
<b:includable id='main'><br />
<b:if cond='data:title'><br />
<h2><data:title><h2><br />
<b:if><br />
<div class='widget-content'><br />
<ul><br />
<b:loop values='data:labels' var='label'><br />
<li><br />
<b:if cond='data:blog.url == data:label.url'><br />
<data:label.name/><br />
<b:else/><br />
<a expr:href='data:label.url'><?xml:namespace prefix = data /></data:label.name></a><br />
</b:if><br />
(<data:label.count/>)<br />
</li><br />
</b:loop><br />
</ul><br />
<b:include name='quickedit'/><br />
</div><br />
</b:includable><br />
</b:widget><br />
<br />
4. Una vez ubicado, tienes que reemplazar todo el código anterior por lo siguiente:<br />
<span style="color: blue;"><b:widget id='Label1' locked='false' title='Label Cloud' type='Label'><br />
</span><span style="color: blue;"><b:includable id='main'><br />
</span><span style="color: blue;"><b:if cond='data:title'><br />
</span><span style="color: blue;"><h2><data:title/></h2><br />
</span><span style="color: blue;"></b:if><br />
</span><span style="color: blue;"><div class='widget-content'><br />
</span><span style="color: blue;"><div id='labelCloud'/><br />
</span><span style="color: blue;"><script type='text/javascript'><br />
</span><span style="color: blue;">// Do not change anything past this point -----------------<br />
</span><span style="color: blue;">function s(a,b,i,x){<br />
</span><span style="color: blue;">if(a>b){<br />
</span><span style="color: blue;">var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)<br />
</span><span style="color: blue;">}<br />
</span><span style="color: blue;">else{<br />
</span><span style="color: blue;">var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)<br />
</span><span style="color: blue;">}<br />
</span><span style="color: blue;">return v<br />
</span><span style="color: blue;">}<br />
</span><span style="color: blue;">var ta=0<br />
</span><span style="color: blue;">var c=[];<br />
</span><span style="color: blue;">var labelCount = new Array();<br />
</span><span style="color: blue;">var ts = new Object;<br />
</span><span style="color: blue;"><b:loop values='data:labels' var='label'><br />
</span><span style="color: blue;">var theName = "<data:label.name/>";<br />
</span><span style="color: blue;">ts[theName] = <data:label.count/>;<br />
</span><span style="color: blue;"></b:loop><br />
</span><span style="color: blue;">for (t in ts){<br />
</span><span style="color: blue;">if (!labelCount[ts[t]]){<br />
</span><span style="color: blue;">labelCount[ts[t]] = new Array(ts[t])<br />
</span><span style="color: blue;">}<br />
</span><span style="color: blue;">}<br />
</span><span style="color: blue;">tz = labelCount.length-1;<br />
</span><span style="color: blue;">lc2 = document.getElementById('labelCloud');<br />
</span><span style="color: blue;">ul = document.createElement('ul');<br />
</span><span style="color: blue;">ul.className = 'label-cloud';<br />
</span><span style="color: blue;">for(var t in ts){<br />
</span><span style="color: blue;">for (var i=0;3 > i;i++) {<br />
</span><span style="color: blue;">c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)<br />
</span><span style="color: blue;">}<br />
</span><span style="color: blue;">var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);<br />
</span><span style="color: blue;">li = document.createElement('li');<br />
</span><span style="color: blue;">li.style.fontSize = fs+'px';<br />
</span><span style="color: blue;">li.style.lineHeight = '1';<br />
</span><span style="color: blue;">a = document.createElement('a');<br />
</span><span style="color: blue;">a.title = ts[t]+' Posts in '+t;<br />
</span><span style="color: blue;">a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';<br />
</span><span style="color: blue;">a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);<br />
</span><span style="color: blue;">if (lcShowCount){<br />
</span><span style="color: blue;">span = document.createElement('span');<br />
</span><span style="color: blue;">span.innerHTML = '('+ts[t]+') ';<br />
</span><span style="color: blue;">span.className = 'label-count';<br />
</span><span style="color: blue;">a.appendChild(document.createTextNode(t));<br />
</span><span style="color: blue;">li.appendChild(a);<br />
</span><span style="color: blue;">li.appendChild(span);<br />
</span><span style="color: blue;">}<br />
</span><span style="color: blue;">else {<br />
</span><span style="color: blue;">a.appendChild(document.createTextNode(t));<br />
</span><span style="color: blue;">li.appendChild(a);<br />
</span><span style="color: blue;">}<br />
</span><span style="color: blue;">ul.appendChild(li);<br />
</span><span style="color: blue;">abnk = document.createTextNode(' ');<br />
</span><span style="color: blue;">ul.appendChild(abnk);<br />
</span><span style="color: blue;">}<br />
</span><span style="color: blue;">lc2.appendChild(ul);<br />
</span><span style="color: blue;"></script><br />
</span><span style="color: blue;"> </span><span style="color: blue;"><noscript><br />
</span><span style="color: blue;"><ul><br />
</span><span style="color: blue;"><b:loop values='data:labels' var='label'><br />
</span><span style="color: blue;"><li><br />
</span><span style="color: blue;"><b:if cond='data:blog.url == data:label.url'><br />
</span><span style="color: blue;"><data:label.name/><br />
</span><span style="color: blue;"><b:else/><br />
</span><span style="color: blue;"><a expr:href='data:label.url'><data:label.name/></a><br />
</span><span style="color: blue;"></b:if><br />
</span><span style="color: blue;">(<data:label.count/>)<br />
</span><span style="color: blue;"></li><br />
</span><span style="color: blue;"></b:loop><br />
</span><span style="color: blue;"></ul><br />
</span><span style="color: blue;"></noscript><br />
</span><span style="color: blue;"><b:include name='quickedit'/><br />
</span><span style="color: blue;"></div><br />
</span><span style="color: blue;"> </span><span style="color: blue;"></b:includable><br />
</span><span style="color: blue;"></b:widget><br />
</span><br />
Explicación del paso Nº 2<br />
- En lcBlogURL, se debe poner la dirección de tu blog.<br />
- En maxFontSize, podemos modificar el tamaño de la fuente mostrada.<br />
- En maxColor = [0,0,255], podemos modificar el color de la fuente mostrada.<br />
Por ejemplo:<br />
[255,0,0] = Rojo claro<br />
[0,255,0] = Verde claro<br />
[128,0,0] = Rojo oscuro<br />
[0,128,0]= Verde oscuro<br />
[0,0,128] = Azul oscuro<br />
Mas combinaciones de colores en <a href="http://users.rcn.com/giant.interport/COLOR/ColorSpecifier.html">HYPE's Color Specifier.</a><br />
- En minFontSize, podemos modificar el tamaño de la fuente mostrada.<br />
- En minColor = [0,0,0], podemos modificar el color de la fuente mostrada.<br />
- En lcShowCount (true o false) .- Si es true se mostrará una nube de etiquetas con el número de entradas que existen. Mientras que en false simplemente se vera una nube de etiquetas sin su respectivo número.<br />
</code></blockquote>Fuente:<br />
http://ayudaparaelblog.blogspot.com/2007/09/como-hacer-una-nube-de-etiquetas-73.html<br />
<br />
<blockquote>La única cosa que hice que no está mencionada es cambiar el título <br />
<code><br />
<b:widget id='Label1' locked='false' title='Label Cloud ' type='Label'><br />
Donde die title='Aca va el titulo de la nube'<br />
</code></blockquote>Uno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.com1tag:blogger.com,1999:blog-1116415811237822788.post-56898662937564359752008-12-23T16:48:00.000-08:002008-12-23T16:54:12.341-08:00Mostrar ultimos comentarios y ultimas entradasBueno esto es bastante fácil, tan solo hay que elegir en blogspot: Diseño>Añadir un gadget>Feed<br />
<br />
Y ponemos el enlace a nuestro feed de comentarios o de entradas.<br />
¿cual es tu feed?, bueno es algo como esto:<br />
<br />
El de comentarios:<br />
http://<b>urldetublog</b>/feeds/comments/default<br />
<br />
El de entradas:<br />
http://<b>urldetublog</b>/atom.xml<br />
<br />
Ejemplo de como queda en la barra lateral de este mismo blog.Uno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.com5tag:blogger.com,1999:blog-1116415811237822788.post-35796076729407072562008-12-23T16:22:00.000-08:002008-12-23T16:54:35.498-08:00Top ten, mostrá los diez que mas te comentanLa gente de bloggerbuster.com desarrollo un widget para mostrar los diez que mas te comentan, tan solo hay que <b>completar los datos</b>, en filter your name hay que poner el nick que usas para comentar asi no cuenta tus comentarios, <b>hacer click en customize y add to Blog</b>.<br />
<br />
Enlace al widget: <a href="http://bloggerbuster.com/scripts/topcommentersFiltername.html">http://bloggerbuster.com/scripts/topcommentersFiltername.html</a><br />
<br />
Para los que no tienen ganas de entrar al enlace pueden copiar y pegar lo siguiente en un nuevo elemento HTML/Javascript:<br />
<br />
<code><br />
<script type="text/javascript"><br />
function pipeCallback(obj) {<br />
document.write('<ol>');<br />
var i;<br />
for (i = 0; i < obj.count ; i++)<br />
{<br />
var href = "'" + obj.value.items[i].link + "'";<br />
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";<br />
document.write(item);<br />
}<br />
document.write('</ol>');<br />
}<br />
</script><br />
<script src="<a class="linkification-ext" href="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=720a4578c7b83dfce64615cb0ad3c642&url=http%3A%2F%2F" title="Linkification: http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=720a4578c7b83dfce64615cb0ad3c642&url=http%3A%2F%2F">http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=720a4578c7b83dfce64615cb0ad3c642&url=http%3A%2F%2F</a><b>[[[ACA LA URL SIN EL HTTP]]]</b>&num=10&filter=<b>[[[ACA TU NICK PARA QUE NO TE CUENTE]]]</b>" type="text/javascript"></script><br />
<span style="font-size: 80%">Widget by <a href="<a class="linkification-ext" href="http://www.bloggerbuster.com/" title="Linkification: http://www.bloggerbuster.com">http://www.bloggerbuster.com</a>">Blogger Buster </a></span><br />
</code><br />
<br />
Ejemplo al costado en este mismo blog.Uno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.com1Santa Fe, Argentina-32.969211498255156 -60.739631652832031-35.273064998255158 -64.474983152832039 -30.665357998255157 -57.004280152832031tag:blogger.com,1999:blog-1116415811237822788.post-41347954029492188672008-12-02T18:04:00.000-08:002008-12-23T16:59:52.404-08:00Añadir, quitar, modificar columnasMe hice <a href="http://expresandome.com.ar/">un blog</a> para poner enlaces a todos mis blogs y necesité agregar una columna, lo cual hice bastante bien con el siguiente tutorial se los dejo ;) cualquier cosa que no salga chiflen <br />
<blockquote>Primero debes ingresar a <span style="font-weight: bold;">Edición de HTML</span> y sería bueno que <span style="color: red; font-weight: bold;">descargues la plantilla antes de hacerle cualquier cambio, por razones de seguridad.</span><br />
Para empezar busca (control+f) <span style="font-weight: bold;"><span style="color: red;">/* Page Structure </span><br />
<br />
</span>Ahora cambia sección por sección<span style="font-weight: bold;">, el ancho (width)</span> por el que aparece abajo.<br />
<br />
<span style="font-size: 85%;">En algunos casos los nombres tienen ligeros cambios , pero en general siempre suelen mantener la esencia como decir main-wrapper puede aparecer como #main-wrap ... y asi sucesivamente.<br />
<br />
</span><span style="font-weight: bold;"></span><span style="font-size: 85%;"><br />
</span><br />
<br />
<span style="font-weight: bold;">#outer-wrapper</span>{ (En esta se predetermina el ancho total del sitio)<br />
<span style="font-weight: bold;">width:970px;</span><br />
<br />
<span style="font-weight: bold;">#main-wrapper</span> {(En esta se predetermina el ancho del contenido)<br />
<span style="font-weight: bold;">width:500px;</span><br />
<br />
<span style="font-weight: bold;">#sidebar-wrapper</span> {(Columna lateral)<br />
<span style="font-weight: bold;">width:270px;</span><span style="font-weight: bold;"></span><span style="font-weight: bold;"></span><br />
<br />
----------> un poco más abajo<br />
<br />
<span style="font-weight: bold;">#Header-wrapper</span>{<br />
<span style="font-weight: bold;">width:970px;</span><br />
<br />
----------> un poco más abajo<br />
<br />
<span style="font-weight: bold;">#Footer</span>{<br />
<span style="font-weight: bold;">width:970px;<br />
<br />
</span>----<br />
<span style="font-size: 85%;"><span style="font-size: 100%;"><br />
Si apareciera en ves de px el % de porcentaje, nada más lo borras y lo agregas tal y como aparece ahí arriba. Ejemplo </span></span><span>Si apareciera en #main-wrapper<span style="font-weight: bold;"> width:30%,</span> debes cambiarlo por </span><span style="font-weight: bold;">width:500px; </span><br />
<br />
Ahora para agregar la nueva columna a la que vamos a llamar #lanueva , tienes que copiar el código en rojo y pegarlo al final de el #sidebar-wrapper(el azul) (a manera de ejemplo)<br />
<br />
<span style="color: #3333ff;">#sidebar-wrapper {</span><br />
<span style="color: #3333ff;">width: 270px;</span><br />
<span style="color: #3333ff;">float: right;</span><br />
<span style="color: #3333ff;">word-wrap:<br />
break-word; /* fix for long text breaking sidebar float in IE */</span><br />
<span style="color: #3333ff;">overflow: hidden;<br />
/* fix for long non-text content breaking IE sidebar float */</span><br />
<span style="color: #3333ff;">}</span><br />
<br />
<br />
<span style="color: #f90d1b;">#lanueva {</span><br />
<span style="color: #f90d1b;">width: 200px;<br />
float: left;<br />
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br />
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />
}<br />
<br />
</span>Si te fijas #lanueva le pusimos un ancho de 200px , pero realmente la puedes poner del ancho que prefieras.<br />
<br />
Eso si, el total de la suma de anchos del #sidebar-wrapper , #main-wrapper y #lanueva , debe ser equivalente al ancho #outer-wrapper, nunca superior.<br />
<br />
Para el caso especifico de este tutorial el #outer-wrap mide 970px , el #main-wrap 500px, y el sidebar-wrapper 270px y #lanueva 200 px. Para una suma total de <span style="font-weight: bold;">970px</span> .<br />
<br />
<br />
Así como estan esos códigos #lanueva va estar alineada a la izquierda y <span style="color: #3333ff;">#sidebar-wrapper</span> a la derecha. En algunos templates el sidebar puede venir a la izquierda, por lo que deberias cambiar el <span style="color: #f90d1b;">float: left;</span> por <span style="color: #f90d1b;">float: right;</span> para el caso de la nueva, generalmente al contrario del lado en que se encuentre la columna lateral original.<br />
<br />
Ahora vamos a añadirle tu PERFIL a #lanueva de manera temporal, con el fin de agregar contenido, arribita de <span style="color: #ff0e15;"><div id="main-wrapper"> Siempre dejando un espacio, no pegadito a main-wrapper ya que es aparte.<br />
<br />
<span style="color: #ff0e15;"><div id="lanueva"><br />
<br />
<b:section class="sidebar" id="lanueva"><br />
preferred='yes'><br />
<br />
<b:widget id="maestroweb" locked="false" title="About Me"><br />
type='Profile'/><br />
<br />
</b:widget><br />
<br />
</b:section></div><br />
</span><br />
<br />
Si lo que quieres es que las dos columnas queden juntas , en alguno de los lados, debes pegar el código despues de <span style="color: #ff0e15;"><span style="color: #5f14ff;"><div id="sidebar-wrapper"> , y la posición en que aparezcan lo va a determinar el parametro derecho o izquierdo que hayas puesto arriba en "float" (en Page Structure) para cada una de las columnas.<br />
<br />
<br />
Ahora opcionalmente se puede configurar el ancho que va aparecer en el editor de elementos.<br />
<br />
Busca el código que sale en negro y le pegas abajo el código que sale en rojo.<br />
<br />
<span style="color: #ff0e15;"><span style="color: #050000;">/** Page structure tweaks for<br />
layout editor wireframe */</span><br />
<span style="color: #050000;">body#layout #header {</span><br />
<span style="color: #050000;">margin-left: 0px;</span><br />
<span style="color: #050000;">margin-right: 0px;</span><br />
<span style="color: #050000;">}</span><br />
<br />
body#layout #outer-wrapper {<br />
<br />
width: 970px;<br />
<br />
}<br />
</span><span class="on" id="formatbar_CreateLink" onmousedown="CheckFormatting(event);FormatbarButton('richeditorframe', this, 8);ButtonMouseDown(this);" onmouseout="ButtonHoverOff(this);" onmouseover="ButtonHoverOn(this);" onmouseup="" style="display: block;" title="Vínculo"></span><br />
Este post fue verificado usando la plantilla HARBOR de BLOGGER2 , y el resultado de la misma puede bajarse dandole <a href="http://www.maestroweb.ticoblogger.com/3columnas.txt">-click aca-</a> para que puedan comparar y verlo puesto en practica. Es un archivo .txt por lo que no ocupas ningún programa extra para verlo.<br />
<br />
Seguiremos añadiendo ejemplos, ya que en principio funciona con cualquier plantilla.</div></span></span></div></span></blockquote><br />
Fuente:<a class="linkification-ext" href="http://maestroweb.ticoblogger.com/2007/08/como-agregar-una-columna-extra-para-mi_12.html" title="Linkification: http://maestroweb.ticoblogger.com/2007/08/como-agregar-una-columna-extra-para-mi_12.html">http://maestroweb.ticoblogger.com/2007/08/como-agregar-una-columna-extra-para-mi_12.html</a>Uno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.com2Santa Fe, Argentina-31.63239 -60.69946-32.801573 -62.567136000000005 -30.463207 -58.831784tag:blogger.com,1999:blog-1116415811237822788.post-87227864698475275182008-10-14T06:56:00.000-07:002008-12-10T18:06:08.828-08:00Cambiar el texto entradas antiguas/recientes por otra cosa o por flechitasPara cambiar el texto que dice entradas antiguas y entradas reciente por otro o por una imágen hay que ir a Diseño>Edición Html> activar "Expandir artilugios" y buscamos mas o menos lo siguiente<br /><br /><br /><br /><blockquote><code><br /><br /><DIV class='blog-pager' id='blog-pager'><br /><br /><b:if cond='data:newerPageUrl'><br /><br /><SPAN id='blog-pager-newer-link'><br /><br /><A class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></A><br /><br /></SPAN><br /><br /></b:if><br /><br /><b:if cond='data:olderPageUrl'><br /><br /><SPAN id='blog-pager-older-link'><br /><br /><A class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></A><br /><br /></SPAN><br /><br /></b:if><br /><br /><b:if cond='data:blog.homepageUrl != data:blog.url'><br /><br /><A class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></A><br /><br /><b:else/><br /><br /><b:if cond='data:newerPageUrl'><br /><br /><A class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></A><br /><br /></b:if><br /><br /></b:if><br /><br /></DIV><br /><br /></code></blockquote><code><br /><br /><b><data:newerPageTitle/></b> - Corresponde al texto “Entrada más reciente”<br /><br /><b><data:olderPageTitle/></b> - “Entradas antiguas”<br /><br /><b><data:homeMsg/></b> - “Página principal” <br /><br /></code><br /><br /><br /><br />Para cambiarlo directamente se eliminan y remplazan esas tres lineas por lo que se quiera. Asi podemos remplazarlas por una imagen. por ejemplo<br /><br /><br /><br /><code><br /><br /><img alt='data:newerPageTitle' src='<a class="linkification-ext" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi81kggXMpO8ziYRmC61AtHN25lKAxP8JZ7_sZ8o4S5BkC6LTwmvqeR6FMfBwCtk84ucXMPjmB1ixppbOMM4UAF_hyphenhyphentUjpt1yT1bwzMPQuQwaA1x4icn5_4aE312PjVTOYE60wdRZFP21U/s1600/botong_atras.gif" title="Linkification: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi81kggXMpO8ziYRmC61AtHN25lKAxP8JZ7_sZ8o4S5BkC6LTwmvqeR6FMfBwCtk84ucXMPjmB1ixppbOMM4UAF_hyphenhyphentUjpt1yT1bwzMPQuQwaA1x4icn5_4aE312PjVTOYE60wdRZFP21U/s1600/botong_atras.gif">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi81kggXMpO8ziYRmC61AtHN25lKAxP8JZ7_sZ8o4S5BkC6LTwmvqeR6FMfBwCtk84ucXMPjmB1ixppbOMM4UAF_hyphenhyphentUjpt1yT1bwzMPQuQwaA1x4icn5_4aE312PjVTOYE60wdRZFP21U/s1600/botong_atras.gif</a>' /><br /><br /></code><br /><br /><br /><br />Ejemplo de como queda en este mismo blog.Uno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.com7tag:blogger.com,1999:blog-1116415811237822788.post-65111791142648932822008-10-01T13:59:00.000-07:002008-10-01T14:09:18.209-07:00Cuadritos, Cajas de textos.Bueno dejo algunos ejemplos útiles de cajas para poner texto e imagenes. Se le pueden ir modificando los atributos como el color de fondo, ancho largo, etc.<br />
Scroll automático<br />
<div align="center"><table bgcolor="#990000" border="1" style="width: 200px;"><tbody>
<tr><td align="center"><marquee direction="up" height="50" scrollamount="1"><span style="color: white;"><code><br />
<div align="center"><table bgcolor="#990000" border="1" width="200"><tbody><tr><td align="center"><marquee scrollamount="1" direction="up" height="50"><span style="color:#ffffff;"><br />
<br />
</span></marquee></td></tr></tbody></table></div><br />
</code><br />
</span></marquee></td></tr>
</tbody></table></div><br />
<br />
Scroll con barrita<br />
<br />
<div align="center" style="background-color: #99ff99; border-color: rgb(0, 0, 0) rgb(102, 102, 255) rgb(0, 0, 0) rgb(0, 0, 0); border-style: dashed; border-width: 3px; height: 220px; overflow: scroll; width: 193px;"><br />
Este sería:<br />
<br />
<code><br />
<br />
<br />
<DIV style="BORDER-RIGHT: #6666ff 3px dashed; BORDER-TOP: #000000 3px dashed; SCROLLBAR-FACE-COLOR: #00FF66; SCROLLBAR-HIGHLIGHT-COLOR: #cce9fd; OVERFLOW: scroll; BORDER-LEFT: #000000 3px dashed; WIDTH: 193px; SCROLLBAR-SHADOW-COLOR: #ffbbf1; SCROLLBAR-3DLIGHT-COLOR: #ddaaff; SCROLLBAR-ARROW-COLOR: #b444ff; BORDER-BOTTOM: #000000 3px dashed; SCROLLBAR-DARKSHADOW-COLOR: #333366; HEIGHT: 220px; BACKGROUND-COLOR: #99FF99" align=center><br />
<br />
<br />
<br />
<P> XXXXXXXXXXXXXXXXXXXXXXXXXX </P></DIV><br />
</code><br />
<br />
BACKGROUND-COLOR es el color de fondo<br />
<br />
SCROLLBAR--FACE-COLOR es el color de las flechitas<br />
<br />
Y hay mas colores que podéis probar <br />
XXXXXXXXXXXXXXXXXXXXXXXXXX </div><br />
<br />
Otra con barrita:<br />
<div align="center"><br />
<div align="center" style="background-color: black; border-bottom: 1px dashed rgb(255, 255, 255); border-color: rgb(255, 255, 255); border-style: ridge ridge dashed; color: white; height: 211px; overflow: scroll; width: 259px;"><br />
<code><br />
<DIV align=center><br />
<br />
<DIV style="SCROLLBAR-FACE-COLOR: #000000; BORDER-LEFT-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #333333; OVERFLOW: scroll; WIDTH: 259px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffffff; BORDER-TOP-STYLE: ridge; BORDER-TOP-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #ffffff; BORDER-BOTTOM: #ffffff 1px dashed; BORDER-RIGHT-STYLE: ridge; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; BORDER-LEFT-STYLE: ridge; HEIGHT: 211px; BACKGROUND-COLOR: #000000; BORDER-RIGHT-COLOR: #ffffff" align=center><br />
<br />
<P> <P></P></DIV></DIV><br />
</code><br />
<br />
</div></div><br />
<br />
Bueno esas se pueden ir modificando para lo que necesite cada uno, para obtener un color en Bgcolor se puede usar, por ejemplo <a href="http://www.kanzaki.com/docs/colortable-t.html">esta pagina</a>Uno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.com2tag:blogger.com,1999:blog-1116415811237822788.post-64184963295466688802008-10-01T09:21:00.000-07:002008-10-01T09:26:32.184-07:00Cuadro "suscribirse por e-mail"<div style="font-family: inherit;">Para hacer esto es necesario tener una cuenta en <a href="http://www.feedburner.com/">feedburner</a> como conte <a href="http://cosasparatublog.blogspot.com/2008/10/feed-rss-atom-para-tu-blog-suscriciones.html">en la entrada anterior.</a><br />
Luego vamos a <a href="http://www.feedburner.com/">feedburner</a>, a la pestaña “Publicize”, y en la barra de la izquierda elegimos la opción “Suscripciones por email”.<br />
Ponemos Activar, copiamos el código y lo pegamos en un nuevo Gadget <span style="font-family: inherit;">HTML/JAVASCRIPT, se puede cambiar el texto que esta en ingles por uno en español, y hasta se puede eliminar el enlace a feedburner. <br />
Con eso ya esta listo ;)<br />
</span></div>Uno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.com2tag:blogger.com,1999:blog-1116415811237822788.post-68466485347405816392008-10-01T09:04:00.000-07:002008-10-01T09:21:54.909-07:00Feed, Rss, Atom para tu blog. Suscriciones a las entradas o comentariosSi tenes un blog de blogger aunque no lo sepas ya tenes un feed este es:<br />
<br />
<span style="font-family: verdana,geneva;"><a class="linkification-ext" href="http://tublog.blogspot.com/atom.xml" title="Linkification: http://tublog.blogspot.com/atom.xml">http://tublog.blogspot.com/atom.xml</a><br />
<br />
<br />
Podes usar este pero el probelma es que no te dice cuanta gente se suscribió, no podes agregarle publicidad, no podes hacer que se suscriban por e-mail, en fin no podes hacer mucho. Para hacer todas estas cosas el mejor que vi y que recomendaban todos es </span><span style="font-family: verdana,geneva;"> <a href="http://www.feedburner.com/">feedburner</a>, que no es casualdad que sea del dominio de google el cual lo compro por rumores ya que no ha dicho por mas o menos una modesta suma de 100 millones de dolares. 0.o</span><br />
<span style="font-family: verdana,geneva;"><br />
</span><br />
<span style="font-family: verdana,geneva;">1.hay que </span><span style="font-family: verdana,geneva;"> <a href="https://www.feedburner.com/fb/a/register;jsessionid=3A848F0F3E10E201C979133A1C9F6D81.fb1">Registrarse</a>.<br />
2. ponemos en el cuadro que aparece nuestro feed:<br />
</span><span style="font-family: verdana,geneva;"><a class="linkification-ext" href="http://tublog.blogspot.com/atom.xml" title="Linkification: http://tublog.blogspot.com/atom.xml">http://tublog.blogspot.com/atom.xml</a><br />
3. elegimos el titulo del blog para el feed y el nombre del feed.<br />
4. podemos </span><span style="font-family: verdana,geneva;">abajo donde dice “ir directamente a la gestión del feed” <br />
</span><span style="font-family: verdana,geneva;">5.Hay que ir a nuestro panel de blogger, y elegir la pestaña “Configuración”></span><span style="font-family: verdana,geneva;">la subpestaña “Feed del sitio”></span><span style="font-family: verdana,geneva;"> en la opción “Publicar URL redireccionada del feed”, </span><span style="font-family: verdana,geneva;">copiamos la URL del feed de feedburner que acabamos de crear, que será algo parecido a: <a class="linkification-ext" href="http://feeds.feedburner.com/titulodetublog" title="Linkification: http://feeds.feedburner.com/titulodetublog">http://feeds.feedburner.com/titulodetublog</a>.</span> <br />
<div style="text-align: justify;"><span style="font-family: verdana,geneva;">6. Para terminar vamos a la pestaña "diseño"> "añadir gadget">"enlaces de suscripcion" y listo. <br />
</span></div>Uno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.com1tag:blogger.com,1999:blog-1116415811237822788.post-15600734273459518562008-09-03T09:54:00.000-07:002008-09-03T10:12:48.019-07:00Nube de etiquetas, muy coqueto.Viste en <a href="http://lablogueria.blogspot.com/2008/08/nube-de-etiquetas-animada-flash.html">la blogueria</a>, la cual lo tomo de <a href="http://www.bloggerbuster.com/2008/08/blogumus-flash-animated-label-cloud-for.html">bloggerbusters</a><br />
Ejemplo al costado de este blog o al costado de <a href="http://lomasinteresante.com.ar">este</a> blog<br />
<br />
Para añadirlo buscamos en edición>Html, con la casilla de expandir artilugios tildada<br />
<blockquote><code><b:section class='sidebar' id='sidebar' preferred='yes'></code></blockquote>Y abajo pegar este código:<br />
<blockquote><code><b:widget id='Label99' locked='false' title='Labels' type='Label'><br />
<b:includable id='main'><br />
<b:if cond='data:title'><br />
<h2><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example<br />
swfobject.js' type='text/javascript'/><br />
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div><br />
<script type='text/javascript'><br />
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");<br />
// uncomment next line to enable transparency<br />
so.addParam("wmode", "transparent");<br />
so.addVariable("tcolor", "0x333333");<br />
so.addVariable("mode", "tags");<br />
so.addVariable("distr", "true");<br />
so.addVariable("tspeed", "100");<br />
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");<br />
so.addParam("allowScriptAccess", "always");<br />
so.write("flashcontent");<br />
</script><br />
<b:include name='quickedit'/><br />
</div><br />
</b:includable><br />
</b:widget></code><br />
</blockquote><br />
Y listo se agrega como un gadget mas.Uno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.com2tag:blogger.com,1999:blog-1116415811237822788.post-11384692801841682262008-09-02T06:47:00.000-07:002008-09-02T07:14:13.785-07:00La mejor forma de comentarios en bloggerLa mejor forma que vi hasta ahora es la que uso, asi que para el ejemplo tan solo toca en comentarios o anda bajo la entrada y fijate como lo tengo<br /><br />Primero en blogger>configuración>comentarios tiene que estar la opcion en ventana emergente para que se vean bien.<br /><br />Expande la plantilla de artilugios y busca <code></body></code>, y añade este código justo antes:<br /><br /><blockquote><code><br /><script languange='javascript'>function showcomment(a,b){var jackbookdotcom = document.getElementById(a);jackbookdotcom.style.display = 'none';jackbookdotcom = document.getElementById(b);jackbookdotcom.style.display = 'block';}</script><br /></code><br /></blockquote>Después buscamos este:<br /><blockquote><code><br /><span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/><br /><br /></b:if></a></b:if></b:if></span><br /></code><br /></blockquote><br />Y lo sustituímos por este:<br /><blockquote><code><br /><span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.url + "#comments"' ><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></b:if></b:if></span><br /></code></blockquote><br />Por último buscamos este:<br /><blockquote><code><br /><b:includable id='comments' var='post'><br /><br /><div class='comments' id='comments'><a name='comments'/><br /><br /><b:if cond='data:post.allowComments'><h4><b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:<b:else/><data:post.numComments/> <data:commentLabelPlural/>:</b:if></h4><dl id='comments-block'><b:loop values='data:post.comments' var='comment'><dt class='comment-author' expr:id='"comment-" + data:comment.id'><a expr:name='"comment-" + data:comment.id'/><b:if cond='data:comment.authorUrl'><a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><b:else/><data:comment.author/></b:if><data:commentPostedByMsg/></dt><dd class='comment-body'><b:if cond='data:comment.isDeleted'><span class='deleted-comment'><data:comment.body/></span><b:else/><p><data:comment.body/></p></b:if></dd><dd class='comment-footer'><span class='comment-timestamp'><a expr:href='"#comment-" + data:comment.id' title='comment permalink'><data:comment.timestamp/></a><b:include data='comment' name='commentDeleteIcon'/></span></dd></b:loop></dl><p class='comment-footer'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a></p></b:if><div id='backlinks-container'><div expr:id='data:widget.instanceId + "_backlinks-container"'><b:if cond='data:post.showBacklinks'><b:include data='post' name='backlinks'/><br /><br /></b:if></div></div></div><br /><br /></b:includable><br /></code></blockquote><br />Y lo sustituímos todo por este:<br /><blockquote><code><br /><b:includable id='comments' var='post'><br /><div class='comments' id='comments'><br /><a name='comments'/><br /><b:if cond='data:post.allowComments'><br /><!--<br /><h4><br /><b:if cond='data:post.numComments == 1'><br />1 <data:commentLabel/>:<br /><b:else/><br /><data:post.numComments/> <data:commentLabelPlural/>:<br /></b:if><br /></h4><br />--><br /><div class='onepx'><br /><dl id='comments-block' style='height: 1px;overflow:hidden;'><br /><b:loop values='data:post.comments' var='comment'><br /><dt class='comment-author' expr:id='"comment-" + data:comment.id'><br /><a expr:name='"comment-" + data:comment.id'/><br /><b:if cond='data:comment.authorUrl'><br /><a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br /><b:else/><br /><data:comment.author/><br /></b:if><br /><data:commentPostedByMsg/><br /></dt><br /><dd class='comment-body'><br /><b:if cond='data:comment.isDeleted'><br /><span class='deleted-comment'><data:comment.body/></span><br /><b:else/><br /><p><data:comment.body/></p><br /></b:if><br /></dd><br /><dd class='comment-footer'><br /><span class='comment-timestamp'><br /><a expr:href='"#comment-" + data:comment.id' title='comment permalink'><br /><data:comment.timestamp/><br /></a><br /><b:include data='comment' name='commentDeleteIcon'/><br /></span><br /></dd><br /></b:loop><br /></dl><br /></div><br /><!--<br /><p class='comment-footer'><br /><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a><br /></p><br />--><br /><div id='comment-parent' onmouseover='showcomment("hoverme", "comment-child");' style='margin-bottom: 50px;'><br /><h3 id='hoverme' style='display:block;'><br /><img alt='Deja aqui tu comentario' src='URL IMAGEN QUE OCULTA EL FORMULARIO' title='Deja aqui tu comentario'/><br /></h3><br /><br /><!-- este iframe de abajo es el formulario de comentarios. Puedes modificar el alto y el ancho y añadir imagen de fondo, entre otras modificaciones --><br /><br /><div id='comment-child' style='border:none; display: none; height:750px; width: 440px; margin-bottom: 5px; background-image: url (AQUI LA URL IMAGEN FONDO FORMA COMENTARIOS); border: 2px solid red;'><br /><iframe expr:src='data:post.addCommentUrl' height='100%' scrolling='yes' style='border:none;' width='100%'/><br /><br/><br /></div><br /><!-- fin del iframe --><br /></div><br /></b:if><br /><div id='backlinks-container'><br /><div expr:id='data:widget.instanceId + "_backlinks-container"'><br /><b:if cond='data:post.showBacklinks'><br /><b:include data='post' name='backlinks'/><br /></b:if><br /></div><br /></div><br /></div><br /></b:includable><br /></code></blockquote><br /><br />Donde hay que poner donde dice las imágenes, la que se muestra y se va al pasarle el mousse por encima y la imagen de fondo. Si queres poner un color de fondo, sustituí<code><br />backgound-image: url (AQUI LA URL IMAGEN FONDO FORMA COMENTARIOS)<br /></code><br />Por background: #f5f5f5, o el color que quieras<br /><br /><blockquote>Visto y tomado de <a href="http://lablogueria.blogspot.com/2008/01/personalizando-el-formulario-de.html">La blogueria</a></blockquote>Uno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.com2tag:blogger.com,1999:blog-1116415811237822788.post-3893635569426349962008-09-01T10:53:00.000-07:002008-09-01T12:03:07.831-07:00Reacciones y estrellitas al final del postEstas opciónes se pueden activar desde entradas>Editar entradas en <a href="http://draft.blogger.com/">http://draft.blogger.com</a> pero la mayoria de las veces no funciona y hay que, ademas de activarlo, añadir manualmente lo siguiente en edición HTML con la casilla de Expandir artilugios Activada:<br />Buscamos<br /><blockquote><code><br /><div class='post-footer-line post-footer-line-3'/><br /></code></blockquote><br />O puede que aparezca sin el div asi:<br /><blockquote><code><br /><p class='post-footer-line post-footer-line-3'/><br /></code></blockquote><br />O la footer-line-1, o la foteer-line-2, dependiendo dondque se quiera agregar, lo mas comun es al final,pero por ejemplo yo lo tengo en la 1<br /><blockquote><code><br /><!--ESTRELLITAS--><br /><span class='star-ratings'><br /><b:if cond='data:top.showStars'><br /><div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'><br /></div><br /></b:if><br /></span><br />lt;!--FIN  ESTRELLITAS--><br /><!--REACCIONES--><br /><br /><span class='reaction-buttons'><br /><b:if cond='data:top.showReactions'><br /><table border='0' cellpadding='0' width='100%'><tr><br /><td valign='center'><span class='reactions-label'><br /><data:top.reactionsLabel/></span><br /></td><br /><td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td><br /></tr></table><br /></b:if><br /></span><br /><!--FIN REACCIONES--><br /></code><br /></blockquote><br /><br />Como se ve en el código esta el de las reacciones y el de las estrellitas tipo youtube para terminar de agregar las estrellitas buscamos <code></code><blockquote><b:include name='feedLinks'/><br /><br /> </blockquote>y debajo añadimos:<br /><blockquote><code><br /><b:if cond='data:top.showStars'><br /><script src='<a class="linkification-ext" href="http://www.google.com/jsapi" title="Linkification: http://www.google.com/jsapi">http://www.google.com/jsapi</a>' type='text/javascript'/><br /><script type='text/javascript'><br />google.load("annotations", "1");<br />function initialize() {<br />google.annotations.setApplicationId(<data:top.blogspotReviews/>);<br />google.annotations.createAll();<br />google.annotations.fetch();<br />}<br />google.setOnLoadCallback(initialize);<br /></script><br /></b:if><br /></code></blockquote><br /><br /><br />Puede que se agreguen dos bloques de estrellitas para eliminar el segundo buscamos la segunda vez que aparece<br /><blockquote><code><br /><b:if cond='data:top.showStars'><br /></code><br /></blockquote>y eliminamos todo el bloque.Uno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.com5tag:blogger.com,1999:blog-1116415811237822788.post-2119164584357019102008-08-29T20:57:00.000-07:002008-08-29T21:32:33.226-07:00Entradas aleatorias: Slide dinámico y vinculos estáticos<a href="http://draft.blogger.com/post-edit.g?blogID=1116415811237822788&postID=211916458435701910" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a>Para mostrar las entradas como lo tengo a la derecha vamos a:<br />
<a href="http://draft.blogger.com/goog_1220138886428"><br />
</a><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://stuffablog.com/bstir/index.html#"><img border="0" src="http://boxstr.com/files/3343426_sdmr1/bstir.png" /></a></div>Ponemos la dirección de la web de la que queremos mostrar las entradas, elegimos el modo, fijo oestático, con fondo sin fondo, tipo de letra, cantidad de entradas (máx. 5). Copiamos el código lo agregamos en un nuevo gadget Java/HTML y listo el pollo.<br />
Ejemplos: <a href="http://stuffablog.com/bstir/sample.html">Acá</a><br />
<br />
Para crear un link que lleve a una entrada al azar añadir el siguiente código en un nuevo gadget Java/HTML:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://draft.blogger.com/post-edit.g?blogID=1116415811237822788&postID=211916458435701910" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div><code><br />
</code><br />
<blockquote><div id="myLuckyPost"></div> <script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; window.location = entry.link[0].href;} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Click <img src="<a class="linkification-ext" href="http://img368.imageshack.us/img368/4980/dadosbut7.gif" title="Linkification: http://img368.imageshack.us/img368/4980/dadosbut7.gif">http://img368.imageshack.us/img368/4980/dadosbut7.gif</a>">'; document.getElementById('myLuckyPost').appendChild(a); } </script> <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script></blockquote><br />
<br />
Podés cambiar donde dice Click por lo que te parezca como tambien la imágen de los dados por la que quieras.<br />
Ejemplo: en la barra lateral de este blog bajo el cuadro de entradas aleatorias dinámicas.Uno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.com0tag:blogger.com,1999:blog-1116415811237822788.post-61811076536331428032008-08-29T20:50:00.000-07:002008-08-29T20:57:49.471-07:00Añadir código HTML el los postEs una cagada que no puedas citar códigos HTML, para hacer eso usamos esta página <br />
<a href="http://www.simplebits.com/cgi-bin/simplecode.pl?mode=process">Simple Code</a><br />
Pegamos lo que nos generó y listo.<br />
<br />
Ejemplo:<br />
<code><br />
<head><br />
<br />
<script cualquiera> </script><br />
<br />
</head><br />
</code>Uno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.com0tag:blogger.com,1999:blog-1116415811237822788.post-11534816558098263432008-08-29T20:42:00.000-07:002008-08-29T20:50:22.161-07:00Ponerle un favicon a tu blogEs asi de simple:<br />
Abajo del head agregar<br />
<code><br />
<link rel="shortcut icon" href="link-de-la-foto"></link><br />
</code><br />
Remplazar <i>link-de-la-foto</i> por su foto tiene que ser pequeña, algo asi como un emoticon. 16x16.Uno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.com0tag:blogger.com,1999:blog-1116415811237822788.post-20288963173754932522008-08-29T20:18:00.000-07:002008-08-29T20:28:57.056-07:00Crear listas de musicaAyer estube como 3 horas viendo y probando servicios para poner musica en el blog y encontré uno que me dejo tan satisfecho que le hago un post. Probé estos:<br />
<a href="http://www.mediamaster.com/">MediaMaster</a><br />
<span style="text-decoration: underline;"><a href="http://www.goear.com/">Goear</a><br />
</span><a href="http://www.sonific.com/">Sonific</a><br />
<a href="http://ivoon.com/">Ivoon</a><br />
<a aiotarget="false" aiotitle="http://www.myflashfetish.com" href="http://www.myflashfetish.com/"><span style="color: #3333ff;">myflashfetish</span></a><br />
El mejor el último, fácil, rápido y completo. Hasta tiene para hacer listas de videos lo cual puede que haga algun día. Tenía mucha musica como Goear pero un mejor reproductor y mas personalizable y si no esta la musica que buscas podes subirla.<br />
<br />
Me resultó interesante ver que el servicio que ofrecen Myflashfetish es un rejunte de servicios de otras páginas, usa las canciones encontradas en youtube.com y en seeqpod.com, los reproductores de mixpod.com y la paleta de colores de colourlovers.com<br />
<br />
Asi que el que quiera poner musica le recomiendo<br />
<img alt="" border="0" id="BLOGGER_PHOTO_ID_5239247498933633074" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMYqYYNvjMkdlfFgIOmCODDWDwqCisvM3peeSourGEPgdFwBYIBxJdMH4HxCcyFr1hyphenhyphenNqrtKflyRAyKeNBMLoVFfm7tCPPF1IejvOkQuibZMqhehoks-CB4LcGatm_Ux-k-K89dhJV-xg/s320/logo.gif" style="cursor: pointer; display: block; margin: 0px auto 10px; text-align: center;" /><br />
<br />
Les dejo la lista de canciones que me armé, es una lista de canciones en español, la mayoria de protesta. Con algo de letra y no de letra hablando del amor que de esas esta repleto.<br />
<br />
<center><p style="visibility:visible;"><embed border="0" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" align="middle" flashvars="myid=12220697&path=2008/08/27&mycolor=FAFAFA&mycolor2=0C1112&mycolor3=498C59&autoplay=false&rand=1&f=4&vol=100&pat=0&grad=false" src="http://assets.myflashfetish.com/swf/mp3/fetish-mp3player.swf" type="application/x-shockwave-flash" height="270" bgcolor="FAFAFA" width="410" wmode="window" name="myflashfetish"/><br/><a href="http://www.myflashfetish.com/playlist/12220697"><img border="0" alt="Music" src="http://assets.myflashfetish.com/images/btn-get-tracks.gif" title="Get Music Tracks!"/></a><a href="http://www.mixpod.com" target="_blank"><img border="0" alt="Playlist" src="http://assets.myflashfetish.com/images/btn-create.gif" title="Create Your Free Playlist!"/></a><a href="http://www.mixpod.com/ringtones/12220697"><img border="0" alt="Ringtones" src="http://assets.myflashfetish.com/images/btn-get-ringtones.gif" title="Get Ringtones From This Playlist!"/></a></embed></p></center><img border="0" style="visibility:hidden;width:0px;height:0px;" width="0" src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyMTk4ODQyNTcyMTgmcHQ9MTIxOTg4NDI1OTcxOCZwPTE4MDMxJmQ9Jm49Jmc9MQ==.gif" height="0"/>Uno mas del montonhttp://www.blogger.com/profile/16433972850571471366noreply@blogger.com1