Barra de administração no Blogger igual ao Wordpress

Todos que usam o Wordpress.org sabem que assim que abrimos o blog existe uma barra para administração visível apenas para o editor do blog. Foi assim que decidi fazer uma igual mas com uma diferença, essa era para o Blogger.

Assim surgiu o seguinte código:

Atenção! Antes de fazer qualquer modificação no seu template faça um BACKUP do mesmo.

<span class="item-control blog-admin">
<div id="barra-admin">
<div class="barra">
<ul>
<li><span class="item-control blog-admin"><a href="http://draft.blogger.com/home">Painel </a></span></li>
<span class="item-control blog-admin">
<li><a href="http://draft.blogger.com/blogger.g?blogID=XXXXXX#editor">Nova Postagem</a></li>
<li><a href="http://draft.blogger.com/blogger.g?blogID=XXXXXX#allposts">Editar Postagens</a></li>
<li><a href="http://draft.blogger.com/blogger.g?blogID=XXXXXX#basicsettings">Configurações</a></li>
<li><a href="http://draft.blogger.com/blogger.g?blogID=XXXXXX#pageelements">Layout</a></li>
<li><a href="http://draft.blogger.com/blogger.g?blogID=XXXXXX#pendingcomments">Moderar Comentários</a></li>
</span></ul>
<div class="busca">
</div>
<form action="/search" id="searchform2" method="get">
<div>
<span class="item-control blog-admin"><input id="s" name="q" type="text" value="" /></span>
<span class="item-control blog-admin"><input id="searchsubmit" type="submit" value="Busca" /></span></div>
</form>
</div>
</div></span>

Você irá colar este código IMEDIATAMENTE depois da tag <body>. Onde estiver em vermelho, você substituirá pelo ID do seu blog. Na URL do seu painel de administração o ID estará logo depois da tag "blogID=".

Em seguida, você irá adicionar o código CSS no seu HTML:


/*--- Barra Admin---*/
#barra-admin{width:100%;height:20px;padding:5px;background:#CCC;position:fixed;box-shadow:#333 0 0 10px;margin-top:-2px}
#barra-admin .barra{width:1007px;margin:0 auto 0;}
#barra-admin ul{list-style:none;border:none;margin:-18px 0 0 0;padding:0;}
#barra-admin li{float:left;position:relative;display:inline;}
#barra-admin li a{display:block;color:#333;text-decoration:none;padding:7px;}
#barra-admin li a:hover{background:#666;color:#FFF;text-decoration:none;}
#barra-admin .barra #searchform2{float:right;margin:3px 30px 0 0;}

Salve!
Postar um comentário

Postagens mais visitadas