Ajuda no Blogger

Efeito Lightbox nativo do Blogger

2011-09-19T13:36:00.000-07:00

Hoje em dia, muitos blogueiros usam longos scripts para fazer o efeito lightbox para imagens, efeito que deixa a imagem maior ao ser clicada. E até esta semana, o Blogger lançou misteriosamente o efeito nativo, mas não foi anunciado. Além de misterioso, o Blogger não possui opção para ativar ou desativar o efeito.

Basta clicar em qualquer imagem de seu blog que surge um efeito, deixando a imagem clicada com o tamanho original, além de todas as imagens do post apareceram em miniatura em baixo como um menu, possibilitando visualizar todas na mesma janela.

O mais estranho é que alguns blogs possuem este script sem adicioná-lo. Mas para aqueles que ainda não possuem, lá vai:

Acesse o painel do Blogger, escolha seu blog, clique em "Design" > "Editar HTML". Procure pela tag ]]></b:skin> e acima dela, cole o código css:

<link type='text/css' rel='stylesheet' href='http://www.blogger.com/static/v1/widgets/3353720152-widget_css_lightbox_bundle.css' />

Agora, vamos adicionar o script principal para o efeito funcionar. Procure pela tag </head> e cole o seguinte código acima dela:

<script type='text/javascript'>
//<![CDATA[
function killLightbox() {
var images = document.getElementsByTagName('img');
for (var i = 0 ; i < images.length ; ++i) {
images[i].onmouseover=function() {
var html = this.parentNode.innerHTML;
this.parentNode.innerHTML = html;
this.onmouseover = null;
};
}
}

if (window.addEventListener) {
window.addEventListener('load',killLightbox,undefined);
} else {
window.attachEvent('onload',killLightbox);
}
//]]>
</script>

Salve as modificações e seu efeito estará prontinho!

Google lança aplicativo do Blogger para iOS

2011-09-18T17:26:00.000-07:00

Como era de se esperar, o Google finalmente lançou o aplicativo do Blogger compatível com o sistema iOS, dos produtos móveis da Apple, como iPhone, iPod Touch e iPad. Além da mobilidade de postar facilmente pelos aparelhos, o aplicativo é gratuito e totalmente em português.

Antigamente, havia somente aplicativos do Blogger para iOS não oficial, mas agora qualquer usuário iOS podem baixá-lo pela App Store, loja oficial de aplicativos da Apple. Para quem não usa iOS, há o aplicativo também oficial do Blogger para Android, disponível gratuitamente para download no Android Market.

Funções do aplicativo:

Selecionar o blog que deseja administrar, administrando vários ao mesmo tempo;
Incluir imagens da galeria ou tirar uma foto diretamente do aplicativo;
Adicionar marcadores;
Adicionar informações de localização;
Salvar postagens como rascunho ou publicar imediatamente;
Ver a lista de postagens feitas ou publicada;

Criando um blog de downloads de forma legal

2011-09-11T12:57:00.000-07:00

Antes de abrir um blog de downloads, você deve saber o que postar. Tudo depende de seu conteúdo. Você quer um blog de downloads ou um blog pirata? Infelizmente muitos blogueiros não sabem ou insistem em criar blogs ilegais, que oferece programas com seriais, keygens, hacks, filmes, séries e músicas.

Conteúdo de forma legal
Antes de tudo, se informe sobre direitos autorais e plágio. NUNCA faça postagens com conteúdos ilegais que prejudicam pessoas, empresas ou afetam os direitos autorais, como: seriais e keygens para ativação de um programa pago, conteúdos de mídia paga, como: filmes, músicas e séries, e até programas prejudiciais, como: hackers, vírus, etc.

Todo o conteúdo acima é considerado pirataria. Mesmo hospedando arquivos em outros servidores ou mesmo pegando links outros blogs, seu blog ainda continua ilegal.

Não copie textos e/ou coloque imagens sem saber se elas permitem compartilhamento ou se afetam os direitos autorais, pois além do conteúdo ilegal, mais irregularidades se somam. Se usa Blogger, o Google pode excluir seu blog. Mas em caso de outras plataformas ou até mesmo no Blogger, você pode ser processado judicialmente e ser preso.

Além do conteúdo principal
Para ter e manter um blog de downloads, não basta apenas downloads, mas outros assuntos ligados a tecnologia e computadores, como: tutoriais, notícias e artigos.

Inove e seja original.

Layout
Bons blogs devem possuir bom layout, pois não basta ter um belo conteúdo e um template desorganizado. Naveguei em diversos blogs do gênero, e a grande maioria possui layout ilegal ou plagiado, desorganizado e com diversos anúncios chatos e virais.

Tenha um template limpo, fácil de navegar e saber onde estão os meus de links principais, não deve ter muitos anúncios, informações exageradas e o principal, que não seja plagiado.

Veredicto
Como posso criar um blog de downloads sem quebrar as regras? Não tem como. Se apenas quer postar simples downloads e artigos, não faça isso com um simples blog, pois existem grandes portais que oferecem esse tipo de conteúdo, como: Baixaki, Super Downloads, Ultra Downloads.

Se desejar criar no Blogger, compre um belo template de qualidade ou encomende um, e compre um domínio (.com, .com.br, .net ou .org). Mas se preferir um grande portal, faça isso com o CMS Wordpress.org, investindo em uma hospedagem, domínio e um excelente template.

Colocando sistema de comentários do Facebook junto com o do Blogger

2011-09-06T22:23:00.000-07:00

Um ponto negativo do Blogger é não possuir um sistema de comentários adequado diante a imensa plataforma que é hoje. Mas este pequeno incômodo pode ser resolvido colocando o sistema de comentários do Facebook. Tudo fica como antes, e o que muda, é que terá duas abas e dois modos de comentar: o tradicional, do próprio blog e o do Facebook, deixando o visitante escolher onde deseja comentar. Nota: os comentários do Facebook não ficam juntos com o do Blogger. Fica tudo separado por abas.

1. Instalação do sistema

Vá ao painel do Blogger, escolha o blog que deseja instalar o sistema, clique no meu "Design" > "Editar HTML" e marque a caixinha "Expandir modelos de widgets".

Procure pela linha (Ctrl+F para facilitar a pesquisa):

<div class='comments' id='comments'>

Achou a linha citada acima, cole o seguinte código ABAIXO dela:

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comentários no Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comentários
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comentários no Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comentários
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Agora procure pela tag </head> e cole o seguinte código ACIMA dela:

<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR_FB_ID' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

2. Personalização com CSS
Nosso tutorial está quase no fim. Agora, só falta instalar o código de personalização do sistema. É necessário para que tudo fique alinhado devidamente, e a personalização de cores, fundos e links ficam por sua conta.

Ainda na mesma página, procure pela tag ]]></b:skin> e adicione ACIMA dela o código CSS:

.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

Fonte: alma2paradise.

Blogger e produtos Google com nova página de login

2011-09-04T09:36:00.000-07:00

2011 é o ano que o google dedicou a melhorar por completo todos os seus serviços. Tudo começou com o anúncio do novo painel do Blogger e Google Plus que todos os serviços começaram a se padronizar, ganhando novas funções, integração uns aos outros e visual mais limpo e moderno, facilitando a vida de qualquer usuário.

Você pode observar que a página de pesquisa Google, o novo Gmail, Google Plus (G+) e outros serviços possuem o mesmo estilo do novo painel do Blogger (Liberado o novo painel do Blogger ao público). Só o estilo dos serviços ganharam mudanças, e as páginas de login continuaram as mesmas. Mas hoje isso tudo mudou.

Antiga página de login Blogger

A página ficou com visual mais limpo, moderno e sem muitas cores, como todos os produtos Google.

Nova página de login Blogger

É possível somente ter acesso a nova página de login pelo Gmail.com. Acesse-o sem estar logado, e no rodapé da página possuirá um box com a mensagem: "Em breve: uma nova página de login! Visualizar / Saiba mais". Clique no link "Visualizar" e todos os produtos terão login de cara nova.

Nova página de login:

Como procurar imagens no Google com livre direito de uso

2011-09-02T12:58:00.000-07:00

Na hora de ilustrar nossas postagens com imagens ou lucrar com elas, devemos saber se o autor permite o uso e se você não viola os direitos autorais. Então por isso devemos pesquisar no Google, imagem que sejam livres para reprodução, edição ou até comercialização. Fique sempre atento se as imagens que você busca e copia, possuem ou não direitos autorais.

Acesse a página de pesquisa de imagens do Google (http://www.google.com.br/imghp), e clique no link "Pesquisa avançada de imagens, como na imagem abaixo:

Depois, o Google irá te mostrar a página de pesquisa personalizada. Digite as palavras-chave da imagem que gostaria de procurar e no fim da página, ache a opção "Direitos de uso".

Marque a opção "Apenas imagens marcadas para reutilização. Condições podem se aplicar.". Se marcar somente esta opção, sua pesquisa de imagens será somente para reutilização. Opcionalmente há mais duas opções de direitos:

Marcando "Uso comercial" = permite usar a imagem para venda e lucro;
Marcando "Modificação" = permite alterar como quiser a imagem;
Marcando todas as opções = permite usar a imagem para reutilização, comercialização e modificação.

Marque as opções mais próprias para sua pesquisa, e por fim, clique no botão "Pesquisar imagens" para fazer a pesquisa legal.

Retirando a navbar dos templates Designer do Modelo

2011-09-01T18:30:00.000-07:00

A velha história da chata navbar se estende até nos templates do Designer do Modelo, opção nativa do Blogger de criar templates facilmente. A navbar, para quem não sabe, é barra de informações que fica no topo da tela de todo blog com layout original. Se não gosta da navbar e deseja retirá-la dos modelos paralelos ou antigos, clique aqui. Mas se não quer mais ela nos templates templates originais do Designer do Modelo, basta seguir este tutorial.

Vá ao seu blog e clique no menu “Design” > “Editar HTML” e procure (Ctrl+F) por: <body> ou se não encontrar, procure por <body expr:class='"loading" + data:blog.mobileClass'> ou algo parecido, e cole o código abaixo exatamente acima do código em vermelho mostrado antes (1.).

<script type='text/javascript'> <![CDATA[  ]]> </script>

Agora salve o modelo (2.). O Blogger pedirá sua confirmação se deseja retirar a Navbar1, marque "Excluir Widgets" (3.) e tudo feito.

Liberado o novo painel do Blogger ao público

2011-08-31T12:58:00.000-07:00

Há vários meses que a equipe Blogger está fazendo um novo painel para o Blogger. E não é que lançaram mesmo! Antes, só podia testar o painel pelo Blogger de testes, o Blogger in Draft. Para testar o novo painel sem sair de seu Blogger.com, basta ir à Home e clicar no link "Experimente a interface atualizada do Blogger".

Clicando no link ou no balão (pode não aparecer), o Blogger te redireciona para o novo painel, definindo ele como o seu padrão, apagando completamente o painel antigo. Então, se clicar no link e depois entrar normalmente pelo Blogger.com, o novo painel estará lá.

Em geral, ficou tudo mais simples e organizado. Na página inicial, temos todos os seus blogs e ao inferior da página, as novidades de todos os blogs que você segue. Ao lado de cada nome do blog, temos informações sobre estatísticas gerais do blog, total de postagens e número de comentários a serem moderados. Além dessas informações, temos três botões: o do lápis, que leva você a criar uma nova postagem. O da folha, que leva para todas as postagens ou clicando na setinha ao lado, se expande um menu de todas as opções e o clássico "Visualizar Blog".

Agora a aba "Gerar receita" virou "Ganhos", totalmente renovada, disponibilizando o serviço Google Adsense. O editor de postagens está mais limpo e agradável, facilitando na hora de postar. E uma nova aba foi adicionada, a "Visão geral", onde o usuário pode ver o total de estatísticas, postagens, comentários, seguidores e notícias gerais sobre o blog.

Desde muito tempo estou postando pequenas novidades no painel, como:

A aba "Modelo", no painel atual "Design", "Designer do Modelo" e "Configurações Celular" foram juntadas, disponibilizando templates prontos para serem instalados e quatro botões: o "Personalizar" (1.), onde leva o usuário ao antigo "Designer do Modelo". O "Editar HTML" (2.), que surge uma janela ao usuário para modificar o código fonte do blog. O da engrenagem (3.), disponibiliza se deseja ou não que seu blog seja compatível com dispositivos móveis e opções de design da página móvel. E novo botão "Administrar" (4.), levando o usuário a ter opções de download e upload do template.

A cada dia, a equipe Blogger está modificando e melhorando, pois o painel ainda está com defeitos, e eu, do Ajuda no Blogger estarei postando todas as novidades. Mas se não gostou de nada e ainda prefere o painel antigo, no topo da página, possui um link: "Voltar para a interface antiga", definindo o painel antigo como seu padrão novamente.

Novo modo de editar HTML no novo painel do Blogger

2011-08-30T18:15:00.000-07:00

Como sabemos, a equipe do Blogger está desenvolvendo radicalmente um novo painel para o Blogger desde 2010, e por isso, estão a cada dia, complementando e aperfeiçoando cada vez mais. Estou também a cada dia, procurando mínimas novidades, e a mínima novidade de hoje é o novo modo de editar o código fonte de seu blog (HTML).

Bom, para conferir está pequena novidade, basta entrar no Blogger in Draft (http://draft.blogger.com), o painel de testes do Blogger. Entrando no seu blog e clicar no menu "Modelo", podemos ver a imagem de sua página padrão da web e a padrão para celulares. Mas onde está a novidade?

Antes, abaixo da imagem da página padrão da web, tinha apenas um botão, o "Personalizar" que leva para o "Designer do Modelo" do painel atual do Blogger (criador de templates próprio). Antes, para editar o HTML, bastava rolar esta página e apertar a link "Editar HTML".

Mas agora, temos dois botões: o "Personalizar" e o novíssimo "Editar HTML". Não precisamos rolar mais a página para editar o código fonte do blog, pois apertando este botão, surge uma janela.

Outra coisa que quero destacar, é que esta é a única janela que possui o simples botão "Fechar". Nenhuma outra janela de funções do novo Blogger possui este útil botão. São bugs aqui, e bugs ali neste novo painel. Vamos aguardar até a próxima correção e implantação de funções do Blogger.

Balão com número de comentários ao lado do título da postagem

2011-08-29T18:23:00.000-07:00

Uma boa maneira de conseguir espaço e mostrar bem grande o número de comentários, é colocando um balão do total de comentários ao lado do título da postagem. Além de deixar o estilo bonito e limpo, fica bem nítido o seu total de comentários, incentivando os leitores a comentarem.

1. Instalação
No painel do Blogger, escolha seu blog, clique no menu "Design" > "Editar HTML" e marque a caixinha "Expandir modelos de widgets".

Agora procure (Ctrl+F) pelas tags <b:includable id='post' var='post'> ou <class='post-title entry-title'>, dependendo de seu modelo de template, e adicione o seguinte código DEPOIS de uma das tags encontradas:

<span class='post-comment-link-arriba' style='background: url(http://png.findicons.com/files/icons/829/quartz/64/comment.png) no-repeat top right; width:64px; height:64px; text-align:center; float:right;padding-top:8px'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='text-decoration:none; color:#666666;'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a></b:if></span>

2. Personalização
Agora está tudo feito, só falta deixar o balão ao seu gosto. A parte em vermelho do código, é o endereço URL da imagem do balão. Você pode escolher qualquer imagem de balões da internet e colocar o endereço URL substituindo a parte vermelha. Mas atenção, para que o novo balão colocado fique perfeito, mude os valores em azul de acordo com a sua imagem. Se sua imagem é do valor 48x48, faça o mesmo, altere width:64px; height:64; para width:48px; height:48;.

A parte em verde do código representa o estilo css do link do balão. Você pode alterar a cor do link, modificando color:#666666; para um preto, ficando color:#000000;. O estilo css fica ao se critério, tanto quanto as outras modificações.

Sites para encontrar ícones de balões:

6 pacotes de ícones para o Google Plus

2011-08-27T19:50:00.000-07:00

Com o nascimento da nova rede social do Google, o Google Plus (G+), que está se espanhando rápido pela web, fui a busca e separei 6 lindos pacotes de ícones para você divulgar em seu blog ou em qualquer outro lugar, trazendo mais vistas. Alguns pacotes possuem formatos PNG + PSD (Photoshop) ou apenas um deles. Para entrar no site do desenvolvedor e fazer o download, basta clicar na imagem do ícone abaixo que mais gostou.

Blogger poderá se chamar "Google Blogs"

2011-08-27T17:55:00.000-07:00

Desde 2003 que o Blogger foi comprado pelo Google da empresa Pyra Labs, não mudaram o nome e logos. Mas já com o lançamento da nova rede social do Google, o Google +, a gigante da web pretende "abandonar" o compartilhamentos de fotos Picasa e o Blogger, renomeando-os para "Google Photos" e "Google Blogs".

Como disse o site Mashable, o Google pretende mudar estes nomes dentro de um mês e meio. Episódios parecidos ocorreram com o Google, como o JotSpot, comprado em 2006, e renomeado para Google Sites em 2008. E em 2007, o Google comprou o GrandCentral e renomeou para Google Voice em 2009

Não duvido que o Google mude os nomes, porque com tantas novidades sendo lançadas, é capaz mesmo de isso ocorrer. Seria bom, porque o Blogger poderá ser integrado ao Google +, como está sendo feito com o Picasa.

A equipe Blogger já tinha prometido grandes mudanças este ano, como o novo painel implantado recentemente (clique aqui para ver a novidade). Mas será que estas novidades se tratam da mudança dos nomes?

Vamos aguardar por novidades do ~~Google Blogs~~ Blogger.

Fonte: Mashable.

Alterando o estilo da página do Blogger celular

2011-08-27T09:47:00.000-07:00

Recentemente o Blogger redesenhou o painel do Blogger, exibindo diversas novidades a serem testadas pelos usuários e futuramente serem lançadas oficialmente. Mas neste post, vou ensinar a como alterar o estilo da página do celular. Para você que não sabe o que é, Blogger celular é uma opção para quem navega por meio de celulares e smartphones, deixando a página do seu blog compatível a tela.

Quando a função foi lançada no começo deste ano, não havia a função de modificar o estilo da página, mas agora é possível o novo painel de testes do Blogger (http://draft.blogger.com). Acessando, escolha o blog que quer modificar, clique sobre o nome e no menu ao lado, clique na opção "Modelo" (1). Agora basta você clicar no ícone da engrenagem (2).

Depois que clicar, abrirá uma janela, nela, clique na opção "Sim, mostrar modelo para celular em aparelhos celulares." para ativar a opção de visualização para o celular (3). Agora basta escolher o modelo que mais combinar com o seu blog (4), clicar no botão "Visualizar" para ter uma idéia de como vai ficar e é só clicar em "Salvar" para terminar (5).

Para visualizar a página do celular pelo navegador, basta digitar o endereço:

http://www.SEUBLOG.blogspot.com/?m=1

Novo painel do Blogger novamente renovado

2011-08-26T18:23:00.000-07:00

Em abril, o Painel do Blogger foi renovado, como prometido pela empresa. Mas com o lançamento do Google +, nova rede social do Google, a equipe renovou novamente o Painel, deixando ele bem melhor. Para ter acesso a novidade, entre no site: http://draft.blogger.com.

Novo painel renovado:

No começo do ano, a equipe Blogger tinha prometido grandes mudanças para o Blogger, e uma delas foi renovar em abril o painel:

Mas como disse anteriormente, o Blogger teve que renovar novamente:

O novo painel continua limpo e organizado. Na página inicial, temos a lista de todos os seus blogs e os blogs que você segue. Ao lado do nome dos seus blogs, você tem o total de visualizações de páginas, total de postagens e comentários pendentes para moderação, um ícone de um lápis, de uma folha e uma setinha para baixo. Se clicar nesta setinha, você tem acesso rápido a ferramentas de seu blog, como "Detalhes" ou "Layout". Clicando no ícone do lápis, você cria uma nova postagem e no ícone da folha, você vai a página de todas as suas postagens.

O novo painel está tão incrível que a página do editor de postagens foi renovada, deixando ferramentas úteis a mão, e até o editor de HTML que faltava no painel anterior, está implantado.

Outra novidade é que agora podemos modificar o estilo da página para dispositivos móveis, recurso só disponível do Blogger in Draft.

Novo painel do Blogger já está sendo disponibilizado

2011-04-28T14:40:00.000-07:00

Com o decorrer dos meses, o Blogger já está se atualizando em um ritimo acelerado, como previsto nos posts anteriores. Já está sendo disponibilizado o novo painel do Blogger (New Dashboard), mas para estragar a felicidade de muitos, o novo painel ainda é disponível para poucos.

O anúncio oficial da implantação do painel foi dado no blog de rascunho do Blogger, o Blogger in Draft: Blogger, Redesigned.

Algumas pessoas com sorte já estão desfrutando do novo painel. Arrisque sua sorte e veja se seu painel foi atualizado acessando a página do Blogger in Draft: http://draft.blogger.com. Se não encontrar o novo painel em sua conta, não procura como eu, por botões pedindo para você atualizar, que não tem. Para ter o seu painel, basta esperar.

É galera, o Blogger está ficando cada vez melhor, imagine como ele vai ficar até o final de 2011: deixando os concorrentes de queixos caídos.

Retirando o link: Assinar: Postagens (Atom)

2011-04-28T14:18:00.000-07:00

O item mais irritante do Blogger, além da navbar, é o link "Assinar: Postagens (Atom)" desnecessário no rodapé dos blogs. Se você acha este link irritante e deseja retirá-lo, siga o tutorial:

Vá em seu blog, clique no link Design > Editar HTML e procure pelo trecho:

.feed-links {
clear: both;
line-height: 2.5em;
text-indent:-9999em;
}

Se o seu layout for o template minima, padrão do Blogger, acrescente a linha em vermelho. Se não achou este trecho em seu layout, copie e cole antes da tag ]]></b:skin>.

Vizualizações dinâmicas do Blogger no Google Chrome

2011-04-19T10:42:00.000-07:00

Para quem tem o navegador do Google, o Chrome, tem benefícios com o Blogger, como o recem lançado complemento que funciona nas paginas de "view". Basta acessar a página de vizualizações dinâmicas do seu blog (como vimos na postagem anterior) e clicar no ícone do Blogger na barra de endereço, disponibilizando as opções de visualizações.

Vizualizações dinâmicas - Novidade!

2011-04-14T10:07:00.000-07:00

As novidades estão chegando cada vez mais rápido no blogger em 2011. Vamos conferir a novíssima novidade: Vizualizações Dinâmicas de postagens.

Para vizualizar as postagens dinâmicas, basta colocar /view em seu endereço, como:

http://www.ajudanoblogger.blogspot.com/view

São cinco modos de visualizar as postagens:
1. Barra lateral: …./view/sidebar
2. Cartões: …./view/flipcard
3. Mosaico: …./view/mosaic
4. Estilo fotos: …./view/snapshot
5. Linha do tempo: …./view/timeslide

Anunciadas grandes novidades para o Blogger

2011-04-05T10:52:00.000-07:00

2010 vimos que o Blogger teve um grande avanço em relação a funções e layouts. Tivemos Design do Modelo, novos gadgets, estatísticas em tempo real, comentários com filtragem de spam, novas fontes, blog compatível para celulares e muitas outras. Mas 2011 promete muito mais do esperado: novo painel com tudo novo e editor de textos bem mais rápido e amplo com a tecnologia Google Web Toolkit.
Confira o vídeo oficial:

Novo painel


Painel atual / Divulgação

Novo painel / Divulgação

Novo editor de textos

Editor de textos atual / Divulgação

Novo editor de textos / Divulgação

Em breve será lançada todas essas novidades para que o Blogger se torne uma das melhores plataformas de blogs.

Fonte: adaptado de What’s New With Blogger.

Novo gadget Newsletter - Seguir por e-mail

2011-03-26T19:47:00.000-07:00

Até que enfim o Blogger lançou um newsletter próprio. Além de útil ele é prático: não ocupa muito espaço no template. E o bom de tudo isso é que seus leitores poderão saber de tudo que rola em seu blog via e-mail.

O que é um Newsletter? Newsletter é uma função onde os leitores colocam seu e-mail e cadastram para receber as novidades via e-mail daquele blog cadastrado.

1. Instalação
Para adicionar seu Newsletter, basta ir ao seu blog, clicar em Design > Elementos da página. Na página Elementos da Página, clique em “Adicionar gadget”, escolha o Newsletter, configure as opções dadas e salve.

2. Modificação
O novo gadget tem um único problema: o painel e os botões não são em Português. Mas como sou bonzinho, vou ensina-los a mudar a linguagem, rsrsrs.

No seu blog, clique em Design > Editar HTML e marque a caixinha “Expandir modelos widget”. Para mudar a linguagem, procure por (Ctrl+F):

<input name='loc' type='hidden' value='en_US'/>

E mude o trecho em vermelho para:

<input name='loc' type='hidden' value='pt_BR'/>

Trocamos o painel de cadastro de Englês (en_US) para Portugûes (pt_BR).
Para mudar o texto de e-mail, procure por:

<input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>

E mude o trecho em vermelho para:

<input class='follow-by-email-address' name='email' placeholder='Seu e-mail...' type='text'/>

E para terminar, mude o botão “Submit”,o botão de cadastro, procure por:

<input class='follow-by-email-submit' type='submit' value='Submit'/>

E mude o trecho em vermelho para:

<input class='follow-by-email-submit' type='submit' value='Cadastrar'/>

Blogger celular

2011-02-24T09:20:00.000-08:00

Recentemente, o Blogger anunciou em seu blog a mais nova ferramenta: O blog para celular. Está função só está disponível no Blogger in Draft (Blogger em Rascunho) em versão beta para testes e possível lançamento definitivo para todos os usuários.

Para entender melhor sobre está função, primeiro deve saber sobre o Blogger in Draft. Clique aqui e saiba mais sobre o Blogger in Draft.

Mas o que seria um blog formato para celular? Blog no formato para celular é o seu blog, mais com o layout adaptado para rodar e ser lido facilmente em telas pequenas de celulares e smartphones.

Acessando a página do Blogger in Draft, faça login, escolha seu blog e vá ao menu Configurações > E-mail e celular. Se deseja que seu blog seja compatível com celulares, marque a primeira opção e clique no link “Sim, em celulares, mostre a versão para celular do meu modelo” para visualizá-lo.

Um detalhe importante: Os temas do Design do Modelo, próprios layouts do blogger funcionam normalmente na versão celular com o estilo desejado. Mas se usa templates de terceiros, o estilo de layout fica no padrão básico.

Para vizualizar o seu blog em seu navegador, basta acessar o endereço:

http://www.SEUBLOG.blogspot.com/?m=1

Visualização do de terceiros à esquerda e visualização do template do Design do Modelo à direita:

Estrelas seguindo o cursor

2010-12-18T09:21:00.000-08:00

Para você dar uma decorada em seu blog, coloque estrelinhas seguindo o cursor.

1. Instalação
Vá em seu blog no Design > Editar HTML e cole o seguinte código acima da tag </body>:

<script type='text/javascript'>
// <![CDATA[
var colour="#FFFFFF";
var sparkles=50;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

2. Personalizando as estrelinhas
Se instalar o código do jeito que está, as estrelinhas vão estar brancas, mas para mudar a cor delas, vá na terceira linha do código: var colour="#FFFFFF"; e mude o #FFFFFF que é branco para outras cores, como:

Preto: #000000
Azul: #0000FF
Verde: #00FF00
Vermelho: #FF0000
Amarelo: #FFFF00
Cinza: #CCCCCC

Mais cores: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm

Fonte: PhotoScape Edições.

Efeito Lightbox

2010-12-09T09:46:00.000-08:00

Coloque um efeito Lightbox em seu blog. Não sabe o que é Lightbox? Vou encinar: Lightbox é um efeito para imagens e links. Você coloca uma foto pequena em sua postagem, mas na hora que o leitor clicar nela, ela se abrira maior com um super efeito.

1. Instalação
Vá no seu blog em Design > Editar HTML e cole o seguinte código acima de </head>:

<link href='http://www.ferramentasblog.com.br/imagens/lightbox/css/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://www.ferramentasblog.com.br/imagens/lightbox/js/prototype.js' type='text/javascript'/>
<script src='http://www.ferramentasblog.com.br/imagens/lightbox/js/scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='http://www.ferramentasblog.com.br/imagens/lightbox/js/lightbox.js' type='text/javascript'/>

2. Usando o efeito nas imagens do picasa (do Blogger)
Você pode usar o efeito nas próprias imagens que você hospeda do picasa (no próprio Blogger) ou pegar da web.

Código original de uma imagem qualquer hospedada do picasa (do Blogger):

<a href="http://3.bp.blogspot.com/_03us9eR4yKo/TQESePQeoTI/AAAAAAAADMA/w8CLnA75p7o/s1600/neve.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="100" src="http://3.bp.blogspot.com/_03us9eR4yKo/TQESePQeoTI/AAAAAAAADMA/w8CLnA75p7o/s200/neve.jpg" width="100" /></a>

Agora coloque antes style=" o código rel="lightbox", ficando:

<a href="http://3.bp.blogspot.com/_03us9eR4yKo/TQESePQeoTI/AAAAAAAADMA/w8CLnA75p7o/s1600/neve.jpg" imageanchor="1" rel="lightbox" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="100" src="http://3.bp.blogspot.com/_03us9eR4yKo/TQESePQeoTI/AAAAAAAADMA/w8CLnA75p7o/s200/neve.jpg" width="100" /></a>

3. Usando os efeitos nas imagens da web
Coloque o seguinte código no HTML de sua postagem:

<a href="URL_da_IMAGEM_ORIGINAL" rel="lightbox">
<img src="URL_da_IMAGEM_MINI" border="0">
</a>

4. Usando os efeitos em links
Colque o seguinte código no HTML de sua postagem:

<a href="URL_da_IMAGEM_ORIGINAL" rel="lightbox">Texto do Link</a>

Fonte: Ferramentas Blog.

Efeito neve para seu blog

2010-12-07T09:13:00.000-08:00

Estamos chegando no fim do ano, isto significa: Natal! Para deixar seu blog enfeitado para o natal, coloque um efeito de neve caindo. Este código não possui imagens e por isso é leve.

Instalação: Vá em seu blog no Design > Editar HTML. Procure por </body> e coloque o seguinte código acima dele. Colou, salve as modificações e seu blog estará pronto para o natal.

<script src='http://sites.google.com/site/blogandinho/Home/Codesnowblogandinho.blogspot.com.txt?attredirects=0' type='text/javascript'/>

Fonte: Blogandinho

Evite o plágio

2010-12-05T15:48:00.000-08:00

Hoje, o plágio também está no mundo virtual, principalmente na blogosfera. Para quem não sabe o que é plagio, vou ensinar:

"O plágio é o acto de assinar ou apresentar uma obra intelectual de qualquer natureza (texto, música, obra pictórica, fotografia, obra audiovisual, etc) contendo partes de uma obra que pertença a outra pessoa sem colocar os créditos para o autor original. No acto de plágio, o plagiador apropria-se indevidamente da obra intelectual de outra pessoa, assumindo a autoria da mesma." (Fonte - Wikipédia).

Muitas pessoas que criam um blog, são preguiçosas ou ignorantes para postar ou criar um template, por isso elas copiam. Elas acham que a internet é uma terra sem leis, que tudo pode-se fazer a vontade, sem nenhuma punição, e também dizem: "Todo mundo copia, por isso eu copio", mas elas estão erradas.

Se você cometer plágio e for denunciado, você pode ser punido pelo Google, como suspensão ou exclusão de seus serviços. Você ganha também fama negativa na internet, ou pode até enfrentar consequências judiciais, e ser preso.

Dicas para não cometer plágios:

1. Há sites/blogs que não permitem nenhum tipo de cópia, sendo ela total ou parcial. Então antes de copiar algum conteúdo, verifique-o.

2. Ao criar uma postagem, nunca copie de outro site/blog sem colocar sua fonte e as aspas ou dizer que o conteúdo é seu. Se você quer copiar um post inteiro, coloque aspas no começo do texto e aspas no fim do texto, seguido também da fonte com o link de onde você pegou o conteúdo.

3. Se você quer pegar um trecho ou uma parte de um texto, deixe claro que aquilo é uma citação, então copie e coloque aspas no começo e no fim do conteúdo, seguido da fonte e do link de onde você pegou-o.

4. Não copie templates, faça um. Se não sabe fazer um template, baixe e utilize os templates gratuitos encontrados em diversos sites, inclusive aqui. Não hora de editar um template,verifique se o autor permite edições, se ele permitir não retire os créditos dele.

5. As imagens também entram nesta dança, não use imagens sem ter certeza se elas contem nenhum tipo de direito autoral. Ao pegar uma imagem que desconfia que possua direitos autorais, coloque o link de onde a pegou.

É isso, agora você já sabe o básico sobre plágio. Em breve vou fazer outro post sobre plágio.