Hoy os traigo un tutorial para poner una Autor box o caja de autor con una foto de nosotros mismos o de nuestro logo (podremos elegir la que mejor nos convenga) debajo de cada entrada. Os enseño cómo me ha quedado a mí mi caja de autor para que veáis el diseño que tiene.
Donde dice This post was written By: el fondo que tiene de color morado se os pone automático según el fondo que tengáis en los títulos de gadgets de vuestro blog. O por lo menos yo no he tocado nada para que me aparezca...
A mí me gusta bastante ya que nos permite:
- Describirnos brevemente.
- Ofrecer la posibilidad de que se suscriban a nuestro feed de feedburner (es el que viene por defecto para suscribirse por email en blogger).
- Además de poder poner debajo de nuestra foto las principales redes sociales en las que nos pueden seguir: google+, facebook, twitter y por supuesto feedburner.
Si te interesa...
Pasos para poner la caja de autor debajo de cada post en blogger:
Y antes de nada recuerda hacer copia de seguridad de tu plantilla...
1. En primer lugar tenemos que ir a Plantilla -> Editar HTML. Allí buscaremos mediante el Ctrl+F la siguiente línea de código "<head> " y justo debajo de ella pegaremos la siguiente línea de código:
<link href='http://files.allbloggertricks.com/Scripts/abt-author-box.css' rel='stylesheet' type='text/css'/>
2. Una vez insertada esa línea de código, tendremos que buscar la siguiente línea de código: <div class='post-footer-line post-footer-line-1'> y aquí OJO, es probable que esta línea de código esté duplicada. Hay a gente que le ha funcionado añadir el resto de código en la segunda, justo antes de la etiqueta <span…
Bueno yo en mi caso concreto la he añadido debajo de <div class='post-footer-line post-footer-line-3'>
Este es el código que tendréis que poner:
<b:if cond='data:blog.pageType == "item"'>
<div class='abt-author_info'>
<div class='abt-author_photo'>
<img alt='author' height='150' src='YOUR PIC URL' width='150'/>
</div>
<h2 style='color:#444;font-family:
<p>Add information about you here.</p>
<div class='abt-linediv'/>
<div class='abt-email'>
<small style='text-align:center;'>Get Free Email Updates to your Inbox!</small>
<form action='http://feedburner.
<input name='uri' type='hidden' value='FeedUsername'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='abt-emailinput' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input class='abt-emailbutton' title='' type='submit' value='SignUp'/>
</form>
</div>
<ul class='abt-social'>
<li class='rssicon'>
<a href='http://feeds.feedburner.
FeedUsername'>Rss</a>
</li><li class='twicon'>
<a href='http://twitter.com/
Twitt
</li><li class='fbicon'>
<a href='http://facebook.com/
FBUs
</li><li class='gicon'>
</li>
</ul>
</div>
</b:if>
3. Tendréis que sustituir los campos en verde por los que os detallo debajo:
YOUR PIC URL: el link a tu foto personal o logo del blog.
Add information about you here: aquí pondrás tu descripción tal como quieres que aparezca.
FeedUsername: aparece hasta tres veces en el código así que ojo al dato. Debéis poner tu id de feedburner que es lo que aparece justo después de http://feeds.feedburner.com/ Imaginaos que la url del feed es: http://feeds.feedburner.com/blogspot/midolcevita, el username sería: blogspot/midolcevita
Twitt
FBUs
GplusID: lo sustituís por vuestra ID de google+. La ID de nuestra cuenta de de google+ dependerá de si tenemos números o tenemos aprobada una con nuestro nombre. Yo aun no he aprobado la mía y el link mío es éste https://plus.google.com/110009370964536421519/posts. La ID es justo lo que está en negrita, la lista de números.
He sacado el tutorial de una página en inglés que os dejo como fuente original del tutorial: http://www.allbloggertricks.com/2013/04/cool-author-box-widget-for-blogger_26.html
Como veis es muy fácil de poner y queda bastante bien. Es discreto. ¡Espero que os sea útil!. Y si tenéis alguna duda no dudéis en escribir que aunque no sea experta en el tema quizás os pueda ayudar. Si os resulta interesante os animo a compartirlo.
Muchas gracias muy interesante, aunque sigo sin enterarme de nada,ji,ji,besos. Ando con un proyecto de blog pero ni tengo tiempo ni me entero de nada.
ResponderEliminarAinss pobre por cierto me meti en tu blog espero ver qué publicas también por allí.Quizás para una principiante sin conocimientos en HTML este tuto pueda ser complicado... No te preocupes poco a poco le cogerás el tranquillo a blogger. Besos. Gracias por tu comentario.
Eliminar