17 abril 2010

Agregar enlaces de suscripcion atractivos en tu sidebar

 
Siempre lo he dicho y asi lo reiterare, los enlaces de suscripcion de un blog, nunca deben faltar en tu blog, si tienes por monton, siempre sera mucho mejor.

Que un usuario se suscriba a tu blog, es algo muy importante, tan importante como quemar tu feed en feedburner, mientras mas suscriptores tengas, mas pocisionamiento, ayuda a aumentar el pagerank de tu blog, y hacer que google te tome en cuenta a la hora de las busquedas, ya que hacer que un usuario se suscriba, demuestra a los robots cuan interesante y de calidad es el contenido publicado en tu blog.

Este widget, es igual al que ves en la imagen, pero esa es solo una previsualizacion de su apariencia, para verlo funcionando puedes visitar este blog de pruebas.

[1] Entra a Blogger > Diseño > Edicion HTML
[2] Buscar la etiqueta </head>
[3] Justo antes de esta, pegar el siguiente codigo

<style type='text/css'>

#hsection{border:4px solid #D3D3D3;background-color:#e9e9e9;}
#hsection:hover{border:4px solid #BABABA;background-color:#e9e9e9;}

#sectionmy .sectionmy2 h2.subscription { border:0; margin:0; padding:6px 0 0 55px; height:42px; font-size:16px;font-family:&quot;Segoe UI&quot;,Calibri,&quot;Myriad Pro&quot;,Myriad,&quot;Trebuchet MS&quot;,Helvetica,Arial,sans-serif;
font-weight:bold; }

#sectionmy .sectionmy2 h2.rss { background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/S209wcnxO5I/AAAAAAAAAw4/I7aEXRVYR8s/RSS.png) no-repeat top left; }

#sectionmy .sectionmy2 h2.email { background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S209s4_wFoI/AAAAAAAAAww/8VovLp1Yxlg/EmailRSS.png) no-repeat top left; }

#sectionmy .sectionmy2 h2.twitter { background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/S209oJTU3UI/AAAAAAAAAwo/28dTiLvxvDQ/twitter.png) no-repeat top left; }

#sectionmy .sectionmy2 .subscription a { color:#252e28; text-decoration:none; }

</style>

En VERDE: Es el grosor del borde
En NARANJA: Es el color del borde del recuadro
En VIOLETA: Es el color de fondo del recuadro
En AZUL: Es el color al que cambia el borde al color el mouse sobre el recuadro
En ROJO: Son las imagenes, puedes sustituirlas por las tuyas si quieres.

[4] Añade un nuevo gadget HTML/Javascript y pega el siguiente codigo.

<div id="hsection">
<div id="sectionmy">
<div class="sectionmy2">

<h2 class="subscription rss"><a href="URL DE TU FEED">SUSCRIBETE VIA RSS</a></h2>

<h2 class="subscription email"><a href="URL DE LA SUSCRIPCION POR EMAIL DE FEEDBURNER">SUSCRIBETE VIA EMAIL</a></h2>

<h2 class="subscription twitter"><a href="TU URL DE TWITTER">SIGUEME EN TWITTER</a></h2>

</div></div>
</div>

[5] Guarda los cambios.

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo