Aprender a modificar el Gadget Seguir por correo electrónico de Blogger

Por que no actualizar nuestro Gadget Seguir por correo electrónico de Blogger?, de una forma fácil y segura vamos a modificar nuestro Gadget de suscripciones a un diseño moderno.

El Gadget Seguir por correo electrónico por defecto Blogger presenta con una diseño simple, pero ahora lo hemos mejorado para que tenga un aspecto totalmente diferente.

Vamos a utilizar CSS y el código modificado del Gadget Seguir por correo electrónico

A continuación puede ver su demostración en el siguiente blog de demos

Demo Clic aquí

Empezamos

Video tutorial

Suscríbase a nuestro canal de Youtube
1.- Abrir Blogger.com

2.- Un clic en Diseño

3.- Añadir un Gadget

4.- Abrir el Gadget Seguir por correo electrónico

5.- Ubique su Gadget donde mejor le parezca

6.- Ahora diríjase a Tema

7.- Un clic en Editar HTML

8.- Busque el Gadget FollowByEmail1

9.- Le mostrar lo siguiente como ejemplo:

10.- Seleccione el código tal como lo mostré en el ejemplo, y elimínelo, remplace por el siguiente código:

      <b:widget id='FollowByEmail1' locked='false' title='' type='FollowByEmail' version='1'>
        <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
  <div class='widget-content'>
    <div class='follow-by-email-inner'>
<div class='box-title-sus'>Sign Up for my Newsletter</div>
<div class='box-form'>
      <form action='https://feedburner.google.com/fb/a/mailverify' class='form-color' expr:onsubmit='&quot;window.open(\&quot;https://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;\&quot;, \&quot;popupwindow\&quot;, \&quot;scrollbars=yes,width=550,height=520\&quot;); return true&quot;' method='post' target='popupwindow'>
                  <div class='input-field'>
                  <input class='inputfield' name='email' required='' type='email'/>
                  <label data-error='wrong' data-success='right' for='email'>Email</label>
                   </div>
                  <input class='mi-boton' type='submit' value='Submit'/>
         <input expr:value='data:feedPath' name='uri' type='hidden'/>
        <input name='loc' type='hidden' value='es_ES'/>
      </form>
</div>
    </div>
  </div>
  <span class='item-control blog-admin'>
  </span>
</b:includable>
      </b:widget>

11.- Puede cambiar el titulo que dice: Sign Up for my Newsletter

12.- Ahora busque el siguiente código

</head>

13.- Inserte las siguientes lineas de código justo arriba del código que encontró

<style>
.follow-by-email-inner {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    width: 100%;
}
.box-title-sus {
    line-height: 1.4;
    padding: 1.25rem 1rem;
    background: #E52B50;
    color: #fff;
    display: block;
    font-size: 2rem;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-family: Noto Sans,sans-serif !important;
}
.form-color {
    background: #9C2542;
    padding: 1rem;
    maring: 0;
}
.box-form  {
    padding: 0;
    margin: 0 auto;
    display: block;
}
.box-form input {
    border: 1px inset;
    border: none;
    font-size: 1rem;
    outline: #E52B50;
    padding: 1rem !important;
    width: 88%;
    margin-bottom: 16px;
    margin: 20px auto 15px;
    display: block;
}
.box-form .mi-boton {
    border-radius: 2px;
    -moz-border-radius: 2px;
    background: linear-gradient(#e84263, #e52b50);
    cursor: pointer;
    color: #fff;
    border: none;
    font-size: 1rem;
    outline: #E52B50;
    display: block;
    width: 100%;
    line-height: 10px;
}
.box-form .mi-boton:hover {
    background: #333;
    opacity: 1;
    transition: 0s
}
.input-field{position:relative;}
input.inputfield,.input-field textarea{
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    outline: none;
    color: #fff;
}
.input-field input:focus,.input-field textarea:focus{border-bottom:1px solid #e91e63;box-shadow:0 1px 0 0 #e91e63;}
.input-field label{color:#fff;position:absolute;top:0.8rem;left:0;font-size:1rem;cursor:text;}
/* active input efecto */
input:focus ~ label, input:valid ~ label { top:-20px; font-size:12px; color:#fff; cursor: text; }
/* LABEL efecto */
label { color:#fff; font-size:18px; font-weight:normal; position:absolute; pointer-events:none; top:10px; transition:0.2s ease all; }
@media screen and (max-width:684px){
.input-field{position:relative;}
}
</style>

14.- Un clic en Guardar

Es momento de ingresar en nuestro blog y ver como funciona el nuevo Gadget Seguir por correo electrónico de Blogger

Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no dude en escribir

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: ComoWidgets para BloggerWidgets Suscripciones

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.