somosblogger

Cómo añadir iconos redes sociales que giran en blogger

En este artículo voy a explicar cómo añadir iconos de redes sociales que giran en nuestro blog en dos posiciones diferentes de nuestro blog.



                                                              



A continuación les muestro los pasos a seguir para añadir iconos redes sociales que giran en blogger:
Añadir los estilos a la plantilla: Debes dirigirte a la sección "Plantilla" de tu blog y pulsar el botón "Editar HTML".

Busca el siguiente texto ]]></b:skin> y justo andes de él añade el siguiente código:

  /* ICONOS REDES SOCIALES DE TUTORIALES Y OPINIONES*/
#social-iconos {
width:100%;
height:50px;
margin-bottom:10px; display:block;
clear:both;
}
.social-icons{display:table}
.social-icons ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
text-align:right;
padding:5px 5px 0 0
}
.social-icons ul {
padding:0;
float:right;
margin-bottom:0;
}
.social-icons li.social_icon {
background:none !important;
padding-left:0 !important;
display:inline;
float:left;
margin-left:6px;
}
.social-icons li:hover {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
} 


Añadir los iconos de redes sociales en la CABECERA del Blog: Debes dirigirte a la sección "Plantilla" de tu blog y pulsar el botón "Editar HTML".

Busca SIN expandir artilugios el siguiente texto:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> y pega antes de él el siguiente código: <div class='social-icons' id='social-iconos'>
<ul>
<li class='social_icon'><a href='http://facebook.com/Nombre_Usuario'><img border='0' src='http://www.characterscounter.com/img/iconos-sociales/facebook-32x32.png'/></a></li>
<li class='social_icon'><a href='https://twitter.com/Nombre_Usuario'><img border='0' src='http://www.characterscounter.com/img/iconos-sociales/twitter-32x32.png'/></a></li>
<li class='social_icon'><a href='https://plus.google.com/ID_Usuario/about'><img border='0' src='http://www.characterscounter.com/img/iconos-sociales/google-32x32.png'/></a></li>
<li class='social_icon'><a href='http://Nombre_de_tu_blog.com/feeds/posts/default'><img border='0' src='http://www.characterscounter.com/img/iconos-sociales/rss-32x32.png'/></a></li>
</ul>
</div> 


IMPORTANTE: Debes cambiar el texto que aparece en rojo por tus datos.

Si quieres añadir los iconos de redes sociales COMO GADGET del Blog: Deberás dirigirte a la sección "Diseño" y pulsar la opción "Añadir un gadget".

De la lista de gadgets disponibles, deberás seleccionar el "HTML/Javascript" y pegar en su interior el código del punto anterior.




Por supuesto que puedes añadir más iconos si lo deseas, sólo deberás agrega antes de </ul></div> una línea como esta por cada icono extra que quieras:

<li class='social_icon'><a href='URL del enlace'><img border='0' src='URL de la imagen'/></a></li>

Cómo hacer que ocupe toda la pantalla la imagen de fondo de Blogger

 

 

En el artículo de hoy vamos a ver cómo hacer que la imagen de fondo de nuestro blogger ocupe toda la pantalla sin importar la resolución del monitor. Y como en todos nuestros artículos lo haremos a través de un ejemplo muy sencillo.

CÓMO MOSTRAR IMAGEN DE FONDO DE BLOGGER EN TODA LA PANTALLA

Esta solución requiere modificar el CSS de nuestra plantilla añadiendo la propiedad background-size lo que nos permitirá especificar el tamaño de la imagen de fondo.

PASOS PARA MOSTRAR IMAGEN DE FONDO DE BLOGGER EN TODA LA PANTALLA A continuación mostramos los pasos necesarios para conseguir que la imagen de fondo de nuestro blogger ocupe toda la pantalla en cualquier resolución:

1. Abrir la sección Plantilla de nuestro blogger
2. Pulsar el botón Editar HTML
3. Localizar el texto background situado dentro de body{
4. Sustituir background por el siguiente código
5.  

background: URL(URL de la imagen) no-repeat center center fixed;
background-size: cover;
Después de la modificación el body quedaría de la siguiente manera:


body {
background: url(URL de la imagen) no-repeat center center fixed;
background-size: cover;
margin:0;
color:#000;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

6. Recuarda que en el punto 4 debes indicar la URL de tu imagen de fondo

Siguiendo estos sencillos pasos harás que la imagen de fondo de tu blogger ocupe toda la pantalla y se vea correctamente en cualquier resolución.

code {background:#EEEEEE; font-family: Trebuchet MS; display:block; border:1px solid #999999; padding:10px;} 

Explicación:  Con el código anterior estamos creando la code y asignándole unas determinadas características como por ejemplo:

1. background: Color del fondo en hexadecimal.
2. fonf-family: Tipo de letra
3. display: Especifica cómo se mostrará el html resultante.
4. border: ancho, tipo y color del borde que rodeará al texto.
5. padding: espacio entre el texto y su contenedor.

¿Cómo se utiliza?: Muy sencillo, para incluir código en un post de blogger deberás seguir los siguientes pasos:

1. Pulsar el botón HTML del editor.
2. Escribir en código que quieres mostrar en tu post entre las siguientes tags <code></code>

Para agregar un gadget arriba o debajo de las entradas basta con arrastrar el gadget hasta esa posición y tendremos colocado el gadget en ese lugar. Pero qué tal si quieres agregar dos gadgets y que ambos estén en columnas, pues en ese caso habremos de añadir una sección de gadgets en esa área de modo que se creen dos columnas de gadgets arriba o debajo de las entradas.


Puedes tener sólo las columnas de arriba, o sólo las de abajo, o ambas, eso dependerá del gusto y necesidades de cada uno.

Para agregar estas columnas de gadgets entra en la Edición HTML de la plantilla, y SIN los artilugios expandidos busca esta parte:


<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Entradas del blog' type='Blog'/>
</b:section> 



 Si quieres las columnas de gadgets arriba de las entradas, entonces agrega arriba de lo anterior esto:


  <div id='BlogGadget1' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-1' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget2' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/> 


  Si también quieres dos columnas de gadgets debajo de las entradas, entonces agrega debajo del primer código esto:

  
<div id='BlogGadget3' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-3' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget4' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/> 




Así tendrás dos columnas de gadgets en esa área del blog.