Como criar um painel de controle do administrador (Admin-Bar) na Blogger

13:57
Quem vive na internet, todos os dias encontram várias atualizações em diferentes blogs / sites, sobre os mais diversos assuntos, certo? Um universo de informações em nossas mãos. O blogueiro que é blogueiro de verdade tende a fazer está pesquisa diária. Hoje por exemplo eu estava fazendo uma pesquisa no Google e encontrei algo como isto admin-bar (Admin Control Panel) que no português quer dizer Painel de Controle do Administrador. Uma ferramenta mega útil para o blogueiro que usa a plataforma do Blogger. Daí quando o administrar do blog faz seu login a barra aparece lhe dando uma facilidade de acesso de forma rápida e eficaz. Então editei o HTML primeiramente e fiz um teste no meu blog e correu tudo bem, agora vou lhes repassar essa belezura.

O resultado de tudo isso é parecido com o que mostra a imagem abaixo, depois se você já conhece um pouco de CSS não será difícil personaliza-lo.





Adicionar o admin-bar no seu blog é muito fácil, basta você seguir as instruções abaixo:

COLOCANDO O ADMIN-BAR NO CABEÇALHO DO BLOGGER

Vá até o painel do Blogger>>Modelo>>Editar HTML
Use CTRL+F para encontrar a tag abaixo:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Logo abaixo da tag encontrada cole o seguinte código:

<span class='item-control blog-admin'>
.control-panel ul{z-index: 20; position: absolute; margin: 0px auto; background-color: #F6F6F6; width: 100%; }.control-panel ul{z-index: 20; position: absolute; margin: 0px auto; background-color: #F6F6F6; width: 100%; }
.control-panel ul li{display: inline-block; float: left; padding: 7px 0px;}.control-panel ul li{display: inline-block; float: left; padding: 7px 0px;}
>.control-panel ul li a {color:#686868;padding: 7px 15px;border-right: 1px solid #E3E3E3;font-weight: bold;font-size: 13px;}.control-panel ul li a {color:#686868;padding: 7px 15px;border-right: 1px solid #E3E3E3;font-weight: bold;font-size: 13px;}
.control-panel a:hover {text-decoration:none; color:#FC8F44;}.control-panel a:hover {text-decoration:none; color:#FC8F44;}
</style>
<div class='control-panel'>
<ul>
<li><a href='http://www.blogger.com/home'>My Blogs</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#editor/src=sidebar'>New Post</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#editor/target=page'>New Page</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#posts'>All Posts</a></li >
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#comments'>Comments</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#pageelements'>Layout</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#templatehtml'>Edit HTML</a></li>
<li><a href='#' onclick='location.reload(true); return false;'>Refresh</a></li>
<li><a href='/' target='_blank'>New Tab</a></li >
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#basicsettings'>Settings</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#overviewstats'>Stats</a></li>
<li><a href='http://www.blogger.com/logout.g'>Logout</a></li>
</ul>
</div>
</span>
Obs: Se você quiser usar o admin-bar no rodapé do blogger é só usar o código acima da tag </body>

É muito importante que no lugar de XXXXXXXXXXXXX você coloque o ID do seu blog que é encontrado quando você entra no painel do seu blog e click em configurações, modelo ou layout, como mostra figura abaixo:





Espero que tenhas gostado da novidade. Até a próxima.
,
By:
Odnei Sales
Odnei Sales

This is a short biography of the post author. Maecenas nec odio et ante tincidunt tempus donec vitae sapien ut libero venenatis faucibus nullam quis ante maecenas nec odio et ante tincidunt tempus donec.

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)