Agregar barra compartir (share this) Facebook y twitter en wordpress.com

Como todos saben wordpress.com no permite instalar plugins, por tal motivo no se puede agregar una barrtita de “Share This” o “Compartir esto” en nuestro blog, la manera mas facil que encontre para agregarla como se pueden dar cuenta en mis ultimos post es la siguiente manera:

Cuando estemos escribiendo la entrada cambiamos a la vista “HTML” (boton derecho a la pestaña Visual) y luego en la parte de abajo de nuestra entrada escribimos en siguiente codigo:

<strong>Compartirlo</strong>
<hr>
<a href="http://twitter.com/home/?status=Recomiendo este articulo:%20url_entrada"><img src="https://jodacame.files.wordpress.com/2009/12/twitter1.png"></a>  <a href="http://www.facebook.com/sharer.php?u=url_entrada"><img src="https://jodacame.files.wordpress.com/2009/12/facebook.png"></a>

En donde “url_entrada” es el link del post que queremos compartir, les recomiendo recortar el link con tinyurl o bit.ly para que pueda ser publicado sin problema en twitter,

La barra quedaría como la siguiente:

Compartirlo

---

Iconos al Lado de los Link CSS – Personalizacion WEB

Si quieres agregar un icono al lado de tus link, solo tienes q escribir este código en tu css y listo, cada vez que agregues un link te pondrá un icono automáticamente al lado de este.

cambia el “.exe” por la extencion que quieras personalizar, puedes agregar tantas extenciones como quieras.

a[href$='.exe'] { 

	padding-left:20px;  

	background: transparent url(icons/icon_exe.gif) no-repeat center left;

}

Para los videos de Youtube y otros

a[href *="youtube.com/watch?"], a[href *="sevenload.com/videos/"], a[href *="metacafe.com/watch/"] { 

	padding-left:20px;  

	background: transparent url(icons/icon_film.gif) no-repeat center left;

}

Solo funciona en IE7 y Firefox

Cajas de texto con imagenes css

Quieres personalizar tus cajas de texto en tu pagina web al estilo de google, aqui te dejo el código:

Cajas Personalizadas con CSS

CSS

<style>
.searchBox
{
background-image:url('http://www.google.com/images/poweredby_transparent/poweredby_FFFFFF.gif');
background-repeat:no-repeat;
background-color:#FFFFFF;
color:#000000;
padding-left:70px;
border-width:1px;
height:20px;
border-style:solid;
border-color:#000000;

}

.userBox
{
background-image:url('img2.png');
background-repeat:no-repeat;
padding-left:25px;
border-width:1px;
border-style:solid;
border-color:#CC0000;
}

TD
{
font-size:12px;
}

</style>

HTML

<table>
<tr>
<td><input type="text" name="buscar" class="searchBox" size="18"/></td><td>(Google)</td>
</tr>
<tr>
<td><input type="text" name="nombre" class="userBox" size="18"/></td><td>(Personalizado)</td>
</tr>
</table>