Ir al contenido principal

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.

Créditos
Este aparato ha sido diseñado por Blogger Yard así que todo el mérito es de nosotros. Aunque esta vez no estamos pidiendo ningún vínculo de crédito en el widget para esto es cien por ciento libre. 
Bien ahora vamos a colocarlo en nuestro blog.......
Como es solo un widget sabrán que colocarlo es muy fácil...:::
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/AVvXsEgWIP6yFZdkzr5YPvv-r5myrX2ti2jhXrPGfSy85ZPUFoYdi2SVqBo46wUI9PoFJ3ebwti8lUXVXKou3SGSlPG8sYEHWyoYgWWzazkvToe28HCqBgfxBgZuZH0CawRE4ePhAOhyOCFZHHU/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/AVvXsEjiAwQppnAphkPvCz108Y_MLehhyphenhyphenTV43mB5kTiy3N5iAZWaSUNBVQYGTYVdZuo2fevJX8AFapvu2ctL0rxFn8Q4YXv_yYlE8Q1zX8IZTLi88hGI_NsY0qrBep7TnINTWK9umPIHqX1JltI/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/AVvXsEjEUJRnQch4ordSX4Fr01v5iVaZbIJMhx9Jw6K8P0_1MJMnMsZGLz9m2V8h7Z2FHzwH0tB2kdIPxO6jZ3lYLfCG3kX_7RkNdgGZ8BTwNCUmXC5pRRQ55HvGIorLyipIZytM-H-A94ybQ8s/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/AVvXsEjiIMuWT39lUJcZWxrj4IBT1XEHwR7OUkH4q_CTKofUgPsjO1wKjeYm8owOx6IvU8JHjnahohr07xP4HrcnE3FFp-qp9JZQqq5u-wHg14ngoB6a-plzCWbeFuXsy1az2MpqsFB6Xn5XxIk/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/AVvXsEjs61Y68Pxhj7gK0Pv79xDezDJ3lOq3FTJ13N4bDA3Y5fN1gY2sTstjziCMgAbWPGszAjMtL2Oe8oeSS353IDEh0-8GlF53AddzJCekyyAKxTZqt4KKzpYALetrkOdRef4cOCFDPD9YbxY/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/AVvXsEgkCa6m2VNvhbhcUvlYvf_rBzdHfnrnnlwum_DX0sjlnD9EcxRk9Swf0WA0nZFKlZbg4Aq3xxqp2Ez3EYJiQI6HAdKxAIavmRE9JPXFIAL8wJut-zBstfJ5UOb9mpi-1fOPhcoBZ1uKaIY/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.!!
Saludos y Cuídense!!
Etiquetas:

Comentarios

Publicar un comentario

Entradas populares de este blog

Cómo desarrollar un algoritmo que permita botar la basura

Crear un algoritmo para botar la basura puede parecer sencillo, pero es una excelente manera de introducir conceptos de programación y automatización. A continuación, te presento un ejemplo de algoritmo en pseudocódigo, seguido de un artículo que explica su funcionamiento. Algoritmo en Pseudocódigo: Botar la Basura Inicio Si hay basura en el bote Si el bote está lleno Llevar el bote a la zona de recolección Fin Si Si es día de recolección Colocar el bote en la acera Fin Si Fin Si Fin Artículo: Automatizando la Tarea de Botar la Basura Introducción En la vida diaria, las tareas repetitivas como botar la basura pueden consumir tiempo valioso que podríamos dedicar a actividades más productivas o placenteras. La automatización de estas tareas mediante algoritmos no solo nos ahorra tiempo, sino que también nos permite introducir eficiencia y consistencia en nuestras rutinas diarias. El Algoritmo de Botar la Basura El algoritmo presentado es un conjunto de ins...
Publicar un comentario
Ver todo »

Compartir presentaciones en línea con SlideShare

Si eres de los usuarios que suelen trabajar en equipo, sabes de lo difícil que a veces resulta compartir la información relativa al trabajo que estamos realizando, muchas veces seguramente nos ha sucedido que a algunos miembros del equipo, o no les ha llegado la información, o directamente la han perdido. Y nuevamente debemos crear un correo, adjuntarles el archivo y esperar a que salga de la bandeja. Aburrido y cansador, sobre todo en el caso de las pesadas presentaciones.
Publicar un comentario
Ver todo »

Pasos Para Instalar Windows XP

Cuando nos hablan de instalar sistemas operativos, creemos que es muy difícil y que seguramente no seremos capaces de de hacerlo solos. Pues me he tomado a la tarea de realizar este pequeño tutorial para demostrarles paso a paso que no es tan complejo como parece. Para que se ahorren un buen dinerito a la hora de enfrentarse una instalación promovida por un daño en el disco duro o quizás por un virus informático.
Publicar un comentario
Ver todo »