lunes, 17 de junio de 2013

Añadir Un Share Box Perfecto Para Blog de Blogger

By andante77 12:02 p.m. , , , , , 1 comment
Añadir Un Share Box Perfecto Para Blog de Blogger
 En este tutorial,te mostrare truco como añadir un share box a tu blog de blogger. Esta caja de compartir contiene  boton oficial de Twitter,Facebook,Pinterest , Google Plus,Stmbleupon,Linkedin con contador,  Boton de imprimiry boton de like de Facebook.He configurado estos botones para usarse en blog de blogger, para que puedes añadirlo facilmente.

Siga estos pasos para añadir esta caja cuadrada a tu blog.


1.Entra en "Plantilla" --> "Editar HTML" de tu blog.








2.Anade este codigo arriba de etiqueta <head> :
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: 'en-US'}
</script>


3.Busca el siguiente codigo en tu plantilla Html:
<div class='post-header-line-1'/>
 











 4.Copia el codigo de caja de compartir de abajo y pegalo debajo del codigo<div class='post-header-line-1'/>

Nota: Si no puedes encontarar <div class='post-header-line-1'/> en tu plantilla,pega tu codigo "Caja Cuadrada" antes de <data:post.body/> .
<b:if cond='data:blog.pageType == "item"'>

<style type='text/css'>
.multisharebox{background:none repeat scroll 0 0 #EFEFEF;float:right;margin:5px 0 3px 10px;padding:0 5px 0;text-shadow:0 1px 0 #FFF;width:260px;border:4px solid #d8dfea}
.multisharebox table{margin-bottom:0 !important}
.multisharebox td{padding:4px 3px !important}
.fb-like-boxtop{background:none repeat scroll 0 0 #EDEFF4;border:1px solid #D8DFEA;color:#000;float:right;font-size:11px;margin:0 0;padding:5px 10px;text-align:left;width:230px}
.fb-like-boxtop a{color:#000;text-decoration:none}
.fb-like-boxtop a:hover{color:#000;text-decoration:underline}
.fb-like-box{background:none repeat scroll 0 0 #EDEFF4;border:1px solid #D8DFEA;color:#000;float:right;font-size:11px;height:60px;margin:5px 0;overflow:hidden;padding:5px 10px;text-align:left;width:230px}
</style>

<!-- Perfect Share Box : Created by www.ciudadblogger.info  -->
<div class='multisharebox'>
<table><tr>
<td><table><tr>
<td><a class='twitter-share-button' data-count='vertical' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/>
<b:if cond='data:post.isFirstPost'>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>
</b:if></td>
<td><script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=5&amp;r=&quot; + data:post.url'/></td>
<td><g:plusone size="tall" expr:href="data:post.canonicalUrl"/></td>
<td><a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td>
</tr></table></td>
</tr><tr>
<td><div class='fb-like-boxtop'><a class='pin-it-button' count-layout='none' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It Now!</a>
<a href='javascript:void(run_pinmarklet())' style='height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script> <script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='right' expr:data-url='data:post.url' type='in/share'/> <a href='javascript:window.print();'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF-NNS0W8qx3fqQesRYbCXDu-VZ05bJOVT8P9mmcWqQn_UnYZe5sOpuL_xBehMEHyMA8OLIYDlXg8fKOz0CLTe_vtR17F5UylOanuzjjS57DWZeAblfLdOM43Ab3dkjbmycK5a_Nm-LgU/s1600/printbutton.png'/></a></div></td>
</tr><tr>
<td><div class='fb-like-box'>
Te gusta esta entrada?
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=230&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:230px; height:40px;'/>
</div></td>
</tr></table>
</div>
<!-- Perfect Share Box : Created by www.ciudadblogger.info  -->

</b:if>

Nota : Esta Caja de compartir sera añadida a paginas de entradas de Blogger solamente. Si desea mostrarla en cada pagina, entonces remueva las lineas verdes de el codigo.

6. Guarda tu plantilla y toda estara listo.
If You Enjoyed This, Take 5 Seconds To Share It

1 comentario: