Consejos Blogger: CSS Sprites

jueves, 8 de septiembre de 2011

Menú de redes sociales con CSS Sprites

Clic sobre la imagen para descargar

Ir a Diseño (vieja interfaz) o Plantilla (nueva interfaz), Edición de HTML y justo arriba de ]]></b:skin>

Poner el siguiente código:

.redes {
}
.redes a{
    background-image     : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSgKWY5Amwjv4H5-UgWFIpxzBoxUuncmEDs5V33kBT1kM8CNVMNuImFEzannRToECmMWcJlXD1Vz90pfrtgL81bfsZ_2ddqZlaxw7f1rk8FQ2k2UybGjvtu6Pynj8uzhBOhn6hQV6LYQA/s1600/redes.png);
    background-color    : transparent;
    background-repeat    : no-repeat;
    height              : 48px;
    width                  : 48px;
    float              : left;
    display              : block;
    margin               : 0 5px 0 0;
}

#feedburner_png {
    background-position : 0px -48px;
}

#feedburner_png:hover {
    background-position : 0px 0px;
}

#googleplus_png {
    background-position : -240px -48px;
}

#googleplus_png:hover {
    background-position : -240px 0px;
}

#facebook_png {
    background-position : -48px -48px;
}

#facebook_png:hover {
    background-position : -48px 0px;
}

#twitter_png {
    background-position : -144px -48px;
}

#twitter_png:hover {
    background-position : -144px 0px;
}

#youtube_png {
    background-position : -96px -48px;
}

#youtube_png:hover {
    background-position : -96px 0px;
}

#linkedin_png {
    background-position : -192px -48px;
}

#linkedin_png:hover {
    background-position : -192px 0px;
}

Pueden agregarle estilos a la clase redes Ej: margenes, etc..

Ir a Diseño, Elementos de la página (vieja interfaz) y añadir un gadget HTML/Javascript.

Poner el siguiente código:

<div class='redes'>
<a id='feedburner_png' href='http://feedburner.google.com/fb/a/mailverify?uri=blogspot/qygH' target='_blank' title='Suscribirse a las entradas'></a>

<a id='googleplus_png' href='https://plus.google.com/110680434417680409578/posts' target='_blank' title='Google+'></a>

<a id='facebook_png' href='http://www.facebook.com/loseasi' target='_blank' title='facebook'></a>

<a id='twitter_png' href='http://www.twitter.com/v_ku' target='_blank' title='twitter'></a>

<a id='youtube_png' href='http://www.youtube.com/user/thevku' target='_blank' title='you tube'></a>

<a id='linkedin_png' href='http://uy.linkedin.com/in/alix' target='_blank' title='Ver perfil en Linkedin></a>
</div>

Cambiar la imagen y los enlaces por los suyos.

Si no quieren mostrar algún link, solo eliminen la línea desde <a -- hasta-- ></a>

Mover al lugar que se quiera mostrar el menú.

domingo, 8 de agosto de 2010

Imagen de traducir y versión para móvil con Google

Daremos la opción de traducir el blog de Español a Ingles o Portugués, y/o cambiar a una versión para móvil.

Se va a utilizar una sola imagen con la técnica de CSS Sprites.

Primero descargamos la imagen y la subimos a nuestro servidor.

Ir a Diseño, Edición de HTML y justo arriba de ]]></b:skin>

Poner el siguiente código cambiando el link de la imagen:

.trans-vku a { background: url(URL IMAGEN/transl.png) no-repeat; width:25px; height:18px; display:block;float:left;filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*--IE 8 Transparency--*/ }
.trans-vku a:hover {filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*--IE 8 Transparency--*/ }

.trans-vku1 { background-position: bottom left!important }
.trans-vku2 { background-position: -30px bottom!important }
.trans-vku3 { background-position: -60px bottom!important }

a.trans-vku1:hover { background-position: top left!important }
a.trans-vku2:hover { background-position: -25px 0!important }
a.trans-vku3:hover { background-position: -55px 0!important }

Ahora justo abajo de <body>

Poner el siguiente código:

<span class='trans-vku' style='border: 0 !important; left:840px;top:2px;position:absolute;z-index:111'>
<a class='trans-vku1' href='#' onclick='window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=es%7Cen&en=es&en=UTF8"); return false;' title='[Spanish to English...]'/>
<a class='trans-vku2' href='#' onclick='window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=es%7Cpt&hl=es&ie=UTF8"); return false;' title='[Spanish to Portuguese...]'/>
<a class='trans-vku3' href='http://www.google.com/reader/m/view/feed/http://feeds.feedburner.com/blogspot/qygH' title='[Versión para móvil...]'/>
</span>

Cambiamos la URL del feed: http://feeds.feedburner.com/blogspot/qygH (Ver tutorial)

Adaptamos la posición que se va a mostrar:

left:840px: Distancia desde la izquierda.
top:2px: Distancia desde arriba.

Desde Vista Previa vemos como queda, y si nos gusta guardamos la plantilla.

Ejemplo en el menú superior del blog.