El Blog de Vku, Lo se así - de todo un poco

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/AVvXsEgbW0YV1Rhv_Rbvb886YdZz95i7JRdDYOCvVKSRDqd_V90OyUGHhSwmZy3PPx_CwtxI6PevqbQtD-H4zIjUUeW73PcsfX4r1uvYjQ9t6WMSRDi_e3QcmiT-Hca5LKYwPbkoViqgJmFIp-Y/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..

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. ... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »