Pippi

Visível somente para o Administrador
0

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
    ver código
    imprimir?
    01<div class='item-control blog-admin'>   
    02  <div id='menuADMIN'>
    03    <ul class='mlo'>
    04      <li> <a expr:href='data:blog.bloggerUrl'>Blogger</a> </li>
    05      <li> <a href='http://draft.blogger.com/home'>Blogger Draft</a> </li>
    06      <li> <a expr:href='data:blog.bloggerUrl + &quot;/blog/posts/&quot;  + data:blog.blogId'>Mensagens</a> </li>
    07      <li> <a expr:href='data:blog.bloggerUrl + &quot;/blog/stats/week/&quot;  + data:blog.blogId'>Estatísticas</a> </li>
    08      <li> <a expr:href='data:blog.bloggerUrl + &quot;/blog/comments/&quot;  + data:blog.blogId'>Comentários</a> </li>
    09      <li> <a expr:href='data:blog.bloggerUrl + &quot;/blog/earnings/&quot;  + data:blog.blogId'>Ganhos/AdSense</a> </li>
    10      <li> <a expr:href='data:blog.bloggerUrl + &quot;/blog/pages/&quot;  + data:blog.blogId'>Páginas</a> </li>
    11      <li> <a expr:href='data:blog.bloggerUrl + &quot;/blog/layout/&quot;  + data:blog.blogId'>Esquema</a> </li>
    12      <li> <a expr:href='data:blog.bloggerUrl + &quot;/blog/themes/&quot;  + data:blog.blogId'>Tema</a> </li>
    13      <li> <a expr:href='data:blog.bloggerUrl + &quot;/blog/themes/edit/&quot;  + data:blog.blogId'>Editar HTML</a> </li>
    14      <li> <a expr:href='data:blog.bloggerUrl + &quot;/blog/settings/&quot;  + data:blog.blogId'>Definições</a> </li>
    15      <li> <a expr:href='data:blog.bloggerUrl + &quot;/edit-profile.g&quot;'>Editar Perfil</a> </li>
    16      <li> <a expr:href='data:blog.bloggerUrl + &quot;/logout.g&quot;'>Terminar Sessão</a> </li>
    17    </ul>
    18  </div>
    19</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
    ver código
    imprimir?
    001/*--------------------------------------------------
    002{--------}  ESTILOS MENÚ ADMINISTRADOR {--------}
    003--------------------------------------------------*/
    004#menuADMIN {
    005    margin: 0 auto 50px;
    006 position: fixed;
    007 right: 0;
    008 top: 100px;
    009 width: 200px;
    010 z-index: 9999999;
    011}
    012#menuADMIN span.topADM {
    013    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%;
    014    font-family: cursive;
    015    padding: 25px;
    016}
    017#menuADMIN ul {
    018    list-style-type: none;
    019    margin: 0;
    020    padding: 0;
    021}
    022#menuADMIN li {
    023    list-style-type: none;
    024 }
    025#menuADMIN a {
    026    color: #0040FF;
    027    font-size: 12px;
    028    text-decoration: none;
    029    text-shadow: 0px 0px 1px #81DAF5;
    030    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAkUlEQVR4Xt2TMQoDIRBFvyFebSsbT6BHc86Q9BY2Nt5FEGwUJoRlukAYtgjkgeW8+R8Zw8y4wg3AbwV3fICIHgBcjNGIgJlVCZz3HiklvlRBJKoKwlrrjOKcSIwqQe8dYwzMOXEcB4iIVYK99zuFPH0Fay2EnDNCCLoKsrmUAvlOtaDWKsPQCp6ttXP4C39wTC8UpUsmy3hB0AAAAABJRU5ErkJggg==) no-repeat 0% 60%;
    031    padding-left: 17px;
    032    width: 100%;
    033    display: inline-block;
    034    -moz-transition: all 0.5s;
    035    -webkit-transition: all 0.5s;
    036    -o-transition: all 0.5s;
    037    transition: all 0.5s;
    038}
    039#menuADMIN a:hover {
    040    color: #01A9DB;
    041 padding-left: 20px;
    042}
    043#menuADMIN .mtv {
    044    background: rgba(0,0,0,0.5);
    045    border: 2px solid #ABC;
    046    border-radius: 4px;
    047    box-shadow: 0 0 5px #FFF inset;
    048    cursor: pointer;
    049    padding: 5px 0;
    050    text-align: center;
    051    display: block;
    052    position: absolute;
    053    width: 200px;
    054    overflow: hidden;
    055}
    056#menuADMIN ul.mtv li {
    057    color: #EEEEEE;
    058    font-family: Tahoma;
    059    font-size: 24px;
    060    text-shadow: 1px 1px 1px #000;
    061}
    062#menuADMIN ul.mtv ul li {
    063    background: -moz-linear-gradient(left,  rgba(30,87,153,0.8) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */
    064    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+ */
    065    background: -webkit-linear-gradient(left,  rgba(30,87,153,0.8) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
    066    background: -o-linear-gradient(left,  rgba(30,87,153,0.8) 0%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
    067    background: -ms-linear-gradient(left,  rgba(30,87,153,0.8) 0%,rgba(125,185,232,0) 100%); /* IE10+ */
    068    background: linear-gradient(to right,  rgba(30,87,153,0.8) 0%,rgba(125,185,232,0) 100%); /* W3C */
    069    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
    070    border-bottom: 1px solid rgba(30,87,153,0.6);
    071    padding: 0 0 5px;
    072    -moz-transition: all 1s;
    073    -webkit-transition: all 1s;
    074    -o-transition: all 1s;
    075    transition: all 1s;
    076}
    077#menuADMIN ul.mtv ul li:last-child {
    078    border-bottom: 2px solid rgba(0,0,0,0);
    079}
    080#menuADMIN .mlo {
    081    display: block;
    082    padding: 0 10px;
    083    position: relative;
    084    top: 10px;
    085    height: 0;
    086    overflow: hidden;
    087    -moz-transition: all 1s;
    088    -webkit-transition: all 1s;
    089    -o-transition: all 1s;
    090    transition: all 1s;
    091}
    092#menuADMIN .mlo li {
    093    text-align: left;
    094    width: 175px;
    095    display: block;
    096}
    097#menuADMIN ul.mtv ul li:hover {
    098    background: rgba(30,87,153,1);
    099}
    100#menuADMIN ul.mtv:hover .mlo {
    101    height: auto;
    102 
    103}
    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

Aspirante a Artista Digital, Moderador no site Heromorph desde 2007. Um dos fundadores do Quadradinhos inK, projecto de BD com artistas de Portugal e Brasil.
Gosto de BD, Cinema. Jogos e códigos HTML, CSS e Javascript.
Autor do Coisas K Aprendi por Aí, um blogue sobre nada e mais alguma coisa.
BloggerTwitterFacebookPinterestStackOverflowNexusModsGOG.comSteamContactoPaypal

Comentários

6 Opiniões Deixa a tua também.

Malta, comentem, tanto críticas como elogios serão bem-vindos. E eu respondo, não prometo quando mas respondo.

Mas antes de comentarem, leiam as minhas Regras dos Comentários.

Se quiserem deixar o link para o vosso sitio, utilizar alguns estilos ou até inserir videos ou imagens nos comentários DEVEM mesmo ler as indicações nas Regras dos Comentários.

Caso prefiras comentar numa nova janela, ou se o formulário abaixo estiver nos dias ruins, podes clicar aqui.

  1. Atitude e Ousadia BR18 de março de 2014 às 17:48

    Não dapara abrir o link do código!

    ResponderEliminar
    Respostas
    1. Osvaldo Correia18 de março de 2014 às 19:27

      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:HTML e CSS para colocar Menu Admin no Blogger.txt
      Espero ter ajudado.:)

      Eliminar
  2. Atitude e Ousadia BR19 de março de 2014 às 16:35

    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. Osvaldo Correia19 de março de 2014 às 19:16

      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. Atitude e Ousadia BR19 de março de 2014 às 19:20

      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. Osvaldo Correia3 de maio de 2014 às 17:17

      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 éSOMENTEvisí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

Enviar um comentário