Botones Flotantes con efecto deslizante para Compartir ( Twitter,Faceook,Google+)

Fuente: ayuda bloggers

Nota: para buscar algún código en especifico mas facil y rapido presiona "Ctrl +F"

En este tutorial les enselare ah colocar botones flotantes con efecto deslizante que le da gran elegancia a nuetro blogs, los botones son Twitter, facebook, y google +


Recomiendo el uso del boton de google+ ya que de la cantidad de votaciones que obtengamos en nuestras entradas, se valdrá nuestra posición en Google.

Vista previa de los botones:

Añadiendo esta función en Blogger:

Paso 1: Añadiendo la sección:

En ''Diseño | Edición HTML'' buscamos la siguiente línea:

<data:post.body/>

Arriba de esta, pegaremos el siguiente código:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='cajaflotante'> <div class='boton'> <a class='twitter-share-button' data-count='vertical' data-lang='es' data-via='NOMBRE-TWITTER' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </div> <div class='boton'> <div><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=53&amp;height=65&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;send=false&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:65px;'/></div> </div> <div class='plusbutton'> <script src='http://apis.google.com/js/plusone.js' type='text/javascript'/> <g:plusone expr:href='data:post.url' size='tall'/> </div> </div> </b:if>

Reemplaza lo que está en color rojo por tu nombre de usuario en Twitter

Paso 2: Añadiendo CSS:

Ahora buscaremos la siguiente línea:

]]></b:skin>

Arriba de esta, pegaremos el siguiente código:

#cajaflotante { float: right; margin-left: -92px; background: #fff; position: absolute; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 5px 5px 5px #C0C0C0; -webkit-box-shadow: 5px 5px 5px #C0C0C0; } #cajaflotante .boton { margin:0px auto; padding: 5px; } #cajaflotante .plusbutton { margin:0px auto; padding:0 15px; }

Paso 3: Añadiendo jQuery a la plantilla:

Omite este paso si ya tienes jQuery instalado en tu Blog.

Ahora buscaremos la siguiente línea:

]]></b:skin>

Inmediatamente después de esta, pegaremos el siguiente código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script>

Paso 4: Añadiendo el script:

Ahora buscaremos la siguiente sección:

</head>

Arriba de esta, pega el siguiente código:

<script type='text/javascript'> $(document).ready(function() { var $sidebar = $("#cajaflotante"), $window = $(window), offset = $sidebar.offset(), topPadding = 65; $window.scroll(function() { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); }); </script>

Ahora guarda los cambios y listo: