mas-audaz: 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.

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuwiXk_kNFEQvi_GfOXdM-Pbxt5ftJeehBeOa66wYeY63WkyEcy7GTjhMlHBbESeSe0QiMRvBx60hNkFiu3mTlL0pLo5Op9e-IqweuGIVqCX3jjupOhUfjkWGigmSMrj4Tjd3O8zxF-Eoz/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>
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 = {'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='https://dl.dropboxusercontent.com/u/54259066/posts-relacionados.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 >
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('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. Imprimir artículo

mas-audaz

menu

nota automatica

miércoles, 18 de septiembre de 2013

Caja de autor con seguidores de Redes Sociales

No hay comentarios:

Publicar un comentario

Contador de visitas

▼▲Enlaces Importante

▼▲Etiquetas

▼▲Archivo del blog