Blogger es actualmente una de las plataformas más populares para la creación de blogs (quizás por esto es que gmail tiene un poco más de usuarios que Hotmail, aun así Hotmail es muy bueno y recomendamos Registrarse en Hotmail), y a pesar de que es muy completa tiene algunas falencias que aunque no muy notorias si se echan de menos en algunos casos, como es el de un buen menú de administración, aquel menú superior que muestre las principales opciones cuando estemos navegando en el blog con el fin de ahorrarnos tiempo y no tener que ir al escritorio.
Añadir panel avanzado de administración en Blogger
En el día de hoy veremos como añadir un genial panel de administración bastante completo y que se ha inspirado en su diseño en el menú de administración de WordPress.
El panel es el siguiente:
Para agregar este panel de administración en tu blog solo debes ir al escritorio de tu blog, entra a Plantilla, Editar HTML y pegar justo arriba de ]]></b:skin> lo siguiente:
.admin-controll,.admin-controll * {
margin: 0;
padding: 0;
list-style: none;
list-style-type: none;
line-height: 1.0;
}
.admin-controll ul {
position: absolute;
top: -999em;
width: 100%;
}
.admin-controll ul li {
width: 100%;
background: 333333;
}
.admin-controll li:hover {
visibility: inherit;
}
.admin-controll li {
float: left;
position: relative;
}
.admin-controll a {
display: block;
position: relative;
}
.admin-controll li:hover ul,.admin-controll li.sfHover ul {
left: 0;
top: 100%;
z-index: 99;
}
.admin-controll li:hover li ul,.admin-controll li.sfHover li ul {
top: -999em;
}
.admin-controll li li:hover ul,.admin-controll li li.sfHover ul {
left: 100%;
top: 0;
}
.admin-controll li li:hover li ul,.admin-controll li li.sfHover li ul {
top: -999em;
}
.admin-controll li li li:hover ul,.admin-controll li li li.sfHover ul {
left: 100%;
top: 0;
}
.mbl-admin-bar {
margin: 0px;
direction: ltr;
color: #ccc;
font: 400 13px/32px "Open Sans",sans-serif;
height: 32px;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-width: 600px;
z-index: 99999;
background: #222;
float: left;
}
.mbl-admin-bar li a {
display: block;
color: #fff;
padding: 7px 15px;
font-weight: 400;
text-decoration: none;
font-size: 14px;
}
.mbl-admin-bar li li a {
font-size: 15px;
color: #fff;
float: none;
padding: 0px;
width: 0;
}
ul.children {
color: #fff;
background: #333333;
font-size: 18px;
min-width: 230px;
padding: 10px;
float: right;
margin-left: -98px;
}
.mbl-admin-bar li a:hover,.mbl-admin-bar li a:active,.mbl-admin-bar li a:focus,.mbl-admin-bar li:hover > a,.mbl-admin-bar li.current-cat > a,.mbl-admin-bar li.current_page_item > a,.mbl-admin-bar li.current-menu-item > a {
color: #38b8f0;
background: #333333;
}
.fa {
font-size: 18px;
color: #999;
margin-right: 5px;
}
.fa.fa-user {
font-size: 50px;
float: left;
padding: 20px;
border: 1px solid #212121;
background: #575757;
}
ul.children img {
width: 80px;
height: auto;
float: left;
margin-right: 10px;
}
ul.children a {
margin-top: 10px;
}
li.mright {
float: right;
}
li.mblogo a {
padding: 3px 15px 3px 15px!important;
}
ul.child1 {
min-width: 180px;
color: #fff; background: #333333;
}
ul.child1 li a {
padding: 10px;
width: 100%;
background: #333333;
}
Ahora antes de <body> (sino te sale, busca <body class=’home… o alguna variación), pega lo siguiente:
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/> <link href='http://fonts.googleapis.com/css?family=Open Sans:400' rel='stylesheet' type='text/css'/> <span class='item-control blog-admin'> <div class='span-24'> <div class='mbl-cpanel'> <ul class='admin-controll mbl-admin-bar'> <li class='mblogo'><a href='http://www.mybloggerlab.com'><img src='http://1.bp.blogspot.com/-YyMN2VM2FGc/VDka36seHBI/AAAAAAAAFH0/gxXlBTMcJPU/s1600/v.pn'/></a></li> <li class='blog-title'><a expr:href='data:blog.homepageUrl'><i class='fa fa-tachometer'/> <data:blog.title/></a></li> <li><a href='http://www.blogger.com/home'><i class='fa fa-puzzle-piece'/> Panel</a></li> <li><a href='#'><i class='fa fa-pencil'/> Posts</a> <ul class='child1'> <li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/src=sidebar"'><i class='fa fa-pencil'/> Nuevo Post</a></li> <li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=page"'><i class='fa fa-file'/> Nueva Página</a></li> <li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#posts"'><i class='fa fa-th-list'/> Todos los Posts</a></li> <li><a expr:href='"https://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=post;postID=" + data:blog.postId + ""'><i class='fa fa-pencil-square'/>Editar Post</a></li> </ul> </li> <li><a href='#'><i class='fa fa-cogs'/> Personalizar</a> <ul class='child1'> <li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pageelements"'><i class='fa fa-wrench'/> Diseño</a></li> <li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#templatehtml"'><i class='fa fa-pencil-square-o'/> Editar Plantilla</a></li> </ul> </li> <li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#comments"'><i class='fa fa-comment'/> Comentarios</a> <ul class='child1'> <li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pendingcomments"'><i class='fa fa-bullhorn'/> Moderación</a></li> <li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#spamcomments"'><i class='fa fa-ban'/> SPAM</a></li> </ul> </li> <li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"'><i class='fa fa-cog'/> Ajustes</a> <ul class='child1'> <li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"'><i class='fa fa-heart-o'/> Básico</a></li> <li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#postandcommentsettings"'><i class='fa fa-comments'/> Posts & Comentarios</a></li> <li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#emailandmobilesettings"'><i class='fa fa-mobile'/> Móvil & E-mail</a></li> <li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#languageandformattingsettings"'><i class='fa fa-calendar-o'/> Idioma</a></li> <li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#searchsettings"'><i class='fa fa-search-plus'/> Buscar preferencias</a></li> <li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#othersettings"'><i class='fa fa-code'/> Otro</a></li> <li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#overviewstats"'><i class='fa fa-signal'/>Estadísticas</a></li> </ul> </li> <li class='mright'><a href='#'><i class='fa fa-signal'/> Hola, Usuario</a> <ul class='children'> <li><img src='URL de tu imagen de perfil'/> <div class='mauthor'><br/>Tu Nombre de Usuario</div> <a href='http://www.blogger.com/logout.g'> Salir</a></li> </ul> </li> </ul> </div> </div> </span>
Esta parte corresponde a la estructura HTML del panel y puedes personalizar las opciones a tu gusto, pudiendo añadir nuevas opciones.
Esperamos que este truco te haya gustado y no olvides compartir este post en tus redes sociales y correo electrónico (si no tienes cuenta en Hotmail no olvides Crear Cuenta Hotmail), hasta la próxima amigos.
0 comentarios