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!

Melhore a velocidade do seu blog

Há uns dois meses, eu começei a tentar baixar a velocidade do meu blog (UFO Nordeste), e consegui (um pouco). Comecei com algumas dicas do @compulsivo e depois do @sergioestrella.

Agora eu ensinarei a vocês, leitores, como baixar (um pouco) a velocidade do seu blog.

A primeira dica, é otimizar o CSS do seu blog. Por isso eu aconselho a utilizar o Clean CSS. Siga os passos abaixo e otimize o CSS do seu blog.

Como prevenir é melhor que remediar, eu aconselho que você faça uma cópia do template do seu blog.

- Acesse o Clean Css.

- Com sua conta aberta no Blogger, escolha seu blog e vá em DESIGN > Editar HTML e copie o css do seu blog. O css vai até ]]></b:skin>.

Clique na imagem para ampliar.
- Assim que abrir a página do Clean CSS, cole o css do seu blog no local onde está indicado em vermelho CSS AQUI.

Clique na imagem para ampliar.
- No menu ao lado, selecione HIGH (moderate readability...) e em seguida clique em Process CSS.

- O seu CSS vai ficar assim:

Clique na imagem para ampliar

- Copie o CSS Otimizado e cole no lugar do seu Css convencional.


- Visualize para ver se não deu nada errado. Se não clique em SALVAR MODELO.

Em breve trago mais um tutorial sobre otimização de blogs.

Navbar personalizada

Atualmente o Blogger só disponibiliza as cores alternativas e a navbar transparente.
As cores disponibilizadas são: Azul, Beige, Preto, Cinza, Transparente e Escuro Transparente.
Mas e se nós, blogueiros, quisessemos mudar a cor da Navbar, para qualquer cor? Simples, Aplique o código em VERMELHO, no CSS do seu modelo, mas ANTES, vá no painel Layout do Blogger, e, nas opções da Navbar, esolha o modelo CLARO TRANSPARENTE:


#navbar-iframe{background-image: url(http://i43.tinypic.com/fc3aqu.png); float: bottom-page;}

A minha ficou assim:

Top 10 Melhores Dicas para Blogger de 2009 - (Retrospectiva Dicadedica)

[Print_dicadedica.png]
Hoje resolvi fazer uma retrô sobre as melhores dicas do Dicadedica para blogger de 2009,  você encontra dicas de SEO, Tutoriais para edição do template, rede sociais, web 2.0, widgets e tudo de útil para o seu blog, Confira!!!







  1. Widget Te linko de volta: , , ,






     
    Adicione um link no do dica dedica no seu blog e ganhe um link de volta altomaticamente, e disponibilize um widget que faz isso no seu blog para aumentar suas visitas.
    Então para descobrir os últimos blogs que postaram links para suas postagens ou para sua página inicial ou add esse widget, apenas siga os seguintes passos...





    Leia Mais.
  2. Aprenda a posicionar elementos div usando CSS no Blogger




    Você quer posicionar um widget, banner, texto ou qualquer elemento de página na tela usando CSS? isso parecia difícil e complicado, agora mais fácil, pegue seu código javascript ou Html de um widget contendo texto, formulários, banners, imagens ou qualquer outro elemento e ....

    Leia mais.
  3.  Adicionar aos favoritos Crossbrowser e Flutuantes
    Via twitter  a seguidora @d20009 me pediu para criar um widget para add aos favoritos,
    Adorei a idéia, e fiz várias tentativas, porém descobri que meu o código não funcionava no
    Mozila Firefox porem descobri uma forma de fazer funcionar em todos os navegadores que testei e...
    Leia mais.
  4. Ocultando a barra Blogger com MouseHuver






    Tutorial encina de forma rápida e simples como ocultar a navbar do blogger ao passar o mouse em cima, usando css e ...




    Leia mais.
  5. Miniatura das postagens e leia mais no rodapé do blogger






    É só olhar no final das postagens do dicadedica que irá reparar nas miniaturas de outras postagens relacionadas ao assunto que se está lendo, este efeito é obtido usando um plugin widgets do site...





    Leia mais.
  6. Mini Joguinho de digitação para colocar no blog




    É um ótimo widget que em um click estará instalado no seu blog, esse leve jogo ira prender a atenção dos usuários no seu blog aumentando o trafego e fazendo do seu e permitindo aos ...








    Leia mais.
  7. Como colocar imagens e banner entre as postagens do blogger?Este tutorial encina de maneira fácil como colocar imagens e banner no seu blog. Para isso você deve primeiramente fazer uma cópia de segurança do seu template no painel de controle do blogger, depois você...
    Leia mais.
  8. Seu blogger com botão add esta postagem ao diHitt
    Mostrar quais postagens foram mais votadas no diHitt e ainda permitir aos leitores votarem nas suas postagens, leia este rápido tutorial que encina a colocar...




    Leia Mais...
  9. Aprenda sobre o efeto Goobo e como isso pode te ajudar a aumentar as visitas do seu blog Hoje tudo que aparece em programas de audiência tipo fantástico, bbb 10 e outros assuntos, os internaltas vão logo buscar sobre...


    Leia Mais.
  10. Tutorial ensinando a colocar botões <> no Blogger

    Tutorial Deixando os links Mais Atraentes: "Postagens mais antigas" para Anterior Início e Próximo
    ...
    Leia mais.