Cómo hacer tablas en tus entradas para poner texto o imágenes

Como suelo hacer los miércoles, traigo otro tutorial, éste me lo han pedido por mail con el famoso ya Tutorial a la Carta.

Se trata de: Cómo colocar imágenes dentro de tablas o texto dentro de tablas.


Vamos a verlo, como muchas y muchos ya sabréis algo sobre código para programar vuestro blog y vuestras entradas, no creo que os perdáis pero como siempre, os comentaré para qué es cada cosa.

Cuando vayamos a hacer nuestra entrada, sabéis que arriba a la izquierda tenéis una pestañita que dice: HTML
Pues haréis click ahí.
Este es el código para las tablas, lo copiaréis y lo pegaréis en vuestra entrada en HTML.

<table align="center" bgcolor="#FA58AC" border="2" bordercolor="#F7819F" cellpadding:"1" cellspacing="3" >

  <tbody>
<tr>
    <td><img src="URL de la imágen" height="150" width="150" /></td>
    <td><img src="URL de la imágen" height="150" width="150" /></td>
  </tr>
<tr>
    <td><img src="URL de la imágen" height="150" width="150" /></td>
    <td><img src="URL de la imágen" height="150" width="150" /></td>
</tr>
</tbody></table>

Bien por partes para que podáis personalizarlo:
<table align="center" bgcolor="#FA58AC" border="2" bordercolor="#F7819F"  cellpadding="1" cellspacing="3" >

table align----> la alineación de la tabla. Centro, derecha o izquierda: center, right o left 
bgcolor----> color de fondo. 
border----> grosor del borde. 
bordercolor----> color del borde. 
cellpadding----> espacio entre el borde y lo que hay dentro de la tablita. 
cellspacing----> espacio entre las celdas de la tabla.

Todo eso lo podéis cambiar y personalizar como queráis.
Una vez ya dentro de la tabla vemos que os he puesto URL de la imagen, pues ahí pegáis a cascoporro la dirección de la imagen que queréis que se vea en la celda. Luego al ladito dice: 
height="150" width="150"
Height es lo alto de la imagen mientras que width es lo ancho, ponerle ahí lo que vosotros queráis, yo recomiendo que todas las imágenes sean igual de grandes para que no se vea una tabla toda descojonada. 

Cuando terminéis con la entrada pues le dais a vista previa y ya está. Yo solamente he puesto 4 imágenes si os fijáis en el código es así todo el rato:

<tr>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
  </tr>
Si queréis más celdas pues entre el <tr> y el </tr> añadís más líneas del mismo código que sería éste:  <td><img src="URL de la imagen" height="150" width="150" /></td>
O sea os quedaría así:
<tr>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
</tr>


Ahí tendríais una línea con 6 imágenes en línea o texto. Que queréis tres fotos y debajo otras tres, pues dejáis entre<tr> y </tr> solamente tres líneas de código, hacéis un Enter y debajo copiáis lo mismo con el <tr> y </tr> O sea algo así:
<tr>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
    <td><img src="URL de la imagen" height="150" width="150" /></td> 
  </tr>
<tr>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
    <td><img src="URL de la imagen" height="150" width="150" /></td>
    <td><img src="URL de la imagen" height="150" width="150" /></td> 
  </tr>


¿Queréis poner TEXTO en lugar de imágenes? Pues quitáis lo que dice de: <img src="URL de la imagen" height="150" width="150" /> y escribís lo que queráis poner.

Texto de pruebas 1	Texto de pruebas 1	Texto de pruebas 1
Texto de pruebas 1	Texto de pruebas 1	Texto de pruebas 1

Quedando el código de la tabla en el HTML así:

<table align="center" border="2" bordercolor="#F7819F" cellpadding="1" cellspacing:="3">
  <tbody>
<tr>
    <td>Texto de pruebas 1</td>
    <td>Texto de pruebas 1</td>
    <td>Texto de pruebas 1</td>
  </tr>
<tr>
    <td>Texto de pruebas 1</td>
    <td>Texto de pruebas 1</td>
    <td>Texto de pruebas 1</td>
</tr>
</tbody></table>

¿Imagen y texto? Pues después de lo ancho y alto de la URL de la imagen y del simbolito de /> ponéis un <br> y debajo escribís lo que queráis. Luego aquí en el editor centráis el texto y ya estará.

Texto aquí	Texto aquí	Texto aquí
Texto aquí	Texto aquí	Texto aquí

Creo que es muy fácil teniendo en cuenta el Aviso que os pongo a continuación.
Espero que os sirva Besotes 

✿✿✿
 

AVISO: Mientras lo hacía yo en el blog de pruebas que tengo, si lo hacía en la misma entrada todo de golpe, es decir escribir con la tabla y las imágenes puestas, al pasar el ratón por encima del texto mientras hacía la entrada se me descolocaba todo, se me volvía loco esto.
Solución: Lo hice todo en un bloc de notas (porque así el texto no coge formato), copié primero el texto en la entrada, luego le dí a la pestañita de HTML y donde quería que se viera la tabla con las imágenes puse un <br> que ya sabéis para qué es y justo debajo pegué el código de mi tabla con las imágenes.

Eso me ha pasado a mí probad vosotras a ver si os pasa lo mismo o es cosa de mi navegador.

Fuente:  http://lireth.blogspot.mx/2014/07/fotos-tablas-blogger.html

Read More

Instala botones para compartir en las redes a modo de ventana de inicio

Artículo muy recomenable tomado de http://laventanadewindows.blogspot.com


Hoy os presento algo de lo que estoy muy orgulloso, un script, que permite que a los diez segundos de entrar en una página la cubra una capa oscura semitransparente en cuyo centro hay un cuadro blanco, que contiene los botones de compartir tu blog en las redes sociales, Facebook, Twiter y Google+, y para no hacer muy pesada la navegación por la página, ya que se abriría cada vez que se recargara, incluí una cookie, que impide que se ejecute el script más de una vez al día.
Puedes ver un ejemplo aquí.

1ª PARTE.
El primer código debes añadirlo a la plantilla del blog, para ello ve a Diseño, luego a Edición de HTML y marca la casilla "Expandir plantilla de Artilugios", pégalo justo antes de la etiqueta </head>, si utilizas Google Chrome pulsa Ctrl + F para buscar más deprisa.

<script type='text/javascript'> //<![CDATA[ // Grabar function setCookie(name, value, expires, path, domain, secure) { document.cookie = name + "=" + escape(value) + ((expires == null) ? "" : "; expires=" + expires.toGMTString()) + ((path == null) ? "" : "; path=" + path) + ((domain == null) ? "" : "; domain=" + domain) + ((secure == null) ? "" : "; secure"); } // Leer function getCookie(name){ var cname = name + "="; var dc = document.cookie; if (dc.length > 0) { begin = dc.indexOf(cname); if (begin != -1) { begin += cname.length; end = dc.indexOf(";", begin); if (end == -1) end = dc.length; return unescape(dc.substring(begin, end)); } } return null; } //Borrar function delCookie (name,path,domain) { if (getCookie(name)) { document.cookie = name + "=" + ((path == null) ? "" : "; path=" + path) + ((domain == null) ? "" : "; domain=" + domain) + "; expires=Thu, 01-Jan-70 00:00:01 GMT"; } } //]]> </script> <script type='text/javascript'> function redesociales() { document.getElementById('redessociales').style.display="block"; document.getElementById('fondoscuro').style.display="block"; } </script> <script type='text/javascript'> function redesocialescerrar() { document.getElementById('redessociales').style.display="none"; document.getElementById('fondoscuro').style.display="none"; } </script>

2ª PARTE.
Después busca <!-- clear for photos floats -->, es posible que salga dos veces, debajo de la primera pega lo siguiente:

<div id='redessociales' style='top:35%; left:40%; z-index:2000; display:none; position:fixed; background-color: white; width: 250px; height: 230px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-topleft: 15px; border-top-right-radius: 15px; border-top-left-radius: 15px; text-align: center;'>
<span align='center' style='font-size: 11pt;'><br/><b>¡Sígueme en las redes sociales!</b></span>
<table align='center' border='0' cellpadding='6'><tbody>

<tr><td>&lt;iframe allowTransparency=&#39;true&#39; frameborder=&#39;0&#39; scrolling=&#39;no&#39; src=&#39;http://www.facebook.com/plugins/like.php?href=URL del blog&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=60&amp;action=like&amp;font=tahoma&amp;colorscheme=light&#39; style=&#39;border:none; overflow:hidden; width:73px; height:60px&#39;&gt;&lt;/iframe&gt;</td>

<td><a class='twitter-share-button' data-count='vertical' data-lang='es' data-text='Nombre de tu blog' data-url='URL del blog' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td></tr>

<tr><td align='center' colspan='2'><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone href='URL del blog' size='tall'/></td></tr>

</tbody></table>
<span align='center'>Pulsa <a href='javascript:void(0)' onclick='redesocialescerrar()'>aquí</a> para seguir en la página.</span></div>

La parte en color verde es el mensaje que se mostrará en la parte superior.

Lo que está en rojo, sustitúyelo por los datos que se piden de tu blog.

3ª PARTE.

Definitivamente el último paso consiste en añadir un tercer trozo de código, justo después de la etiqueta <body>, también es posible que te aparezca así:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

<div id='fondoscuro' style='z-index:99; position:fixed; top:0px; left:0px; overflow:visible; height:100%; width:100%; background:#000000; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; -khtml-opacity: 0.8; display:none; color:white;'/>

<script type='text/javascript'>
var comprobar = getCookie(&quot;redesociales&quot;);
if (comprobar != null) {}
else {
var expiration = new Date();
expiration.setTime(expiration.getTime() + 86400000);
setCookie(&quot;redesociales&quot;,&quot;2&quot;,expiration);
setTimeout(&quot;redesociales()&quot;, 10000);
}
</script>

El trozo de código en rojo, es el tiempo en milisegundos que "vivirá la cookie", tras ese tiempo, el usuario podrá volver a ver el cuadro de las redes sociales. Está fijado en 1 día.
El trozo de código en verde, es el tiempo en milisegundos que tardará en abrirse el cuadro de compartir el blog. Está fijado en 10 segundos.

Read More

Cómo conseguir más tráfico en Blogger: Optimizar los títulos

Artículo tomado de  http://laventanadewindows.blogspot.com muy recomendable seguir sus adecuaciones.

La próximas entradas se van a dedicar exclusivamente a ayudarte a conseguir más tráfico para tu blog, es decir, como conseguir más visitas.
Hoy básicamente aprenderás a optimizar los títulos del blog.
Seguramente habrás apreciado que en el navegador siempre aparece por defecto el titulo del blog, y a continuación el titulo de la entrada donde estás, parece que esto importa poco, pero en realidad importa muchísimo. ¿Por que? Pues porque así es como aparecerás en los resultados de búsquedas, de Google por ejemplo; y esto puede determinar que visiten tu sitio o no.

Puede ser que ya hayas optimizado los títulos de tus entradas, ya que muchos otros blogs ofrecen ayuda para este tema, pero solo aquí, en "La Ventana de Windows", podrás obtener el código para optimizar también los títulos de las páginas estáticas, las de las etiquetas y las de los archivos, muy importantes para el tráfico de tu blog.

Para ello necesitamos añadir unos códigos a la plantilla, entonces, vamos a Diseño y luego a Edición de HTML.
Tienes que buscar <title><data:blog.pagetitle/></title>, si utilizas Google Chrome puedes encontrarlo más rápido si pulsas Ctrl + F, y luego sustituirlo por lo siguiente:


<b:if cond='data:blog.url != data:blog.homepageUrl'> <title><data:blog.pageName/> | <data:blog.title/> </title> <b:else/> <title><data:blog.pageTitle/></title> </b:if>

Guardamos los cambios y listo.

Y ahora ya hemos optimizado los títulos de las entradas y páginas estáticas de nuestro blog.

Read More

Agrega un gadgets de noticias en tu blog

Continuando con los gadget de Noticias, hoy os traigo un gadget interesante para instalarlo en vuestros blog, se trata de un cargador de noticias de las web que queráis integrar.
Entrar en  netvibes una web donde en unos solos pasos integramos un cargador de noticias al instante.

Pasos:
Entrar en la web, os registráis y una vez yá registrados os explico los pasos.

1.-Pincháis aquí

2.-Ahora en create widget 

 

 

 

3.- Create multifeed widget

