Colocar um Menú Admin no Blogue Visível somente para o Administrador

Colocar um Menú de Administrador no Blogue que seja visível somente para o administrador do blogue pode ser uma boa ideia e uma forma de ter alguns atalhos à mão quando precisamos de mexer em alguma coisa no Painel de Controle (dashboard) do blogue. ;)



Já há muito tempo que tenho um em cada dos meus blogues e sempre achei ser muito útil. Mas nunca me apeteceu muito fazer um tutorial sobre o assunto porque era preciso, entre outras coisas, colocar manualmente a ID do blogue onde se coloca para funcionar.



Aconteceu quase por acaso que aqui há dias quando estava analisando as mudanças mais recentes que o Blogger tem vindo a implementar, que descobri uma maneira muito fácil de colocar este Menu em qualquer blogue do Blogger sem a necessidade de alterar nada ao código apresentado.



Explicando como fazer para colocar o Menu Admin em 3 passos:




  1. Ir a Modelo → Editar HTML → rolar até ao fundo do código e procurar por: </body>

  2. Colar o código a seguir LOGO ACIMA de </body>:



    Ver Código
    <div class='item-control blog-admin'>    
     <div id='menuADMIN'>
            <ul class='mtv'>
                <li><span class='topADM'>Menú Admin</span>   
                    <ul class='mlo'>
                        <li><a expr:href='data:blog.bloggerUrl'>Blogger</a></li>  
                        <li><a href='http://draft.blogger.com/home'>Blogger Draft</a></li>
                        <li><a expr:href='data:blog.bloggerUrl + &quot;/blogger.g?blogID=&quot;  + data:blog.blogId + &quot;#editor/src=sidebar&quot;'>Nova Mensagem</a></li>
                        <li><a expr:href='data:blog.bloggerUrl + &quot;/blogger.g?blogID=&quot;  + data:blog.blogId + &quot;#allposts&quot;'>Editar Mensagens</a></li>
                        <li><a expr:href='data:blog.bloggerUrl + &quot;/blogger.g?blogID=&quot;  + data:blog.blogId + &quot;##pages&quot;'>Editar Páginas</a></li>
                        <li><a expr:href='data:blog.bloggerUrl + &quot;/blogger.g?blogID=&quot;  + data:blog.blogId + &quot;#publishedcomments&quot;'>Comentários</a></li>
                        <li><a expr:href='data:blog.bloggerUrl + &quot;/blogger.g?blogID=&quot;  + data:blog.blogId + &quot;#pendingcomments&quot;'>Moderar Comentários</a></li>
                        <li><a expr:href='data:blog.bloggerUrl + &quot;/blogger.g?blogID=&quot;  + data:blog.blogId + &quot;#basicsettings&quot;'>Definições</a></li>
                        <li><a expr:href='data:blog.bloggerUrl + &quot;/blogger.g?blogID=&quot;  + data:blog.blogId + &quot;#pageelements&quot;'>Esquema</a></li>
                        <li><a expr:href='data:blog.bloggerUrl + &quot;/blogger.g?blogID=&quot;  + data:blog.blogId + &quot;#templatehtml&quot;'>Editar HTML</a></li>
                        <li><a expr:href='data:blog.bloggerUrl + &quot;/blogger.g?blogID=&quot;  + data:blog.blogId + &quot;#overviewstats&quot;'>Estatísticas</a></li>
                        <li><a expr:href='data:blog.bloggerUrl + &quot;/edit-profile.g&quot;'>Editar Perfil</a></li>
                        <li><a expr:href='data:blog.bloggerUrl + &quot;/logout.g&quot;'>Terminar Sessão</a></li>
                    </ul>
                </li>
      </ul>
        </div>
    </div>


    Ocultar Código


  3. Para terminar a instalação do Menu, ainda faltam os estilos ou seja a aparência com que vai ficar o menu.

    Assim sendo ainda em Editar HTML, volta ao inicio do código e procura por:</b:skin>

    No novo editor HTML do Blogger talvez se apresente como na imagem abaixo:




    Caso o codigo se apresente tal como na imagem, clicar onde está indicado na imagem para expandir o CSS, e coloca o codigo seguinte LOGO ACIMA de </b:skin>:




    Ver Código
    /*--------------------------------------------------
    {--------}  ESTILOS MENÚ ADMINISTRADOR {--------}
    --------------------------------------------------*/
    #menuADMIN {
        margin: 0 auto 50px; 
     position: fixed; 
     right: 0; 
     top: 100px; 
     width: 200px; 
     z-index: 9999999;
    }
    #menuADMIN span.topADM {
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAFLUlEQVR4Xp3VbUyUVxqA4ft954MZPgdmKAxWPqrWJiuU0oDIiN21W21X2nSVte0orW3TtJR+2WAbrehuoummLV1Z+12MroBuNrWp1X5oDShUY7WjUtr6LTLADMzwITDAMPC+p5hMUifolt0rOb/OjzvPOT8e6W/r/wrAPQsW8NLzz6PVarEvtzP9lmkEYS8qIhSsePRxxlSVQGBUIigz83ZBKGQA4AFAAL/nf7M6zza7xTZ3tmqz5e4GphIKbeOpkwAxq15dxb921NQ9+ehjy4Ad/HepQGlJyTMlBqOBttZWzvx8Zn640eA7derUdSeoevPvb3yUZLXywsqXa4BwrrGjqopQpK9dv7Yk3mLm0oULVFZWHvN0dUW2XLygBWpCJuBXT68see7s62++UX7CcWIQRBgQIMj+SMg/JEdHR6OqKjfdFM8dGRk5g/7AdEui9XxCEs7QQKi3czMyzjU4HHtOOBwjICRFUUBViIgIGSpRo9Hg9/vR6fWY4xMJHx4+P3vOHHbt+k9FaGCivfffNXfhnkMN+8YjApAAXjGG875GEJTm8/n4R/kmXO4O1qxdzZWeXi43Nz/R4e7yT/yDifYXzMuzZWXdybXPlOYaoazxD4woccvONZ2l8KGHmZKchsEQTpzFQl3dIRnYOZkAwJHXN2wsyc7J0QFegkSLaKtw3k3tOT/O5tP4x8ZqN29+55/V1TvLgS0Akw0AvFfxVnlR/l35lrHRkZ6L7b72xq5lU4bQs+rf0Wz+8EBpt6u1EngRKGUiZH5b9Y78Pz5rXl8W+8Ijdyb5ZZXGQ3eDxzs/MVEqD32SiaT0NfUAWMwx6NQeDHqIDQsjxhRO36iGkwNa8j+p7l1tajJppyQjjd91HThArcstZXk8KEAfEGGUkbVgssYQPSVm8hN0OMWAo/E707Gj39N+4GuMNhvRN99Msk4rzickhHN9kwtcbhO9nvoLkUdz3uVodim+AT8NxcWEzUon74knCZPlwTMJCdX/V6C5XfiONbhMDEQx874Utj34HBu0v4vUSXLxke3bMebns7CsDAmW/WA2i4tRcZZJBy63Ctfhg+6I4XNDpNpzMWpUPLtPFsQZIgcThoY+GFDVrm9WrMCYl8fSigosGg2divCeN8Zl/WbA6RSnm370WXua+kj4y3ymWuGnOscHcor0BUEzvN74PkXhaGEhYZmZ2LduI3484lGEo0UbablhoLVFfOF2G2/rcXRjunce6bMMNNb96IxMlYoJcvX10aso9Kvqn90+HycXL0Y3Yzr27VVYrka6A952OVyaEGhrERvjp2X9SR8RT/wCG5nZZk4fvoQlVUoBiNo6h72dX/GgOZrgFJ95FeXLnvFg03hEP+0W7JVbMEgS7p971Sg5jqtHBui8LCwBKXbNMcfAdxEpVmfuPVYunfHhdis5HX0GxHtzudYis4n7Yk2keb2L2kZHPw3093O2sBBtSjKLytYxw5pEp8awEEDbeXw3/a2qrOY+xayCGbfOzpZiP9nUg6d6sT2q99vjkgwYuK4HTLHgCyx5amjIvlRRagJLl5Jx8CDTk5Pxb1q3D0ALguipkmdw/8pd3Zr1S/Z9HaD/81W79L3HvwdsQBRgBPSABAAowAgwDFz5OKCt3e92v/2h1fpyR1ERy+vr702TNaH7IMoiFTZvyZupAaGDbgPEKHAFwagawCDGFJ3QjWlUWUKVxCiKGAHhR0jDV7eOa5TXClyut4TL1bs8zOC/0cI5qwH0ANDN5BEmywhVuMdQudYv5I4VFNCmkvkAAAAASUVORK5CYII=)no-repeat 0% 50%;
        font-family: cursive;
        padding: 25px;
    }
    #menuADMIN ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    #menuADMIN li { 
        list-style-type: none; 
     }
    #menuADMIN a {
        color: #0040FF;
        font-size: 16px;
        text-decoration: none;
        text-shadow: 0px 0px 1px #81DAF5;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAkUlEQVR4Xt2TMQoDIRBFvyFebSsbT6BHc86Q9BY2Nt5FEGwUJoRlukAYtgjkgeW8+R8Zw8y4wg3AbwV3fICIHgBcjNGIgJlVCZz3HiklvlRBJKoKwlrrjOKcSIwqQe8dYwzMOXEcB4iIVYK99zuFPH0Fay2EnDNCCLoKsrmUAvlOtaDWKsPQCp6ttXP4C39wTC8UpUsmy3hB0AAAAABJRU5ErkJggg==) no-repeat 0% 60%;
        padding-left: 17px;
        width: 100%;
        display: inline-block;
        -moz-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }
    #menuADMIN a:hover { 
        color: #01A9DB; 
     padding-left: 20px; 
    }
    #menuADMIN .mtv {
        background: rgba(0,0,0,0.5);
        border: 2px solid #ABC;
        border-radius: 4px;
        box-shadow: 0 0 5px #FFF inset;
        cursor: pointer;
        padding: 5px 0;
        text-align: center;
        display: block;
        position: absolute;
        width: 200px;
    }
    #menuADMIN ul.mtv li {
        color: #EEEEEE;
        font-family: Tahoma;
        font-size: 24px;
        text-shadow: 1px 1px 1px #000;
    }
    #menuADMIN ul.mtv ul li {
        background: -moz-linear-gradient(left,  rgba(30,87,153,0.8) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(30,87,153,0.8)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left,  rgba(30,87,153,0.8) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left,  rgba(30,87,153,0.8) 0%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left,  rgba(30,87,153,0.8) 0%,rgba(125,185,232,0) 100%); /* IE10+ */
        background: linear-gradient(to right,  rgba(30,87,153,0.8) 0%,rgba(125,185,232,0) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
        border-bottom: 1px solid rgba(30,87,153,0.6);
        padding: 0 0 5px;
        -moz-transition: all 1s;
        -webkit-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;
    }
    #menuADMIN ul.mtv ul li:last-child {
        border-bottom: 2px solid rgba(0,0,0,0);
    }
    #menuADMIN .mlo {
        display: block;
        padding: 0 10px;
        position: relative;
        top: 10px;
        height: 0;
        overflow: hidden;
        -moz-transition: all 1s;
        -webkit-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;
    }
    #menuADMIN .mlo li {
        text-align: left;
        width: 175px;
        display: block;
    }
    #menuADMIN ul.mtv ul li:hover { 
        background: rgba(30,87,153,1); 
    }
    #menuADMIN ul.mtv:hover .mlo { 
        height: 480px; 
    
    }


    Ocultar Código





Ao lado podem ver um exemplo de como o menú vai ficar, embora na verdade a intenção é que apareça numa posição fixa ao canto direito do ecrã. ;)





Caso tenham alguns conhecimentos de CSS, podem sempre alterar as cores e tal para se ajustar melhor ao design do vosso blogue.

Para os códigos das cores em HTML, eu utilizo quase sempre o HTML Color Codes.





Para terminar, o meu agradecimento mais ao vez ao jMuir do mui excelente blogue Vagabundia sobre dicas e tutoriais (entre outros assuntos) para o Blogger, de onde retirei o design do menu ao qual dei então o meu toque pessoal. :D



Até Breve. :-F



Este Artigo foi útil?
Então se quiser, pode pagar-me um café. ;)

Escolhe com Sabedoria:

Deixa o teu comentário no Formulário Incorporado (NOTA: As respostas directas aos comentários só são possíveis utilizando este Formulário.) , ou no Antigo Formulário em uma nova janela, ou então no Formulário em Pop Up .

LER AS REGRAS ANTES DE COMENTAR! MOSTRAR EMOTICONS
Ler Antes de Comentar ◊  As Regras dos Comentários:
  • O comentário precisa ter relação com o assunto!
  • O comentário que deixares é da tua inteira Responsabilidade!
  • Comentários anónimos São permitidos,MAS:

    • Por favor, evita comentar em MAIÚSCULAS .
    • Por favor, não faças Spam.
    • Por favor, não utilizes termos obscenos ou ofensivos.
    • Comentários considerados Spam ou ofensivos serão apagados.
