Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock

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>

  • Paso 6: Solo tendrás que guardas los cambios. 
Solo debes de cambiar lo que esta en ROJO por la URL de tu imagen de perfil
Solo debes de cambiar lo que esta en ROJ    por la URL de Google+
- - 0 Comentarios
Tag

Comentarios (0)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar