domingo, 2 de junio de 2013

Añadir Barra Flotante Con Google +1 y Otros Botones a Blog

By andante77 5:23 a.m. , , , , , , , , Leave a Comment
Barra Flotante  En este tutorial, compartire contigo como anadir una barra flotante que incluye google +1, pinterest, facebook like  y otros botones, este widget fue creado aplicando efectos CSS y de jQuery. Me he asegurado que el proceso de instalacion sea facil, este trabaja bien en la mayoria de los navegadores.

Esta barra flotante aparecera al lado izquierdo y se movera arriba y abajo segun el lector navegue arriba y bajo, este tambien contiene un contador que muestra cuantas veces tus articulos han sido compartidos o de gusto.  Este hace un papel extraordinario expandir y compartir tus iculos en la red cual traera mayor trafico a tu blog.

Como Anadir este widget Flotante a tu blog.

  • Entra en Blogger
  • Da click en "Diseno" > "Editar HTML" > Haga Copia de Seguridad de Tu Plantilla"
  • Use ctrl F para encontrar el codigo de abajo

<b:includable id='post' var='post'>

Pega el codigo de abajo despues o debajo .<b:includable id='post' var='post'>


 <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <style>
    .RB_social_floating{
        position:fixed; bottom:10%; margin-left:-80px; float:left;
        width:60px;
        background-color:#f7f7f7;
        padding: 5px 0 0px 0px;
         border-top:1px solid #ddd;
    border-left:1px solid #ddd;
    border-bottom:1px solid #ddd;
    z-index:9999px !important;
    border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
    }

    .RB_social_floating .RB_side_social_button{
        margin-bottom:5px;
        float:none;
        height:auto;
        width:60px;
    }
    .RB_social_floating .st_twitter_vcount, .RB_social_floating.st_plusone_vcount, .st_email{
        margin-left:5px;
    }
    .RB_social_floating .st_fblike_vcount{
        margin-left:5px;
    }
    .RB_social_floating .stButton_gradient{
        background:none !important;
        height:21px !important;
        padding-left:0 !important;
    }
    .RB_social_floating .chicklets, .RB_social_floating .stMainServices {
        background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGWVpnRg1nvIywsX4ZmiarLaacV51xq8vxDuMcOgVyqS5nx6HiJFoXpJv9Pq7LWtgnmmXSWPQcNnnBqku19vl1SKU803OlkNOUOd_t3yqc3eTJzsAKSIsbZhRpP8xvLS9FeeYG4jQu4GQO/s400/gc_social_sprite.gif&#39;) no-repeat !important;
        height:19px !important;
        width:45px !important;
        padding:0 !important;
    }

    .st_email .chicklets{
        background-position:0 -77px !important;
        background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGWVpnRg1nvIywsX4ZmiarLaacV51xq8vxDuMcOgVyqS5nx6HiJFoXpJv9Pq7LWtgnmmXSWPQcNnnBqku19vl1SKU803OlkNOUOd_t3yqc3eTJzsAKSIsbZhRpP8xvLS9FeeYG4jQu4GQO/s400/gc_social_sprite.gif&#39;) !important;
    }
    .RB_social_floating .st_twitter_vcount .st-twitter-counter{
        background-position:0 -58px !important;
    }

    .RB_social_floating  .stButton_gradient{
        border:none !important;
    }
    .RB_social_floating .stBubble_count{
        width:44px !important;
        font-size: 15px !important;
        font-weight: normal !important;
        padding-top:7px !important;
        height:23px !important;
        background:none !important;
    }

    .RB_social_floating .st_twitter_vcount .stBubble_count{
        color:#00a6df;
        background-color:#f8fbfc !important;
    }


    .st_fblike_vcount{
        margin-bottom: 0px;
        display: block;
    }

    .st_twitter_vcount{
        margin-bottom: 3px;
        display: block;
    }


    .st_email{
        margin-bottom: 5px; margin-top: 3px;
        display: block;
    }
    .RB_social_floating .stBubble{
        background-position: 21px 31px !important;
        height:35px !important;
    }

    </style>


    <div class='RB_social_floating'>
        <script type='text/javascript'>var switchTo5x=true;</script>
        <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
        <script type='text/javascript'>stLight.options({onhover:false});</script>
        <span class='st_fblike_vcount' displaytext=''/>
        <span class='st_twitter_vcount' displaytext='' st_via='ciudadblogger'/>

    <div style='margin:5px 0 0px 0;'>
    <center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
    <a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; 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> </center>
    </div>

    <div style='margin:0px 0 0 5px;'>
        <span class='st_plusone_vcount' displaytext=''/>
    </div>
    
    <div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
    <a class='addthis_counter'/>
    </div>
    <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
    <script type='text/javascript'>
    var addthis_config = {
         ui_cobrand: &quot;Realcombiz&quot;,
    ui_header_color: &quot;#ffffff&quot;,
         ui_header_background: &quot;#0080FF&quot;
    }
    </script>

    <span class='st_email' displaytext=''/>


    </div>
    </b:if></b:if>

  • Da Click "Guardar Plantilla"
Si desea personalizar la posicion y el fondo de tu widget, puedes editar el codigo sombreado, y reemplazarlo 'ciudadblogger' con tu nombre de usuario de twitter .

Nota:Este widget solamente se mostrara en paginas de articulos.

If You Enjoyed This, Take 5 Seconds To Share It

0 comentarios:

Publicar un comentario