En este tutorial, los sitios sociales que he incluido son Facebook, Twitter, Delicious con RSS y los botones de correo electrónico, de curso, se pueden ver flotando. Así que vamos a pasar por el tutorial.
1. Ir a Diseño de Blogger > Edición HTML.
2. Encuentra el cierre </body> y antes de que añadir lo siguiente:
<!-- Pichujitos.co.cc -->
<div class="flt-wdt">
<a href="http://www.facebook.com/Page id" title="Join me on Facebook"><img alt="Join me on Facebook" src="your image.png" /></a>
<a href="http://twitter.com/Your profile" title="Follow me on Twitter"><img alt="Follow me on Twitter" src=""your image.png" /></a>
<a href="http://www.delicious.com/Profile" title="Find me on Delicious"><img alt="Find me on Delicious" src=""your image.png" /></a>
<a href="http://feeds.feedburner.com/feed-address" title="Subscribe to RSS"><img alt="Subscribe to RSS" src=""your image.png" /></a>
<a href="http://your blog.blogspot.com/p/Contact page" title="Email me"><img alt="Email me" src="your image.png" /></a>
<!-- Example/Delete -->
<a href="Any Social Site" title="Give it a title"><img alt="Give it a title" src="your image.png" /></a>
</div>
<!-- End -->
Si hay algún JavaScript agregó body en el cierre, a continuación, agregue el código anterior antes de las secuencias de comandos. A continuación se muestra un ejemplo:
Ahora todo lo que tienes que hacer es cambiar los códigos marcados en negrita. Por ejemplo, cambiar el "id de la página"o la "Identificación del perfil" a la suya. También subir tus propios iconos, conseguir los enlaces directos y reemplazar "su image.png" con los iconos correspondientes a sus sitios.
Si necesita añadir más iconos flotantes de tus sitios favoritos social, entonces el formato se da dentro de los códigos anteriores como "Ejemplo / Eliminar". Si no lo necesita, a continuación, eliminar estos fragmentos.
3. Buscar ]]></b:skin> y antes de agregar la siguiente parte de CSS:
.flt-wdt{
position:fixed;
margin-right:10px;
right:0;
top:40%;
}
.flt-wdt img{
float:right;
clear:right;
margin:5px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.flt-wdt img:hover{
-moz-transform: scale(1.2) rotate(6deg);
-webkit-transform: scale(1.2) rotate(6deg);
-o-transform: scale(1.2) rotate(6deg);
-ms-transform: scale(1.2) rotate(6deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1.2) rotate(6deg);
}
El widget se verá en la derecha. Cambiar todos los "correctos" marcados en negrita en el paso 3, a "left" hará que el widget a flotar a la izquierda. Si usted necesita para restablecer la posición de la misma desde la parte superior, a continuación, subir o bajar "40%", o dejarlo como está.
4. Por fin guardar la plantilla.
Ahora tienes botones flotantes de los medios de comunicación social de los blogs en Blogger.