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

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='"loading" + 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: