add

Widgets para Blogger – Suscripciones V4


Los métodos de suscripciones son la mejor forma para conseguir usuarios que lean nuestras publicaciones, ya que al hacer una nueva publicación en nuestro blog, directamente les llegara el artículo a su correo electrónico mediante nuestro FeedBurner. Además es un medio con el cual nos facilita mostrar nuestros perfiles sociales y poder compartir con los usuarios que nos siguen como Twitter, Facebook, Google+ y FeedBurner que es nuestra mejor opción de suscripciones.

Widgets para Blogger – Suscripciones V4

Bueno, a continuación pueden ver su demostración en el siguiente blog de demos, el widget de suscripciones está ubicado en el sidebar y tiene como nombre “Suscríbete ahora

Widgets para Blogger – Suscripciones V4

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Diseño

Widgets para Blogger – Suscripciones V4

3 Abre un gadget “Añadir un gadget

Widgets para Blogger – Suscripciones V4

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

Widgets para Blogger – Suscripciones V4

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

<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>
  #ayudadeblogger-socialsub {
    width:300px;
    height:350px;
    background:whitesmoke;
    border:1px solid #eaeaea;
    box-shadow:0 0 2px 2px #ccc;
  }
  .ayudadeblogger-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;
  }
  #ayudadeblogger-socialsub-icons{
    padding-top: 8px;
    padding-left: 4px;
    padding-bottom: 15px;
    border-bottom: 2px dotted hsl(0, 0%, 27%);
  }

  ul.ayudadeblogger-socialsub-icons{
    margin:0;
    padding:0;
    list-style:none;
    -webkit-perspective: 10000px;

    -moz-perspective: 10000px;
    -o-perspective: 10000px;
    perspective: 10000px;
  }

  ul.ayudadeblogger-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.ayudadeblogger-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.ayudadeblogger-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.ayudadeblogger-socialsub-icons li a img{
    border-width: 0;
  }

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

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

  }

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

    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  .ayudadeblogger-socialemailsub {
    font-size:14px;
    padding:5px;
    color:#444;
    font-family: Arial;
    font-family:bold;
  }
  .ayudadeblogger-socialemailsubname {
    background:#fff url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/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;


  }
  .ayudadeblogger-socialemailsubemail {
    background:#fff url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/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;


  }
  .ayudadeblogger-socialemailsubname:hover,.ayudadeblogger-socialemailsubemail:hover {
    border:1px solid #bebebe;
    box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);
  }

  .ayudadeblogger-socialemailsubname:focus, .ayudadeblogger-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;

  }

  .ayudadeblogger-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;

  }
  .ayudadeblogger-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;
  }
  .ayudadeblogger-socialemailsubbutton:active {
    position:relative;
    top:1px;
  }

</style>

<div id='ayudadeblogger-socialsub'>
  <div class='ayudadeblogger-socialsub-title'>
    Suscríbete ahora!!!
  </div>
  <div id='ayudadeblogger-socialsub-icons'>
    <ul class="ayudadeblogger-socialsub-icons">
      <li>
        <a href="http://www.facebook.com/ayudadeblogger">
          <img src="http://2.bp.blogspot.com/-AgyQH9kAnrM/UdP-9EcQaAI/AAAAAAAAHc8/EP0OBopISVw/s64/blueprint-social-03.png" title="Add to Facebook" />
        </a>
      </li>
      <li>
        <a href="https://plus.google.com/+ayudadeblogger">
          <img src="http://2.bp.blogspot.com/-QwcTRMgHbkM/UdP-9M4TvJI/AAAAAAAAHco/RL6eakOLM14/s64/blueprint-social-04.png" title="Google plus" />
        </a>
      </li>
      <li>
        <a href="http://www.twitter.com/ayudadeblogger">
          <img src="http://3.bp.blogspot.com/-gq8dCzL3Dy4/UdP-9CzuEQI/AAAAAAAAHck/GGXc5TAt1Qk/s64/blueprint-social-01.png" title="Add to Twitter" />
        </a>
      </li>
      <li>
        <a href="http://feeds2.feedburner.com/foroayudadeblogger">
          <img src="http://2.bp.blogspot.com/-cc7iof0fHvc/UdP-9syxHOI/AAAAAAAAHcw/Sb0j29CP-EQ/s64/blueprint-social-10.png" title="Add RSS Feed" />
        </a>
      </li>
    </ul>
  </div>
  <div class='ayudadeblogger-socialemailsub'>
    <p style='padding-top:5px;padding-bottom:10px;font-size: 14px;padding: 10px;font-family:Source Sans Pro;'>
      Suscríbete completamente gratis y recibirás todas mis actualizaciones directamente en tu correo electrónico....
    </p>
    <form action='http://feedburner.google.com/fb/a/mailverify?uri=foroayudadeblogger' class='ayudadeblogger-subsbox-form' method='post' target='_new'>
      <input class='ayudadeblogger-socialemailsubname' name='name' placeholder='Su nombre' type='text'/>
      <input class='ayudadeblogger-socialemailsubemail' name='email' placeholder='La dirección de su email' type='text'/>
      <input class='ayudadeblogger-socialemailsubbutton' type='submit' value='Ingresar!'/>
    </form>
  </div>
</div>

Realiza estos cambios:

He marcado de tres diferentes colores en los lugares que ustedes tendrán que realizar sus diferentes cambios

Cambia las 4 direcciones URLs que están marcadas de color azul por las direcciones URLs de sus rede sociales

Cambia el nombre que dice foroayudadeblogger por el nombre de tu FeedBurner

Además, si quieren cambiar de frase, pueden borrar las palabras que están marcadas de color rojo, por las palabras que ustedes quieran

Eso es todo, es momento de dar un clic en “Guardar”, y ubica tu nuevo widget de suscripciones donde mejor te parezca.

Fácil verdad!

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

Si necesitas diferentes Widgets de Suscripciones para tu blog, aquí les dejo algunos post que publique


¿Necesitas ayuda?

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

Saludos

0 comentarios:

Publicar un comentario en la entrada

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios