Widget Atractivo de Social Media Para Blogger

Hola Amigos! En esta ocasion te mostrare un hermoso y atractivo widget para compartir en los medios sociales como una manera de aumentar los visitantes a tu blog. Sabemos que cada blogero añade distintos estilos de Widget de Social Media para atraer mas lectores, compartire hoy uno hecho a mano en forma de dibujo de iconos sociales para Blogger.Veras que luce distinto y facil de insertar en tu blog solo en un paso.
Ejemplo:

Paso simple para añadir un Widget de Social Media Dibujado a Mano en tu Blog.

• Entra en cuenta de Blogger > Diseño > Añadir un Gadget y selecciona "HTML/Java Script"
• Copia el codigo de abajo y pegalo en html/javascript.

<style class="text/css">

table

{

border-bottom: 0px solid #E6E6E6;

float: center;

width: 260px;

margin:10px 0 0 3px;

}

.subicons

{

border-right: 1px solid #E6E6E6;

}

.Fadeout {

filter:alpha(opacity=100);

opacity: 1.0;

border:0;

}

.Fadeout:hover{

filter:alpha(opacity=80);

opacity: 0.8;

border:0;

}

</style>

<div class="table">

<table>

<tr>

<td><div class="subicons"><a class="Fadeout" href="http://www.facebook.com/trucosdeblogger"
 imageanchor="1" target="_blank" rel="nofollow"><img border="0" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijUKF06LgivfijguCXwAo-_5yi4jDlopsCDaMmVDpgST69PBHxXKkLSwtYrRKP7IEO4JF3JXvii8YK31QcyGsP18qbG73j03mxiiMkT-uNm4A2i7oeE6sf16jyo8SQT04TaAR65sU1r9T-/s1600/facebook-48.png"
 /></a></div></td><td><div 
class="subicons"><a class="Fadeout" href="http://twitter.com/andante772"
 imageanchor="1" target="_blank" rel="nofollow"><img border="0" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_kmH3aJH0xfUjRZIQDhlxxcksu1lEaaIj7I0H7B8hi2KAAT5vcpQ7Ew-KFL_ItDrLl143r3-FuK9DUL-MM788b1FY5QcaYBZ-QGbWdwg_2q4Qa8hIg6A4c4O6agSX_fjtlqn3yYxo2nj5/s1600/twitter-48.png"
 /></a></div></td>

<td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/supertrucosdeblogger"
 imageanchor="1" target="_blank" rel="nofollow"><img border="0" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLuc1cEeWaDIMthvXPfiRtaWmUzimLJEiTSrTQlOUrYF8rsFoltzYxAXpxsquBFXOYEreQGx8ROV4NkqclvKi65XQv8fERS_n_xAFZVMZ5HsUM9BnVkbSypj9TsdCFvDOt4Cq5C_KiRX4Z/s1600/rss-48.png"
 /></a></div></td>

<td><a class="Fadeout" href="https://plus.google.com/116180896434879626623/posts"
 imageanchor="1" target="_blank" rel="nofollow"><img border="0" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb6kU2VETc3EJbYfwwKWJq2YlryvPyeo_sNuY-ma5CtRlUegzPe8zPrsxRkVUYj9LsFDY8pmOAPDYWW6XNgpCj033CaqSIRa20lPFX3VTeEtezSdwlRrjYU5famifpENMq4bfjf7YUs2YN/s1600/google-48.png"
 /></a></td>

</tr></table>

</div>

Customizacion

Necesitas reemplazar todos los enlaces en color amarillo por tu nombre o id de usuario en estas redes sociales.

Ademas si asi deseas puedes  customizar el ancho del widget simplemente reemplazando width: 260px por el ancho deseado.

Si no deseas borde entre cada icono , simplemente reemplace border-right: 1px con border-right: 0px

Read More

Widget de Profile Social Deslizable Con CSS Para Blog De Blogger

En este articulo te mostrare como añadir un lindo y animado deslizador de iconos sociales a tu blog de blogger.Al usar este widget podras enlazar el profile de las redes sociales tales como  Facebook, Twitter , Rss Google plus,Rss y StumbleUpon Solo dale un vistazo a el demo en este enlace.
El ejemplo lo podras vere en siguiente enlace:http://lanoticiaspr.blogspot.com/
Vamos a añadir este widget de social media deslizable a tu blog de blogger siguiendo estos simples pasos.

1.Entra en tu cuenta de Blogger
 

2. Luego selecciona "Diseño" como muestra abajo.

3. Da Click Añadir un Gadget y selecciona 'HTML/Javascript

4. Pega el codigo de abajo

<style>
#socialmenu_cbt { 
  margin:0; 
  padding:0; 
  width: 30em; 
  height: 4.5em; 
  overflow:hidden; 
  } 
#socialmenu_cbt li { 
  display:inline; 
  list-style-type:none; 
  } 
#socialmenu_cbt li a { 
  display:block; 
  float:left; 
  text-decoration:none; 
  margin:0; 
  } 
#socialmenu_cbt li a img { 
  opacity:0.7; 
  margin:0.5em; 
  border:0; 
  float:left; 
  } 
#socialmenu_cbt li a span { 
  display:none; 
  } 
#socialmenu_cbt li a:hover { 
  background:transparent; 
  } 
#socialmenu_cbt li a:hover span { 
  width:7em; 
  color:#aaa; 
  display:block; 
  cursor:pointer; 
  float:left; 
  } 
#socialmenu_cbt .h2 { 
  margin:0 5px; 
  padding:0; 
  color:#fc0; 
  font-variant:small-caps; 
  font-size:1em; 
  border:0; 
  }
  
  </style>
  <ul id="socialmenu_cbt"> 
  <li> 
    <a href="https://www.facebook.com/trucosblogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJFgTBislWktJb-oTFdkRAR1hVCMs0Fr7rR7mpMj5Z0L2EzF6FlbWiIkbURTXo9C371mlSAiTGgBX7USVNvfQOC3iDOCDEFzzL882g03l0hD6T-nIBDiZeJjiLTVKtQb7svcc7SKHgs7I/s1600/Facebook-icon_btrix.png" alt="facebook" width="50" height="50" title="Facebook" /> 
     <span><br /> 
      <b class="h2">Facebook</b><br /> 
      Añadir a facebook 
     </span> 
    </a> 
   </li> 
   <li> 
    <a href="https://plus.google.com/107955298793879609876"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0umuvg_IQdsBCivIUnUx8CCRTk4254Qc-yJMqyVeoLeKnLvyvw6pAG-7HQ4MDe_nspwCsK_rnNInrQFDxsrI-ZYsAFBpVcCKPUHVVMWDZvR9_Pf22qG6HwJLzfNiyDSMhhljM_0G1JHA/s1600/Google-plus-icon_btrix.png" alt="Google plus" width="50" height="50" title="=Google plus" /> 
     <span> 
      <br /> 
      <b class="h2">Google Plus</b><br /> 
      Añadir a Google Plus
     </span> 
    </a> 
   </li> 
   <li> 
    <a href="http://feeds.feedburner.com/ciudadblogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifhVNsWIHAJENVJSzy_K0K9yjM5ZQq61Eh7skFa1ClExumFmgZlzpufenc1X_PXR120kim9dIKip9CxB0Biud6l4fU5pZTviG7a-eIT1HfwyUy8fiEGuZKsSn7XlYQBeCwaWpgwOLql7U/s1600/RSS-icon_btrix.png" alt="Rss" width="50" height="50" title="Rss" /> 
     <span><br /> 
      <b class="h2">Rss Feed</b><br /> 
        Subscribete
     </span> 
    </a> 
   </li> 
   <li> 
    <a href="http://stumbleupon.com/Nombre de Usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgei1bAwrbnPGhWn-pjxRpZk39vopxptS9-BL__Q2Lkvg95qxlB0ZDsLut-rP94YTLS2n79cz7kbtdCO1xDM2bLmNzvfqf-jCD3xehf4Wj20S-dJZ1tY7RR_USqWi8AIXTL67y5acAeDvg/s1600/StumbleUpon-icon_btrix.png" alt="Stumbleupon" width="50" height="50" title="Stumbleupon" /> 
     <span><br /> 
      <b class="h2">Stumbleupon </b><br /> 
      Añadir a stumble
     </span> 
    </a> 
   </li> 
    <li> 
    <a href="https://twitter.com/andante772"> 
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeUAdb2XOcyQ5VrKoKoUnEeMgy-A5hTcUBVgV0xmS7HMpiJn9Fs3Dcf3_9bvFqpvnDmSJCMhvkcftumOHXZVWjF_LMHWB3ZK7QgwoFOcj73Q5rZlX474deO46PhsxylEc3K6VPZUW08FI/s1600/Twitter-icon_btrix.png" alt="twitter" width="50" height="50" title="twitter" /> 
     <span><br /> 
      <b class="h2">Twitter</b><br /> 
      Añadir a twitter
     </span> 
    </a> 
   </li> 
  </ul> 

Nota:Puedes cambiar los contadores manualmente, solo cambia el numero color rojo de acuerdo al profile.

Reemplace ciudadblogger con tu ID de Feedburner
Reemplace trucosblogger con el nombre de usuario de Facebook
Reemplace andante772 con tu nombre de usuario de Twitter
Reemplace 107955298793879609876 con tu ID de Google plus
Reemplace Nombre de Usuario con tu nombre de usuario de StumbleUpon

Nota:Si por alguna razon no te trabaja como debe pon el codigo de  css <style>codigo css</style> en area de Editar Html arriba de la etiqueta ]]</b:skin> y listo.

5. Luego guarda tu HTML/Javascript'.

   Listo...

Read More

Añadir Iconos Sociales Rotables Usando CSS en Blogger

La Adición del llamativo widget de intercambio social a su blog o sitio aumenta las posibilidades de conseguir más suscriptores. La mayoría de los visitantes son la fuerza que hace clic en tu currículum de suscripción debido al widget de reparto increíble que les presento, por qué algunos hacen clic en él sólo para  pruebar y antes de que te des cuenta, se convierten en tus fieles suscriptores o seguidores.
Ahora voy a compartir con ustedes, un widget de intercambio social que rota, que giran al poner el ratón, según el grado ya establecido, y regresa a su posición original cuando se quita el mismo.

 Ejemplo:

Como Añadir Iconos de Rotacion Sociales a tu Blog

• Entre a la interface de tu blogger
• Da Click on Diseño > Elementos de Pagina > Añadir un Gadget(Vieja interface de blogger)
• Da Click en Plantilla > Añadir un Gadget (Nueva Interface de Blogger)
• Selecciona HTML/JavaScript  de la lista de opciones y pega el siguiente codigo en area de contenido

<style>

p#rb_socialicons img {
 /* Spinning Social Icons Widget por www.ciudadblogger.info */
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

p#rb_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

/* Spinning Social Icons Widget por www.ciudadblogger.info */

</style>


<center><p id="rb_socialicons">
    <a href="http://www.facebook.com/realcombiz/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimKgl52fFWcmRAcawhKraEM0Ea1vGuI7RF4USH2_ZZmhyphenhyphen5DMd551L_po6jwYJSt1Ybg5GW10XUrZGpzejHwQKLGwiVDgHbjZL-T3L6x_xqBKYXMXNg0rqJMJTPBXGi0wOlSHmxhKLU-dw/s1600/rb+facebook+icon.png" /></a>
    <a href="http://www.twitter.com/realcombiz/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhovZLzUNatZSgj_gALt377ic90gr-itC3TFdIGzdx7JHlBDfyS3-icmCaLIqi33EwP274qKlkdEDeOs79Uu4kSSFdPmIRf28fLzfA_GJikkPa9ObIA5VDKolX4KkGfeAAVmPvdDuUl750/s1600/rb+twitter+icon.png" /></a>
    <a href="https://plus.google.com/u/0/110710740924167130289">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbp68jxTL5-GdD3GMRA8vyKiCadRio4gHv6ffhMmf98uNV0fJbXZtqqv8tuCCHZUArFykDbk-Fxt1dZ_P4xx03zFPevdyPWjx-xfQZOX1BCxxXGfqSs9F6Lobg-7iAJOWdC-22tTNu3g/s1600/rb+google+plus+icon.png" /></a>
    <a href="http://www.feeds.feedburner.com/realcombiz/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyMCodq5doGcz-UFNTPdPyX6hFq9-P-Mqgqb6c6zb_jZKs9G3y1_ZetqZB1LdnHKUQIuH4BmjtwaUENpBVrEyHkihFaH2EjxCQfXKTRXv3OTozD7ElZEdcRat_da6WEjBFI5WieuqDVYY/s1600/rb+rss+feed+icon.png" /></a>
    <a href="http://www.youtube.com/realcombiz/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaF_iiWzirHIJqRSKrWjOBIuxMbMS6pQTqK7cgrBN2sGFBHFEKoLZtr6_64wsR7rwXfakg6FHm1_AowcNBy25DyQ5vqxEoXNLnJ4w_w-yVH5ZMW1GLXJ99NYQkUZksGC4JobrggLeOM5g/s1600/rb+youtube+icon.png" /></a>
</p></center>

• Da Click en Boton de Guardar 

Customizar

Puedes facilmente personalizar tus  icons a tu gusto editando el codigo de abajo

• Para cambiar el rate (tiempo tomado) cuando rota el icono, simplemente edite 0.8s
• Puedes cambiar el grado que se hecha el icon en rotar,simplemente edite 360 grados.

Listo que lo disfrutes.

Read More