Iconos Sociales con Efecto de Agrandar en Css.

Iconos Sociales con Efecto de Agrandar en Css. Tutorial creado por Creando Blogs.

Estos íconos los he implementado en mi blog Marcos Gratis y me gusta mucho como queda, recomiendo alojar   las imágenes en tu propio servidor ya que a menudo hago cambio de plantilla y limpieza y puede ser que se borren las imágenes.

Aquí pueden probar los botones pinchando sobre cada uno, aunque el resultado final no es el óptimo debido a los estilos de mi plantilla para las imágenes de las entradas.

Bueno primero que nada, haz una copia de seguridad de la plantilla de tu blog. Luego agregamos lo siguiente  en añadir un gadget html/javascript.

<div class="social-connect-widget">
<a href="TU PAGINA DE GOOGLE+" target="_blank"><img alt="agrégame en google+" src="http://1.bp.blogspot.com/-NCMiSqVwgrg/TwWYbZBmM7I/AAAAAAAACGU/x5kaQIDb7hM/s1600/gplus-32.png" title="agrégame en google+" /></a>
<a href="http://twitter.com/TU NOMBRE DE TWITTER" target="_blank"><img alt="síguenos en twitter" src="http://3.bp.blogspot.com/-1NQnfW9_qD8/TnkjXj3f-qI/AAAAAAAAAPY/2MgSdlsVwN0/s000/social-connect-twitter.png" title="síguenos en twitter" /></a>
<a href="http://facebook.com/TU ID DE FACEBOOK" target="_blank"><img alt="estamos en facebook" src="http://3.bp.blogspot.com/-jtgnrR7QDLI/TnkjYOcfWVI/AAAAAAAAAPc/xRBFIzZYJ2I/s1600/social-connect-facebook.png" title="estamos en facebook" /></a>
<a href="http://feeds.feedburner.com/TU FEED" target="_blank"><img alt="feed rss" src="http://4.bp.blogspot.com/-BSXqhFPVRmY/TnkjXQAIbaI/AAAAAAAAAPU/63ZmAXMOa9U/s000/social-connect-rss.png" title="feed rss" /></a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=TU ID" target="_blank"><img alt="suscríbete por e-mail" src="http://2.bp.blogspot.com/-kIIqoW-rCVo/Tyc72-a_-GI/AAAAAAAACYM/gw3n0TMTdfY/s1600/social-connect-mail.png" title="suscríbete por e-mail" /></a>
</div>
</div>

Debes llenar los datos que se encuentran con letras mayúsculas, tal como la dirección de tu página de Google + , etc. si no tienes puedes borrar esa parte y simplemente no se verá.

Luego iremos a plantilla, edición de html y ante de ]]></b:skin>, agregamos los siguientes estilos, los cuales dan el efcto de agrandar.

/* -- social connect widget -- */
.social-connect-widget img{
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-o-transform:scale(0.9);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
}
.social-connect-widget img:hover{
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
}
.social-connect-widget{text-align:right;margin:20px 20px ;}
.social-connect-widget img{vertical-align:middle} 

Si quisieras agrandar aún mas los íconos, prueba cambiando los valores en scale(1) a scale(1.2)  por ejemplo. Comprobamos en vista previa que todo luce bién y guardamos.

Numerar los Nuevos Comentarios de Blogger.


Este tutorial lo he tomado de Vagabundia, una página excelente con cantidad de información, trucos y tutoriales para el blog e informática en general. Lo pongo a modo de ayuda-memoria.

Primero ir a Plantilla, Edición de Html, pulso la tecla F3 y me saldrá un buscador en la esquina superior derecha, busco </b:skin> y justo arriba de eso pongo el siguiente código:

.comments .comments-content {
  counter-reset: contadorcomentarios;
}
.comments .comment-block:before {
  /* el contador */
  content: counter(contadorcomentarios, decimal);
  counter-increment: contadorcomentarios;
  /* la posición dentro del rectángulo */
  position: absolute;
  right: 0;
  top: 5px;
  /* las propiedades gráficas de la fuente */
  color: #9AB;
  font-family: Century Gothic;
  font-size: 26px;
}

En donde están la últimas tres lineas puedo cambiar el color de la letra, la fuente, y el tamaño. 

Poner un Fondo a los Títulos de la Sidebar.

Poner un Fondo a los Títulos de la Sidebar, le dará a tu blog un toque mas personal, sin decir que puedes hacer volar a tu imaginación con un montón de colores y texturas con las cuales podemos experimentar.

Nunca debemos olvidar hacer una copia de la plantilla  antes de cada cambio que vayamos a hacer ya que un pequeño error puede significar un gran cambio a la  hora de guardar la plantilla y sobre todo si no tenemos pericia en el tema, sin embargo no debemos tener temor ya que con este simple paso podemos volver todo a la normalidad.

Lo primero que haremos es ir a la edición Html de la plantilla, presionar F3 y saldrá un buscador, allí ponemos .sidebar h2 una vez ubicado el código, lo reemplazamos por lo siguiente:
.sidebar h2{
background: url(URL-DE-TU-IMAGEN);
border: 1px solid #9CD2F6;
margin-bottom:15px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
Si lo quieres sin borde, quita: border: 1px solid #9CD2F6. Si quieres el borde de otro color cambia #9CD2F6 por el color de tu elección. Si en vez  de una imagen de fondo quieres un color, debes sacar url(URL-DE-TU-IMAGEN) y solo poner un color antecedido de un #.

Adicionalmente he puesto los textos centrados. Para ubicarlos a la derecha deberás cambiar en center por right, y a la izquierda por left.

Está probado en las plantillas del diseñador de blogger, aunque cada caso pudiese ser distinto.


Como eliminar la Navbar o Barra de Blogger.

La Navbar de Blogger cumple variadas funciones, entre las cuales destacan;

  • Regresar al panel de control de tu propio blog, 
  • Buscar en un blog mediante la vía búsqueda de blogs, Compartirlo a través de Twitter o Facebook, 
  • Informar sobre mal uso, 
  • Acceder a un blog aleatorio actualizado recientemente, entre otros.


A pesar de sus múltiples ventajas también tiene inconvenientes, por ejemplo la estética se ve afectada sobre todo cuando queremos darle a nuestra página un aspecto mas profesional.

Si quieres eliminarla deberás acceder a la plantilla, en edición de html e insertar el siguiente código antes de </b:skin>

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

En donde dice display:none; estamos dando la orden de que la barra se oculte. Por lo que si mas adelante deseas volver a incorporarla bastará con borrar el código.