Tutorial: Añadir panel avanzado de admin. en Blogger

Someone Seguir

No recomendado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Desde
28 Jun 2014
Mensajes
1.062
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
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​

dqlt06.png

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

1.- Añadir CSS

2uroy8w.png

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

Insertar CODE, HTML o 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)

Insertar CODE, HTML o 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)

Insertar CODE, HTML o 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 :D
 
Última edición:

vellenger

Programador
No recomendado
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
9 Mar 2013
Mensajes
1.045
Edad
36
Se ve interesante.. tengo un blogger que me esta dando exelentes resultados.. asi que intentare aplicar.. buen tuto.. :encouragement:
 

sergio18

Delta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
11 Nov 2014
Mensajes
593
sirve solo para admins o para todos los usuarios?
 

titonbolero

1
Pi
Verificación en dos pasos activada
Verificado por Whatsapp
Suscripción a IA
Desde
4 Jun 2014
Mensajes
5.422
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?
 

Someone

No recomendado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Desde
28 Jun 2014
Mensajes
1.062
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.

Someone

No recomendado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Desde
28 Jun 2014
Mensajes
1.062
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
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

Lambda
Verificación en dos pasos desactivada
Desde
9 Abr 2014
Mensajes
2.989
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
Demo?

Guardo a favoritos para mis colegas ;) Gracias :encouragement:
 

Someone

No recomendado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Desde
28 Jun 2014
Mensajes
1.062
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
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

Lambda
Verificación en dos pasos desactivada
Desde
9 Abr 2014
Mensajes
2.989
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
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:p7:
 

root25

Gamma
SEO
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
23 Dic 2014
Mensajes
318
Muy bueno lo probare en unos de mis blogs :encouragement:
 

Pixtoons

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
2 May 2013
Mensajes
353
muy interesante, ya lo probé y se ve hermoso :)
 

Serjal

Gamma
Social Media
Verificación en dos pasos desactivada
Desde
9 Dic 2016
Mensajes
151
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
gracias amigo
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba