Archive for the ‘Novo Blogger’ Category


Achei um site bem legal e cheio de templates, imagens, widgtes, gráficos, layouts etc. Chama-se Pyzam, tem temas pro novo Blogger, Myspace, Hi5, Friendster. Vale a pena passar por lá e conhecer, pois tem muita coisa!

Blog repleto de widgets

Mai 3, 2008 Autor: Claudya | Postado em: Códigos Para O Novo Blogger, Novo Blogger

Estou muito melhor da tendinite. O médico recomendou digitação com ‘moderação‘. Como sei que não vou conseguir seguir isso totalmente, hoje meu amigo Ivan me ajudou, e digitou todo o post prá mim (cool!!!). Mas, vamos ao que interessa, no blog Widgets for free, você encontra códigos para uma variedade de widgets. Os códigos e explicações servem ao novo blogger, mas, também podem ser adicionados em outros sistemas de blogs, desde que, eles aceitem códigos em html e/ou java script.

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.


 

Se tem uma coisa chata no Blogger, é o modo como os comentários dos visitantes dos seu blog são mostrados. O sistema de comentários padrão do Blogger faz com que, quando você clique no link para comentar, ele te envie para um formulário à parte, e daí abre-se uma outra janela, ou você é levado para uma outra página, o que não deixa de ser uma chatice!

Felizmente isso tem solução (obrigada Francisco). Assim, se você quiser que os comentários sejam feitos e vistos no final dos seus posts, faça o que segue.

Vá no seu template e acesse Modelo/Layout, em seguida, clique em Editar HTML e em ‘Expandir modelos de widgtes’. Então, procure pela seguinte linha de código:

<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"’>

Salve as mudanças e pronto! Você já pode ver na página principal do seu blog os comentários. Editei o post e arrumei as aspas Áurea, vamos ver se agora dá, pois o teclado do meu pc tá doido desde ontem! Se copiar o código e não der certo, arrume só a parte das aspas ok!

Fonte: BlogandWeb

É, a cada dia que passa, descubro que realmente o Novo Blogger não é nada ‘pobrinho’. Veja o caso do b-themes. Tem vários, um mais legal que o outro. Inclusive, me parecem que são todos usados no WP, e adaptados ao novo blogger.
Esse código em Java é uma atualização do antigo código que eu já passei aqui no Memories. Apenas, que agora ele tem o fundo/background em preto. Só que, parece que a conexão da internet tá de ‘mau comigo’, pois, toda vez que eu tento publicar o post com o código ela caí!!!! Ai Brasil Telecom! Ai Br Turbo! O post está aparecendo sem o código. Prometo, se amanhã melhorar a conexão, eu edito e publico o restante.
 
1. O código é igual ao do tradutor em fundo branco, só muda o link da imagem com as bandeiras/flags com back preto. Copie e cole esse código abaixo no seu blog, adicionando-o como novo elemento na página (Html/Java).

<center><img src="http://img89.imageshack.us/img89/6632/84056383at1qx3lt2.png"/></c enter>
<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank">
<input value="ES" name="wl_srclang" type="hidden"/>
<select style="font-size: 70%; width: 160px;" name="wl_trglang">
<option value="EN"/>Português - Inglês
<option value="FR"/>Português - Francês
<option value="DE"/>Português - Alemão
<option value="IT"/>Português - Italiano
<option value="PT"/>Português - Português
<option value="RU"/>Português - Russo
<option value="ES"/>Português - Espanhol
</select>
<input value="http://urldoseublog.blogspot.com/" name="wl_url" type="hidden"/>
<input style="font-size: 70%; width: 50px;" value="Traduce" type="submit"/>
</form>

 
2. Adicione algumas linhas de código no CSS do template, de modo que você veja o tradutor como mais lhe agradar.

/* Código do tradutor —– */

form#translateForm select {
background-color:#000;
color:#ddd;
border:1px solid #999;
}
form#translateForm input {
background-color:transparent;
color:#ddd;
border:1px solid #999;
}

3. Se deixamos este código como está, é assim que ele vai aparecer no seu blog.

 

O código CSS está dividido em 2 partes:

a) a da janela que mostar as opções de escolha do idioma:

form#translateForm select {
background-color:#000;
color:#ddd;
border:1px solid #999;
}
 
background-color: #000, é a cor do back da janela de seleção, nesse caso está na cor preta (#000) mas, podemos optar por qualquer outra cor.

color: #ddd; é a cor do texto, está em cinza claro, mas, pode ser mudado a gosto.

border:1px solid #999; É o tipo de borda que está ao redor da janela de opções, podemos escolher a grossura da borda (1px), a cor (#999) e o tipo de borda (solid, dashed, dotted)

b) E, sobre a janela do botão "Traduza":

form#translateForm input {
background-color:transparent;
color:#ddd;
border:1px solid #999;

Pode alterar esse botão (das bandeiras) a gosto também. Por último, se você adicionar o código com o CSS para o tradutor explicado anteriormente (com o fundo branco) também poderá ser alterado a gosto.

 

Blogger versus Wordpress. Quem ganha?

Fev 10, 2008 Autor: Claudya | Postado em: Novo Blogger, wordpress
A Áurea me falou sobre uma reportagem publicada no Estadão em  04/02/08, onde Bruno Sayeg Garattoni descreve o porquê do Wordpress ser tão atrativo àqueles que querem ter um blog ou site. Vou resumir partes do que o Bruno escreveu, e, como eu já passei pelo Blogger e migrei pro WP, vou deixar aqui minhas opiniões:
  1. O Wordpress é aberto, e qualquer um pode criar plugins. Verdade, mas não é qualquer um, só aqueles que sabem como fazê-lo. É impressionante a variedade de plugins que você encontra para o WP. Realmente, a adição de plugins no seu blog do WP, só se você tiver o mesmo hospedado em algum host ou servidor, pois, o WP grátis não permite essa opção, a não ser que você pague;
  2. O que o WP tem de atraente? Segundo o Bruno, o visual, pois o Blogger só oferece 16 tipos de temas para os blogs. Bom Bruno, sim, os layouts padrão oferecidos estão mesmo a desejar. Ocorre que, existem muitas pessoas desenvolvendo templates/layouts para o Blogger, eu mesma já fiz alguns. E, quem adere agora ao Blogger, basta pesquisar que de modo bem rápido encontrará blogs/sites com vários templates, inclusive temas do WP adaptados ao novo Blogger. Aqui mesmo no meu blog eu divulgo esses blogs e sites sempre que os encontro.Bom, então, em questão de layout, o Blogger não é tão ‘pobrinho’ assim. Ainda, como disse o Bruno, o WP só permite que você edite algum template se você pagar, na criação grátis do blog isso não é permitido;
  3. Relativamente a adicionar um podcast, contador de visitas e todo e qualquer código que seja em Html e Java, isso pode ser adicionado ao novo Blogger sem problema algum, e é feito no painel de controle do blog;
  4. Sobre agendar posts para publicá-los depois, infelizmente, não vi nada parecido com isso no novo Blogger. Veja a dica que meu amigo Compulsivo dá.
  5. Bom, só restou a capacidade do WP que é maior (pelo menos até agora).
Conclusão, eu migrei o Blog-Memories do Blogger pro WP em nov/07, e ainda estou ‘apanhando’ em certas coisas com o ele, principalmente o código php e a adição de plugins. Os idealizadores dos plugins deveriam dizer exatamente onde é colado o código no tema do WP, de modo que o plugin funcione corretamente, mas isso, com raras exceções, não é feito. Meus outros 2 blogs continuam no Blogger (sem problema algum). Bom, prá não dizer que eu estou sendo ‘parcial’, aconselho a quem quiser, que crie um blog no WP grátis e teste o mesmo. Depois, cheguem as suas próprias conclusões.
Há algum tempo eu já vinha pensando em mudar o template dos meus outros 2 blogs. Depois de procurar e editar um deles, estava tudo pronto, mas, eu realmente estava com preguiça de salvar todas as widgets, códigos e links da sidebar do blog. Bom, ontem pela manhã resolvi fazer isso, e (nem sei se já publicaram sobre), achei um modo de trocar de template sem perder uma widget sequer!
O truque está em, antes de mudar de tema, crie um blog só para testes, suba o novo tema prá lá. Veja no seu antigo tema (tema que você quer alterar), quantas widgtes você tem de cada assunto. Por exemplo, 4 widgets de Html/java, 2 widgets de imagens, 3 widgets de texto e assim vai. Daí, volte ao seu blog de testes e reproduza/crie as widgets no mesmo número. Você não precisa instalar os códigos, basta adicionar as widgets. Feito isso, salve o novo template no seu pc, retorne ao seu blog normal, e suba o novo tema através do painel de controle, modelo, editar html.
Pronto, se tudo estiver ok, o tema será automaticamente salvo no lugar do antigo. Se faltou alguma widget aparecerá uma mensagem de que alguma coisa será apagada, daí, verifique o que é antes de salvar, senão você perde o que é apagado. Quem estiver curisoso, dê uma olhada no Divamix e veja o que acha da mudança.

O blog/site do Ronnie tem templates muito lindos para o novo Blogger. O último tema que ele fez chama ‘Bubbles’ e tem 4 colunas. Além disso, ele também fornece ajuda, dicas e conselhos. Vale a pena e não custa nada dar uma espiada por lá.

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.

Meta







Add to Technorati Favorites Add to Technorati Favorites
Technorati search

 Subscreva o Blog-Memories



Powered by FeedBlitz


Blogs Demais

Hipermoderna.net Julls17 Luz de Luma Oscar-vg Templates Novo Blogger Lindo Sorriso Templates for You Aukimia Vaquinhas Certim maniablogs



Join 4Shared Now! Pingar o BlogBlogs Adicionar aos Favoritos BlogBlogs

Links Blog-Memories



Burajiru!