«

»

Ene 04 2012

Imprimir esta Entrada

Barra flotante con los botones sociales para Blogger

¿Cómo añadir una barra flotante con los botones sociales para Blogger?

barra flotante botones medios sociales para Blogger

Seguramente ya te has fijado que en muchos de los blogs de Blogger aparece en el lateral una barra flotante con los principales botones sociales.

Es ideal para publicar y compartir tus contenidos con todo el mundo y así conseguir que aumente el tráfico de visitas hacia tu blog.

Puede colocarse tanto en el lateral derecho como en el izquierdo, según la zona de gadgets en que lo incluyas .

Vigila el lado en que lo colocas, ya que lo mejor es que esté solo.

Lo que sigue es un pequeño tutorial para agregar esta barra flotante para poder compartir tu blog con los medios de comunicación social en Blogger. Aquí se incluyen los botones con contador de Enviar de facebook, twitter, linkedindigg y google plus.

Pasos a seguir:

  1. Entre en su cuenta de Blogger
  2. Seleccione el Blog donde desea colocar la barra lateral
  3. Diríjase a la opción ‘Diseño’
  4. Pulse sobre ‘Añadir un gadget’ (del lateral o la zona central)
  5. Seleccione el gadget ‘HTML/Javascript’
  6. Copie en el portapapeles el código que hay más abajo (Ctrl+C)
  7. Pegue el contenido del portapapeles en la caja de contenido (Ctrl+V) y gúardela


<!-- INICIO codigo barra flotante con botones sociales http://www.tupublicidadexterior.es -->
<style>
	#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
	#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
	.fb_share_count_top {width:48px !important;}
	.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
	.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
	.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Si quieres tener esta barra flotante haz click en 'la quiero' !!!">
	<div class='sbutton' id='fb'>
		<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a>
		<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
	</div>
	<div class='sbutton' id='rt'>
		<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
	</div>
	<div style='border-bottom: 1px solid #ccc; margin-bottom: 10px;'>
		<script type='text/javascript' src='http://platform.linkedin.com/in.js'></script>
		<script type='in/share' data-counter='top'></script>
	</div>
	<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
		<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
		<a class="DiggThisButton DiggMedium"></a>
	</div>
	<div class='sbutton' id='gplusone'>
		<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
		<g:plusone size="tall"></g:plusone>
	</div>
		<div style="clear: both;font-size: 9px;text-align:center;">
		<a href="/blog/?p=232">la quiero</a>
	</div>
</div>
<!-- FINAL del codigo de la barra flotante con los botones sociales correspondientes a me gusta de facebook, twittear de twitter, publicar en digg, publicar en linkedin y publicar en google plus-->

 

Esperamos que os guste y la disfrutéis!!!

Esta entrada también está disponible en: Catalán

Enlace permanente a este artículo: http://www.tupublicidadexterior.es/blog/barra-flotante-botones-sociales-blogger/

2 comentarios

  1. Harlan Falkner

    Would love to constantly get updated outstanding blog!

  2. leafs tv online

    Barra flotante con los botones sociales para Blogger | Vallas publicitarias. Sistemas, tu Publicidad Exterior with love!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *