Widgets para Blogger – Widget de suscripción social


Un nuevo Widget para Blogger realmente espectacular para que lo utilicen completamente gratis en su blog de Blogger. El widget que van a aprender a instalarlo en su blog de Blogger se lo conoce como Widget de suscripción social, el cual es una buena herramienta para que los usuarios que visitan sus blogs puedan seguirlos gracias a este widget de suscripción social. Con el widget de suscripción social los usuarios podrán suscribirse y seguirles en sus cuentas de Facebook, Google+, Twitter y su canal de Youtube. Lo que vamos hacer es copiar un código en un widget y realizar 4 cambios y luego lo podrán ubicar donde mejor les parezca. El widget de suscripción social funciona perfectamente en todos los navegadores web, tiene una carga ligera y no le causara ningún error a la estructura de su blog.

Widgets para Blogger – Widget de suscripción social

A continuación, pueden ver su demostración en el siguiente blog, el widget de suscripción social está ubicado justo arriba de la entrada del blog de demostración.

demo

Les gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Diseño


3 Abre un gadget “Añadir un gadget

Widgets para Blogger – Widget de suscripción social

4 Busca el widget que dice “HTML/Javascript” ábrelo


5 Ingresa las siguientes líneas de código en su interior

<style>
/* ayudadeblogger.com*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css";
html, body {
    min-height: 100%;
}
body {
    background-image: linear-gradient(45deg, rgba(194, 233, 221, 0.5) 1%, rgba(104, 119, 132, 0.5) 100%), linear-gradient(-45deg, #494d71 0%, rgba(217, 230, 185, 0.5) 80%);
   margin: 0;
  }
#buttons {
    padding: 2px 2px;
    width: 330px;
    overflow: hidden;

}

.button {
    background: #DCE0E0;
    position: relative;
    display: block;
    float: left;
    height: 40px;
    margin: 4px;
    overflow: hidden;
    width: 156px;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.icon {
    display: block;
    float: left;
    position: relative;
    z-index: 3;
    height: 100%;
    vertical-align: top;
    width: 38px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-radius: 3px 0px 0px 3px;
    border-radius: 3px 0px 0px 3px;
    text-align: center;
}
.icon i {
    color: #fff;
    line-height: 42px;
}
.slide {
    z-index: 2;
    display: block;
    margin: 0;
    height: 100%;
    left: 38px;
    position: absolute;
    width: 118px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 0px 3px 3px 0px;
    border-radius: 0px 3px 3px 0px;
}
.slide p {
    font-family: Open Sans;
    font-weight: 400;
    border-left: 1px solid #fff;
    border-left: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 16px;
    left: 0;
    margin: 0;
    position: absolute;
    text-align: center;
    top: 10px;
    width: 100%;
}
.button .slide {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.facebook iframe {
    display: block;
    position: absolute;
    right: 23px;
    top: 10px;
    z-index: 1;
}
.twitter iframe {
    width: 90px !important;
    right: 5px;
    top: 10px;
    z-index: 1;
    display: block;
    position: absolute;
}
.google #___follow_0 {
    width: 70px !important;
    top: 10px;
    right: 45px;
    position: absolute;
    display: block;
    z-index: 1;
}
.youtube #___ytsubscribe_0 {
    top: 10px;
    right: 1px;
    position: absolute;
    display: block;
    z-index: 1;
}
.facebook:hover .slide {
    left: 180px;
}
.twitter:hover .slide {
    top: -40px;
}
.google:hover .slide {
    bottom: -40px;
}
.youtube:hover .slide {
    left: -150px;
}
.facebook .icon, .facebook .slide {
    background: #305c99;
}
.twitter .icon, .twitter .slide {
    background: #00cdff;
}
.google .icon, .google .slide {
    background: #d24228;
}
.youtube .icon, .youtube .slide {
    background: #b31217;
}
/* ayudadeblogger.com End */
</style>
<div id="buttons">
  <div class="facebook button">
    <i class="icon">
      <i class="fa fa-facebook"></i>
  </i>
  <div class="slide">
    <p>
      Facebook
    </p>
  </div>
  <iframe src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/tratamientosporansiedad&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=20&amp;appId=568581339861351" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:20px;" allowtransparency="true">
  </iframe>
  </div>


  <div class="google button">
    <i class="icon">
      <i class="fa fa-google-plus"></i>
  </i>
  <div class="slide">
    <p>
      Google+
    </p>
  </div>
  <!-- Place this tag where you want the +1 button to render. -->
  <div class="g-follow" data-annotation="bubble" data-href="https://plus.google.com/105165843323659030487" data-rel="publisher"></div>

  <!-- Place this tag after the last +1 button tag. -->
  <script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
  </div>
  <div class="youtube button">
    <i class="icon">
      <i class="fa fa-youtube"></i>
  </i>
  <div class="slide">
    <p>
      YouTube
    </p>
  </div>
  <div class="g-ytsubscribe" data-channel="youtube" data-layout="default" data-count="default" data-onytevent="onYtEvent"></div>
    <script src="https://apis.google.com/js/platform.js"></script>
<script>
  function onYtEvent(payload) {
    if (payload.eventType == 'subscribe') {
      // Add code to handle subscribe event.
    } else if (payload.eventType == 'unsubscribe') {
      // Add code to handle unsubscribe event.
    }
    if (window.console) { // for debugging only
      window.console.log('YT event: ', payload);
    }
  }
</script>
</div>
<div class="twitter button">
    <i class="icon">
      <i class="fa fa-twitter"></i>
  </i>
  <div class="slide">
    <p>
      Twitter
    </p>
  </div>
  <a href="https://twitter.com/trastornoansied" class="twitter-follow-button" data-show-count="false" data-via="mariuCSS">
    Tweet
  </a>
  <script>
    !function(d,s,id){
      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
      if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;
        js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
  </script>
  </div></div>

Realiza estos cambios:

He marcado de 4 diferentes colores en los cuales ustedes tendrán que ingresar las direcciones de sus perfiles sociales.

Por ejemplo:

Borra el perfil de Facebook https://www.facebook.com/tratamientosporansiedad y cámbialo por la dirección URL de tu página de Facebook.

También, tienes que eliminar esta dirección https://plus.google.com/105165843323659030487 y cambiarla por la dirección URL de tu cuenta de Google+.

Además, borra esta dirección de canal youtube he inserta el nombre de tu canal de Youtube

Y por último tenemos que borrar esta dirección https://twitter.com/trastornoansied he ingresar la dirección URL de nuestra cuenta de Twitter.

Eso es todo, es momento de dar un clic en “Guardar” y ubica este nuevo widget de suscripción social donde tú quieras.

Fácil verdad!

Recuerda suscribirte y recibirás mis nuevas actualizaciones directamente en tu correo electrónico

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos




Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: