Añadir panel avanzado de admin. en Blogger
Página 1 de 2 12 ÚltimoÚltimo
Mostrando resultados del 1 al 10 de 13
  1. #1
    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


    Invitados no pueden ver imágenes en los mensajes. Por favor regístrate en el foro.

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

    1.- Añadir CSS

    Invitados no pueden ver imágenes en los mensajes. Por favor regístrate en el foro.

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

    Código:
    .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)

    Código:
    <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'/> Dashboard</a></li>
    
      <li><a href="#"><i class="fa fa-pencil"></i> Posting</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'/> New 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'/> New Page</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'/> All 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"/>Edit Post</a></li>
      </ul>
    </li>
      <li><a href="#"><i class="fa fa-cogs"></i> Customize</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'/> Layout</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'/> Edit Template</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'/> Comments</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> Pending Comments</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> Spam Comments</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'/> Settings</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> Basics</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> Post &amp; Comments</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> Mobile &amp; Email</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> Language</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> Search Preference</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> Other</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'/>Stats</a></li>
      </ul>
    </li>
    
    <li class='mright'><a href='#'><i class='fa fa-signal'/> Howdy, Admin</a>
    <ul class='children'>
    <li><img src='http://4.bp.blogspot.com/-CQS3m0DjQEM/VDkSRYC5PNI/AAAAAAAAFGw/bEIJSiw4PGc/s1600/faizan.png'/>
    <div class='mauthor'><br/>Syed Faizan Ali</div>
    <a href='http://www.blogger.com/logout.g'> Logout</a></li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    </span>
    Español (traducción mía)

    Código:
    <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='#'/>
    <div class='mauthor'><br/>Walter Sullivan</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 por Someone; 08-dic-2014 a las 12:41

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

  3. #3
    sirve solo para admins o para todos los usuarios?

  4. #4
    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?

  5. Gracias, seguramente lo probare en algun blog de prueba

  6. #6
    Cita Iniciado por sergio18 Ver Mensaje
    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

  7. #7
    Registro
    25-agosto-2013
    Ubicación
    Perú
    Edad
    24
    Mensajes
    4.059
    Alguna demo?

  8. #8
    Cita Iniciado por titonbolero Ver Mensaje
    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.

  9. #9
    Demo?

    Guardo a favoritos para mis colegas Gracias

  10. #10
    Cita Iniciado por intoroddex Ver Mensaje
    Demo?

    Guardo a favoritos para mis colegas Gracias
    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

Página 1 de 2 12 ÚltimoÚltimo

Temas similares

  1. panel de admin
    hola foreros bueno ya soluciones el problema que tenia del 1045 ahora tengo otro y es que no puedo entrar al panel de admin de mi foro el dueño...
    Respuestas: 3
    Último mensaje: 19-may-2014
  2. Futuro panel de Admin. de Blogger
    En este vídeo los chicos de Google y de Blogger muestran sus progresos hasta ahora, y algunas de las cosas que tienen pensadas para 2011. Por de...
    Respuestas: 27
    Último mensaje: 23-mar-2011

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •