;  MY LIFE: AYUDA A BLOGGERS RESUMEN DE COMANDOS HTML PUBLICADOS

29 marzo 2012

AYUDA A BLOGGERS RESUMEN DE COMANDOS HTML PUBLICADOS




1.PONER UNA IMAGEN Y CUANDO PONGAMOS EL RATÓN ENCIMA QUE CAMBIE POR OTRA


Añadimos al redactar la entrada en HTML esta línea, la imagen primera es que la que saldrá por defecto y la segunda es la que aparece al poner el ratón encima.


<img src="URL PRIMERA IMG" onmouseover="this.src='URL SEGUNDA IMG';" onmouseout="this.src='URL PRIMERA IMG';"/>

Read more: http://sarahuesca.blogspot.com/2011/04/cambiar-imagen-al-pasar-el-raton.html#ixzz1qViHSAjP







2. PONER UNA TABLA EN UNA ENTRADA.


Nos vamos a redactar y en HTML ponemos lo siguiente (este ejemplo es de 3 columnas por 2 filas)




<table border=1><td>columna 1, fila 1</td>
<td>columna 2, fila 1</td><td>columna 3, fila 1</td>
<tr><td>columna 1, fila 2</td>
<td>columna 2, fila 2</td>
<td>columna 3, fila 2</td></table>

Queda así:

columna 1, fila 1columna 2, fila 1columna 3, fila 1
columna 1, fila 2columna 2, fila 2columna 3, fila 2

Lo que está en rojo en el código es el texto que va a haber en cada celda de la tabla. Lo más fácil para no liaros es que copiéis el código así y luego en Redactar ya vais cambiando el texto de cada celda según necesitéis. El tamaño de las celdas se ajustará al texto más largo que metáis en ella automáticamente.


Read more: http://sarahuesca.blogspot.com/2011/05/cosas-para-bloggers-poner-una-tabla-en.html#ixzz1qVj9f8JB





3. MODIFICAR EL FORMATO DE UNA TABLA


CAMBIAR EL ANCHO DEL BORDE DE LA TABLA.


Como veis, en el principio del código establecíamos el grosor del borde de la tabla con el comando border=1. Si no queremos borde, tendremos que cambiar ese uno por un 0, y si queremos otro tipo de grosor deberemos de cambiarlo por otro número.


CAMBIAR EL COLOR AL BORDE DE LA TABLA.

Para cambiar el color al borde deberemos insertar detrás del grosor que hemos establecido el color que queremos, añadiendo la etiqueta bordercolor. Si por ejemplo queremos que nuestro borde sea rojo, el código del ejemplo sería el siguiente:

<table border=5 bordercolor="red"><td>columna 1, fila 1</td>
<td>columna 2, fila 1</td><td>columna 3, fila 1</td>
<tr><td>columna 1, fila 2</td>
<td>columna 2, fila 2</td>
<td>columna 3, fila 2</td></table>

Read more: http://sarahuesca.blogspot.com/2011/05/cosas-para-bloggers-como-modificar-el.html#ixzz1qVjekPEq 
PONER UN COLOR DE FONDO A TODA LA TABLA



Si lo que queremos es que la tabla tenga otro color de fondo diferente al de la página, lo haremos poniendo detrás del grosor del borde, la etiqueta bgcolor="color que queramos".


Read more: http://sarahuesca.blogspot.com/2011/05/cosas-para-bloggers-como-modificar-el.html#ixzz1qVjuiJfg
 


PONER COLOR DE FONDO SÓLO A ALGUNAS CELDAS

Si por ejemplo lo que queremos es poner cada fila de un color, la etiqueta que usaremos será la misma que antes bgcolor, pero en este caso lo colocaremos en el código detrás de <tr (antes de cerrar con >).

Nuestro código de ejemplo quedaría así:

<table border=5 bgcolor="orange"><td>columna 1, fila 1</td>
<td>columna 2, fila 1</td><td>columna 3, fila 1</td>
<tr bgcolor="yellow"><td>columna 1, fila 2</td>
<td>columna 2, fila 2</td>
<td>columna 3, fila 2</td></table>


Read more: http://sarahuesca.blogspot.com/2011/05/cosas-para-bloggers-como-modificar-el.html#ixzz1qVk0d72s



COMO PONER COMO FONDO DE LA TABLA UNA IMAGEN


Si lo que queremos es poner de fondo una imagen fija o un gif animado, lo haremos con la etiqueta background y la situaremos detrás de table. En nuestro ejemplo el código quedaría así:




<table background="URL DE LA IMAGEN" border=5><td>columna 1, fila 1</td>
<td>columna 2, fila 1</td><td>columna 3, fila 1</td>
<tr><td>columna 1, fila 2</td>
<td>columna 2, fila 2</td>
<td>columna 3, fila 2</td></table>


Read more: http://sarahuesca.blogspot.com/2011/05/cosas-para-bloggers-como-modificar-el.html#ixzz1qVk56wZv
 

3. CAMBIAR LOS TIPOS DE LETRA, COLOR Y TAMAÑOS AL TÍTULO DE UNA SOLA ENTRADA


Ir a redactar y escribir en el cuerpo de la entrada (no en el título) el título que vais a utilizar y cambiar el tamaño, color, letra a lo que queráis. 
Después iros a HTML y copiar todo lo que pone. Ahora vamos al título y lo pegamos. Volvemos a la opción redactar, borramos el título del cuerpo del artículo y escribimos ya lo que queramos.
Ojo, el que sepa lenguaje html lo puede hacer directamente, yo como no se dejo que sea blogger el que me lo diga jejeje.
Read more: http://sarahuesca.blogspot.com/2011/04/como-cambiar-el-color-y-el-estilo-al.html#ixzz1qVklfrCh


4. COMO PONER UN TEXTO EN UN RECUADRO




Nos vamos a nueva entrada, y cuando lleguemos a la parte del texto que queremos encuadrar pasamos de "redactar" a "edición de HTML" y escribimos:



<p style="border:1px solid black">Lo que sea</p>


Luego volvemos al botón "redactar" y continuamos con lo que queramos.


Read more: http://sarahuesca.blogspot.com/2011/04/cosas-para-bloggers-como-poner-el-texto.html#ixzz1qVlbNeRo



5. PONER EL "LEER MAS" AUTOMATIZADO Y CON FOTO EN MINIATURA


 Entramos en Diseño > Edición de HTML, y marcamos la casilla Expandir plantillas de artilugios. Buscamos la siguiente etiqueta:
<data:post.body/>
Y la sustituimos (borramos ésta y ponemos lo siguiente) por:




<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
Donde pone Leer más (en rojo) podemos poner nosotros lo que queramos: puedes leer más, sigue leyendo...o cualquier cosa con la que queramos personalizar nuestro blog.

Ahora pegamos antes de </head> lo siguiente:

<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 125;
img_thumb_width = 125;
</script>


<script type='text/javascript'>
//<![CDATA[


/******************************************


(C)2008 by Anhvo


visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}


function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}


var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>
 Con ésto ya tenemos la opción "Leer más" automatizada en nuestro blog.

Read more: http://sarahuesca.blogspot.com/2011/04/cosas-para-bloggers-como-poner-el-leer.html#ixzz1qVmB233V



6. CAMBIAR LA ESTÉTICA DEL "LEER MÁS"


Configurar el tamaño de las imágenes y el número de palabras que aparecerán en el resumen del  post.


Ésto se hace al principio del script:



summary_noimg = 400; Número de caracteres cuando la entrada NO tiene una imagen
summary_img = 300; Número de caracteres cuando la entrada tiene una imagen
img_thumb_height = 125; Alto de la imagen en miniatura
img_thumb_width = 125; Ancho de la imagen en miniatura



Modificamos los números según lo que queramos y ya lo tenemos hecho.




Cambiar el color de fondo, del texto....


Tenemos que pegar antes de  ]]></b:skin> lo siguiente:

.rmlink {
float:right;
background: #04B4AE; /* Color de fondo */
border: 1px solid #000;
font-weight: bold;
padding: 1px 2px;
margin-left:20px;
}
.rmlink a {
color: #FFF; /* Color del texto */
text-decoration: none;
font-weight: bold;
}
.rmlink:hover {
background: #045FB4; /* Color de fondo al pasar el cursor */
border: 1px solid #000;
text-decoration:none;
}
Pondremos el color que queramos en lugar del texto que tenemos en verde.




Cambiar el texto o poner una foto en su lugar


Ya os comenté que el texto se podía cambiar en el script, simplemente modificándo el Leer más que aparecía en rojo; pero también podéis usar una imagen en lugar de un texto. Para ello debemos sustituir el texto por el código de la imagen que vayamos a utilizar:


<img src="URL de la imagen" />


Read more: http://sarahuesca.blogspot.com/2011/04/cosas-para-blogger-como-modificar-la.html#ixzz1qVnwMQ7L



7. PONER UN ENLACE DE ENTRADA ALEATORIA




Añadir Gadget y escogemos uno tipo HTML/Javascript y en la ventana emergente pegamos lo siguiente:




<div id="myLuckyPost"></div>
<script type='text/javascript'>
function showLucky(root){
var feed = root.feed;
var entries = feed.entry || [];
var entry = feed.entry[0];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
window.location = entry.link[j].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 readLucky(root){
var feed = root.feed;
var total = parseInt(feed.openSearch$totalResults.$t,10);
var luckyNumber = Math.floor(Math.random()*total);
luckyNumber++;
fetchLuck(luckyNumber);
}
function feelingLucky(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>

<a href="#random" onclick="feelingLucky()" title="Entrada al azar">Entrada al azar</a>







La línea que está en verde es la que nos va a permitir poner el enlace detrás de cada entrada. El gadget que hemos hecho lo dejamos como está dónde queramos, y pasamos a Edición HTML con Plantillas de artilugios expandidas.
Buscamos la orden<data:post.body/> (si damos a CTRL+F nos saldrá un cuadradito de búsqueda arriba de la pantalla ponemos la orden y nos llevará directamente a ella). Añadimos la línea <a href="#random" onclick="feelingLucky()" title="Entrada al azar">Entrada al azar</a> detrás de la orden mencionada y YA ESTÁ.

Lo único que queda es que si queremos cambiar el texto que aparecerá, en vez de lo que está en rosa (Entrada al azar) ponemos lo que más nos guste (en mi caso he puesto Quieres leer otro post? Adelante!). 


Read more: http://sarahuesca.blogspot.com/2011/03/cosas-para-bloggers-como-poner-un.html#ixzz1qVpIgW8c