25 mayo 2013

Caja de autor con seguidores de Redes Sociales.



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.


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 == &quot;item&quot;'>
<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: &quot;Arial, Helvetica, sans-serif&quot;, 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&amp;width=485&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=false&amp;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>
var tw_user = 'amorsevillista';
var tw_width = 580;
var tw_height = 80;
var no_face = 10;
(function() {
var tw_box = document.createElement('script'); tw_box.type = 'text/javascript'; tw_box.async = true;
tw_box.src = '//www.musicpaax.com/twitter/tw.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);
})();
</script>

</div>
<div id="twitter-box"></div>


</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 = {&#39;lang&#39;: &#39;es&#39;};
var po = document.createElement(&#39;script&#39;);
po.type = &#39;text/javascript&#39;;
po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[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, &#8220;Times New Roman&#8221;, 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=&quot;http://2.bp.blogspot.com/-R285B_Pf0q4/TbXKNLTdA8I/AAAAAAAAAzk/9cKeL67QAzc/s1600/sinimagen.jpg&quot;;
var maxresults=4;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;&quot;;
</script>
<script src='https://dl.dropboxusercontent.com/u/54259066/posts-relacionados.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=4&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if>
</div>
</div>
<script >
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>
<script type='text/javascript'>
tabview_initialize(&#39;TabView&#39;);
</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.


Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

7 comentarios

Amigo antes de poner el boton me gusta la pagina como pongo el de suscribirse a mi perfil?

Pasión verde, no se exactamente lo que me quieres decir, pero considero que debe ser el ID de Google+, si es así, en la URL de tu perfil de google+ verás una numeración al final, esa es tu ID.
Ejemplo: https://plus.google.com/u/0/108543628426562782326/posts

La numeración 108543628426562782326 sería tu ID.

Saludos.

Yo digo que para poner el boton de que se suscriban a mi perfil de facebook y no el de me gusta a una pagina osea reemplazar el de like por el de suscribirse

Eso no puede ser, la subscripciones solo son para páginas.

Amigo! Como hago para que cada autor, no solo yo (el administrador de mi blog) tenga su propio gadget en sus entradas. O sea, que cuando publique su post, aparezca su propios datos?

Lady, tendríamos que modificar bastante el código, aparte al colocar los fanbox de twitter o facebook solo saldría uno.

El autor es más fácil colocarlo pero lo demás sería los fanbox de la página de tu web.

Para cambiar tener 2 autores te dejo la parte a cambiar: Mirar aquí.

Saludos.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"