Ciudad Blogger

Inicio » Archivos de noviembre 2012

Un FanBox para Twitter personalizable

Iconos de redes sociales arriba del blog que giran al pasar el cursor

Constantemente me preguntan sobre la forma de poner arriba del blog iconos que enlacen a las redes sociales como tengo ahora mismo en esta plantilla, y es que tener iconos como estos a la vista incrementa la posibilidad de que los lectores puedan seguirnos por las distintas redes sociales ya que les dejamos el acceso a ellas de una forma más visible.
Hay varias formas de hacerlo, nosotros lo haremos usando una lista desordenada que incluirá los iconos de Facebook, Twitter, Google+ y el feed del blog, y como un extra haremos que los iconos giren al pasar el cursor sobre ellos, como estos:

Para poner estos íconos sociales en tu blog entra en la Edición HTML de la plantilla y agrega antes de ]]></b:skin> los estilos:

/* Iconos de redes sociales
----------------------------------------------- */
#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);
}

Luego SIN expandir los artilugios busca esta línea:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Arriba de ella agrega la estructura:

<div class='social-icons' id='social-iconos'>
<ul>
<li class='social_icon'><a href='http://facebook.com/usuario'><img border='0' src='http://lh3.googleusercontent.com/-9RgnEDN1jFc/UKK9O1S1TPI/AAAAAAAADSk/KOIvtDu-oSM/s36/social-facebook.png'/></a></li>

<li class='social_icon'><a href='http://twitter.com/#!/usuario'><img border='0' src='http://lh4.googleusercontent.com/-KtqAlZRCokQ/UKK9PbLsnSI/AAAAAAAADSg/njBnVDn3O9I/s36/social-twitter.png'/></a></li>

<li class='social_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='http://lh4.googleusercontent.com/-4PWKT-fgHJ8/UKK9O7mGEPI/AAAAAAAADSY/ENZ0BHmO6TY/s36/social-googleplus.png'/></a></li>

<li class='social_icon'><a href='http://nombre-de-mi-blog.com/feeds/posts/default'><img border='0' src='http://lh5.googleusercontent.com/-6hu6NkWouSw/UKK9PIQCrHI/AAAAAAAADSc/5QI5O-H7EYs/s36/social-rss.png'/></a></li>

</ul></div>

Cambia lo que está en color rojo por tus datos y listo. El primero es tu usuario de Facebook, el segundo el de Twitter, el tercero deberás cambiar las X por el ID de tu perfil de Google+, y en el cuarto deberás poner el nombre de tu blog.

Por supuesto que puedes añadir más iconos si lo deseas, sólo deberás agrega antes </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>

Aunque están pensados para mostrarse arriba del blog puedes ponerlos donde tú quieras, incluso puedes ponerlos en un elemento HTML/Javascript, eso quedará a elección de cada quien.

El efecto que gira está hecho con CSS3 así que en navegadores antiguos este efecto no funcionará.
Los iconos son de Iconfinder excepto el de Google+ que lo he diseñado yo, pero pueden sustituirse por los iconos de tu elección.

Page Peel, efecto de página doblada con jQuery

Page Peel es ese popular efecto de página doblada que al pasar el cursor de despliega para mostrar "lo que que hay atrás", como si se tratase de un libro.
Hay muchas formas de hacerlo, muchas de ellas usan archivos flash lo que lo hace menos personalizable, la que veremos en esta entrada es una versión de Soh Tanaka, hecha con jQuery.

Regularmente el contenido que hay "detrás" es una imagen de suscripción al feed pero puedes poner cualquier imagen y que enlace a cualquier página, la que tú elijas.

Puedes ver un ejemplo en este blog de pruebas, en la esquina superior derecha verás un doblez, al pasar el cursor encima se mostrará el contenido que hay debajo.

Para poner este efecto de página doblada en el blog entra en la Edición de HTML y antes de </head> pega el script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

<script>
//<![CDATA[
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
//]]>
</script>

Luego antes de ]]></b:skin> pega los estilos:

/* Página doblada
----------------------------------------------- */
#pageflip {
position: relative;
right: 0;
top: 0px; /* Cambiar a 30px si tienes la navbar (barra de navegación) */
float: right;
z-index:9;
}
#pageflip img {
width: 50px;
height: 52px;
z-index: 99;
position: absolute;
right: 0;
top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px;
height: 50px;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
background: url(http://lh4.googleusercontent.com/-2sZKIc4mNbo/UJiWU3vsjpI/AAAAAAAADPw/3NAZMqWJAT0/s000/pagina-detras.png) no-repeat right top;
}
#pageflipMirror {
position: static;
right: 0;
top: 0;
float: right;
}

Por último pega después de <body> o de:

<body expr:class='"loading" + data:blog.mobileClass'>

Lo siguiente:

<div id='pageflip'>
<a href='http://nombre-de-mi-blog.blogspot.com/atom.xml'>
<img src='http://lh3.googleusercontent.com/-E0DxKFTKzhU/UJiWdesl7UI/AAAAAAAADP4/9kK-z8646YA/s000/pagina-doblada.png' style='width: 50px; height: 52px; overflow-x: hidden; overflow-y: hidden;'/></a>
<div class='msg_block' style='width: 50px; height: 50px; overflow-x: hidden; overflow-y: hidden; '/>
</div>

En color azul verás una URL, esa es la URL de la imagen que en este caso es una invitación a sucribirse al feed, puedes cambiarla por otra (del mismo tamaño) si lo deseas.
En color rojo verás dónde debes poner el nombre de tu blog, ese será el enlace al feed de tu blog cuando el usuario dé click en la imagen posterior, pero puedes poner cualquier URL en caso de que quieras que enlace a otra página.

Recuerda que usa jQuery, así que deberás tener sólo una versión del mismo, y si usas Scriptaculous o Mootools deberás aplicar unos cambios.

Un FanBox para Twitter personalizable

Iconos de redes sociales arriba del blog que giran al pasar el cursor

Page Peel, efecto de página doblada con jQuery

Últimos artículos

Artículos más visitados

Blogs de ayuda

Únete en Facebook

Ciudadanos

Agréganos en Google+

Archivo del blog