Crear y diseñar un panel de acceso para que los visitantes de nuestro blog tengan una forma de acceder al mismo con un nuevo estilo, parece no ser propio de muchos, y la mayoría solemos recurrir a plugins para wordpress que nos faciliten esta tarea.
El caso es que diseñar uno propio no conlleva demasiado tiempo si disponemos del código necesario para ello y los pasos necesarios a llevar a cabo.
Implementarlo un panel de acceso a nuestro blog, es siempre más eficiente y se pueden conseguir más adeptos, disponiendo de una forma de acceder más facil e intuitiva.
Para poder crear el nuestro propio solo debemos seguir los siguientes pasos:
- Primeramente debemos copiar el siguiente código en el fichero header.php y justo antes del cierre de la etiqueta < /head>
El código anterior lo que hace es llamara a jQuery por medio de la API de Google.
Copiamos el siguiente código y lo pegamos justo después de la etiqueta
Login
El código anterior integrará el panel en la parte superior de nuestra plantilla.
- Ahora solo nos falta el código CSS para darle estilo a la misma, el cual debemos copiar y pegar dentro de nuestro fichero de estilos style.css
* {margin:0; padding:0; outline:0;}
#slide-panel{ background-color:#000;border-bottom-style:solid;border-bottom-width:2px;display:none;height:100px;margin:auto;}
.slide {width:950px; margin:auto;}
.btn-slide:link, .btn-slide:visited{color:#fff; float:right; display:block;font-size:14px; text-transform:uppercase; font-weight:bold;height:26px; padding:3px 0 3px 0;line-height:22px;text-align:center;text-decoration:none;width:100px; background-color:#000; font-family:Arial;}
.loginform {width:950px; margin:auto; color:#999; font-family:Arial, Helvetica, sans-serif;}
.formdetails {color:#FFF; font-size:12px;padding:5px;}
.formdetails input{border:none; padding:2px 5px 2px 5px; background-color:#EFEFEF;}
.loginregister {color:#999; padding:5px;}
.loginregister a:link, .loginregister a:visited {color:#FFF; font-size:11px; text-decoration:underline;}
.loginform h2 {padding:10px 10px 10px 0; font-size:18px; font-weight:normal; text-transform:uppercase;}
.loginform ul li {display:inline;}
.loginform ul li a:link, .loginform ul li a:visited {color:#FFF; font-size:12px; text-decoration:underline;}
Ahora tu panel debería funcionar, tal y como el de la demostración.
José Antonio, mil disculpas, no había visto tu comentario entre tantos cambios que se han llevado a cabo en el blog. Contestando a tu pregunta, si, es así, se recibirá un e-mail para registrarse o recuperar la contraseña.
Un saludo
Buenas tardes,
Muchas gracias por el post, es muy interesante.
No sé mucho sobre el tema, con este panel de acceso al blog, para recuperar la contraseña o registrarse recibiríamos un email con dichas solicitudes, ¿es así?.
Mil gracias y un saludo!