comunidades

Como poner una biografía debajo de las entradas.


Feliz miércoles ! Se siente bien estar de regreso después de varios días de tener completamente abandonado el blog. Mi familia y yo estuvimos de paseo y pudimos conocer algunos lugares que nos encantaron y nos dejaron con deseos de quedarnos más días, pero nimodo, teníamos que regresar.
Me muero de ganas de compartir con ustedes todas las imágenes que tome por donde andaba. Pero hoy vengo a otra cosa, desde hace ya algunas semanas he recibido una pregunta, Como puedo poner una biografías debajo de las entradas?
Esta es una entrada que tenía pendiente, y por varios motivos no había podido terminar, pero por suerte hoy aquí esta.
Son 2 estilos diferentes, pero que puedes modificar para darle tu estilo personal.
Antes de iniciar, te explico un poco más sobre los diferentes colores que vez en los códigos.

El Color Verde es para cualquier texto, ejem; La descripción de tu biografía y o nombres.
Lo marcado en Amarillo es para modificar las URLs de las imágenes de perfil o avatar.
Lo marcado en Azul es para modificar las medidas de imágenes, fuentes y o bordes.
Lo marcado en Morado es para modificar las URLs de tus redes sociales.
Lo marcado en Naranja son los colores de fondos y o bordes que puedes modificar.
Vamos a tocar un poco la plantilla HTML y CSS, pero prometo que no es nada difícil.
Nota: Recuerda hacer siempre una copia de seguridad antes de realizar cualquier cambio.

Vamos a Plantilla > Editar HTML > Busca el siguiente codigo en tu plantilla HTML.
<b:if cond=data:post.hasJumpLink> Te va a salir un código como el siguiente
<div class=jump-link>
<a expr:href=data:post.url + &quot;#more&quot; expr:title=data:post.title><data:post.jumpText/></a>
</div>
</b:if>
Justo debajo de </b:if> pega cualquiera de los siguientes códigos.
(De acuerdo con la biografía quieras).
Biografía #1
Aquí puedes ver un ejemplo de como quedaría la biografía. EJEMPLO.
<b:if cond=data:blog.pageType == &quot;item&quot;>
<div class=biografia>
<p class=bio-content>Aqui va mi biografia, puedo describir sobre mi vida y blog...... Compartir mis intereses y lo que me gusta.</p>
<a class=social href=URL DE TU RED SOCIAL target=_blank><img title=”Facebook” src="URL de tu imagen" width= 30px /></a>
<a href=URL DE TU RED SOCIAL target=_blank><img title=”Instagram” src="URL imagen red social" width= 30px /></a>
<a href=URL DE TU RED SOCIAL target=_blank><img title=”Twitter” src="URL imagen red social" width= 30px /></a>
<a href=URL DE TU RED SOCIAL target=_blank><img title=”Pinterest” src="URl imagen red social" width= 30px /></a>
</div>
</b:if>
CSS
.biografia {
background: url(URL de tu imagen de perfil) left no-repeat;
width: 650px;
height: 150px;
border: 1px solid black;
}
.bio-content {
width: 375px;
font-size: 1.2em;
padding-left: 250px;
padding-top: em;
position: relative;
color: black;
}
.bio-content a {
color: white;
text-decoration: underline;
}
.social {
padding-left: 250px; }

Biografia #2
Aquí puedes ver un ejemplo de como quedaría la biografía. EJEMPLO.


<!--author biography start-->
<div class=post-author>
<div class=author-img>
<!-- avatar of author here-->
<img alt= class=avatar avatar-100 photo height=100 src=URL de tu imagen de perfil width=100/>
</div>
<div class=author-content>
<h5><a href= rel=author title=Posts by solopine><data:post.author/></a></h5>
<p> Sólo es capaz de realizar los sueños el que,cuando llega la hora, sabe estar despierto, porque donde termina el esfuerzo, comienza el fracaso</p>
<a class=social href=URL DE TU RED SOCIAL target=_blank><img title=”Facebook” src="URL imagen red social" width= 30px /></a>
<a href=URL DE TU RED SOCIAL target=_blank><img title=”Instagram” src="URL imagen red social" width= 30px /></a>
<a href=URL DE TU RED SOCIAL target=_blank><img title=”Twitter” src="URL imagen red social" width= 30px /></a>
<a href=URL DE TU RED SOCIAL target=_blank><img title=”Pinterest” src="URL imagen red social" width= 30px /></a>

</div>
</div>
<!--author biography end -->

CSS
** Post author **
.post-author {
margin-bottom:80px;
margin-top:70px;
overflow:hidden;
border-bottom: 1px solid rgba(34,34,34,0.1);
padding-bottom: 40px;
margin-bottom: 40px;
}

.author-img {
float:left;
margin-right:30px;
}

.author-img img {
border-radius:50%;
}

.author-content h5 a {
font-size:14px;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:8px;
color:#000;
display:block;
}

.author-content p {
margin-bottom:8px;
}

.author-content .author-social {
font-size:14px;
color:#bbb;
margin-right:8px;
}

Si tienes cualquier duda o pregunta, puedes dejarme un comentario, trataré de ayudarte lo mas pronto posible.
PS. Dejame tu Blog (link) para visitar tu blog y ver como queda tu biografia.


Fuente: este post proviene de Blog de CYeyas, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Esta publicación está dirigida a un público de adultos mayores de 21 años. Esta campaña ha sido compensada por Collective Bias, Inc. y su anunciante. Todas las opiniones son solo mías. #SutterHomeSwee ...

Esta campaña ha sido compensada for Collective Bias, Inc. y su anunciante. Todas las opiniones son solo mias. Este contenido es para lectores de mayores de 21 años. #40DaysOfFlavor Si nunca has proba ...

Recomendamos

Relacionado

Blogging PLANTILLAS BLOGGER DIY ...

¿Eres de los que tienes bloggers invitados que de vez en cuando postean en tu blog? Si estas asintiendo con la cabeza entonces sabrás la importancia que tiene para ese blogger sentirse como en casa, hay que hacerle sentir que es importante para ti y para tu publico, que no le quieres perder y que a su vez el se sienta cómodo, único e irreemplazable, pues el aparte de darte un post, ha hecho un tra ...

icono botón redes sociales ...

Hoy les traigo el Tutorial de cómo insertar los botones de las Redes Sociales en Blogger. Lo primero que vamos a hacer es Descargarnos los Botones que más nos gusten y alojarlos en hosting (hay muchos gratuitos), pero yo uso el Google Drive, que me parece más sencillo y más completo. Una vez tengamos las imágenes subidas a Google Drive, tenemos que averiguar su URL, (si no sabes cómo hacerlo, te l ...

Tutoriales Redes Sociales Web

Que feliz que me hace regresar al blog. Como algunos de ustedes saben, me fui de vacaciones, y regreso supercontenta, Mexico tiene lugares hermosos, llenos de historia y cultura, pero bueno esa es otra historia. Hoy vengo con un tutorial, que ya buena falta hacia por aquí en el blog. Este va a petición de mi amiga Marysol, que me ha pedido un tutorial para cambiar esos botones sociales para compar ...

general seo

La estructura de un Blog es la base sobre la que se construye y distribuye todo su contenido. En ella existen dos partes fundamentales: una visible compuesta por los componentes que conforman su presentación y otra invisible que sirve para que los sistemas que acceden al mismo sean capaces de analizar y extraer correctamente su información. La correcta estructura de un Blog asegura una correcta ex ...

watercolour acuarelas free printable ...

Hola!!! Hace unas semanas estuve ocupada haciendo estos pequeños iconos de varias redes sociales para colocar el gadget de sígueme en el blog, que ya hacía tiempo que lo tenía en mente, pero un día por otro lo había dejado pasar. Os los podéis descargar desde este enlace. Están preparados en dos tamaños, 48x48 y 32x32, para que uséis el que os vaya mejor.Os voy a explicar también como los he puest ...

acuarelas diseño watercolour ...

Hola!!! Hace unas semanas estuve ocupada haciendo estos pequeños iconos de varias redes sociales para colocar el gadget de sígueme en el blog, que ya hacía tiempo que lo tenía en mente, pero un día por otro lo había dejado pasar. Os los podéis descargar desde este enlace. Están preparados en dos tamaños, 48x48 y 32x32, para que uséis el que os vaya mejor.Os voy a explicar también como los he puest ...

general social

Poner botones para redes sociales con los que tus usuarios puedan seguirte te ayudará a incrementar la presencia de tus contenidos en Internet. Si bien muchas veces preferimos utilizar botones al final de nuestra entradas para que nuestros usuarios compartan si lo desean nuestras entradas, es importante también que puedan seguirnos por las redes sociales si así lo desean. Qué mejor sitio para que ...

general

En anteriores entregas aprendimos un poco de HTML básico que nos sirviera de base para luego comprender mejor la plantilla Blogger. Después pasamos a la acción creando nuestra primera plantilla y por último los contenedores de la cabecera, el cuerpo, una barra lateral y el pie del Blog. La idea es no copiar y pegar el código que "nos dan hecho", esta vez se trata de conseguir entender ...

general social

Muchos Bloggers prefieren añadir botones para redes sociales al pie de sus entradas para que los usuarios puedan compartir el contenido que ha sido de su agrado. Vamos a aprender a colocar en el pie de entradas botones para compartir en Facebook, Twitter y Google+ nuestras creaciones.¿Qué son los botones para las redes sociales en un Blog?: Los componentes oficiales o no oficiales de las distinta ...

general propuestas

Al navegar por múltiples sitios en Internet todos nos hemos encontrado con algún tipo de aviso o alerta que alude al "uso de cookies" en el sitio por el cual estamos navegando. Este mensaje es fruto de la legislación europea publicada en su directiva 2009/136/CE referente a los derechos de los usuarios y la necesidad de que estos sean informados cuando un sitio web haga uso de las mismas ...