Quer saber como colocar uma imagem no background do seu blog no Blogger? Ou até trocar a que está lá por outra? Então siga os passos:

1. Crie uma conta num host de imagens, hospede sua imagem lá. Após subir sua imagem, o servidor vai te dar o endereço ou url da mesma. Copie e guarde essa url prá usar depois.
   

2. Acesse o Painel de controle do seu blog no Blogger e clique em Layout/Modelo. Clique na aba ‘Editar Html’. Isso abrirá a página do seu tema para a edição.

3. Antes de fazer qualquer alteração (principalmente, se você não está acostumado a isso) faça uma cópia do seu template, basta clicar na aba à direita onde está escrito ‘fazer uma cópia do template’ que ele vai ser salvo automaticamente no seu pc em arquivo xml.

4. Feito isso, desça um pouco na página do seu tema, e procure por esse pedaço de código:
   
   
   body {
   background:$bgcolor;
   margin:0;
   color:$textcolor;
   font:x-small Georgia Serif;
   font-size/* */:/**/small;
   font-size: /**/small;
   text-align: center;
   }
   
   
   
   Essa é a primeira parte do CSS (folha de estilos) do seu template. Essa parte do código descreve exatamente como é o fundo ou background do seu blog. Para adicionar uma imagem aqui, você tem que adicionar o seguinte código após a linha do atributo bgcolor (cor do back) e antes do atributo da margem:

   background-image:url(Endereço url da sua imagem);
   background-repeat:no-repeat;
   background-position:120% 10%;
   background-attachment: scroll;

   Após adicionar, vai ficar assim:
   
   body {
   background:$bgcolor;
   background-image:url(Endereço URL da sua imagem);
   background-repeat:no-repeat;
   background-position:120% 10%;
   background-attachment: scroll;
   margin:0;
   color:$textcolor;
   font:x-small Georgia Serif;
   font-size/* */:/**/small;
   font-size: /**/small;
   text-align: center;
   }
   

   Lembre-se, em ‘Endereço URL da imagem" você copia e cola o endereço que o servidor te deu começando em ‘http://url da sua imagem’ (passo 1). A terceira linha descreve a posição da imagem no template. A posição do back (120%) controla o lugar do back na horizontal. A segunda linha, vertical (10%). Porcentagens negativas fazem com que a imagem se mova pra cima ou para a esquerda, em relação ao centro do blog (main). O atributo ‘repeat’ controla a quantia da pattern na tela, ou seja, se o back se repete ao longo da tela. Se você marca o atributo como ‘no-repeat’ você adiciona ‘repeat-x’ o back se repete na horizontal e ‘repeat-y’ se repetirá na vertical. O atributo ‘scroll’ significa que a sua imagem se move ao longo do texto, quando você desce para baixo na tela. Se você quiser que a imagem fique fixa, enquanto desce na tela para ler o texto coloque nesse atributo ‘scroll’ para ‘fixed (fixo). Salve seu template. Recarregue a página e veja o blog.
   
   
   

<a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’>

E, troque essa linha pela debaixo:

<a class=’comment-link’ expr:href=’data:post.url + "#comments"’>

Fonte: BlogandWeb

Em complemento ao post anterior, a Annie do BlogU, desenvolveu outro código/hack prá adicionar as categorias no novo Blogger em forma de caixa expandível ou ‘Mostra/Esconde’, e, ser adicionado na sidebar do seu blog.

Siga os passos:

1. Instale os passos 1 e 2 do post anterior do Esconde/Mostra, Expandir/Contrair - Elemento de Navegação.
2.   Abra o "Template/Page Elements" clique em "Adicionar Novo Elemento na página". Escolha "Marcadores/Adicionar ao Blog". Salve e feche. (Esse elemento é temporário, só precisamos dele prá achar o código, depois ele será apagado).
3. Veja/carregue seu blog e dê um clique com o lado direito do mouse na página, prá poder ver a "View Page Source" ou Ver Página do Código fonte
4. Na página ‘Source’, ache esse código em negrito e copie o mesmo <div class=’widget-content’> (você vai usá-lo num minuto): <div class=’widget-content’>
             <ul>
             <li>
             <a href=’http://seublog.blogspot.com/search/label/suacategoria1′>
             categoria1</a>
             (1)
             </li>
             <li>
             <a href=’http://seublog.blogspot.com/search/label/suacategoria2′>
             categoria2</a>
             (1)
             </li>
             <li>
             <a href=’http://seublog.blogspot.com/search/label/categoria3′>
             categoria3</a>
             (1)
             </li>
             <li>
             <a href=’http://seublog.blogspot.com/search/label/suacategoria4′>
             categoria4</a>
             (1)
             </li>
             </ul>
5. Abra seu "Template/Elementos de Página" clique em "Adicionar novo Elemento na Página". Clique em ‘HTML/JavaScript". Agora, é onde a 3a. parte do Esconde/Mostra, Expandir/Contrair - Elemento de Navegação entra. Adicione esse código em negrito em ‘Html/Java’:

          <a aiotitle="click to expand" href="javascript:togglecomments(’Nome Único’)">Titúlo</a>
          <br />
          <div class="commenthidden" id="Nome Único"></div>

   6. Preencha com seu ‘Nome Único’ nas 2 áreas. Dê um titúlo pra ele. Exemplo "+/- Categorias".

   7. Copie o código achado no passo 4 e cole entre <div> e </div>

          <div class="commenthidden" id="Nome Único"> COLE CÓDIGO AQUI </div>

   8. Salve e feche.
   9. Agora abra o ‘Elemento Categoria’ feito no passo 2 e clique em "Remove Elemento de Página".

Pronto! Veja seu blog, na sidebar ele terá suas categorias de forma expandível (Mostra e esconde). Quer um exemplo? Veja no meu Gothicbox logo no topo +/-Categorias Góticas e +/- Meus outros blogs.

Esse hack/código foi feito pela Annie do BlogU. Eu apenas traduzi para o ‘portuga’, e, estou passando um pequeno tutorial prá quem quiser instalar o mesmo no blog. Com esse hack você vai colocar um elemento na sidebar do seu blog no novo Blogger em forma de ‘Mostra/esconde’ ou elemento expandível em formato de caixa. Assim, sua sidebar fica organizada e de fácil acesso prá quem visita.

Como fazer:

1. Adicione o código em negrito na sua folha de estilo (CSS do tema), na seção dos comments;

       .commenthidden {display:none}
       .commentshown {display:inline}

2. Coloque o código em negrito entre as tags <head> e </head> do template:

       <script type="text/Javascript">
       function togglecomments (postid) {
       var whichpost = document.getElementById(postid);
       if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
       } </script>

3. Coloque esse outro código em negrito na sua sidebar através do ‘Adicionar novo elemento na página: Html/Java’, e salve: <a aiotitle="click to expand" href="javascript:togglecomments(’Etc’)">Outras Coisitas …+/-</a><br /><br>
       <div class="commenthidden" id="Etc">
       <a title="Blogger Forum, the Blogging community" target="_blank" href="http://www.bloggerforum.com/">
       <img border="0" src="http://www.bloggerforum.com/images/bf5.gif" width="80" height="15"></a>
       </div>
4. Explicação código passo 3: Onde está escrito ‘Etc‘ troque por um nome único, que você mesmo vai criar prá esse elemento e só prá ele (é único, pois, deve ser diferente de qualquer outro elemento do seu template). Onde está escrito ‘Outras Coisitas‘, crie um nome/título prá esse elemento. E, é isso! Veja abaixo as imagens que eu fiz no meu blog de testes.

Vamos supor que você tenha subido direto do seu micro, uma imagem para o seu blog no Novo Blogger. Até aí tudo bem, pois o Blogger te dá essa opção através do painel de controle, modelo/layout, adicionar novo elemento na página, imagem. Tá, mas, daí que você gostaria de transformar essa imagem num link (qualquer link). Eis então um truque bem simples prá conseguir isso.

1. Suba e adicione a imagem que você quer usar como link como um novo elemento na página;
2. Salve;
3. Vá em Layout/Modelo, clique em ‘Expandir widgets’ e procure no seu template pelo código da imagem que você acabou de subir. Você vai achar esse código: <b:widget id=’Image1‘ locked=’false’ title=” type=’Image’>
   <b:includable id=’main’>
   <b:if cond=’data:title != ""’>
   <h2><data:title/></h2>
   </b:if>
   <div class=’widget-content’>
   <img expr:alt=’data:title’ expr:height=’data:height’ expr:id=’data:widget.instanceId + "_img"’ expr:src=’data:sourceUrl’ expr:width=’data:width’/>
   <br/>
   <b:if cond=’data:caption != ""’>
   <span class=’caption’><data:caption/></span>
   </b:if>
   </div>
   <b:include name=’quickedit’/>
   </b:includable>
   </b:widget>
4. Adicione um pequeno código que vai indicar o caminho da url/endereço do link, antes da tag <img expr:(…) e outra porção do código depois da tag ‘(…)’data:width’/>. Veja as partes em negrito que você tem que adicionar: <center><a href=’url_do_link’><img expr:alt=’data:title’ expr:height=’data:height’ expr:id=’data:widget.instanceId + "_img"’ expr:src=’data:sourceUrl’ expr:width=’data:width’/></a></center>. O atributo center é opcional só se você quiser centralizar a imagem.
5. Pronto! Veja os exemplos nas imagens abaixo. Veja que a widget Image1 pode ter outro número, dependendo de quantas imagens você já tenha subido para o seu blog. O importante é localizar a imagem que você quer que seja um link.
6. Veja o teste que eu fiz no meu outro blog sobre o Photofiltre. Espero que gostem!

Já voltando das mini-férias, dei uma espiada básica na net em busca de novos blogs, e já achei uns bem legais prá divulgar aqui . O primeiro é o da Juliana Sardinha, que fez um post lá sobre o código do tradutor que eu adaptei e coloco à disposição de quem quer usar o mesmo. Obrigada pela divulgação Juliana. E, parabéns pelo seu blog! Gostei muito e já favoritei. O segundo blog é o do Richard, que além de outras coisas, está fazendo templates para o novo blogger, o ‘Green Eye’ foi um dos que eu vi.

(…)
<div id=’newsidebar-wrapper’>
<b:section class=’newsidebar’ id=’newsidebar’ preferred=’yes’>
<b:widget id=’Label1′ locked=’false’ title=’Categorias‘ type=’Label’>
<b:includable id=’main’>
  <b:if cond=’data:title’>
    <h2><data:title/></h2>
  </b:if>
  <div class=’widget-content’>
    <ul>
    <b:loop values=’data:labels’ var=’label’>
      <li>
        <b:if cond=’data:blog.url == data:label.url’>
          <data:label.name/>
        <b:else/>
          <a expr:href=’data:label.url’><data:label.name/></a>
        </b:if>
        (<data:label.count/>) ***Apague essa linha***
      </li>
    </b:loop>
    </ul>

Após achar o código acima, busque pela tag (<data:label.count/>) e apague a mesma. Visualize seu tema, você vai ver que os números ao lado da label/categoria/etiquetas ou marcadores sumiu! Então, se ok, salve seu template.