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 agregar nuestros perfiles de Google, Facebook y Twitter en nuestro blog, no son exactamente iguales pero si muy similares, podemos utilizarlos en un gadget como así también en una entrada.

Antes de comenzar veremos una demostración:
Demo

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 el siguiente código CSS.
.gplus {
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  margin: 20px auto 0;
  position: relative;
  width: 240px; Ancho de la caja
}
.gplus > * {
  font: normal 13px Roboto,arial,sans-serif;
}
.gplus .minicover {
  height: 150px; Ancho de la Imagen
  overflow: hidden;
  position: relative;
  width: 240px; Ancho de la imagen
}
.gplus .dp {
  margin-bottom: -40px;
  position: relative;
  text-align: center;
  top: -40px;

}
.gplus .dp img {
  border: 5px solid #fff;
  border-radius: 50%;
  height: 80px;
  transition: all .65s ease-in-out;
  width: 80px;
}
.gplus .dp img:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}
.gplus .overlay {
  background-color: black;
  filter: alpha(opacity=18);
  height: 135px;
  left: 0;
  opacity: .18;
  position: absolute;
  right: 0;
  top: 0;
}
.gplus .info {
  padding: 4px 8px 10px;
  text-align: center;
}
.gplus .info .fn {
  color: #262626;
  font-size: 24px;
  margin-bottom: 4px;
}
.gplus .info .fn a {
  color: #262626;
  text-decoration: none;
  transition-duration:.218s;
}
.gplus .info .fn a:hover {
  text-decoration: underline;
}
.gplus:hover .info .fn a {
  color: #427FED;
  cursor: pointer;
}
.gplus .info p {
  color: #737373;
  font-size: 12px;
  line-height: 25px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
  • Paso 4: Guardamos los cambios realizados en la plantilla 

Ahora agregaremos nuestro perfil de Google + en una entrada o Gadget HTML/Javascript

  • Paso 5: Dentro de una entrada o un gadget HTML/Javascript pegamos el siguiente código HTML
<section class="gplus">
  <img class="minicover" src="http://1.bp.blogspot.com/-s_nwl5usMrU/Um6dnmUmm9I/AAAAAAAABcY/Ti9smasn0TU/s1600/Google.png" alt="Tutoriales-Blogger.info" />
  <div class="overlay"></div>
  <div class="dp">
    <a href="https://plus.google.com/u/0/102309934171768207604" target="_blank">
      <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash1/373016_528329323844286_1604877010_q.jpg" />
    </a>
  </div>
  <div class="info">
    <p class="fn">
      <a href="https://plus.google.com/u/0/102309934171768207604" target="_blank">Tutoriales Blogger</a>
      <nobr></nobr>
    </p>
    <p class="bio">
      <nobr>Tips y Tutoriales para blogger</nobr>
    </p>
    <p class="location"><nobr>Siguenos en Google+</nobr></p>
  </div>
</section>
  • Paso 6: Ya tendriamos nuestro perfil de Google+ en nuestro blog

Nota:-  Solo debemos cambiar lo que esta en Rojo por URL de tus imágenes
Nota:- Cambia lo que esta Oojo por el la URL de tu Perfil de Google+
- - 2 Comentarios
Tag

Comentarios (2)

  1. WOW!!! esta bonito lo probare ...sigue sorprendiéndonos con tus aportes (h)

    ResponderEliminar
  2. @DANIEL RIVEROS OK! Hoy lazaremos Perfil de Facebook. Esperemos sea de tu agrado como esta entrada

    ResponderEliminar
:))
:((
: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