Mocheco Marafado

Colocar um Menú Admin no Blogue

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:

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

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

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

Menú Admin

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