◊  Para deixares a URL do teu blogue, comenta com OpenID, ou com a opção NOME/URL.
◊  Podes usar algumas tags HTML como:
  • @<strong>Nome</strong> para mencionar a quem se responde o comentário.
  • <em>Fulano disse:<i>Texto Citado</i></em> para colocar uma Citação.
  • Para inserir um link ou um vídeo do YouTube, basta só escrever o endereço URL como texto normal.
  • <i>Texto em Itálico</i>
  • <b>Texto em Negrito</b>
    • HTML EXTRA:
    • [im]URL DA IMAGEM[/im] para colocar uma imagem.
    • [ma]Texto rolando[/ma] para colocar texto rolando.
    • [si="2"]Texto com tamanho determinado[/si] Altera o numero para determinar o tamanho da letra.
    • [co="red"]Texto em cor[/co] Altera a cor do texto.
    • [ce]Texto centrado[/ce] centraliza o texto.
    • [ma+]Texto rolando para a direita[/ma+]
    • [box]"encaixotar" o texto[/box]
    • [mark]Texto Marcado[/mark]
    • [card="blue"]Texto com fundo[/card] Altera a cor de fundo do comentário.
    • [im#]URL DA IMAGEM[/im] para colocar uma imagem que ocupe TODA a largura.
    • [hi="yellow"]Texto Destacado[/hi]
  • ATENÇÃO: Comentários com imagens ou vídeos com conteúdo ofensivo ou inadequado serão REMOVIDOS, SEM EXCEPÇÃO!!!
FECHAR

6 comentários :

NOTA: os códigos dos emoticons devem ser inseridos separados das restantes palavras ou pontuação. OCULTAR EMOTICONS
  1. Respostas
    1. Olá Atitude e Ousadia BR,
      Testei em vários navegadores esta maneira de colocar os códigos neste tutoriais e funcionou sem problemas...
      A única razão para não funcionar é talvez no caso de uma ligação à Net lenta ou algum outro script que por acaso esteja demorando a carregar. :S
      No entanto e no caso de não conseguir abrir os códigos apresentados no tutorial acima, aqui fica o link para um ficheiro onde pode encontrar ambos: [hi="yellow"]HTML e CSS para colocar Menu Admin no Blogger.txt[/hi]
      Espero ter ajudado. :)

      Eliminar
  2. fala mano blz!

    outra duvida, bom ajudou muito esse menu ele realmente só aparece quando estou logado, agora para fazer um elemento seja ele qual for link, imagem, etc, mais só quando estou deslogado da conta?

    ResponderEliminar
    Respostas
    1. Fico contente de ter ajudado. :)
      Agora a segunda questão, confesso que não entendi...
      Vc quer colocar qualquer outro elemento no blogue que seja visível para toda a gente, é isso?
      Se for isso, a resposta de como colocar acho que é: Depende do que vc for colocar, onde e como quer que seja apresentado.
      Sem mais informação, não posso dar uma resposta muito especifica. Mas se vc me dar mais info do que quer saber, talvez eu possa escrever algum artigo explicando. ;)

      Eliminar
    2. QUERO POR EXEMPLO NO MESMO MENU TEM O LINK PARA Terminar Sessão, QUERO Q QUANDO EU ESTEJA LOGADO SEJA Terminar Sessão E QUANDO EU SAIR QUERO Q SEJA LOGAR!

      Eliminar
    3. Atitude e Ousadia BR disse:QUERO POR EXEMPLO NO MESMO MENU TEM O LINK PARA Terminar Sessão, QUERO Q QUANDO EU ESTEJA LOGADO SEJA Terminar Sessão E QUANDO EU SAIR QUERO Q SEJA LOGAR!

      Entendo. Penso que deve ser possível fazer isso mas precisamos de utilizar um pouco de javascript para que funcione como vc pede...
      Neste tutorial aqui o que tentei foi mostrar como colocar o meu de Administrador só com CSS e um pouco de HTML, que é SOMENTE visível pelo administrador/dono do blogue. Esse é o objectivo de um Menu tal como descrito no artigo.
      Já o que vc sugere é algo que seja visível quando não está logado duma maneira e que quando está logado seja visível de outra diferente. O mais simples neste caso seria colocar o painel de controle do Blogger nos favoritos ou manter a navbar no blogue, que também dá acesso a logar directo do blogue.
      Em relação à Navbar e maneira de a manter num blogue mas escondida, recomendo: Ocultar a Navbar do Blogue .

      Abraço. :)

      Eliminar