Tutorial: Adicionar painel avançado de admin. no Blogger

Someone · 08/12/2014

Hola de nuevo! Llevo ya 2 tutoriales hoy (me aburro mucho) xD Pero es que me encontré esto y me pareció muy interesante. Además, creo que cuanto más mejor, ¿no?

Esta vez se trata de cómo crear un panel de Admin. como el que tiene WordPress. En mi blog, ya traducido, queda así:

El mérito es de MyBloggerLabs, yo sólo me he limitado a traducirlo

Chulo, ¿verdad? Si quieres uno igual, haz lo siguiente.

1.- Añadir CSS

Ve a Blogger > Plantilla > Editar HTML, busca ]]></b:skin>, y pega justo antes:

Inserir CODE, HTML ou PHP:

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

2.- Añadir HTML

Ahora busca <body> (sino te sale, busca <body class='home... o alguna variación), y pega antes:

Inglés (original)

Inserir CODE, HTML ou PHP:

<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'/> [COLOR="#FF0000"]Dashboard[/COLOR]</a></li>

  <li><a href="#"><i class="fa fa-pencil"></i> [COLOR="#FF0000"]Posting[/COLOR]</a>
<ul class='child1'>
  <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/src=sidebar&quot;'><i class='fa fa-pencil'/> [COLOR="#FF0000"]New Post[/COLOR]</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=page&quot;'><i class='fa fa-file'/> [COLOR="#FF0000"]New Page[/COLOR]</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#posts&quot;'><i class='fa fa-th-list'/> [COLOR="#FF0000"]All Posts[/COLOR]</a></li>
<li><a expr:href='&quot;https://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=post;postID=&quot; + data:blog.postId + &quot;&quot;'><i class="fa fa-pencil-square"/>[COLOR="#FF0000"]Edit Post[/COLOR]</a></li>
  </ul>
</li>
  <li><a href="#"><i class="fa fa-cogs"></i> [COLOR="#FF0000"]Customize[/COLOR]</a>
<ul class='child1'>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pageelements&quot;'><i class='fa fa-wrench'/> [COLOR="#FF0000"]Layout[/COLOR]</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#templatehtml&quot;'><i class='fa fa-pencil-square-o'/> [COLOR="#FF0000"]Edit Template[/COLOR]</a></li>
  </ul>
</li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#comments&quot;'><i class='fa fa-comment'/> [COLOR="#FF0000"]Comments[/COLOR]</a>
<ul class='child1'>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pendingcomments&quot;'><i class="fa fa-bullhorn"></i> [COLOR="#FF0000"]Pending Comments[/COLOR]</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#spamcomments&quot;'><i class="fa fa-ban"></i> [COLOR="#FF0000"]Spam Comments[/COLOR]</a></li>
  </ul>
</li>

<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;'><i class='fa fa-cog'/> [COLOR="#FF0000"]Settings[/COLOR]</a>
<ul class='child1'>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;'><i class="fa fa-heart-o"></i> [COLOR="#FF0000"]Basics[/COLOR]</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#postandcommentsettings&quot;'><i class="fa fa-comments"></i> [COLOR="#FF0000"]Post &amp; Comments[/COLOR]</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#emailandmobilesettings&quot;'><i class="fa fa-mobile"></i> [COLOR="#FF0000"]Mobile &amp; Email[/COLOR]</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#languageandformattingsettings&quot;'><i class="fa fa-calendar-o"></i> [COLOR="#FF0000"]Language[/COLOR]</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#searchsettings&quot;'><i class="fa fa-search-plus"></i> [COLOR="#FF0000"]Search Preference[/COLOR]</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#othersettings&quot;'><i class="fa fa-code"></i> [COLOR="#FF0000"]Other[/COLOR]</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#overviewstats&quot;'><i class='fa fa-signal'/>[COLOR="#FF0000"]Stats[/COLOR]</a></li>
  </ul>
</li>

<li class='mright'><a href='#'><i class='fa fa-signal'/> [COLOR="#FF0000"]Howdy, Admin[/COLOR]</a>
<ul class='children'>
<li><img src='[COLOR="#FF0000"]http://4.bp.blogspot.com/-CQS3m0DjQEM/VDkSRYC5PNI/AAAAAAAAFGw/bEIJSiw4PGc/s1600/faizan.png[/COLOR]'/>
<div class='mauthor'><br/>[COLOR="#FF0000"]Syed Faizan Ali[/COLOR]</div>
<a href='http://www.blogger.com/logout.g'> [COLOR="#FF0000"]Logout[/COLOR]</a></li>
</ul>
</li>
</ul>
</div>
</div>
</span>

Español (traducción mía)

Inserir CODE, HTML ou PHP:

<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='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/src=sidebar&quot;'><i class='fa fa-pencil'/> Nuevo Post</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=page&quot;'><i class='fa fa-file'/> Nueva Página</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#posts&quot;'><i class='fa fa-th-list'/> Todos los Posts</a></li>
<li><a expr:href='&quot;https://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=post;postID=&quot; + data:blog.postId + &quot;&quot;'><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='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pageelements&quot;'><i class='fa fa-wrench'/> Diseño</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#templatehtml&quot;'><i class='fa fa-pencil-square-o'/> Editar Plantilla</a></li>
  </ul>
</li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#comments&quot;'><i class='fa fa-comment'/> Comentarios</a>
<ul class='child1'>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pendingcomments&quot;'><i class='fa fa-bullhorn'/> Moderación</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#spamcomments&quot;'><i class='fa fa-ban'/> SPAM</a></li>
  </ul>
</li>

<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;'><i class='fa fa-cog'/> Ajustes</a>
<ul class='child1'>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;'><i class='fa fa-heart-o'/> Básico</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#postandcommentsettings&quot;'><i class='fa fa-comments'/> Posts &amp; Comentarios</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#emailandmobilesettings&quot;'><i class='fa fa-mobile'/> Móvil &amp; E-mail</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#languageandformattingsettings&quot;'><i class='fa fa-calendar-o'/> Idioma</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#searchsettings&quot;'><i class='fa fa-search-plus'/> Buscar preferencias</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#othersettings&quot;'><i class='fa fa-code'/> Otro</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#overviewstats&quot;'><i class='fa fa-signal'/>Estadísticas</a></li>
  </ul>
</li>

<li class='mright'><a href='#'><i class='fa fa-signal'/> Hola, TEEA</a>
<ul class='children'>
<li><img src='[COLOR="#FF0000"]#[/COLOR]'/>
<div class='mauthor'><br/>[COLOR="#FF0000"]Walter Sullivan[/COLOR]</div>
<a href='http://www.blogger.com/logout.g'> Salir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</span>

*Lo que está en rojo lo puedes modificar*

3.- Guardar plantilla

Guardamos los cambios y listo. Tenemos nuestro panel de Admin., el cual sólo podemos ver nosotros.

¡Atención!

Si tienes algún tipo de script que convierte automáticamente todos los links en enlaces de afiliado (como el "Full Page Script" de Adf.ly), es muy importante que añadas a blogger.com como excepción. Ya que tuve ese problema y me daba error 404, estuve casi 1 hora buscando una solución cuando intenté eso.

¿Te gustó? Da Me Agrada 😀

vellenger · 08/12/2014

Se ve interesante.. tengo un blogger que me esta dando exelentes resultados.. asi que intentare aplicar.. buen tuto.. :encouragement:

sergio18 · 09/12/2014

sirve solo para admins o para todos los usuarios?

titonbolero · 21/01/2015

esta muy bueno es tan solo para admin
lo instale en uno de mis Blog y funciona perfecto, pero tengo otro que no encuentro por ningun lado el <body class='home.. o similar.

Alguna idea?

Noshy · 21/01/2015

Gracias, seguramente lo probare en algun blog de prueba

Someone · 09/03/2015

sergio18 disse:
sirve solo para admins o para todos los usuarios?

Obviamente sólo para el admin., sino cualquier usuario tendría control total sobre tu web jaja

Carambel · 09/03/2015

Alguna demo?

Someone · 09/03/2015

titonbolero disse:
esta muy bueno es tan solo para admin
lo instale en uno de mis Blog y funciona perfecto, pero tengo otro que no encuentro por ningun lado el <body class='home.. o similar.

Alguna idea?

Si no te sale ese, busca simplemente <body, prueba y me cuentas.

intoroddex · 09/03/2015

Demo?

Guardo a favoritos para mis colegas 😉 Gracias :encouragement:

Someone · 09/03/2015

intoroddex disse:
Demo?

Guardo a favoritos para mis colegas 😉 Gracias :encouragement:

No puedo hacer una demo porque sólo se vería para el admin. (y si hago la demo yo, sólo la vería yo). Así que hay que apañarse con la foto :encouragement:

intoroddex · 09/03/2015

Walter Sullivan disse:
No puedo hacer una demo porque sólo se vería para el admin. (y si hago la demo yo, sólo la vería yo). Así que hay que apañarse con la foto :encouragement:

Perdón eso lo pensé 🙂
Ya lo estaba por editar y me contestaste je😛7:

root25 · 10/03/2015

Muy bueno lo probare en unos de mis blogs :encouragement:

Pixtoons · 03/08/2016

muy interesante, ya lo probé y se ve hermoso 🙂

Serjal · 17/12/2019

gracias amigo

Tutorial: Adicionar painel avançado de admin. no Blogger

Someone

vellenger

sergio18

titonbolero

Noshy

Someone

Carambel

Someone

intoroddex

Someone

intoroddex

root25

Pixtoons

Serjal