Tutoriales y Opiniones

Mostrando entradas con la etiqueta Html. Mostrar todas las entradas

Añadir gadget redes sociales en blogger

Tutorial blogger: Como añadir gadget redes sociales en blogger

En este tutorial voy a explicar cómo añadir un gadget que incluya las redes sociales donde nos pueden encontrar todos los lectores de nuestro blog.

Para el ejemplo del presente tutorial crearemos un gadget donde mostraremos los iconos de las redes sociales donde nos pueden encontrar los lectores del blog y un enlace a nuestro perfil de usuario. En este ejemplo las redes sociales que voy a incluir son las siguientes:

El gadget redes sociales en blogger quedará de la siguiente manera en vuestro blog:

Ejemplo: Crear gadget en nuestro Blogger con las redes sociales que utilizamos. Cuando un lector de nuestro blog pinche en alguno de los iconos se mostrará la página de nuestro perfil.

Paso 1 Nos dirigimos a la sección Diseño de nuestro blogger.
Paso 2 En este momento se abre una página donde se muestra una representación visual de nuestro blog.
Paso 3 Para el ejemplo actual he creado el gadget redes sociales en el panel lateral derecho, en dicho panel hacemos clic en la opción Añadir un gadget.
Paso 4 En este momento se abrirá una ventana donde podremos seleccionar el tipo de gadget que queremos añadir.
Paso 5 Dentro de la pestaña Lo básico seleccionamos la opción HTML/Javascript
Paso 6 Al seleccionar dicha opción se abre una página donde configuraremos el gadget redes sociales de la siguiente manera:

- Título: Escribir el título que queremos que se muestre al visualizar el gadget redes sociales. En mi caso he puesto "Sígueme en las redes sociales".
- Contenido: Espacio destinado para poner el código HTML que queremos mostrar en el gadget redes sociales, en nuestro caso deberemos poner el siguiente:

// Icono y link a tu perfil de twitter

<a href='URL twitter' target='_blank'><img alt='twitter' src="http://2.bp.blogspot.com/-HoByHzmab00/T-WiFnncFXI/AAAAAAAAAuM/eIStHRliy7Y/s000/twitter.png" title='twitter'/></a>



// Icono y link a tu perfil de facebook

<a href='URL facebook' target='_blank'><img alt='facebook' src="http://4.bp.blogspot.com/-KGUfFpIGxDo/T-WiF2abbMI/AAAAAAAAAuU/YUHVZnWeTAQ/s000/facebook.png" title='facebook'/></a>



// Icono y link a tu perfil de google+

<a href='URL google+' target='_blank'><img alt='google plus' src="http://4.bp.blogspot.com/-FbyQUvCfcsc/T-WiGWwdzZI/AAAAAAAAAuc/23NBI95QlmY/s000/gplus.png" title='google plus'/></a>



// Icono y link a tu perfil de Linkedin

<a href='URL linkedin' target='_blank'><img alt='linkedin' src="http://3.bp.blogspot.com/-HPHUoa0ufsw/T-WiGqwz3YI/AAAAAAAAAuk/MEYc0chl5zs/s000/linkedin.png" title='linkedin'/></a>



// Icono y link a tu perfil de Youtube

<a href='http://www.youtube.com/user/masetru' target='_blank'><img alt='Youtube' src="http://static.tiendy.com/shops/mimomimascota/theme/assets/icono_youtube.png" title='Youtube'/></a>



// Icono y link a tu perfil de Metroblog

<a href='http://NombreUsuario.metroblog.com/' target='_blank'><img alt='Metroblog' src="http://blog.mp3.es/wp-content/uploads/2013/03/metro-last-light.png" title='Metroblog'/></a>

En el código de arriba deberéis sustituir el texto URL twitter, URL facebook, URL google+ y URL linkedin por la URL de vuestros perfiles en cada una de estas redes sociales.

Podríamos personalizar el código del gadget redes sociales de muchas maneras, yo os propongo las siguientes:

- Personalizar el contenido de la meta etiqueta title.
- Modificar contenido de la meta etiqueta alt.

Si te ha gustado el artículo sobre cómo añadir gadget redes sociales en blogger puedes visitar a alguno de nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.

ARTÍCULOS QUE TE PUEDEN INTERESAR

Cómo guardar la configuración de una red wifi en Windows 7
Cómo abrir puertos windows 7
Atajos de teclado de Windows
Windows 7 no muestra la fecha

Como incluir tablas en tus post de blogger

Tutorial HTML: Incluir tablas en tus post de blogger

En este artículo voy a explicar la manera de incluir tablas en tus post de blogger ya que en ocasiones nos encontramos con la necesidad de incluirlas en nuestros artículos y observamos que el editor de blogger no dispone de ninguna herramienta que nos permita insertar tablas.

Para incluir tablas en los post de blogger tendremos que recurrir al editor HTML y definir nosotros mismos la estructura de la tabla en html. A continuación os pongo el código html necesario para definir una tabla en vuestros post de blogger:


<table border="1" style="float: left; margin-right: 2%; width: 100%;">

<tbody>
<tr>
<td>Columna 1</td>

<td>Columna 2</td>

<td>Columna 2</td>
</tr>

</tbody>

</table>

Y el resultado de aplicar el código anterior es el siguiente:

Columna 1

Columna 2

Explicación: Elementos utilizados en la creación de la tabla.

table: Instrucción que indica que se va a definir una tabla en HTML.
style: Instrucción que se utiliza para definir el estilo de la tabla.
float: Indica donde se alinea la tabla, en nuestro caso a la izquierda de su contenedor.
margin-right: Margen derecho de la tabla, en nuestro ejemplo el 2% del contenedor de la tabla.
width: Ancho que ocupará la tabla, en nuestro ejemplo el 100% del contenedor de la misma.
tbody: Indica que se va a definir el contenido del cuerpo de la tabla.
tr: Se utiliza para definir el contenido de una fila de la tabla
td: Instrucción para definir celdas en una tabla