4.- En feed titule,colocáis el título de la web, en feed urlel feed de la web, si queréis poner más de una web, seguir los mismos pasos hacia bajo.

5.- Pincháis en Next step

6,- Rellenáis los siguientes pasos (ver imagen)

7.- Clikáis en Next step y os llevará aquí,y luego en add to my blog

8.- Copiáis el código y lo colocáis en un html/javascript de vuestra sidebar

-Fuente y prueba: Amor Semivillista: Enlace

Read More

Como mostrar las últimas entradas de una categoría especifica en la barra lateral

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Mostrar las últimas entradas de una etiqueta específica en la barra lateral

Ya hemos visto la forma de instalar un widget para mostrar, de forma aleatoria, las últimas entradas en el blog.

Siempre viene bien informar a los lectores de un blog acerca de las novedades que han sido incluidas o los últimos artículos añadidos y, por ello, he dado con un procedimiento muy sencillo para mostrar las últimas entradas o los últimos artículos de una etiqueta (categoría / tema) específico.

Básicamente utilizaremos el gadget "Feed" que ofrece blogger y, por medio de una dirección que apunta al feed de una etiqueta cualquiera, haremos visible los últimos títulos en el blog.

Diseño>añadir gadget (elemento de página)>html-javascript

Utiliza esta URL del feed:

http://elbalcondejaime.blogspot.com/feeds/posts/default/-/Widget%20%2F%20Gadget

En donde debes reemplazar elbalcondejaime por el nombre de tu blog, así como Widget%20%2F%20Gadget por la etiqueta escogida.

Importante: Si la etiqueta escogida está formada por una única palabra, por ejemplo "Fotos" no tendrás problema alguno y bastará con seguir los pasos.

Si por el contrario, la etiqueta escogida está formada por más de una palabra y por tanto, contiene espacios (como es el caso de Widget%20%2F%20Gadget, la etiqueta escogida por mí y que viene a ser: Widget / Gadget), deberás hacer lo siguiente:

1) Localiza una entrada agrupada en esa etiqueta.

2) Ya sea en el pie del post o bajo el título del artículo, localiza el enlace a la etiqueta y, con el botón derecho sobre él, selecciona: copiar la dirección del enlace...




Seguidamente obtendrás una línea similar a esta:

http://elbalcondejaime.blogspot.com/search/label/Widget%20%2F%20Gadget

Con los carácteres %20 que ves en naranja (representan espacios).

Tan solo debes copiar la etiqueta que aparece después de label/ y pegarla en la línea que cité al principio de la entrada.

Haz clic en continuar, una vez tengas todo listo y guarda el gadget para terminar.

Read More

Instala un rotador de banners sin descomprimir ni comprimir nada

Este artículo lo redactó el Potro para Ciudad Blogger uno de los mejores blogs en ayuda y tutoriales blogger. Visita el sitio aqui. para verlo en funcionamiento.

Tener un banner con imágenes cambiantes nos es de mucha ayuda si tenemos muchos banners que mostrar pero queremos ahorrarnos espacio, ya que en el mismo lugar los banners irán cambiando cada tres segundos.

Para colocarlo entra a Plantilla | Edición de HTML y pega antes de </head> lo siguiente:

<script>
//<![CDATA[
/*****
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.com
Please leave this notice intact.
*****/

window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
imgs = d.getElementById('rotator').getElementsByTagName('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
setTimeout(so_xfade,3000); }
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,3000);}
else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return; }
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}
//]]>
</script>

Ahora pega antes de ]]></b:skin> lo siguiente:

/* BANNER CAMBIANTE
----------------------------------------------- */
{margin: 0; padding: 0;}
#rotator {
border: 1px solid #000000;
overflow: hidden;
margin: 0px ;
padding:2px;
position: relative;
width: 430px;
height: 60px;
}
#rotator img {
border: 0;
width: 430px;
height: 60px;
}

Las medidas las puedes cambiar de acuerdo al espacio de tu blog, para ajustar el ancho cambia donde dice width y para cambiar el alto en height.

Por último entra a Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y pega lo siguiente:

<div id="rotator">
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
</div>

Cambia los datos de la URL del enlace e imagen y listo.
En color azul se indica el tiempo en milisegundos que tarda en cambiar cada banner, se puede modificar por otro valor.

Read More