Son varias las entradas que he mostrado para colocar cajas de autor en nuestros blog, tales como, una original caja de Autor y caja de autor bajo las entradas de blogger, pero quizás esta sea la más completa hasta el momento.
La he diseñado a partir de un plugin de Wordpress denominado Fanciest Author Box y para ello he usado un gadget de pestañas que vimos aquí un poco de photoshop y los script de las diferentes cajas de seguidores de las redes sociales.
En la caja podemos observar diferentes pestañas (Autor, facebook, twitter, google+ y entradas relacionadas) mostrando cada una de ellas los diferentes seguidores de cada Red Social y las entradas relacionadas de dicha entrada.
VER DEMO
Para colocarla en vuestros blog seguiremos estos pasos:
1.- Buscamos en nuestra plantilla
<div class='post-footer-line post-footer-line-2'> o <div class='post-footer-line post-footer-line-3'>
y a continuación pegamos el siguiente código:
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
div.TabView div.Tabs a{float: left;display: block;width: 90px; height: 33px;
text-align: center; margin: 5px 0px 0px 3px; background-color: #ccc; /* color de fondo */padding-top: 2px; border: 1px solid #ffffff; /* color del borde */
border-bottom: 1px solid #ccc;font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */font-weight: 900;}
div.TabView div.Pages{clear: both;border: 1px solid #cccccc; overflow: hidden;
background-color: #fff;}
div.TabView div.Pages div.Page{height: 100%;padding: 5px;overflow: hidden;}
div.TabView div.Pages div.Page div.Pad{padding: px 5px;}
</style>
<form action='tabview.html' method='get'>
<div class='TabView' id='TabView'>
<div class='Tabs' style='width: 490px;'>
<a><span style='color: #000'><img src='https://lh3.googleusercontent.com/-UqaLmqAF7EQ/UZ0V35UDenI/AAAAAAAALzc/8alagpm_Et8/w90-h32-no/autor.jpg'/></span></a>
<a><span style='color: #000'><img src='https://lh5.googleusercontent.com/-9zbbMu7PHT4/UZ0V56lRGYI/AAAAAAAALzk/3XYupEPSI3s/w90-h32-no/facb.jpg'/></span></a>
<a><span style='color: #000'><img src='https://lh6.googleusercontent.com/-X6S2xE6MaKQ/UZ0V9YWSFjI/AAAAAAAALzs/Y_X3cPz6j9Y/w90-h32-no/twitter.jpg'/></span></a>
<a><span style='color: #000'><img src='https://lh5.googleusercontent.com/-vT3EzeWZHaU/UZ0WCVTxRII/AAAAAAAALz8/JRmoHvJO7L4/w90-h32-no/google%252B.jpg'/></span></a>
<a><span style='color: #000'><img src='https://lh4.googleusercontent.com/-JGagcYUAGXs/UZ_AQX78hAI/AAAAAAAAL0s/7kuiMA-DLLA/w90-h32-no/entradas.jpg'/></span></a>
</div>
<div class='Pages' style='width: 490px; height: 170px;'>
<div class='Page'>
<div class='Pad'>
<style>
.base {
position: relative;
width: 460px;
height: 80px;
margin: 10px auto;
z-index: 1;
}
.contenido {
margin-top:-130px;
margin-left:170px;
}
</style>
<div class='caja'>
<div class='base portada'>
<div class='izquierda'>
</div>
<div class='derecha'>
</div>
<img height='140' src='https://lh5.googleusercontent.com/-wEmZIe0gpbg/UQEmSl4VaxI/AAAAAAAAINU/C7F0Oq6AsYs/s128/DSC02216.png' width='140'/>
<br/>
<div class='contenido'>
<span style='font-family: arial; font-size:14px; '>
Escrito por:
</span>
<span style='font-family: arial; font-size:16px; '>
<b>
<data:post.author/>
</b>
</span>
<p>
<span style='font-family: arial; font-size:12px; '>
Una breve descripción sobre ti....................
</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class='Page'>
<div class='Pad'>
<div class='likeboxwrap'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnombre-página-facebook&width=485&colorscheme=light&show_faces=true&stream=false&header=false&height=170' style='border:none; overflow:hidden; width:485px; height:170px;'/></div>
<style type='text/css'>
div.likeboxwrap {
width:483px;
height:145px;
background-color:#fff;
overflow:hidden;
}
div.likeboxwrap iframe {margin:-1px}
</style>
</div>
</div>
<div class='Page'>
<div class='Pad'>
<div class='textwidget'>
<script src='http://s.moopz.com/fanbox_init.js' type='text/javascript'/><div id='twitterfanbox'>
<script type='text/javascript'>fanbox_init("nombre-twitter");</script></div>
</div>
<style type='text/css'>
.FB_SERVER_IFRAME {
width: 485px !important;
height: 145px !important;
}
</style>
</div>
</div>
<div class='Page'>
<div class='Pad'>
<div class='g-plus' data-action='followers' data-height='165' data-href='https://plus.google.com/ID-Google+' data-source='blogger:blog:followers' data-width='480'>
</div>
<script type='text/javascript'>
(function() {
window.___gcfg = {'lang': 'es'};
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
<div class='Page'>
<div class='Pad'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:0px;
padding-left:25px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#ccc;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://2.bp.blogspot.com/-R285B_Pf0q4/TbXKNLTdA8I/AAAAAAAAAzk/9cKeL67QAzc/s1600/sinimagen.jpg";
var maxresults=4;
var splittercolor="#d4eaf2";
var relatedpoststitle="";
</script>
<script src='http://sevillporelmundo.webcindario.com/posts-relacionados-blogger.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=4"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
</div>
</div>
<script src='http://sevillporelmundo.webcindario.com/tab-viewmaskolis.js'>
</script>
<script type='text/javascript'>
tabview_initialize('TabView');
</script></div></div></form>
</b:if>
Configuración:
1.- Cambiar la URL ROJA (imágen de autor) por la vuestra.
2.- Cambiar Nombre-página-facebook por la vuestra.
3.- Cambiar Nombre-Twitter por el vuestro.
4.- Cambiar ID-Google+ por el vuestro.
Eso es todo, espero que sea funcional en todas las plantillas, las he probado en varias y el resultado ha sido óptimo.