BluePrint: Perfecto Widget Social para Blogger

Hola a todos, no se si se acuerdan de mi, pero bueno hoy comparto (como siempre) con ustedes este simple pero perfecto gadget que me encontré navegando por la web:

¿Por qué utilizar este widget?

Si usted quiere que su blog aún más sensible y con estilo se use. Esto puede ayudarle a ganar seguidores sociales junto con suscriptores por correo electrónico. Este widget esta construido con HTML puro y CSS3, y también funciona en casi todos los navegadores.

Diseño - Añadir un gadget - Html/Javascript  y ahí pegas este codigo:

<link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css" />
<link href='//fonts.googleapis.com/css?family=Source Sans Pro:200,200italic,300,300italic,regular,italic,600,600italic,700,700italic,900,900italic&amp;subset=latin' rel='stylesheet' type='text/css'/>
<style>
  #byard-socialsub {
    width:300px;
    height:350px;
    background:whitesmoke;
    border:1px solid #eaeaea;
    box-shadow:0 0 2px 2px #ccc;
  }
  .byard-socialsub-title {
    font-size:20px;
    font-family: 'Oleo Script', cursive;
    background:hsl(198, 100%, 49%);
    padding:5px;
    border-bottom: 2px solid #444;
    color:white;
    text-align:center;
  }
  #byard-socialsub-icons{
    padding-top: 8px;
    padding-left: 4px;
    padding-bottom: 15px;
    border-bottom: 2px dotted hsl(0, 0%, 27%);
  }
  ul.byard-socialsub-icons{
    margin:0;
    padding:0;
    list-style:none;
    -webkit-perspective: 10000px;

    -moz-perspective: 10000px;
    -o-perspective: 10000px;
    perspective: 10000px;
  }
  ul.byard-socialsub-icons li{
    display: inline-block;
    width: 55px;

    height: 50px;
    margin-right: -px;

    background: none;
    font: bold 36px Arial;

    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    padding-left:10px;
  }
  ul.byard-socialsub-icons li a{
    display:block;
    width: 100%;
    height: 100%;
    color: black;
    text-decoration: none;
    outline: none;
    -webkit-transition:all 300ms ease-out 0.1s;

    -moz-transition:all 300ms ease-out 0.1s;
    -o-transition:all 300ms ease-out 0.1s;
    transition:all 300ms ease-out 0.1s;
  }
  ul.byard-socialsub-icons li a span{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 5px;

    display:block;
    width: 100%;
    height: 100%;
    -webkit-transition:all 300ms ease-out 0.1s;
    -moz-transition:all 300ms ease-out 0.1s;
    -o-transition:all 300ms ease-out 0.1s;
    transition:all 300ms ease-out 0.1s;
  }
  ul.byard-socialsub-icons li a img{
    border-width: 0;
  }
  ul.byard-socialsub-icons li:hover a{
    -moz-transform: rotateY(180deg);

    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    background: none;

  }
  ul.byard-socialsub-icons li:hover a span{
    -moz-transform: rotateY(180deg);

    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  .byard-socialemailsub {
    font-size:14px;
    padding:5px;
    color:#444;
    font-family: Arial;
    font-family:bold;
  }
  .byard-socialemailsubname {
    background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzi41C-kpaWKfJ9dTixbZv6EUR7fx7Z0lJEHeD5JlWplfEX8xPNTDNRzL2Qffuh86Gm12e5LtZiO79rMb_kBoNekCJh9bEW8rL40qiMVaGbB02ecg5lXHcaQfbbokckG_ibpE1woIIJUs/s320/name.png) no-repeat 7px 8px;
    border:1px solid #ddd;
    font-family:Arial,sans-serif;
    font-size:13px;
    font-weight:bold;
    color:hsla(0,0%,27%,0.69);
    width:225px;
    height:25px;
    padding:5px 15px 5px 28px;
    margin-left:10px;
    display:inline-block;
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;


  }
  .byard-socialemailsubemail {
    background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4VgWgSWFqqbZI8VKCG76XK4OY9neGcbDHSAH4glrQwm2zk6RUhzQ1lOCA6sLOeHEEJi3PeQcbEQj68I9vrAx0B2NimnFjkWonrcCCZf_TdF3ivvMqiqjGATnEX30qPLntQqq2DipzdP0/s320/email.png) no-repeat 7px 10px;
    border:1px solid #ddd;
    font-family:Arial,sans-serif;
    font-size:13px;
    font-weight:bold;
    color:hsla(0,0%,27%,0.69);
    width:225px;
    height:25px;
    margin-top:10px;
    padding:5px 15px 5px 28px;
    margin-left:10px;
    display:inline-block;
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;


  }
  .byard-socialemailsubname:hover,.byard-socialemailsubemail:hover {
    border:1px solid #bebebe;
    box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);
  }
  .byard-socialemailsubname:focus, .byard-socialemailsubemail:focus{
    border-color: hsl(198, 100%, 49%);

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px hsl(198, 100%, 49%);

    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px hsl(198, 100%, 49%);

    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px hsl(198, 100%, 49%);

    outline: 0 none;

  }
  .byard-socialemailsubbutton {

    -moz-box-shadow: 3px 4px 0px 0px #1564ad;
    -webkit-box-shadow: 3px 4px 0px 0px #1564ad;
    box-shadow: 3px 4px 0px 0px #1564ad;

    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
    background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);

    background-color:#79bbff;

    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;

    border:1px solid #337bc4;

    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:17px;
    font-weight:bold;
    padding:8px 70px;
    text-decoration:none;
    margin-top:10px;
    margin-left:35px;
    text-shadow:0px 1px 0px #528ecc;

  }
  .byard-socialemailsubbutton:hover {

    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
    background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);

    background-color:#378de5;
  }
  .byard-socialemailsubbutton:active {
    position:relative;
    top:1px;
  }
</style>
<div id='byard-socialsub'>
  <div class='byard-socialsub-title'>
    Get In Touch With Us
  </div>
  <div id='byard-socialsub-icons'>
    <ul class="byard-socialsub-icons">
      <li>
        <a href="http://www.facebook.com/BloggerYard">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtyC-IEJElLb982T0iKPTjYL1sKYNyqtTHFC_fK8262MwTDVm0jacTgFgsgT3IWy6uq6sF3U-s-GYek3Fr5j7NfoQ6MUgA0WUKZBMlrLGnfOcPeWAUy2nEccJwgpuZp6l7L6__XLQmUPs/s64/blueprint-social-03.png" title="Add to Facebook" />
        </a>
      </li>
      <li>
        <a href="https://plus.google.com/101996924620264617682">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7cN2bIwafCCx7Cu4byvuCrU8eD_jWloDMfhri58uXfxC3B7QgzfT6lMq-dyMzim_IyZQ6vKNJa0etnXDyhXSq-WReqfe2RX1w3eIc60vvWSoX98VtrmmpM9fvtStIahhuHlSJ1YIy4yY/s64/blueprint-social-04.png" title="Google plus" />
        </a>
      </li>
      <li>
        <a href="http://www.twitter.com/BloggerYard">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3gfYN5s7XW2q4b2OhTwPjzw73qKgKGIX6Ntngvr0zuLSxVEaliB3Jaitm8woeaQ2tApMNqRkri3Gw0zVvwYe9mgHAvhVXBEjPyJz_ivsRHhScPfKb4ZCNR9mOQeRHHdx-aGfOoa_hxOU/s64/blueprint-social-01.png" title="Add to Twitter" />
        </a>
      </li>
      <li>
        <a href="http://feeds2.feedburner.com/BloggerYard">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmJqq9NLWrWqMPxZ3yyj9kgBKwMy9qD-xN8QvLnh3UGcXjTPDExl0ShKXaERiMgPydRdDFkn-E6son9xMz6_rWHuxfzjd2wy6cgLqu7u_w-yz4NRZqdqIzMODAkEm9t8CsYENrl_cHWXE/s64/blueprint-social-10.png" title="Add RSS Feed" />
        </a>
      </li>
    </ul>
  </div>
  <div class='byard-socialemailsub'>
    <p style='padding-top:5px;padding-bottom:10px;font-size: 14px;padding: 10px;font-family:Source Sans Pro;'>
      Sign Up For Free To Get Blogging Tips, Blogger Resources, Search Engine Optimization Tips, Templates and Widgets Straight In Inbox.
    </p>
    <form action='http://feedburner.google.com/fb/a/mailverify?uri=BloggerYard' class='byard-subsbox-form' method='post' target='_new'>
      <input class='byard-socialemailsubname' name='name' placeholder='Your Name' type='text'/>
      <input class='byard-socialemailsubemail' name='email' placeholder='Your Email Address' type='text'/>
      <input class='byard-socialemailsubbutton' type='submit' value='Sign Up!'/>
    </form>
  </div>
</div>

Listo solo reemplacen todo lo que esta en azul por sus datos y pueden disfrutar de este maravilloso widget de suscripción.!!