0

Crear nuestro generador de meta tags

Generador de meta tagsPara mi como para ti tal vez, es muy importante que nuestro blog sea encontrado por los motores de búsqueda.
Y si bien existe la opción de introducir la Url de tu blog en:
Bing, Google, Troglog, Baidu, etc,.

Hay una mejor alternativa que es por medio de meta etiquetas o meta tags que harán todo lo posible por mejorar el posicionamiento de tu blog ya sea en google, bing, etc,.
A lo mejor creerás que te mostrare un código o te enlazare a un sitio que genere meta tags pero porque no hacer nuestro propio generador.

Puesdes verlo funcionar ahora!:
Titulo:
Descripción:
Palabras clave:
Autor (Opcional):
Robots (Opcional):

Primer paso:
Primero te transladas a tu plantilla y buscas (Ctrl+F) la etiqueta </head>.
Ya que la encontraste coloca arriba el siguiente código Javascript quien hará el trabajo necesario para generar los meta tags: 
<!--Generador de meta tags-->  
<script type='text/javascript'>

//<![CDATA[

function countit(what){
formcontent=what.form.charcount.value
what.form.displaycount.value=formcontent.length
}

function create(form) {
  if (confirm("Estas seguro(a)?")) {
    form.story.value = "Coloca los meta tags " +
      "después de la etiqueta <head>.nn"; 
    if (form.input1.value != "") {
      form.story.value +="<META NAME="title" CONTENT="" + 
      form.input1.value + "" />n";
    }
    if (form.input2.value != "") {
      form.story.value +="<b:if cond='data:blog.url == data:blog.homepageUrl'>n<META  NAME="Description" CONTENT="" + 
      form.input2.value + "" />n</b:if>n";
    }
    if (form.input3.value != "") {
      form.story.value +="<META NAME="Keywords" CONTENT="" + 
      form.input3.value + "" />n";
    }
    if (form.input4.value != "") {
      form.story.value +="<META NAME="Author" CONTENT="" + 
      form.input4.value + "" />n";
    }
    if (form.input5.value != "") {
      form.story.value +="<META NAME="Robots" CONTENT="" + 
      form.input5.options[form.input5.selectedIndex].value + "" />n";
    }
  }
}

function about() {

   msg=open("about.html","DisplayWindow","toolbar=no,width=280,height=420,directories=no,status=no,scro llbars=yes,resize=no,menubar=no");
}

//]]>
</script>

Segundo paso:
Ahora vas a elementos HTML/Javascript e incrustas el siguiente código HTML quien le dará forma e imagen a la caja o recuadro y color a los 2 botones: 
<form><table><tr><td>
Titulo:
</td><td><input type="text" name="input1" size="40" style="color: #000000; border:1px solid #009900; font-family: 12px 'trebuchet ms',helvetica,sans-serif;" />
</td></tr><tr><td>
Descripción:
</td><td><input type="text" name="input2" size="40" style="color: #000000; border:1px solid #009900; font-family: 12px 'trebuchet ms',helvetica,sans-serif;" />
</td></tr><tr><td>     
Palabras clave:
</td><td><input type="text" name="input3" size="40" style="color: #000000; border:1px solid #009900; font-family: 12px 'trebuchet ms',helvetica,sans-serif;" />
</td></tr><tr><td>
Autor(Opcional):
</td><td><input type="text" name="input4" size="40" style="color: #000000; border:1px solid #009900; font-family: 12px 'trebuchet ms',helvetica,sans-serif;" />
</td></tr><tr><td>
Robots (Opcional):
</td><td><select type="text" name="input5" size="1" style="color: #000000; border:1px solid #009900; font-family: 12px 'trebuchet ms',helvetica,sans-serif;"><option value="All" selected />All<option value="none" />None<option value="Index" />Index<option value="No Index" />No Index<option value="Follow" />Follow<option value="No Follow" />No Follow</select>
</td></tr></table> 
<textarea wrap name="story" style="background-image: url(Url-de-tu-imagen); color: #000000; border:1px solid #009900; font-family: 12px 'trebuchet ms',helvetica,sans-serif; width: 590px; height: 200px;"></textarea>
<input type="button" value="Crear meta tags" onclick="create(this.form)" style="background-color: #007000; color: #FFFFFF; border:1px solid #009900; font-family: 12px 'trebuchet ms',helvetica,sans-serif;" /> <input type="reset" value="Limpiar" style="background-color:#007000; color: #FFFFFF; border:1px solid #009900; font-family: 12px  'trebuchet ms',helvetica,sans-serif;" />
</form>

Y tercer paso:
Por último solo edita los valores como tu decidas para adaptarlo a tu propio blog:

Las 5 opciones:
0
Tamaño de los recuadros
0
Color del texto
0
Color, tamaño y tipo de borde
0
Tipo y tamaño de letra 
<input type="text" name="input1" size="40" style="color: #000000; border:1px solid #009900; font-family: 12px 'trebuchet ms',helvetica,sans-serif;" />

Caja:
0
Imagen
0
Color del texto
0
Color, tamaño y tipo de borde
0
Tipo y tamaño de letra
0
Ancho
0
Alto 
<textarea wrap name="story" style="background-image: url(Url-de-tu-imagen); color: #000000; border:1px solid #009900; font-family: 12px 'trebuchet ms',helvetica,sans-serif; width: 590px; height: 200px;"></textarea>

Botones:
0
Titulo
0
Color de fondo
0
Color de texto
0
Color, tamaño y tipo de borde
0
Tipo y tamaño de letra 
<input type="button" value="Crear meta tags" onclick="create(this.form)" style="background-color: #007000; color: #FFFFFF; border:1px solid #009900; font-family: 12px 'trebuchet ms',helvetica,sans-serif;" />

Recuerda que es una imagen de fondo la que tiene el recuadro, sin embargo podrás cambiarla por color colocando: background-image: url(Url-de-tu-imagen); por background-color: #color;

Ya que generes tus meta tags introdúcelos abajo de la etiqueta <head>.
Espero y te sirva en algo..Hasta pronto!

p1
Publicado por: ★★★★★ Oliver ★★★★★
en: -
Leer mas
0

Detectar el tipo de triangulo con lenguaje C

El siguiente programa es ideal para detectar los 3 tipos de triángulos como es el equilátero, isósceles y escaleno.
Solo se requerirá introducir los valores de los 3 lados pulsando enter:
Ejemplo:
Detectar el tipo de triangulo con lenguaje c


Te dejo el código para que lo puedas editar como lo necesites: 
#include<conio.h>
#include<stdio.h>
#include <stdlib.h>
main(){
 system("color 1e");
 float uno,dos,tres;
 printf("\n======= DETECTAR EL TIPO DE TRIANGULO =======");
 printf("\n\nValor del primer lado: ");
 scanf("%f",&uno);
 printf("\nValor del segundo lado: ");
 scanf("%f",&dos);
 printf("\nValor del tercer lado: ");
 scanf("%f",&tres);
 if((uno==dos) && (dos==tres) && (uno==tres))
 printf("\n\nEl triangulo es: equilatero");
 else if((uno!=dos) && (dos!=tres) && (uno!=tres))
 printf("\n\nEl triangulo es: escaleno");
 else
 printf("\n\nEl triangulo es: isoceles");
 printf("\n\n\n   Pulse cualquier tecla para salir...");
 getch();
 return 0;
}

Veras es sencillo pero espero que en algo te pueda servir.

p1
Publicado por: ★★★★★ Oliver ★★★★★
en: -
Leer mas
0

Super tablas realizadas con solo HTML

Es verdad que existen sitios que son construidos sin ninguna clase de tabla, pero hay algunas ocasiones en que esta se vuelve escencial para mostrar una lista o serie de opciones de cualquier tipo de información.
Tablas realizadas con HTML
En el siguiente tutorial te presento una serie de ejemplos de tablas en documentos HTML que te podrán ser de gran ayuda:
1. Esta tabla es simple y sencillamente básica con una sola columna:
Titulo
1
2
3

<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th>Titulo</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>3</td></tr>
</table>


2. Esta tabla es simple pero con dos columnas:

Titulo 1Titulo 2
11
22
33

<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th>Titulo 1</th><th>Titulo 2</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>3</td><td>3</td></tr>
</table>


3. Y así sucesivamente, agrégale una tercera o las que necesites:

Titulo 1Titulo 2Titulo 3
111
222
333

<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>2</td><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>3</td><td>3</td><td>3</td></tr>
</table>


4. Pero en vez de colocar varios títulos te gustaría solo uno con varios subtítulos, lo puedes realizar con la propiedad colspan:

Titulo
Subtitulo 1Subtitulo 2Subtitulo 3
111
222

Titulo 1Titulo 2Titulo 3
111
222
Mensaje

<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th colspan="3">Titulo</th></tr>
<tr bgcolor="#FFFFFF" align="center"><th>Subtitulo 1</th><th>Subtitulo 2</th><th>Subtitulo 3</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>2</td><td>2</td></tr>
</table>


5. Otra forma que existe es colocando un mensaje al lado izquierdo de la tabla y los tres títulos a la derecha. Lo podrás conseguir con la propiedad rowspan:

Mensaje
Titulo 1Titulo 2Titulo 3
111
222
333

Titulo 1Titulo 2Titulo 3Mensaje
111
222
333

<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th rowspan="5">Mensaje</th></tr>
<tr bgcolor="#FFFFFF" align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>2</td><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>3</td><td>3</td><td>3</td></tr>
</table>


6. Llevando a cabo el ejemplo 4 también podrás colocarle un mensaje a la izquierda:

MensajeTitulo
Subtitulo 1Subtitulo 2Subtitulo 3
111
222

TituloMensaje
Subtitulo 1Subtitulo 2Subtitulo 3
111
222

<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th rowspan="5">Mensaje</th><th colspan="4">Titulo</th></tr>
<tr bgcolor="#FFFFFF" align="center"><th>Subtitulo 1</th><th>Subtitulo 2</th><th>Subtitulo 3</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>2</td><td>2</td></tr>
</table>


7. Igual que en ejemplo anterior, solo reduce el valor para obtener este resultado:

MensajeTitulo
111
1222
2333

TituloMensaje
111
2221
3332

<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th rowspan="2">Mensaje</th><th colspan="3">Titulo</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>2</td><td>2</td><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>3</td><td>3</td><td>3</td></tr>
</table>


8. Por último edita las tablas como desees:

TituloMensaje
1 1 1
1 2 2 2
2 3 3 3

Varía el valor del borde
El tamaño en general de la tabla
El ancho de la tabla
El color de fondo de la tabla y la alineación del texto. 
<table border="8" cellpadding="15" width="100%">
<tr bgcolor="#006633" align="center"><th rowspan="2">Mensaje</th><th colspan="3">Titulo</th></tr>
<tr bgcolor="#880000" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#880000" align="center"><td>1</td><td>2</td><td>2</td><td>2</td></tr>
<tr bgcolor="#880000" align="center"><td>2</td><td>3</td><td>3</td><td>3</td></tr>
</table>

Si observas en todos los ejemplos, los titulos se encuentran alineados hacia el centro pero los puedes alinear a la izquierda (left) o a la derecha (right).

Y si decidieras cambiarle el color del texto puedes colocarle a los títulos este código:

<font color="#color">Titulo</font>

Ojala y te puedan servir en algo.


Acontinuación te dejo 10 ejemplos de tablas fusionadas:

Titulo
1
Titulo
1
2
3
2

<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th>Titulo</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>
<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th>Titulo</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>3</td></tr>
</table>
</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td></tr>
</table>

Titulo 1Titulo 2Titulo 3
111
222
Titulo
1
2
3
Titulo
1
2
3
Titulo
1
2
3

<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>2</td><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>
<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th>Titulo</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>3</td></tr>
</table>
</td><td>
<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th>Titulo</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>3</td></tr>
</table>
</td><td>
<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th>Titulo</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>3</td></tr>
</table>
</td></tr>
</table>

Titulo 1Titulo 2
11
2
Titulo 1Titulo 2
11
22
33
32

<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th>Titulo 1</th><th>Titulo 2</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>
<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th>Titulo 1</th><th>Titulo 2</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>3</td><td>3</td></tr>
</table>
</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>3</td><td>2</td></tr>
</table>

Titulo 1Titulo 2Titulo 3
111
2
Titulo 1Titulo 2Titulo 3
111
222
333
2
323

<table border="1" cellpadding="10" width="100%">
<tr align="center" bgcolor="#FFFFFF"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr align="center" bgcolor="#FFFFFF"><td>1</td><td>1</td><td>1</td></tr>
<tr align="center" bgcolor="#FFFFFF"><td>2</td><td>
<table border="1" cellpadding="10" width="100%">
<tr align="center" bgcolor="#FFFFFF"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr align="center" bgcolor="#FFFFFF"><td>1</td><td>1</td><td>1</td></tr>
<tr align="center" bgcolor="#FFFFFF"><td>2</td><td>2</td><td>2</td></tr>
<tr align="center" bgcolor="#FFFFFF"><td>3</td><td>3</td><td>3</td></tr>
</table>
</td><td>2</td></tr>
<tr align="center" bgcolor="#FFFFFF"><td>3</td><td>2</td><td>3</td></tr>
</table>

Titulo
Subtitulo 1Subtitulo 2Subtitulo 3
111
2
Titulo
Subtitulo 1Subtitulo 2Subtitulo 3
111
222
2

<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th colspan="3">Titulo</th></tr>
<tr bgcolor="#FFFFFF" align="center"><th>Subtitulo 1</th><th>Subtitulo 2</th><th>Subtitulo 3</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>
<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th colspan="3">Titulo</th></tr>
<tr bgcolor="#FFFFFF" align="center"><th>Subtitulo 1</th><th>Subtitulo 2</th><th>Subtitulo 3</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>2</td><td>2</td></tr>
</table>
</td><td>2</td></tr>
</table>

Mensaje
Titulo 1Titulo 2Titulo 3
111
2
Mensaje
Titulo 1Titulo 2Titulo 3
111
222
333
2
323

<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th rowspan="5">Mensaje</th></tr>
<tr bgcolor="#FFFFFF" align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>
<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th rowspan="5">Mensaje</th></tr>
<tr bgcolor="#FFFFFF" align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>2</td><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>3</td><td>3</td><td>3</td></tr>
</table>
</td><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>3</td><td>2</td><td>3</td></tr>
</table>

MensajeTitulo
Subtitulo 1Subtitulo 2Subtitulo 3
111
2
MensajeTitulo
Subtitulo 1Subtitulo 2Subtitulo 3
111
222
2

<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th rowspan="5">Mensaje</th><th colspan="4">Titulo</th></tr>
<tr bgcolor="#FFFFFF" align="center"><th>Subtitulo 1</th><th>Subtitulo 2</th><th>Subtitulo 3</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>
<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th rowspan="5">Mensaje</th><th colspan="4">Titulo</th></tr>
<tr bgcolor="#FFFFFF" align="center"><th>Subtitulo 1</th><th>Subtitulo 2</th><th>Subtitulo 3</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>2</td><td>2</td></tr>
</table>
</td><td>2</td></tr>
</table>

Mensaje
MensajeTitulo
111
1222
2333
111
1222
2333

<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th rowspan="2">Mensaje</th><th colspan="3">
<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th rowspan="2">Mensaje</th><th colspan="3">Titulo</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>2</td><td>2</td><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>3</td><td>3</td><td>3</td></tr>
</table>
</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>2</td><td>2</td><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>3</td><td>3</td><td>3</td></tr>
</table>

Titulo 1Titulo 2Titulo 3
Titulo 1Titulo 2Titulo 3
111
222
333
Titulo 1Titulo 2Titulo 3
111
222
333
Titulo 1Titulo 2Titulo 3
111
222
333
111
222

<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>
<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>2</td><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>3</td><td>3</td><td>3</td></tr>
</table>
</td><td>
<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>2</td><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>3</td><td>3</td><td>3</td></tr>
</table>
</td><td>
<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>2</td><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>3</td><td>3</td><td>3</td></tr>
</table>
</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>2</td><td>2</td></tr>
</table>

Titulo
Subtitulo 1Subtitulo 2Subtitulo 3
Titulo 1Titulo 2Titulo 3
111
222
333
Titulo 1Titulo 2Titulo 3
111
222
333
Titulo 1Titulo 2Titulo 3
111
222
333
Titulo 1Titulo 2Titulo 3
111
222
333
Titulo 1Titulo 2Titulo 3
111
222
333
Titulo 1Titulo 2Titulo 3
111
222
333

<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th colspan="3">Titulo</th></tr>
<tr bgcolor="#FFFFFF" align="center"><th>Subtitulo 1</th><th>Subtitulo 2</th><th>Subtitulo 3</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>
<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>2</td><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>3</td><td>3</td><td>3</td></tr>
</table>
</td><td>
<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>2</td><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>3</td><td>3</td><td>3</td></tr>
</table>
</td><td>
<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>2</td><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>3</td><td>3</td><td>3</td></tr>
</table>
</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>
<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>2</td><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>3</td><td>3</td><td>3</td></tr>
</table>
</td><td>
<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>2</td><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>3</td><td>3</td><td>3</td></tr>
</table>
</td><td>
<table border="1" cellpadding="10" width="100%">
<tr bgcolor="#FFFFFF" align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr bgcolor="#FFFFFF" align="center"><td>1</td><td>1</td><td>1</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>2</td><td>2</td><td>2</td></tr>
<tr bgcolor="#FFFFFF" align="center"><td>3</td><td>3</td><td>3</td></tr>
</table>
</td></tr>
</table>

p1
Publicado por: ★★★★★ Oliver ★★★★★
en: -
Leer mas
0

Formato de texto con HTML

Formato de texto con HTMLLa configuración de nuestro texto es fundamental para darle un toque personal a nuestro blog de acuerdo a nuestras necesidades ya sea resaltando palabras con color, subrayado, tamaño, tipo de letra etc., Así que para lo cual en esta entrada, vamos a ver los diferentes ejemplos que se pueden conseguir con el HTML del formato de texto.


Texto teletipo 
<tt>Texto teletipo</tt>


Texto especial 
<var>Texto especial</var>


Texto normalTexto Superíndice 
Texto normal<b>Texto Superíndice</b>


Texto normalTexto Subíndice 
Texto normal<b>Texto Subíndice</b>


Texto en negrita 
<b>Texto en negrita</b>

O con la etiqueta <strong>:

Texto en negrita 
<strong>Texto en negrita</strong>

Texto en cursiva 
<i>Texto en cursiva</i>


Texto subrayado 
<u>Texto subrayado</u>


Texto con línea arriba

Este resultado, es gracias a la etiqueta <span> y style: 
<span style="text-decoration: overline;">
Texto con línea arriba
</span>


Texto con línea arriba y abajo

Si checas, están fusionados los dos códigos anteriores, la etiqueta <u> con la etiqueta <span>: 
<span style="text-decoration: overline;"><u>
Texto con línea arriba y abajo
</u></span>


Texto tachado 
<s>Texto tachado</s>


El siguiente formato de texto se lleva a cabo con la etiqueta <h1,2,3,4,5,6>:

Texto
<h6>Texto</h6>


Texto
<h5>Texto</h5>


Texto

<h4>Texto</h4>


Texto

<h3>Texto</h3>


Texto

<h2>Texto</h2>


Texto

<h1>Texto</h1>


Ahora este formato es llevado acabo con las etiquetas: <small> y <big>:

Texto pequeñito 
<small>Texto pequeñito</small>

Texto aun mas pequeñito

Aquí se duplica el código: 
<small><small>Texto aun mas pequeñito</small></small>

Texto grande 
<big>Texto grande</big>

Texto aun mas grande

De igual forma aquí también se duplica el código anterior: 
<big><big>Texto aun mas grande</big></big>


Pero no conformes necesitamos un texto con otro tipo de letra diferente, con color y mas grande, para ello a continuación te muestro el siguiente ejemplo hecho con la etiqueta <font>:

Texto mas grande con color y tipo de letra 
<font color="#990000" face="forte" size="10">Texto mas grande con color y tipo de letra</font>

Lo único que queda, es personalizarlos a nuestro gusto.

Ojala y te sean de gran utilidad.

p1
Publicado por: ★★★★★ Oliver ★★★★★
en: -
Leer mas
0

Generar tabla de multiplicar con Programacion C

Se trata de un sencillo programa en C que genera la tabla de multiplicar del numero que decidas colocar.
Solo introduce el numero para obtener la tabla y pulsa enter:
Generar tabla de multiplicar con programacion c
Una vez visto el resultado pulsas enter para salir del programa y eso sería todo.

Si gustas te dejo el código para que lo puedas personalizar: 
#include <conio.h>
#include <stdio.h>
#include <stdlib.h>
int main()
{
system("color 1e");
int tabla;
printf("\n\n GENERAR TABLA DE MULTIPLICAR ");
printf("\n\n Ingrese la tabla de multiplicar a obtener: ");
scanf("%i",&tabla);
printf("\n %i x 1 = %i\n",tabla,tabla*1);
printf(" %i x 2 = %i\n",tabla,tabla*2);
printf(" %i x 3 = %i\n",tabla,tabla*3);
printf(" %i x 4 = %i\n",tabla,tabla*4);
printf(" %i x 5 = %i\n",tabla,tabla*5);
printf(" %i x 6 = %i\n",tabla,tabla*6);
printf(" %i x 7 = %i\n",tabla,tabla*7);
printf(" %i x 8 = %i\n",tabla,tabla*8);
printf(" %i x 9 = %i\n",tabla,tabla*9);
printf(" %i x 10 = %i\n\n",tabla,tabla*10);
printf("\n\n   Pulse cualquier tecla para salir...");
getch();
return 0;
}

Espero y te sea útil.

p1
Publicado por: ★★★★★ Oliver ★★★★★
en: -
Leer mas
0

Galeria de cuatro conjuntos de iconos RSS Feeds

Es indispensable colocar un enlace del Feed de las entradas del blog para nuestros lectores y que mas que realizarlo con un icono RSS como los que acabo de hacer para tu blog.

Son 4 paquetes:
Este primer paquete posee 20 iconos RSS tipo 3D con dimensiones 128x128 pixeles y en formato PNG.
Iconos RSS tipo 3d


Este otro paquetito contiene solo 4 iconos RSS brillantes con dimensiones 128x128 pixeles y también en formato PNG.
Iconos RSS brillantes


El siguiente tercer paquete incluye 5 iconos normales con colores muy intensos y con medidas 256x256 pixeles y en formato PNG.
Iconos RSS normales


Y por ultimo este paquete contiene 4 iconos tipo botones con medidas 130x31 pixeles y claro! en formato PNG.
Iconos tipo botones


Eres libre de utilizar estos iconos para el uso comercial y personal en tus blogs. Sin embargo, no los puedes vender, modificar o redistribuir como propio.

p1
Publicado por: ★★★★★ Oliver ★★★★★
en: -
Leer mas
0

Iconos de twitter tipo botones

El siguiente conjunto posee 18 iconos tipo botones de alta calidad de la red social de twitter realizados por tu servidor. Sus medidas son de 128x128 pixeles y se encuentran en formato PNG.
Iconos de twitter tipo botones


El conjunto de iconos esta libre para usar en tus proyectos personales y comerciales, y puede ser utilizado sin atribución alguna.

p1
Publicado por: ★★★★★ Oliver ★★★★★
en: -
Leer mas
2

Figuras geometricas hechas con HTML

En un rato libre realice una serie de experimentos con HTML utilizando los bordes y el resultado a sido una fantástica variedad de figuras geométricas.
Figuras geometricas hechas con HTML
Los ejemplos son los siguientes:

Cuadrado 

<div style="height: 0px; width: 120px; border-left:0px solid transparent; border-right:0px solid transparent; border-top:0px solid transparent; border-bottom:120px solid #0080FF;"></div>

Rectángulo 


<div style="height: 0px; width: 220px; border-left:0px solid transparent; border-right:0px solid transparent; border-top:0px solid transparent; border-bottom:120px solid #0080FF;"></div>

Triangulo equilatero 


<div style="height: 0px; width: 0px; border-left:100px solid transparent; border-right:100px solid transparent; border-top:0px solid transparent; border-bottom:150px solid #0080FF;"></div>

Triangulo escaleno 


<div style="height: 0px; width: 0px; border-left:0px solid transparent; border-right:200px solid transparent; border-top:0px solid transparent; border-bottom:120px solid #0080FF;"></div>

Triangulo isósceles 


<div style="height: 0px; width: 0px; border-left:80px solid transparent; border-right:80px solid transparent; border-top:0px solid transparent; border-bottom:200px solid #0080FF;"></div>

Trapecio isósceles 


<div style="height: 0px; width: 100px; border-left:50px solid transparent; border-right:50px solid transparent; border-top:0px solid transparent; border-bottom:100px solid #0080FF;"></div>

Trapecio rectángulo 


<div style="height: 0px; width: 150px; border-left:0px solid transparent; border-right:50px solid transparent; border-top:0px solid transparent; border-bottom:100px solid #0080FF;"></div>

Rombo 


<div style="height: 0px; width: 0px; border-left:80px solid transparent; border-right:80px solid transparent; border-top:0px solid transparent; border-bottom:120px solid #0080FF;"></div>
<div style="height: 0px; width: 0px; border-left:80px solid transparent; border-right:80px solid transparent; border-top:120px solid #0080FF; border-bottom:0px solid transparent;"></div>

Pentágono 


<div style="height: 0px; width: 0px; border-left:100px solid transparent; border-right:100px solid transparent; border-top:0px solid transparent; border-bottom:100px solid #0080FF;"></div>
<div style="height: 0px; width: 100px; border-left:50px solid transparent; border-right:50px solid transparent; border-top:100px solid #0080FF; border-bottom:0px solid transparent;"></div>

Hexágono 


<div style="height: 0px; width: 100px; border-left:50px solid transparent; border-right:50px solid transparent; border-top:0px solid transparent; border-bottom:100px solid #0080FF;"></div>
<div style="height: 0px; width: 100px; border-left:50px solid transparent; border-right:50px solid transparent; border-top:100px solid #0080FF; border-bottom:0px solid transparent;"></div>

Circulo 


<div style="height: 0px; width: 150px; border-bottom:150px dotted #0080FF;"></div>

Y que te han parecido...espero y te inspiren para hacer las tuyas.

p1
Publicado por: ★★★★★ Oliver ★★★★★
en: -
Leer mas
0

Iconos de el asombroso pajaro de twitter

Desing contest a desarrollado un conjunto de 15 iconos del famoso pájaro azul de twitter.
Estos iconos se encuentran disponibles en formato 128x128px, 256x256px y 512x512px y claro! en formato PNG.
Iconos de el asombroso pajaro de twitter

Los iconos son estilos de:
Vidrio, Cristal, Futurista, Tejido, Militar, Origami, Pixel, Plástico, etc.

Todo el conjunto de iconos están bajo una licencia Creative Commons Attribution 3.0 License. Esto significa que puedes utilizar libremente estos iconos para cualquier propósito, privados y comerciales, incluyendo servicios en línea, plantillas, temas y programas. Sin embargo, para hacerlo debes incluir un enlace de la pagina oficial del autor para sus créditos. Los iconos no se pueden revender, sub-licenciad, alquilar, transferir o puesto a disposición para su uso.

p1
Publicado por: ★★★★★ Oliver ★★★★★
en: -
Leer mas
0

Tooltips sexis solo con CSS

Si bien existen muchas soluciones innovadoras usando CSS y una de ellas es la que ha realizado Alex Dawson en Six revisions con unos sexis tooltips muy elegantes.

Tooltips sexis solo con CSS
Estos son los ejemplos que pudo realizar:
ClásicoLorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu., CriticoCriticoLorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu., AyudaAyudaLorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu., InformaciónInformaciónLorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu. y AlertaAlertaLorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu.

Este es el HTML (entrada o como HTML/Javascript): 
<!-- Clásico -->
<a class="tooltip" href="#">Clásico<span class="clasico">Lorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu.</span></a>

<!-- Critico -->
<a class="tooltip" href="#">Critico<span class="cos critico"><img src="Url-de-icono-critico" height="48" width="48" /><em>Critico</em>Lorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu.</span></a>

<!-- Ayuda -->
<a class="tooltip" href="#">Ayuda<span class="cos ayuda"><img src="Url-de-icono-ayuda" height="48" width="48" /><em>Ayuda</em>Lorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu.</span></a>

<!-- Información -->
<a class="tooltip" href="#">Información<span class="cos informacion"><img src="Url-de-icono-informacion" height="48" width="48" /><em>Información</em>Lorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu.</span></a>

<!-- Alerta -->
<a class="tooltip" href="#">Alerta<span class="cos alerta"><img src="Url-de-icono-alerta" height="48" width="48" /><em>Alerta</em>Lorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu.</span></a>


Y este es el CSS (antes de ]]></b:skin>): 

.tooltip {
        border-bottom: 1px dotted #000000; 
        color: #000000; outline: none;
        cursor: help; 
        text-decoration: none;
        position: relative;
  }
.tooltip span {
        margin-left: -999em;
        position: absolute;
  }
.tooltip:hover span {
        border-radius: 5px 5px; 
        -moz-border-radius: 5px; 
        -webkit-border-radius: 5px; 
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); 
        -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); 
        -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
        font-family: Calibri, Tahoma, Geneva, sans-serif;
        position: absolute; left: 1em; top: 2em; z-index: 99;
        margin-left: 0; width: 250px;
  }
.tooltip:hover img {
        border: 0; 
        margin: -10px 0 0 -55px;
        float: left; 
        position: absolute;
  }
.tooltip:hover em {
        font-family: Candara, Tahoma, Geneva, sans-serif; 
        font-size: 1.2em; 
        font-weight: bold;
        display: block; padding: 0.2em 0 0.6em 0;
  }
.clasico { padding: 0.8em 1em; }
.cos { padding: 0.5em 0.8em 0.8em 2em; }
 a:hover { background: transparent; }
.clasico { background: #FFFFAA; border: 1px solid #FFAD33; }
.critico { background: #FFCCAA; border: 1px solid #FF3334; }
.ayuda { background: #9FDAEE; border: 1px solid #2BB0D7; }
.informacion { background: #9FDAEE; border: 1px solid #2BB0D7;}
.alerta { background: #FFFFAA; border: 1px solid #FFAD33; }


Muy bonitos no!, si te gustaron no dudes en ser creativo y crear tus propios tooltips.

p1
Publicado por: ★★★★★ Oliver ★★★★★
en: -
Leer mas
0

Ocho estilos de bordes con HTML

Si talvez te ha enfadado el mismo estilo de borde que se utiliza por defecto (solid) en las plantillas y deseas cambiarlo por otro diferente... yo lo logre cambiar por otros estilos.

Ocho estilos de bordes con HTML

A continuación te dejo los 8 ejemplos de estilos de bordes:
Borde estilo solid por defecto
<p style="border: solid 10px #CCCCCC;">Borde estilo solid por defecto</p>


Borde estilo dotted
<p style="border: dotted 10px #009900;">Borde estilo dotted</p>


Borde estilo dashed
<p style="border: dashed 10px #0000FF;">Borde estilo dashed</p>


Borde estilo double
<p style="border: double 10px #FF0000;">Borde estilo double</p>


Borde estilo groove
<p style="border: groove 10px #CC33FF;">Borde estilo groove</p>


Borde estilo ridge
<p style="border: ridge 10px #FFCC00;">Borde estilo ridge</p>


Borde estilo inset
<p style="border: inset 10px #FF8000;">Borde estilo inset</p>


Borde estilo outset
<p style="border: outset 10px #990000;">Borde estilo outset</p>


También podrás colocar bordes de estilos distintos con colores distintos como en el siguiente ejemplo:


Bordes estilos distintos con colores distintos
<p style="background-color: #CCCCCC; text-align: center; height: 20px; width: 500px; border-bottom: #FF0000 10px groove; border-left: #0000FF 10px double; border-right: #CC33FF 10px dotted; border-top: #009900 10px dashed; padding-bottom: 45px; padding-left: 45px; padding-right: 45px; padding-top: 20px;">
Bordes estilos distintos con colores distintos
</p>

Y tu cambiarias el borde solid y si es así por cual?
Ojala y te sirvan en algo.

p1
Publicado por: ★★★★★ Oliver ★★★★★
en: -
Leer mas
0

Redireccionar de una pagina hacia otra

Redireccionar de una pagina hacia otraCuando estamos construyendo un blog o renovándolo, es necesario colocar un aviso a nuestros lectores para que sepan que el sitio se encuentra en construcción o en renovación.
Lo que necesitamos es redireccionar al lector a otra pagina donde en esa pagina se encuentre el aviso indicado y como lo podemos realizar?, colocando alguno de los siguientes códigos después de la etiqueta <body>:

Entrar y redireccionar hacia otra: 
<script languaje="Javascript">
location.href='Url-del-blog-a-donde-quieres-redireccionar';
</script>

Si checas en este ejemplo veras una página y rápidamente te mandara a otra distinta.

Redireccionar en un tiempo determinado: 

<meta http-equiv="refresh" content="Segundos;url=Url-del-blog-a-donde-quieres-redireccionar"/>

Colocas los segundos que desees que la pagina demore hasta redireccionarla a otra.

Ver ejemplo de 8 segundos.

Redireccionar colocando el puntero encima de una imagen: 

<a onmouseover="parent.location='Url-del-blog-a-donde-quieres-redireccionar' "><img src="Url-de-tu-imagen" /></a>

Ver el siguiente ejemplo:



O de igual forma lo puedes hacer con un enlace:

Ejemplo con un enlace 

<a onmouseover="parent.location='Url-del-blog-a-donde-quieres-redireccionar' ">Ejemplo con un enlace</a>

La imagen pertenece a Ricdiggle.

p1
Publicado por: ★★★★★ Oliver ★★★★★
en: -
Leer mas
0

Descubrir imagenes con CSS

Descubrir imagenes con CSSBastante son los trucos que se pueden descubrir con CSS. Y algunos de ellos son una muestra de como descubrir sencillamente imagenes colocando el puntero del mouse sobre ellas como en los siguientes ejemplos:

Ejemplo 1:


CSS: 
a.imagen {
display:block;
cursor:default;
width:400px; /* Ancho de la imagen que se ve */
height:265px; /* Alto de la imagen que se ve */
background:url(Url-de-tu-imagen) top left; /* Direccion de la imagen */
} 
a.imagen:hover {
background-position:bottom left;
width:500px; /* Ancho de la imagen al colocar el mouse */
height:400px; /* Alto de la imagen al colocar el mouse */
}

HTML: 
<a href="#" class="imagen"></a>


Ejemplo 2:


Solo elimina:
width:500px; /* Ancho de la imagen al colocar el mouse */

Ejemplo 3:


Solo eliminas:
width:500px; /* Ancho de la imagen al colocar el mouse */
height:400px; /* Alto de la imagen al colocar el mouse */

Recuerda que el CSS va incluido antes de ]]></b:skin> y el HTML en una entrada o como elemento HTML/Javascript

La imagen corresponde a Shane gorski

p1
Publicado por: ★★★★★ Oliver ★★★★★
en: -
Leer mas
0

Contador de seguidores de Facebook, Twitter y Rss con HTML

Contador de seguidores de Facebook, Twitter y Rss con HTMLAl no encontrar un contador de seguidores de facebook al gusto de Mohammad de My blogger tricks, se le ocurrió la idea de crear contadores de seguidor con HTML para los lectores de facebook, feeds y twitter. Y yo con un poco de personalizacion me permiti darles una apariencia diferente.

Para seguidores de facebook:
227+Fans
227+Seguidores
227+Seguidores
227+Fans 
<span sans ms style="background-color:#F2F2F2; border-top: 1px solid #F2F2F2; border-right: 1px solid #8A8A8A; border-left: 1px solid #F2F2F2; border-bottom: 1px solid #8A8A8A; padding: 2px 4px 4px4px; color: #666; font-family: sans-serif, arial; font-size: 10px;">
<span style="background-color:#D2E9F8; font-size: 9px; border-top: 1px solid #8A8A8A; border-right: 1px solid #ddd; border-left: 1px solid #8A8A8A; border-bottom: 1px solid #ddd; padding: 0px 1px;">227<blink>+</blink></span>Seguidores <img src="Url-de-tu-imagen" /></span>

Para personalizarlo, cambia lo que esta en color verde que pertenece al color de fondo de la barra, lo que esta en amarillo pertenece al color de texto (227 Seguidores) y lo que esta en color rojo pertenece a el color de fondo del numero (227). Donde dice Url-de-tu-imagen colocas tu icono.

Para los lectores de feed:
227Lectores

227Lectores 
<span sans ms style="background-color:#CC9966; border-top: 1px solid #F2F2F2; border-right: 1px solid #666; border-left: 1px solid #F2F2F2; border-bottom: 1px solid #666; padding: 2px 4px 4px4px; color: #000; font-family: sans-serif, arial; font-size: 10px;"> 
<span style="background-color:#CCCCCC; font-size: 9px; border-top: 1px solid #666; border-right: 1px solid #fff; border-left: 1px solid #666; border-bottom: 1px solid #fff; padding: 0px 1px;">227</span>Lectores <img src="Url-de-tu-imagen" /></span>


Para seguidores de twitter:
227Seguidores

227Seguidores 
<span sans ms style="background-color:#F2F2F2; border-top: 1px solid #F2F2F2; border-right: 1px solid #8A8A8A; border-left: 1px solid #F2F2F2; border-bottom: 1px solid #8A8A8A; padding: 2px 4px 4px4px; color: #33CCFF; font-family: sans-serif, arial; font-size: 10px;"> 
<span style="background-color:#33CCFF; font-size: 9px; color:#fff; border-top: 1px solid #666; border-right: 1px solid #fff; border-left: 1px solid #666; border-bottom: 1px solid #fff;  padding: 0px 1px;">227</span>Seguidores <img src="Url-de-tu-imagen" /></span>

Solo en 227 coloca el valor de seguidores que tienes y los agregas como elemento HTML/Javascript y listo.
Si deseas estos mismos iconos de los ejemplos, los podrás descargar desde el sitio oficial del autor.
Si llegas a personalizar los ejemplos, podrás crear un contador de seguidor de cualquier red social y a tu gusto.

p1
Publicado por: ★★★★★ Oliver ★★★★★
en: -
Leer mas
                                                                                                                                                                                                                                                                                                                                                       
Ciudad Blogger

Hola, Bienvenido a Blog 2000!

Puedes seguirnos en las redes sociales o suscribirte al feed.

Blog 2000 Blog 2000 Blog 2000 Blog 2000

Categorías ........... Posts recientes

¡Suscríbete a nuestro blog!

Recibe en tu correo las últimas noticias del blog. Sólo ingresa tu correo para suscribirte.

Blog 2000