A través del ejemplo anterior podéis personalizar las tablas que incluyáis en vuestros post de blogger ya que con cambiar los valores de las propiedades que he descrito anteriormente observaréis como va cambiando la tabla.

ARTÍCULOS QUE TE PUEDEN INTERESAR

Añadir gadget últimos tweets en Blogger
Cómo poner una imagen de fondo en Blogger
Cómo crear un sitemap para Blogger
Widget nube etiquetas para Blogger
Añadir gadget redes sociales en Blogger

Como incluir código en tus post de blogger

Tutorial blogger: Como añadir código a tus post

En ocasiones queremos incluir código fuente en los artículos de nuestro blogger para mostrar a nuestros lectores un ejemplo práctico con el que resolver sus dudas.

Algunos bloggers utilizan el tag blockquote para escribir el código, recordemos que blockquote marca una sección de nuestra página o artículo como si fuera una referencia de otra fuente, estéticamente aplica una sangría y poco más.

La opción que yo suelo utilizar para añadir código a mis post de blogger es la siguiente:

Edito el html de la plantilla que utilizo en mi blog.
Desde el menú principal de blogger seleccionar la opción Plantilla y a continuación pinchar sobre Edición de HTML
Esto abrirá un cuadro de diálogo donde deberemos seleccionar la opción Continuar.
En este momento veremos el código HTML de la plantilla que estemos utilizando en nuestro blog.
Ahora buscaremos el siguiente texto: ]]></b:skin>
Recordad que para buscar rápidamente podemos utilizar la combinación de teclas Ctrl + F
Justo antes del texto del punto número 5 pegaremos el siguiente código:

code {background:#EEEEEE; font-family: Trebuchet MS; display:block; border:1px solid #999999; padding:10px;}

Explicación: Con el código anterior estamos creando la code y asignándole unas determinadas características como por ejemplo:

background: Color del fondo en hexadecimal.
fonf-family: Tipo de letra
display: Especifica cómo se mostrará el html resultante.
border: ancho, tipo y color del borde que rodeará al texto.
padding: espacio entre el texto y su contenedor.

¿Cómo se utiliza?: Muy sencillo, para incluir código en un post de blogger deberás seguir los siguientes pasos:

Pulsar el botón HTML del editor.
Escribir en código que quieres mostrar en tu post entre las siguientes tags <code></code>

Si te ha gustado el artículo sobre cómo corregir error "Apache shutdown unexpectedly" al iniciar Xampp te pido un favor: Haz clic sobre uno de los anuncios, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.

ARTÍCULOS QUE TE PUEDEN INTERESAR

Cómo guardar la configuración de una red wifi en Windows 7
Cómo abrir puertos windows 7
Atajos de teclado de Windows
Windows 7 no muestra la fecha

Mostrar últimos tweets de un usuario con PHP

Tutorial PHP: Mostrar últimos tweets de un usuario

A continuación mostramos una funcion PHP que devuelve los últimos tweets de un determinado usuario. El funcionamiento de la función PHP que muestra los últimos tweets de un usuario es muy sencillo, simplemente hay que pasarle dos parámetros:

El nombre de la cuenta de twitter. Por ejemplo masetru
El número de tweets que queremos mostrar. Por ejemplo mostrar los últimos 10 tweets de @masetru

A continuación os mostramos el código de la función php que muestra los últimos tweets de un determinado usuario:

<?php

      $json = file_get_contents("http://twitter.com/status/user_timeline/masetru.json?count=10", true);

      $decode = json_decode($json, true);

      print_r($decode);

    ?>

MOSTRAR ÚLTIMOS TWEETS CON PHP: AÑADIDO 04/06/2013


function getTweets($tweetsToDisplay, $user_id) { 



$twitterrequest = 'http://api.twitter.com/1/statuses/user_timeline.json?user_id=' . $user_id . '&include_rts=true&count=' . $tweetsToDisplay; 

$twitterci = curl_init($twitterrequest); 

curl_setopt($twitterci, CURLOPT_RETURNTRANSFER, TRUE); 

$twitterinput = curl_exec($twitterci); 

curl_close($twitterci); 

return ($twitterinput); 



} 



$user_id = '99999999';

$var = json_decode(getTweets(1, $user_id));

$txt = $var[0]->text;

$txt = preg_replace('%(https?://)[^\s]*%', '$1...', $txt);

echo $txt;

ARTÍCULOS QUE TE PUEDEN INTERESAR

Cómo guardar la configuración de una red wifi en Windows 7
Cómo abrir puertos windows 7
Atajos de teclado de Windows
Windows 7 no muestra la fecha

Calcular distancia entre dos puntos con PHP

Tutorial PHP: Calcular distancia entre dos puntos

A través de la siguiente función PHP podremos obtener la distancia en kilómetros, millas o millas náuticas entre dos puntos.

Generar clave aleatoria en php

Tutorial PHP: Como generar contraseñas aleatorias

En ocasiones nos será muy útil poder disponer de un método de generación automática de contraseñas, en mi caso en particular he necesitado generar contraseñas de manera aleatoria cuando he abordado proyectos web donde se requería que el usuario se diera de alta.

El procedimiento que sigo para generar contraseñas aleatorias es el siguiente:

El futuro usuario registra su mail en una web o aplicación móvil.
El sistema manda al usuario un correo electrónico con la contraseña que hemos generado de manera aleatoria y un link a la página de logueo.
El usuario ingresa en el sistema y cambia su contraseña aleatoria por la que él quiera.

A continuación os muestro el código php que genera claves aleatorias: