Tutoriales sobre Blogger

En este tutorial veremos como modificar el perfil de Google para Blogger, como bien sabemos que nuestro perfil de Google se encuentra el la parte superior derecha donde se muestra nuestra imagen de perfil en un circulo, hoy veremos como modificarlo para Blogger no sera igual pero trataremos de
darle un aspecto parecido.

Antes de comezar veremos una demostración
*la demostración la encontraras en nuestro blog.
Comencemos:

Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>
Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

Paso 3: Justo por encima de ]></b:skin> pegamos la siguiente linea CSS.

.perfil-google{
background-size: 32px 32px;
border-radius: 50%;
display: block;
height: 32px;
width: 32px;
position:fixed;
top:10px;
right:25px;
z-index:10000;
}
.perfil-google img{
border-radius: 50%;
}
.perfil-img {
float : left;
margin : 0 15px 0 0;
}
.perfil-data {
margin : 0;
}
.perfil-datablock {
margin : 0 0 20px;
}
.perfil-nombre-link {
background : left top no-repeat;
display : inline-block;
min-height : 20px;
padding-left : 20px;
}
.perfil-textoblock {
margin : 0.5em 0;
}

#perfilcaja{
background:#fff;
border:1px solid #ccc;
color:#333;
font-size:14px;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
line-height:1.2em;
top:60px;
right:-300px;
padding:15px;
position:fixed;
width:250px;
height:110px;
box-shadow: 0 2px 10px rgba(0,0,0,.2);
z-index:10000;
}
#perfilcaja:before{
content:"";
width:0;
height:0;
position:absolute;
top:-22px;
right:14px;
border:11px solid transparent;
border-color:transparent transparent #ccc;
}
#perfilcaja:after{
content:"";
width:0;
height:0;
position:absolute;
top:-19px;
right:15px;
border:10px solid transparent;
border-color: transparent transparent #fff;
}
.cerrarcaja{
background:none;
border:none;
position:absolute;
top:0px;
right:0px;
cursor:pointer;
font-size:18px;
font-weight:700;
color:#888;
}
.cerrarcaja:focus{
outline:none
}
  border-color: #0d78b6 #0d78b6 #0b689e;
  background-image: -webkit-linear-gradient(top, #25a5f0, #1097e6 66%, #0f8ad3);
  background-image: -moz-linear-gradient(top, #25a5f0, #1097e6 66%, #0f8ad3);
  background-image: -o-linear-gradient(top, #25a5f0, #1097e6 66%, #0f8ad3);
  background-image: linear-gradient(to bottom, #25a5f0, #1097e6 66%, #0f8ad3);
}

Paso 4: Todavía en la plantilla buscamos la siguiente linea (Ctrol + F)

</body>

Paso 5: Justo por encima de </body> pegamos la siguiente linea HTML.

<div class='perfil-google' onclick='document.getElementById(&apos;perfilcaja&apos;).style.right=&apos;15px&apos;;'>
<img alt='Foto Fernando' class='perfil-img' height='32' src='https://lh6.googleusercontent.com/-Gv6QdRn02z4/AAAAAAAAAAI/AAAAAAAAA-s/LfOIAj5Fa7A/s120-c/photo.jpg' title='Click me!' width='32'/>
</div>

<div id='perfilcaja'>
<a href='https://plus.google.com/102309934171768207604' target='_blank' title='Mi perfil'><img alt='Mi Foto' class='perfil-img' height='80' src='https://lh6.googleusercontent.com/-Gv6QdRn02z4/AAAAAAAAAAI/AAAAAAAAA-s/LfOIAj5Fa7A/s120-c/photo.jpg' title='Mi Perfil' width='80'/></a>
<div class='perfil-datablock'>
<div class='perfil-data'>
<a class='perfil-nombre-link g-profile' href='https://plus.google.com/102309934171768207604' rel='author' style='background-image: url(//www.google.com/images/icons/ui/gprofile_button-16.png);' target='_blank' title='Fernando Salas'>
Fernando Salas
</a>
<br/>
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='https://plus.google.com/102309934171768207604'/>
</div>
</div>

<a class='profile-link' href='https://plus.google.com/102309934171768207604' rel='author' target='_blank' title='Mira mi Perfil'>Mira mi Perfil</a>
    <input class='cerrarcaja' onclick='document.getElementById(&apos;perfilcaja&apos;).style.right=&apos;-300px&apos;;' title='Close this' type='button' value='×'/></div>