Vida Bloguera

Pestaña Deslizante de Facebook

2012-05-29T22:16:00.002+02:00

Puede que lo hayáis visto en algún Blog, una pestaña lateral con el logo de Facebook que si la pinchas se expande y puedes ver la caja social de Facebook.

Os podría dar un tocho enorme de código para ponerlo en tu Blog, pero es más fácil hacerlo desde este enlace (Way2Blogging), solo tienes que poner la dirección de tu página en Facebook y dar en generar código. Y luego solo tienes que ponerlo en tu Blog como un Gadget (incluso en la página te lo hace con el instalador automático de Blogger).

Puedes verlo también instalado en mi página de pruebas.

Iconos Sociales en 3D

2012-05-25T22:31:00.000+02:00

Esta vez os traigo otro enlace muy útil a unos Iconos Sociales con efecto 3D y de pulsación de botón muy conseguida y muy fáciles de incorporar a tu Blog. Los Iconos quedan de esta forma:

Lo podéis encontrar en un código muy sencillo en este enlace: Pizcos

Botones para Compartir

2012-05-23T20:00:00.000+02:00

Hoy os voy a compartir un enlace donde encontrareis unos botones para compartir vuestras entradas. Ya hemos comentado que hay miles de sitios donde compartir, pero estos botones que os traigo tienen una coleccion muy interesante: Facebook, Twitter, Google+, Taringa y Bitácoras.

No os voy a poner el código, eso lo dejo al Blog donde está publicado: CiudadBlogger

Si seguís las instrucciones os saldrá fácilmente. He estado probandolo y me ha salido así:

Espero que os guste tanto como a mi!

Sitios para hacer Webs gratis

2012-05-21T22:00:00.000+02:00

Para los que no sabemos nada de crear Webs, ni tenemos conocimientos informáticos, una manera de hacernos una Web personal o profesional es usar una pagina gratuita de Website. En alguna de estas páginas podemos tener resultados sorprendentes para nuestras webs.

Primero os presento Webnode, es una de las que mas me gustan. Es intuitiva y facil de usar, y te permite el uso de muchas herramientas para tu Web. En español, y con Blog incorporado.

También podéis echar un vistazo a Weebly. También en español. Tienes multitud de herramientas, web y blog. Fácil de usar.

El sitio Wix es para crear Webs en Flash. En español.

Desde hace muchos años también es conocida la página de Jimdo. En español, fácil y con muchas herramientas.

Webs es una plataforma con muchas utilidades (Foros, Blogs, Sitio Movil, etc) En Español.

Otros sitios que podéis encontrar son:

Si encuentro más sitios o mejores os lo iré diciendo. Editado: 21/05/2012

Ya estamos de vuelta

2012-05-18T22:23:00.003+02:00

Perdón por la ausencia, pero con la ola de calor se me fundió el Portatil que uso y hasta que no me ha llegado el nuevo he hecho el mínimo. Pero ya tengo mi nueva herramienta, pesa menos (cosa que se agradece) y en cuanto lo tenga a punto estaré de vuelta. Un Saludo!!

Donde Compartir o Promocionar

2012-05-15T20:54:00.000+02:00

En los Blogs, y Webs, suele haber unos botoncitos (o iconos, o barras laterales, superiores etc)...con una única finalidad: compartir, "hacer share", sharear, como queramos decirlo, es decir, promocionar tus entradas o Blog para llegar a más usuarios. Por ejemplo, al final de esta entrada:

Esto se hace en redes Sociales, Páginas Webs, u otros sitios. De los miles y miles demaneras de compartir en un Blog, puedes encontrar otros cientos de sitios donde compartir; los mas famosos son Facebook y Twitter, pero puedes encontrar muchísimos y cada día son más.

Hagamos una pequeña lista de los sitios más usados para compartir:

Facebook- ¿De verdad os tengo que contar lo que es? Seguro que lo conocéis de sobra!!

Twitter- La otra gran Red Social, la mayoría la conoceréis muy bien.

Google +- Aunque es mucho más reciente, la garantía Google es un incentivo para usarla.

LinkedIn- Es una red Social o Sitio mas encaminado a los negocios.

Delicious- Un sitios donde guardar favoritos.

StumbleUpon- Para intercambiar páginas de interés.

Digg- Para sitios de Ciencia y Tecnología, con marcadores y demás.

Divoblogger- Es un agregador social de artículos y posts.

Bitácoras- Para Blogs y Bloggers.

Menéame- Para enviar artículos o publicaciones.

Pinterest- Pinterest es una red social para encontrar, compartir, filtrar y organizar principalmente imágenes, pero también vídeo.

Tuenti- Otra red Social de gran uso, casi se me pasa por no usarla.

Pero podrás encontrar muchos Iconos más, algunos ni los reconocerás:

Y te aseguro que hay cientos mas!!

Proteger con Contraseña

2012-05-07T14:30:00.000+02:00

Hay una manera muy sencilla de poner contraseñas en tu Blog para proteger contenidos. No es un método infalible, pero salvo muy entendidos va ser efectiva.

Es muy fácil, antes de la publicación o página que queráis proteger ponéis este sencillo código (acordaos, de hacerlo en HTML, no es edición normal).

El código es este:

<Script languaje="javascript">

var getin = prompt("Necesitas una contaseña para acceder a esta entrada.")

if (getin!="Contraseña")

{location.href='URL de página de error'}

else

{alert('Contraseña correcta, acepta para ingresar')}

</Script>

Ahora tenéis que modificar los datos en negrita:

Contraseña: Ahí lo cambiáis por la contraseña que vais a poner.
URL de página de error: La dirección donde querernos mandar a la persona que inserte una contraseña errónea, podéis crear una página para anunciar el error, o mandar directamente al inicio del Blog, por lo que solo tendréis que poner la URL (dirección) de vuestro Blog.

Si ponéis una entrada protegida, os saldrá el mensaje en la Página de Inicio mientras esta sea visible.

Para ver una demostración podéis pinchar en el enlace de abajo y poner la contraseña 1234

Enlace de demostración

Nuevo Gadget Traductor Google

2012-05-03T19:20:00.000+02:00

Blogger sigue con sus novedades, ahora en la Galería principal de Gadgets , podemos encontrar el nuevo Gadget del Traductor de Google.

Con tres estilos distintos para elegir e incluir en tu Blog.

También disponible en Vistas Dinámicas.

Navbar para Tu Blog

2012-04-30T23:49:00.001+02:00

Si queréis personalizar vuestra propia barra de Blogger podréis hacerlo desde BloggerThemes pudiendo configurar varios detalles y quedando tal y como podéis ver en este Blog de Pruebas.

La página esta en Ingles pero no es complicado de usar, puedes ir probando los distintos elementos hasta que quede a tu gusto. Completar las direcciones de tus redes Sociales cambiar colores, poner y quitar elementos y una vez obtengas el código traducir al Español manualmente algunos elementos que se ven en la barra.

Cocina Bloguera

2012-04-26T23:30:00.000+02:00

"Cocina Bloguera" es mi antiguo Blog de Cocina Rehecho y ReLimpiado. Recetas de Cocina Simples.

Temática: Cocina, Gastronomía
Fecha de Inicio: 13 Marzo 2012

Favicon

Dominio Propio: Cocina Bloguera

2012-04-26T18:02:00.001+02:00

Pues si, después de mas de un año en esto de los Blogs, me he decidido a tener Dominio propio en el Blog de Cocina!!

Desde Hoy Cocina Bloguera tiene dirección propia en:

www.CocinaBloguera.com

Y con Dominio propio llega imagen propia, a ver si ya por fin definitiva, porque siempre que me acostumbro, veo algún Blog que me enamora o alguna plantilla que me maravilla.

Gracias y Besos a todos!

Galería Deslizante Horizontal de Entradas Populares

2012-04-24T00:34:00.000+02:00

Esta es una forma distinta de poner el Gadget de Entradas Populares en tu Blog. La encontré en una página en ingles, y os la traduzco y dejo en castellano. Ahora podemos ver el Gadget en imágenes corredizas horizontales con carrusel, con flechas laterales para ir deslizándote entre ellas.

Puedes verlo en la parte superior de esta página de pruebas (aunque solo se vean 3 imágenes). Esta es la imagen fija de este Gadget:

Con el ratón encima vemos el Título de la Entrada

Es muy fácil de incluir en tu Blog, aunque hay que seguir estos pasos estrictamente:

Modificamos la Plantilla: Vamos a la seccion "Plantilla" "Edicion de HTML" "Continuar" y "Expandir plantillas de artilugios".

Paso Uno: Buscamos en la plantilla el código (ya sabes usando Control+F):

]]></b:skin>

y pegamos justo antes este trozo de código:

#gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff}

#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}

#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(http://2.bp.blogspot.com/-_Srvna_zg0M/T393_LXqDLI/AAAAAAAABrQ/_t2GmPexCHo/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}

#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}

#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}

Paso Dos: Buscamos este trozo de código:

</head>

y pegamos este código justo antes:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script src='http://helplogger.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

stepcarousel.setup({

galleryid: "gallery",

beltclass: "belt",

panelclass: "panel",

autostep: {enable:true, moveby:1, pause:6000},

panelbehavior: {speed:500, wraparound:true, persist:true},

defaultbuttons: {enable: true, moveby: 2, leftnav: ["http://2.bp.blogspot.com/-0Iss3Wjr36Q/T393U65TcKI/AAAAAAAABq4/K_uzwyuNzrE/s1600/prev.png", -40, 36], rightnav: ["http://1.bp.blogspot.com/-DtspeRHclnQ/T393WdyB8EI/AAAAAAAABrA/TKHickb2iI8/s1600/next.png", 2, 36]},

contenttype: ["external"]

})

//]]>

</script>

Paso Tres: Buscamos uno de estos dos códigos:

<b:section class='main' id='main' showaddelement='yes'>

<b:section class='main' id='main' showaddelement='no'>

y justo detrás pegamos:

<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
<div id='gallery'>
<ul class='belt'>
<b:loop values='data:posts' var='post'>
<li class='panel'>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<div class='item-title'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</b:if>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' src='http://2.bp.blogspot.com/-mRxY2oEkLJc/T393wpt0z_I/AAAAAAAABrI/4blMjDaSOUY/s1600/no-image.PNG'/>
</b:if>
</a>
</b:if>
</li>
</b:loop>
</ul>
</div></div>
</b:includable>
</b:widget>

Ahora solo queda hacer una Vista Previa y Guardar si esta perfecto. Desde la sección "Diseño" podrás cambiar el lugar donde ver el Gadget.

Si quieres cambiar el ancho del Gadget, cambia el 590xp por otro numero menor en el Primer Paso.

Caja de Suscripción

2012-04-20T12:48:00.000+02:00

De nuevo en Way2Blogging he encontrado un nuevo Gadget muy útil para tu Blog. Una Caja de Suscripción completamente configurable. Solo tienes que ir a este enlace, y rellenar los datos en el Generador del Gadget (Widget Generator) de las Redes Sociales, elementos que quieras que aparezcan en la caja, colores y tamaños. Puedes ver un ejemplo de caja en el Blog de Pruebas.

Las instrucciones están en Ingles, pero no son complicadas. Entre todas las opciones tienes:

Título de la Caja
Dirección del Blog
Ancho del Gadget
Google +
Facebook
Twitter
Suscripción por Email
Añadir otros Botones:

Delicious
Digg
Dribble
Email
RSS
Skype
Vimeo
Youtube
Etc..

Como ves muy completo. Solo tienes que rellenar, dar a "generar" Gadget y añadirlo en tu blog (tiene añadidor automático para Blogger)

Mujer Bloguera

2012-04-19T23:33:00.000+02:00

Mujer Bloguera es una nueva iniciativa de Vida Bloguera. Dedicado a las Mujeres que unimos nuestro mundo a la Blogsfera. Con Directorio de Blogs, Lista de Blogueras, Foro, y Redes Sociales.

Temática: Blogosfera, Mujer

Fecha de Inicio: 28 de Marzo 2012

Favicon

Generador de Texturas

2012-04-16T12:56:00.001+02:00

En Internet hay infinidad de herramientas para crear nuestras Webs/Blogs. Por ejemplo, en "Noise Texture Generator" podemos fabricarnos nuestros propios fondos texturizados. Está en Ingles, pero no difícil de usar.

Podemos configurar el color, la densidad, opacidad, tamaño y transparencia y pulsar "Download Now" y guardar imagen desde el botón derecho del ratón.

Podemos obtener imágenes tan distintas como:

Huevo para Compartir

2012-04-13T15:59:00.000+02:00

Hoy he visto este Huevo en una página en Ingles y me ha encantado!! Es un Huevo para que compartáis vuestras publicaciones en Redes Sociales. Su presentación en el Blog es un Huevo cerrado en la esquina inferior izquierda del Blog, cuando pasamos el ratón por encima se abre, mostrando los iconos para compartir.

Podéis ver una demostración en este Blog de Pruebas

Es muy fácil de poner en el Blog, solo tenéis que ir a la sección "Plantilla" y "Edición HTML", Continuar

buscar /head y pegar antes de esa palabra:

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: "bea50586-2b9f-448d-947a-01385f28e305", onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

Luego busca la palabra /body y pega justo antes:

<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareEgg', ['facebook','twitter','googleplus','linkedin','blogger','stumbleupon','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareegg'});</script>

Guardar y ya puedes verlo en tu Blog.

Cambios en la Interfax de Google +

2012-04-12T21:41:00.000+02:00

Desde ayer podemos ver que la Red Social de Google, Google + o Google Plus, ha variado muchísimo!! Tenia pensado hacer una entrada, pero he encontrado un repaso a fondo sobre las novedades en otro Blog, y merece la pena que lo recomiende: "Un repaso al nuevo diseño de Google+. A fondo"

"Dado que la renovación estética es considerable, vamos a realizar a continuación un repaso por todos los cambios que se han introducido, viendo que nos ofrece cada uno. Y al final, una modesta opinión y una breve reflexión sobre lo que arriesga Google con este cambio"

Efectos en los Enlaces

2012-04-11T18:28:00.000+02:00

Hace poco encontré una excepcional entrada en el Blog "Oloblogger" donde se mostraban estilos muy distintos de estética de los enlaces en tu Blog. (Son esas palabras que cuando las pinchas con el ratón te llevan a otra página, enlazan tu Blog con otras páginas o sitios de tu mismo Blog). Por ejemplo en este Blog los enlaces cuando pasas el ratón por encima se resaltan en color rosa y con sombra.

Hay estilos muy diferentes, algunos simples y otros mas espectaculares, os dejo unos ejemplos pero tenéis que verlos en su página es muy completa y tenéis 32 estilos:

El que yo uso por ejemplo, enlace que incorpora sombras de texto:

a { text-decoration: none; }

a:hover { text-shadow: 2px 2px 2px #aaa; }

Puedes cambiar el color cambiando #aaa por el código de color que necesites.

Enlace que cambia de color :

a { text-decoration:underline; }

a:hover { color: #E06C1F; }

También puedes cambiar el color.

Enlace que aparece en una caja redondeada con color de fondo:

a { text-decoration: none; border-radius: 10px; padding: 2px 5px 5px 5px; }

a:hover { background: #ccc; }

Para ver los 31 estilos distintos, visita:

30+1 MANERAS DE RESALTAR UN ENLACE CON HOVER

Comentarios anidados en Plantillas sin ellos

2012-04-08T22:23:00.000+02:00

Después de buscar y rebuscar en los Blogs de ayuda de los compañeros, cómo poner los Comentarios anidados en una plantilla descargada, en las que no se ven,he visto complicadisimos códigos y copia y pega que al final no me han resultado. Hasta que he visto uno tan simple, que dudé en probarlo por ser demasiado fácil. Y funcionó a la perfección al menos en los Blogs que he probado personalmente.

La página salvadora ha sido Ayuda Bloggers (un Blog que no debéis dudar en visitar) y el truco tan simple como ir a la sección "Plantilla" y pinchar en "Edición de HTML" y "Continuar" y marcamos "Expandir plantilla de artilugios"

buscamos los trozos de código que dicen:

<b:include data='post' name='comments'/>

seguramente haya varios, unos 3, pues los cambiamos por:

<b:include data='post' name='threaded_comments'/>

Guardamos los cambios y ya aparecen los Comentarios de nuestro Blog con la opción de responder a los Comentarios de los lectores.

Webcam en Blogger

2012-04-06T00:06:00.002+02:00

Ya podemos usar nuestra Webcam en Blogger. Ahora en el editor de Imágenes y de Vídeos tenemos la nueva opción de tomar Imágenes o Vídeos desde nuestra Web:

Puedes elegir varias capturas y luego elegir cual incluir en tu Blog.

Nuevos Gadgets Blogger de Google +

2012-04-04T16:45:00.002+02:00

Blogger vuelve a incorporar novedades a su servicio. Ahora ha añadido dos nuevos gadgets en la Galeria de Gadgets de Blogger y los dos sobre temática de Google +, la red social de Google.

Podemos verlos en la sección "Diseño" y "Añadir un Gadgets"

y en la galería podemos ver los nuevos Gadgets:

Son dos gadgets nuevos:

En el primero podremos incluir un botón +1 en el Blog. Tenemos varios tamaños donde elegir, y el tipo de anotación, podemos ver en la parte superior una vista previa de cómo quedaría.

En el segundo Gadget podremos incluir en el Blog una una insignia con tu cuenta de Google +, solo tendrás que añadir tu numero de identificación de Google +.

Flecha para Subir que aparece y desaparece

2012-04-02T18:40:00.001+02:00

Esta es la Flecha para subir y bajar que tengo en el Blog, aparece cuando bajas por la página y desaparece cuando no se necesita en la parte superior.

Es muy simple de añadir a tu Blog, solo tienes que ir a la seccion "Plantilla" de tu Blog, "Edicion de HTML" y continuar.

Buscamos el trozo de código </head> (ya sabes, para buscar usa control+F y pegas este código en el recuadrito de búsqueda) y justo antes pegas este código:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

<style type="text/css"> #w2btoTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left top;} #w2btoTopHover {background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);} #w2btoTop:active, #w2btoTop:focus {outline:none;} </style> <script src="http://bloggerblogwidgets.googlecode.com/files/w2b_jquery.ui.totop.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $().UItoTop({ easingType: 'easeOutCirc' }); }); </script>

Y damos a guardar. Ya podremos ver la flecha como la que hay en este Blog en el tuyo.

Este código es originario de Way2Bloggin.

Gadget Galería de Imagines en Nube Móvil

2012-03-31T18:20:00.001+02:00

Para insertar esta galería de Imagenes en tu Blog (ver ejemplo):

Solo tienes que ir a este Link: Roytanck y rellenar los datos que te piden:

Rss de donde quieres que se ven las Imágenes (Flickr o Picassa)
Dimensiones
Color de Fondo

Y pinchar en generar Código. Podrás ver una Vista Previa de cómo resultaría.

Analiza tu Blog con Stat my Web

2012-03-30T14:18:00.001+02:00

"Stat my Web" analiza tu Blog y te multitud de datos sobre él, algunos muy interesantes y útiles. Te dirá datos como:

Si esta Olline o no
Tu Pagerank y tu rango en Alexa
Visitantes medios
Datos de Seo
Si estas listado en Dmoz
Tus link externos e internos
Páginas Indexadas
Tiempo de Carga
Valor del Blog
un largo etc....

Te ofrece algunos Widgets para poner en tu Blog como:

Ahora con los cambios de Blogger algunos datos pueden verse alterados, pero si posees dominio propio es interesante de probar.

Gadget de Redes Sociales

2012-03-28T14:16:00.000+02:00

Aquí tenemos un bonito y colorido Gadget para que te sigan en las Redes Sociales. Es fácil de poner aunque veas mucho código.

La imagen que usaremos para este gadget es:

Primero añadimos un código a nuestra plantilla. En la sección "Plantilla" pinchar en "Edicion de HTML" y "Continuar".

Ahora buscamos el trozo ]]></b:skin> en la plantilla (si no sabes buscarlo usa control+F y pegamos ese trozo en el recuadrito para buscarlo en la plantilla). Antes de este trozo de codigo pegamos:

.redes {

}

.redes a{

background-image : url(http://2.bp.blogspot.com/-m5z1rlhphq4/T3L4XxX8uuI/AAAAAAAASHk/hL1kM6oTGGk/s1600/redes.png);

background-color : transparent;

background-repeat : no-repeat;

height : 48px;

width : 48px;

float : left;

display : block;

margin : 0 5px 0 0;

}

#feedburner_png {

background-position : 0px -48px;

}

#feedburner_png:hover {

background-position : 0px 0px;

}

#googleplus_png {

background-position : -240px -48px;

}

#googleplus_png:hover {

background-position : -240px 0px;

}

#facebook_png {

background-position : -48px -48px;

}

#facebook_png:hover {

background-position : -48px 0px;

}

#twitter_png {

background-position : -144px -48px;

}

#twitter_png:hover {

background-position : -144px 0px;

}

#youtube_png {

background-position : -96px -48px;

}

#youtube_png:hover {

background-position : -96px 0px;

}

#linkedin_png {

background-position : -192px -48px;

}

#linkedin_png:hover {

background-position : -192px 0px;

}

Una vez hemos guardado la plantilla ya podemos añadir el Gadget al Blog desde la sección "Diseño" y "Añadir un Gadget" y "HTML/Javascrip" en la galería de gadgets.

Pegamos este código y rellenamos los datos de nuestras redes sociales en los textos en negrita.

<div class='redes'>

<a id='feedburner_png' href='URL Feedburner' target='_blank' title='Suscribirse'></a>

<a id='googleplus_png' href='URL Google +' target='_blank' title='Google +'></a>

<a id='facebook_png' href='URL Facebook' target='_blank' title='Facebook'></a>

<a id='twitter_png' href='URL Twitter' target='_blank' title='Twitter'></a>

<a id='youtube_png' href='URL Youtube' target='_blank' title='Youtube'></a>

<a id='linkedin_png' href='URL Linkedin' target='_blank' title='Linkedin></a>

</div>