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
Empezamos
Video tutorial
1.- Abrir Blogger.com
2.- Un clic en Diseño
3.- Añadir un Gadget
6.- Ahora diríjase a Tema
7.- Un clic en Editar HTML
8.- Busque el Gadget FollowByEmail1
<b:widget id='FollowByEmail1' locked='false' title='' type='FollowByEmail' version='1'>11.- Puede cambiar el titulo que dice: Sign Up for my Newsletter
<b:includable id='main'>
<b:if cond='data:title != ""'><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='"window.open(\"https://feedburner.google.com/fb/a/mailverify?uri=" + data:feedPath + "\", \"popupwindow\", \"scrollbars=yes,width=550,height=520\"); return true"' 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>
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
Comentarios