Notícia e blog

Criando Uma Caixa Para Exibir Códigos HTML - Blogger

2010-03-13T17:58:00.002-03:00

Uma forma simples de mostrar códigos.

Uma caixa de códigos é um espaço onde é exibido trechos de HTML para ser copiado como aqui no Notícia e blog, isto é importante pois ajuda o leitor a diferenciar o que é texto do que é código, além de deixar a postagem mais limpa e mais formatada. Para fazer está caixa nós usaremos CSS, então veja abaixo:

Aplicando CSS para definir o modelo da caixa

A primeira coisa a se fazer é inserir o CSS para definir a aparência da caixa e deixa-la bem legal:
1)Acesse o painel do Blogger(blogger.com)
2)Vá em Layout->Editar HTML, procure pelo seguinte trecho no seu blog, lembre de usar Ctrl e F(para procura rápida):
]]></b:skin>
Agora adicione antes, do trecho anterior o seguinte:

code{

-webkit-background-clip:initial;

-webkit-background-origin:initial;

background-attachment:initial;

background-color:#FFF;

background-image:url(http://arquivos.noticiaeblog.com/code.jpg);

background-position:0 0;

background-repeat:no-repeat;

color:#666;

display:block;

font-size:13px;

font:normal normal normal 1em/normal 'Courier New', Fixed, monospace;

line-height:17px;

overflow-x:auto;

overflow-y:auto;

text-align:left;

border-color:#9c6;

border-style:solid;

border-width:1px;

margin:1em 0;

padding:0 20px 0 30px;

}

3)Salve as alterações

Inserindo um código em uma postagem

Veja nas imagens como fazer:

Clique para ampliar

Só pra lembrar as tags que aparecem nas imagens são <code> para iniciar e </code> para fechar.
Pronto você já pode inserir vários código para o seu leitor, simples assim. Ah e se você tem alguma sugestão de postagem fale conosco.

Blogger Lança Novo Recurso (Designer do Modelo)

2010-03-11T22:45:00.001-03:00

Novas funcionalidades facilitam nossa vida, hoje não vivemos sem photoshop!

Mais uma vez o blogger nos presenteia com uma nova funcionalidade, que o Designer de Modelos. Ele nada mais é do que um painel super avançado de edição de template permitindo alterar fonte, tamanhos, cores, fundo, menu e etc. Lá você vai ver alguns temas que são padrão e poderá personaliza-lo da forma que quiser, mais uma pergunta não foi respondida ainda que é como fica o nosso HTML?! A resposta é simples cheio de variáveis novas e de novas tags xml que foram feitas para que nós possamos editar nosso template sem mecher no famoso Editar HTML. Veja algumas tags que encontrei no novo xml ou seja após personalizar o template pelo painel:
Agora temos mais uma tag de CSS, para definir alguns partes do blog, a tag é está "]]></b:template-skin>", um pouco maior que a conhecida "]]></b:skin>", as variáveis agora são definidas por grupo exemplo post,"<Group description="Post" selector=".post">", todas as variáveis referentes a postagem devem iniciar com este separador e terminar com </Group>, a também uma meta tag para fazer uma emulação no Internet Explorer 7, que é "<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>", além de ter colocado um script para fazer as páginas estáticas funcionarem bem neste navegador.

Veja também o vídeo feito pela equipe do Blogger para explicar como funciona o novo serviço:

Como você pode ter visto no vídeo o serviço é muito pratico e simples de usar, se ficou com vontade de testar este serviço acesse o blogger in draft ou blogger em teste, ai é só ir em Layout-> Designer de Modelo.

Imagem por: Finissimo

Aprenda Como Criar Um Contador de Visitas Em PHP

2010-03-09T19:09:00.000-03:00

Hoje vou ensinar a criar um contador em PHP, um contador próprio é bom pois estes que vemos por aí volta e meia saem do ar sem se quer falar com a gente, por isso é que ter um em nosso servidor compensa, além do mais este só usa PHP e não PHP+Mysql, não que eu esteja excluindo os que tem "bd", mais estes que não tem são mais práticos e fáceis de se instalar veja abaixo os arquivos necessários e como se instala.

Arquivos Necessários

Os arquivos necessários são estes abaixo com links para download:
contador.php -> Este é o que vais gerar e salvar os dados de visitas.
contador.txt -> Este armazena os dados obtidos pelo contador. Mas lembre-se dar permissão 777 para o arquivo.
numeros -> Está pasta é onde ficam as imagens que vão formar o contador.

Montando o Contador

Primeiro envie para seu servidor o arquivo contador.txt, e dê permissão total para ele o equivalente a 777. Envie também a pasta numeros, para o servidor. Agora abra o arquivo contador.php com o Bloco de notas. E altere o seguinte trecho:
$IMG_DIR = "http://www.noticiaeblog.com/numeros/";
Altere a parte em vermelho para o destino da pasta numero em seu servidor, lembre se de começar com "http://" e termina com "/" como o que está no trecho acima. Após alterar envie para o seu servidor.

Instalar

Para instalar é simples escolha o local seja em um HTML entre <body> e </body> ou em um Gadget HTML/JavaScript, aí é só inserir o código da seguinte forma:
<script type="text/javascript" src="http://www.noticiaeblog.com/contador.php"></script>
Lembre-se de substituir o trecho em laranja pelo destino do seu arquivo contador.php, salve e veja como ficou e se não gostou dos números que são exibidos pelo contador solicite outros no fórum.

Imagem por: Campal

Exibindo a Data e o Dia da Semana no Blogger/Blogspot

2010-03-05T21:44:00.000-03:00

Este é um Widget simples que exibe o dia da semana e a data, no seguinte formato:
Sexta-Feira, 05/03/2010
1)Para instalar acesse o painel do Blogger (blogger.com)
2)Vá em "Layout"->"Adicionar um Gadget"->Selecione "HTML/JavaScript"
3)Como conteúdo insira o seguinte:
<script type="text/javascript" src="http://noticiaeblog.googlecode.com/files/data.js"></script>
4)Salve e veja.

Até a próxima postagem...

Como Pesquisar na Internet Utilizando Uma Imagem

2010-03-03T14:05:00.000-03:00

Pesquise usando imagens ;-)

Agora temos mais uma ferramenta de busca na internet que utiliza o sistema de comparação de imagem para pesquisa. Isso facilita e muito a nossa vida pois as vezes temos uma imagem e queremos saber informações sobre ela mais não há como colocar no mestre Google, ai que entra o TinEye que é um site que busca a partir de imagens do seu computador.

É muito fácil entre no site do TinEye e clique em procurar imagem ai vai abrir uma janela para que você selecione onde está a imagem que você quer buscar. Após isso clique em "Search" e pronto ele encontrará todas as imagens semelhantes e com links.

Botão "Re-Buzz" com Contador - Blogger/WordPress

2010-03-01T18:41:00.001-03:00

Assim que ficará o seu!

Hoje venho apresentar a vocês mais uma ferramenta para o Google Buzz que é o botão re-buzz que vem do termo re-tweet, o serviço é oferecido pelo site Buzrr. Ele é um botão no mesmo style do Twitter muito prático e fácil de se instalar, permite que o usuário envie suas postagens facilmente para o buzz. E é compatível com as duas plataformas mais utilizadas. Se você usa o Wordpress pode instalar o plugin neste link e se utiliza o Blogger veja o tutorial abaixo:

Instalando no Blogger

1)Acesse o painel do Blogger(blogger.com)
2)Vá em "Layout"->"Editar HTML"-> Marque a caixa "Expandir modelos de widgets"
3)Procure pelo seguinte trecho utilizando as teclas "CTRL" e "F":<data:post.body/>Acima do trecho anterior adicione o seguinte:

<div style='float:right;padding:4px;'>

<script type='text/javascript'>

var __external_use_page_url = &quot;<data:post.url/>&quot;;

/*Esta variável pega a URL da página */

var __external_use_page_summary = &quot;<data:post.title/>&quot;;

/*Esta variável pega o título da página */

</script>

<script src='http://www.buzrr.com/button.js' type='text/javascript'/>

</div>

4)Salve as alterações visualize.

Colocando Um Fórum Interno No Blogger/Blogspot

2010-02-27T20:39:00.002-03:00

Um Fórum é um local onde podemos perguntar, responder e tirar dúvidas facilmente como se tudo que procura-se estivesse ali. A maioria dos fóruns que a gente conhece é feito com phpBB, que é um CMS, dinâmico mais que exige banco de dados (DB) e que o servidor aceite php, usar este sistema pode ser um pouco caro para nós blogueiros iniciantes mais há muitos fóruns ai pela net de graça. Mais o interessante deste que vou mostrar é que ele pode ser integrado ao seu blog do Blogger, pode se até personalizar a URL ele roda em um modo iframe mais bem integrado ao blog, o site para se criar é o Nabble, vamos ver abaixo o passo a passo para ter o seu fórum:

Criando o Fórum

1) O primeiro passo para começar é se cadastrar no site do Nabble, para que você possa personalizar facilmente. Clique aqui para se cadastrar, se tiver dúvida no preenchimento do cadastro veja a imagem abaixo:

Clique para ampliar.

Após fazer o cadastro será enviado um e-mail para você com um link de confirmação clique nele para confirmar o cadastro no Nabble.
2)Agora faça login com os dados do cadastro e-mail e senha.
3)Você será redirecionado para uma outra página onde deve clicar em "Start a Free Forum"
4) Preencha o nome do fórum, e digite uma descrição. Aí é só clicar em "Create Forum"
5) Agora você já tem o fórum, agora vamos inseri-lo no seu blog. No canto superior direito clique em "Embedding options",ai você deve copiar o JavaScript Code que deverá estar em uma caixa.
6) Agora vamos fazer login no blogger, ir em "Postagem"-> "Editar Páginas" -> "Nova página".
7) Escolha um nome para a página ex: Fórum, e insira o código que você copiou no passo 5. Agora você tem a opção de ocultar a sidebar que é muito simples basta inserir este trecho de CSS, abaixo do código que você colocou:

<style type='text/css'>

#sidebar-wrapper {

display: none;

}

#sidebar-container {

display: none;

}

#sidebar {

display: none;

}

#main-wrapper{width:970px;}

.post{width:999px; }

.post-body{width:890px; }

</style>

8) Clique em publicar página, selecione nenhum Gadget.
9) Agora vamos configurar o fórum para redirecionar todas as suas páginas para o seu blog. Acesse a página criada e clique em login, faça login com seus dados do Nabble, após isso clique em "options", selecione "Embedding Options", e em "Redirect Users" selecione a 2ª opção. Clique em "Save Changes" para salvar.
10) Pronto você já tem um fórum interno no seu blog. Se ficou com dúvida de como é o fórum clique aqui para ver o do nosso blog.

MePergunte.com o FormSpring.me (Brasileiro)

2010-02-26T17:11:00.002-03:00

MePergunte.com o FormSpring tupiniquim :-)

O FormSpring.me foi mais um sucesso da Internet depois do twitter, é um site onde você pode perguntar as pessoas sobre o que quiser. Mas como é de praxe, não tem a versão em português deste site, por isso é um pouco difícil acostumar-se com o idioma inglês.Veja o meu FormSpring.me/fernandopasse

Agora lançaram um site parecido com o FormSpring que é o
MePergunte, o layout é parecido com o estrangeiro como você pode ver nas imagens, mais possui um banner publicitário nas páginas ~~não faz tanta diferença mais incomoda~~. Lá você pode fazer perguntas anônimas ou com seu perfil. Veja o meu MePergunte.com/fernandopasse

Variáveis o que são e como criar uma - Blogger/Blogspot (Parte 2)

2010-02-23T23:08:00.001-03:00

Variáveis de Fonte!

Vamos continuar falando um pouco mais de variáveis...No post anterior vimos variáveis de cor hoje veremos um pouco das variáveis de fonte. São quase iguais tem o mesmo papel fazer com que a troca de fonte seja concretizada pelo painel sem a intervenção via "HTML ou CSS". Vamos ver como elas são formadas:
<Variable name="bodyfont" description="Fonte da página" type="font" default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
name, description -> Como foi visto no post anterior elas são nome que será usada para defini-la no CSS e uma descrição para aparecer no painel. Lembrando também que não deve ser utilizado caracteres especiais ( ?,!,@). O nome o atributo name deve ser único.
type="font" -> Se tratando de fonte sempre usaremos font que a palavra fonte em inglês.
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" -> Este atributo define que se o usuário não escolher nenhuma fonte está será padrão.
value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" -> Este valor será definido pelo painel. Caso não seja definido será igual ao atributo "default".

Aplicando ao CSS

A aplicação é da mesma forma utilizada pelas cores só mudamos o atributo "name". Mas por via das dúvidas veja o exemplo:
body {
font: $bodyfont;
}

Como fica no CSS

Se colocasse-mos apenas isso no CSS ficaria assim:

<b:skin><![CDATA[/*

/* Variable definitions

====================

<Variable name="bodyfont" description="Fonte da página" type="font" default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">

*/

body{

background: $bgfont;

}

]]></b:skin>

Agora podemos visitar o nosso painel e alterar a fonte sem medo de errar...

Variáveis o que são e como criar uma - Blogger/Blogspot

2010-02-21T17:05:00.004-03:00

Variáveis, como o próprio nome diz são coisas que variam dependendo do usuário ou dos dados que lê foram dados, um exemplo simples são aqueles sites de banco ou de lojas online, já percebeu que você acaba de criar uma conta e lá em cima já aparece "Seja Bem Vindo, Fernando" ou seja o nome dá saudação muda de acordo com a conta acessada se for da Maria aparecerá "Seja Bem Vinda, Maria". Mas as Variáveis do Blogger são um pouco diferente pois elas definem cor e fonte. Por isso existe aquele painel chamado "Fontes e cores" que fica em Layout->Fontes e cores, se não existisse aquele painel os usuários teriam que mudar a cor direto no CSS por isso que foi criado as variáveis para que elas facilitassem o usuário a ter uma cor que ele quer sem saber nada de CSS ou HTML.

As Variáveis ficam abaixo do trecho de inicio da CSS mas não fazem parte deste grupo. Assim que você carrega seu blog no navegador ele converte aquilo em outros códigos que geram as Cores e Fontes. O local que elas ficam no HTML é entre as tags <b:skin><![CDATA[/* e ]]></b:skin>, mais especificadamente abaixo do créditos.Veja no esquema abaixo um mini trecho de variáveis:

Como vocês podem ver a primeira variável é de cor vamos ver ela e descrever suas partes:
<Variable name="bgcolor" description="Fundo do blog"

type="color" default="#fff" value="#ffffff">

Acima é uma váriavel que definira o fundo do blog, vamos ver as partes dela:
name="bgcolor" -> Este trecho define o nome que será usado para definir a variável.
description="Fundo do blog" -> Define o nome que será apresentado no painel para identificar a variável.
type="color" -> Define o tipo da variável se ela é color que é cor ou se ela é font que é fonte.
default="#fff" -> Define a cor padrão caso o usuário não escolha nenhuma.
value="#ffffff" -> Este valor não precisa ser alterado pois ele será mudado pelo painel. A não ser que queira colocar um valor que não tenha no painel.

Como aplica-las ao meu CSS

Vamos a mais um exemplo vamos supor que queremos que o fundo seja variável e possa ser controlado pelo painel, vamos ao trecho que define o fundo da página:
body{
background: $bgcolor;
}
Para definir a variável foi utilizado o atributo name precedido do Cifrão, então para que o fundo seja variável basta inserir $ + atributo name que ficará no nosso exemplo $bgcolor.

Como fica tudo pronto

Se o nosso CSS fosse só isso ficaria da seguinte forma:

<b:skin><![CDATA[/*

/* Variable definitions

====================

<Variable name="bgcolor" description="Fundo do blog" type="color" default="#fff" value="#ffffff">

*/

body{

background: $bgcolor;

}

]]></b:skin>

Ai poderíamos ir ao painel e vê-lo da seguinte forma:

Clique para ampliar.

No próximo post veremos um pouco das variáveis de fonte...
Atenção se tiver dúvida pergunte no nosso fórum...

Snipt - Compartilhe Códigos Rapidamente

2010-02-20T21:58:00.000-02:00

Lembre de que serve para qualquer linguagem de programação!

As vezes a gente encontra algum script ou algum código que pode ser util futuramente ou que queremos compartilhar seja no Twitter seja em redes sociais, o papel do Snipt é hospedar estes códigos em formato de texto para que possam ser vistos.

O Snipt gera uma url curta destas que estamos acostumados a ver no Twitter o que facilida sua publicação.Veja algumas das vantagens que ele possui:

Muda de cor os códigos de arcodo com a linguagem
Te da um link curto e fácil de compartilhar
Você pode guardar suas urls Snipt em sua conta
Você ver quais são os script mais vistos.

Uma solução simples e fácil para ter seus códigos disponíveis em outros computadores.Acesse já o snipt.org
Veja este exemplo: snipt.org/wOk

Imagem por: Blog Area Criações

Acesse já o blog "Sonhos de Luciana" da personagem de Viver a Vida

2010-02-20T21:19:00.001-02:00

Blog Sonhos de Luciana já na Internet!

Luciana personagem de Viver a Vida agora possui um blog onde conta de seu momento e de suas superações na internet, muitos pensaram que o blog seria apenas na novela mais não o blog é de verdade e ela lê na novela os comentários que mais chamam atenção. Você pode fazer seu comentário lá e ainda ser ouvido na novela, gostou então visite agora mesmo:

Blog Sonhos de Luciana

Como Divulgar Seu Blog e Difundir Suas Postagens

2010-02-19T16:56:00.003-02:00

Introdução

O sonho de todo blogueiro é além de ganhar dinheiro blogando, é receber muitas e vistas e ficar famoso na blogosfera. Mas isso nem sempre é fácil exige muita responsabilidade em criar artigos relevantes e assuntos do momento, assunto interessantes e que despertaram e o interesse do leitor. O primeiro passo é divulgar o seu blog em todos os meios de comunicação possíveis, sites, blogs, redes sociais entre outros. O segundo passo é difundir suas postagens, em redes de compartilhamento de notícias, Dihitt, Ocioso, Uêba, Linkes, etc. Abaixo desta introdução vou explicar melhor como dar o ponta pé inicial a este inicio de sucesso na blogosfera.

Otimizando seu blog

Otimize para os buscadores!

O primeiro passo é preparar o seu blog para ser bem visitado, escolha um layout legal e que tenha a haver com seu conteúdo. Depois você deve inserir links ou melhor caixa de links para que seu usuários possam te ajudar a divulgar seu blog é muito simples inserir está caixa leia o seguinte artigo:
Gerador de Caixinha Link-me
Depois é interessante dar uma otimizada no seu blog para os buscadores, pois eles são uma parte importante de suas visitas, para isso você deverá alterar alguns trechos do seu layout por isso leia o seguinte artigo:
Otimizando as Meta Tags do Blogger - Meta Tags Dinâmicas
Depois você deve otimizar os títulos de suas postagens para que eles sejam bem aceitos pelos buscadores e se tornem bem atrativos, para fazer isto leia este artigo:
Otimizando os títulos do Blogger
Agora é a parte mais importante onde você receberá mais visitas, que são os assinantes de Feed/RSS uma das partes que devem ser olhadas com cautela para que você receba muitos leitores, você deve otimizar seu Feed para que ele seja bem atrativo e bem relevante, para isso leia está postagem:

Melhorando a Aparência do Seu Feed/RSS e Ganhando Milhares de Visitas

Divulgando na internet

Para começar é interessante primeiro se cadastrar em vários buscadores para que seu blog seja difundido na internet e incluído nas pesquisas do usuários, para não ter que ficar se cadastrando em um por um leia a postagem seguinte e já dê um enorme passo pois ele cadastra em mais de 321 buscadores automaticamente, para fazer isso acesse:

Cadastrar seu Site/Blog em 321 buscadores de uma vez só

Agora começa a parte mais estressante que é divulgar seu blog em diretórios de sites para quer ele seja visto em vários países, como são muitos vou dar dicas de 5 em português e 5 em inglês:

Em Português Em Inglês

O próximo passo agora é fácil que é divulgar a notícia no momento em que você publicar, para divulgar vamos usar os chamados agregadores de links que estão em alta na blogosfera, abaixo você verá alguns dos agregadores mais utilizados:

Pronto com todos esses passos seu blog já está pronto para receber muitas visitas e quem sabe ser famoso :-)

Exibindo Caixa de Alerta ao Se Clicar Em Um Link

2010-02-17T21:32:00.001-02:00

Java Script sempre facilitando sua vida!

Este alerta para links, é legal para um menu onde se encontra links para páginas com conteúdo que não são permitidos para menores de 18 anos, ou até mesmo para exibir uma saudação para o usuário, este código é feito em JavaScript, o que pode causar um pouco de "lentidão" em sua página. Cuidado para não inserir muito destes códigos para não irritar o leitor. Veja abaixo como fazer:

Modo de Fazer

1) Faça login no blogger (blogger.com)
2) Escolha o local que deseja inserir um link, ex: Postagem, Gadget HTML/JavaScript
3) Basta fazer um link comum e adicionar o trecho (atributo) em vermelho olhe a Obs:

<a onClick="alert('Voc&ecirc; est&aacute; indo para a p&aacute;gina 2. Voc&ecirc; pode mudar esta mensagem de acordo com os seus prop&oacute;sitos')" href="http://www.noticiaeblog.com">Link comum</a>

Obs: O trecho em laranja é a mensagem que deve ser exibida ao clicar no link, mas lembre-se os acentos devem ser codificados em HTML. Uma dica para codificar use este site.

Demo

Veja este demo que fiz, basta clicar:
Demo

Extensão do Google Buzz para Navegadores

2010-02-14T11:59:00.017-02:00

Hoje venho apresentar mais dois complementos para facilitar a sua utilização do novo serviço do Google, esses complementos vem para ajudar você a usar o Buzz de forma que não tenha que ficar acessando o Gmail para ver se você tem novos Buzz.

1ª Extensão para Google Chrome

Está extensão Chrome Buzz para o navegador do Google exibe de forma dinâmica os seu ultimos Buzz e os de seus amigos. Para instalar acesse este link.

Está outra extensão chamada Chrome Buzz Pad, permite com um clique enviar site, para o Google Buzz. E ainda exibe seu últimos Buzz e de seus amigos/seguidores.Instalar

Está extensão chamada Google Buzz Checker mostra apenas quantos Buzz você tem novos. Instalar

2ª Extensão para o Mozilla Firefox

Simples extensão que permite mostrar seu status no Google Buzz via navegador. Instalar

Pronto com essas simples extensões você pode se comunicar de forma simples sem ter que ficar fixo na página do Gmail. Até a próxima postagem!

Referência: Aext

Widget "Google Buzz it" Envie Suas Postagens Para o Google Buzz - Blogger/Blogspot

2010-02-13T21:22:00.002-02:00

Com o novo sucesso do Google fica fácil divulgar suas postagens, além de ser um serviço novo e ser bem "utilizado ~~ou vai ser~~" ainda pode trazer algumas visitas para seu Blog. Além de ser simples de instalar e bem util pois permite que seus leitores enviem suas postagens para lá com um clique, veja abaixo como ter no seu blog:

1)Acesse o painel do Blogger (blogger.com)
2)Vá em "Layout"->"Editar HTML"->Marque "Expandir Modelos de Widgets"
3)Procure pelo seguinte código:<data:post.body/>e acima dele insira o código abaixo:

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;snippet=&amp;srcURL=&quot; + data:blog.url + &quot;&amp;srcTitle=&quot; + data:blog.title' target='_blank'><img alt='Buzz' src='http://imgur.com/d65Pr.png' style='vertical-align: middle;'/> Buzz it !</a>

Obs: O widget ficará abaixo do título das postagens. Para que fique no rodapé insira abaixo, do código seguinte:<div class='post-footer-line post-footer-line-3'>4)Para transformar o Widget em um botão, apague os trechos em verde e substitua a URL em vermelho por está: http://imgur.com/OnAUL.png
5)Salve as alterações e visualize

Widget Posts Mais Comentados (Novo sem Yahoo Pipes/Blogger)

2010-02-12T11:16:00.001-02:00

Este Widget exibe de forma simples os posts mais comentadas, o diferencial é que ele não usa o Yahoo Pipes, por isso não à estabilidade e nem queda no funcionamento devido a muitos usuários estarem usando ao mesmo. Ele é feito em JavaScript e pode ser inserido em sua hospedagem. Veja Abaixo como tê-lo:

Instalando o Widget

1) Acesse o painel do Blogger (blogger.com)
2)Vá em "Layout"->"Elementos da página"->"Adicionar um Gadget"->"HTML/JavaScript" e como conteúdo insira o seguinte código adaptando de acordo com seu blog:

<div id="popular-posts" align="left">

<script language="JavaScript">

aBold = false;

numposts=300;

maxshowresult=5;

home_page = "http://www.noticiaeblog.com/";

</script>

<script language='javascript' type='text/javascript' src='http://noticiaeblog.googlecode.com/files/maiscomentados2.js'></script>

</div>

Obs: Em vermelho substitua pelo endereço do seu blog. Em verde é para que o texto do Widget fique em negrito, mude para true. Em laranja é a quantidade de posts a ser exibido.

Widget sem o número de comentários

Para que seu widget não exiba o número de comentários, como da imagem abaixo mude o endereço em roxo para este: http://noticiaeblog.googlecode.com/files/maiscomentados.js

Referência: El Escaparate

Denunciar o Plágio Ficou Mais Fácil Ainda

2010-02-11T15:16:00.000-02:00

O Plágio sempre foi o maior medo dos blogueiros de hoje em dia, pois é muito fácil copiar um texto uma imagem e inseri-los em outro site de forma fácil e sem restrição. Mas não é só esse o medo, pois o ladrão de conteúdo não dá créditos para o seu site o que se torna plágio e com isso seu blog perde visitas perde rank perde na pesquisa do Google e ainda pode ser punido por conteúdo duplicado.

Antes não tínhamos nenhuma arma que pudesse controlar isso mais hoje temos que e o próprio Google atual dono do Blogger, você pode escrever para eles e em pouco tempo o conteúdo roubado será excluído do Blog/site ladrão. E agora melhorou pois o formulário está em português o que torna fácil preenche-lo.

Não deixe em pune esse crime denuncie agora e não seja punido.

Fonte: Google
Imagem: Blog dicas

Melhorando a Aparência do Seu Feed/RSS e Ganhando Milhares de Visitas

2010-02-09T19:07:00.003-02:00

O Feed hoje em dia é uma das formas mais fáceis de levar seu conteúdo ao leitor e ganhar mais visitas ele é uma parte muito importante de um blog pois além de levar conteúdo ele ainda informa que o seu blog possui conteúdo novo sem que o leitor tenha que ficar visitando o seu blog várias vezes ao dia para ver se tem algo interessante. Para que seu Feed seja uma fonte de visitas ele tem que ser bem apresentado ou seja bem formulado para que todos os aspectos seja relevantes e bonitos, bem hoje eu vou ensinar como fazer isso já que o Blogger não possui um sistema de newsletter, o popular sistema de Feed por e-mail é o Feed Burner "Um serviço do próprio Google". Para começar você tem que ter um uma conta Google pois o site utiliza ela como autentificação, ok! Vamos começar:

Se cadastrando no Feed Burner

1º Acesse o site do Feed Burner, faça login com sua conta do Google.
2º Clique em Languages no canto superior direito, selecione Português.
3º Agora onde está escrito "Queime um feed agora mesmo. Digite o endereço do seu blog ou feed aqui:" você deverá digitar o seguinte: http://endereço-do-seu-blog/feeds/posts/default, exemplo: http://www.noticiaeblog.com/feeds/posts/default. Após fazer isso clique em "Continuar"
4º Nesse passo pedirá para você escolher um titulo para o Feed, digite no espaço Feed Title, exemplo: "Blog Portal". Depois no espaço Feed Address, digite um nome que ficará no endereço do seu Feed. Agora clique em "Próximo".
5º Agora você verá em azul a URL do seu Feed pronto copie ela pois nós precisaremos. Clique em "Próximo".
6º Selecione todos os itens, lá no site aqui é só ilustração e clique em "Próximo":
Clickthroughs — How often people click items back to your site
In order to track item clickthroughs, we redirect all links in your feed through FeedBurner. If you want us to leave your links untouched, leave this option unchecked.
Item enclosure downloads (podcast downloads)
I want more! Have FeedBurner Stats also track:

Individual item views and resyndication — Popularity of individual items
Reach — Number of people who viewed or clicked the content in your feed

Otimizando o Feed

Senão aparecer os itens abaixo clique lá no menu a opção publicar:

7º Clique em BuzzBoost e clique em ativar.
8º Clique em Email Subscriptions e clique em ativar.
9º Clique em PingShot e clique em ativar.
10º Agora você verá algumas opções abaixo de Email Subscriptions, clique na segunda que é Communication Preferences, ai você deve modificar e-mail do remetente, coloque o e-mail que você usa para receber contatos do seu blog. Modifique o assunto insirá um assunto parecido com este "Ative sua assinatura de Feed/RSS: Notícia e blog (noticieblog.com)" lembre-se de que este é o assunto do e-mail de confirmação de recebimento do Feed, é um e-mail que o leitor recebe ao assinar seu Feed. Agora em Corpo do e-mail de confirmação insira o seguinte, adaptando de acordo com seu blog:

Seja bem vindo,



Você recentemente assinou o Feed/RSS do blog Notícia e blog (noticiaeblog.com), para confirmar sua inscrição peço que clique no link abaixo:



 ${confirmlink}



(Se o link acima não aparece clicável, ou não abrir uma janela do navegador quando você clique-lo, copie e cole na barra do seu navegador.)

Obs: Modifique o trecho em vermelho ao seu gosto. O trecho em verde é uma variável que define o link do e-mail de confirmação. Após fazer as alterações clique em "Salvar".

Adaptando seu blog ao Feed Burner

1)Acesse o painel do Blogger (blogger.com)
2)Vá em "Configurações"->"Site Feed"
3)Você verá um trecho chamado Permitir feeds do blog, você deverá selecionar Completa.
4)Agora em URL de redirecionamento de feed, você deve inserir a URL do Feed aquele que eu pedi para você copiar no 5º passo.
5)Clique em Salvar configurações
6)Agora vá em "Layout"->"Elementos da página"->"Adicionar um Gadget"->"HTML/JavaScript", como conteúdo insira o código seguinte modificando-o com suas informações de Feed:

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FernandoPasse', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Digite seu e-mail:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="FernandoPasse" name="uri"/><input type="hidden" name="loc" value="pt_BR"/><input type="submit" value="Confirmar" /></form>

Obs: Substitua os itens em laranja pelo nome de Feed Address, que você escolheu no 4º passo.
7)Salve e veja.
O resultado é um formulário como este abaixo:
Ou se preferir pode criar apenas um link da seguinte forma:<a href="http://feedburner.google.com/fb/a/mailverify?uri=Fernandopasse&loc=pt_BR">Assine o nosso Feed</a>Obs: Substitua pelo Feed address que você escolheu no 4º passo
O resultado será este abaixo:
Assine o nosso Feed

Pronto você tem um Feed pronto e totalmente otimizado!

Formulário de contato para Blogger (Novo)

2010-02-05T19:10:00.000-02:00

Andando pela internet encontrei mais um serviço de formulário de contatos excelente. Além das funções de formulário ainda permite ainda que você adicione um espaço para o usuário enviar fotos e imagens, possui templates, receber pagamentos, etc. O único ruim deste formulário é que ele tem um limite de contatos a ser recebido por mês que é de 100 contatos o espaço para upload de imagens é de 10Mb. Mas se você quiser pode contratar a versão premium do serviço que custa cerca de R$16,95.

Para fazer o seu formulário é simples acesse o site Jot Form faça o cadastro gratuito e depois faça o seu formulário de forma interativa sem a necessida de edição de código HTML. Este mais um dos excelentes serviços encontrados pela internet.

iPad - Netbook ou Tablet?

2010-02-03T15:36:00.000-02:00

O iPad foi mais o mais novo lançamento da Apple, que surpreendeu a todos com seu designe e tecnologia. O aparelho se assemelha ao iPhone, por ter as mesmas características como tela touch screen e menu com Gadgets, além de possuir conexão Wifi.

Os contras que eu percebi pela Internet sobre o aparelho foi a falta de entradas USB e pouca memória, 16Gb, 32Gb e 64Gb. Mas a intenção foi concentrar todas as funções de um Netbook ao tablet, e foi isso que vemos pois o Netbook não possui muita memória é serve para o uso em pequenos trabalhos como acesso a Internet, edição de textos, o diferencial é que ele possui entradas USB. Mas mesmo sem conexões externa podemos passar arquivos para o aparelho pela própria Internet.

Um dos prós é que ele possui um teclado virtual de tamanho quase real que possibilita uma portabilidade ao aparelho pois não necessita de teclado físico. O aparelho ainda possui uma loja de programas que supri todos as necessidades do usuário. E o melhor com ele não há necessidade de formatação muito menos de backup de arquivos pois o aparelho foi feita para usuários leigos, por isso possui uma interface intuitiva e fácil.

O iPad pesa cerca de 700 gramas e 1,2 centímetros de espessura. Possui uma tela tátil de 9,7 polegadas e uma bateria com duração média de 10 horas. O aparelho mais barato da serie custará US$ 499 cerca de R$915,16 e o mais caro custará US$ 699 cerca de R$1.281,96. Então ficamos assim, na expectativa de um dia ter este aparelho em nossas mãos.

Template Recorte - Blogger

2010-02-01T21:08:00.002-02:00

Demo | Download

Mais um template com a qualidade Notícia e blog, neste template eu busquei a simplicidade das curvas, e velocidade de indexação por buscadores. Veja todos os benefícios:

Tags otimizadas
Titulo otimizado
Artigos Relacionados com imagem
Corrigido o erro "0 comentárioS" e "1comentárioS"
Imagem nos comentários.

Instalação

Faça o download do template, salve.
Acesse "Layout"->"Editar HTML"-> Clique em escolher arquivo "Informe o local onde você salvou o template" e clique em fazer upload. Descida se vai manter ou não seu widgets anteriores e pronto.

Ajustando a lista de links

1)Acesse "Layout"->"Editar HTML"-> Utilize "Ctrl" e "F" para procurar o código seguinte:

<div id='menu'>

<ul>

<li><a href='http://.../'>Início</a></li>

<li><a href='http://.../'>Sobre</a></li>

<li><a href='http://.../'>Contato</a></li>

</ul>

</div>

Obs: Substitua o trecho http://.../ pelo link que deseja. Substitua o trecho em verde pelo nome dos respectivos links salve e visualize.

Atenção não retire os créditos

Greet Box - Exiba uma Mensagem Diferente para Cada Origem de Visitante (Blogger)

2010-01-31T18:12:00.002-02:00

Este script é muito legal pois ele exibe uma mensagem diferente para cada origem do visitante, ex: visitante do Google, ele exibirá a seguinte mensagem: "Bem vindo, visitante do Google! Se você achou esta página útil, não esqueça deSubscrever-se em nosso RSS Feed para acompanhar as atualizações."

Ele exibe também para outros sites como feedburner, entre outros mas ainda é necessário a tradução de partes do script ele está disponível para download aqui, basta traduzir e substituir no script. Mas lembre-se de não retirar os créditos do autor original.

Instalação

1)Acesse o painel do Blogger "blogger.com"
2)Vá em "Layout"->"Elementos da página"->"Adicionar um Gadget"-> Selecione a opção "HTML/JavaScript"
3)Insira o seguinte código modificando de acordo com seu blog:

<script src="http://www.yourjavascript.com/20105118173/TextToBeDisplayedDiv-minv3.0.js" type="text/javascript"></script>

<div id="mainDisplayDiv" style="background:#F8F8FF;border:1px solid #B6AFA9;display:none">

<div style="float: right; margin-right: 5px; margin-top: 5px;">

<a href="#" onclick="closeGreetBox('7')">

<img border="0" alt="x" src="http://2.bp.blogspot.com/_8AL-4bHE9zs/S2Xkon-L3yI/AAAAAAAABf8/16Tvfnqv_kY/s1600/closebutton.png" />

</a>

</div>

<div id="dynamicContentDisplayed">

</div>

<script type="text/javascript">

// Give your feed url here

var feedURL = "Url-do-seu-Feed";

var dynamicHTMLText = displayRequiredText(feedURL); document.getElementById("dynamicContentDisplayed").innerHTML = dynamicHTMLText;

</script>

</div>

<script src="http://bloggergreetbox.googlecode.com/files/HideShowDiv-minv3.0.js" type="text/javascript">

</script>

<script type="text/javascript">

showHideDiv();

</script>

OBS: Em vermelhos você pode substituir pelo script totalmente traduzido como foi dito acima. Em verde insira a url do seu Feed.
4)Salve. E veja o resultado.

Uma dica: Para fazer um teste pesquise no google o seguinte termo substituindo é claro pela url do seu link:www.noticiaeblog.com clique em um resultado que redirecionará para seu blog. Veja o que acontece com script.Veja um demo aqui

Referência: Classic Tutorials

Controlando o Número de Postagens Exibidas por Marcador - Blogger

2010-01-29T22:55:00.002-02:00

Este truque é útil, pois a gente as vezes publica em um certo marcador postagens que contém muitas imagens, vídeos, músicas, o que torna a página muito pesada e faz com que a gente perca visitas pois o blog não abre ou abre incompleto, ou seja com imagens faltando com textos sem formatação devido ao carregamento, para fazer a alteração e controlar o número de postagens por marcador do seu blog faça o seguinte:

1)Acesse o painel do Blogger
2)Vá em "Layout"->"Editar HTML"-> Marque a opção "Expandir Modelos de Widgets"
3)Procure pelo seguinte, utilize "CTRL" e "F":
data:label.urlSubstitua pordata:label.url + "?max-results=100"
Obs: Pode haver vários destes trechos, mas lembre-se de que é o primeiro quem vale. O número em vermelho reference ao tanto de postagens que será exibida por marcador.

Imagem por: Progetos Dasy

Mini Navbar para Blogger

2010-01-28T08:11:00.003-02:00

Está Mini Navbar é muito interessante pois ela possui várias funções úteis, como, atualizar a página, ir para o topo e ir para cima. E ainda possui um link para o seu feed o que torna desnecessário o uso da navbar do blogger, possui também a possibilidade de se adicionar a comunidade do Orkut, além disso sua instalação é muito simples veja:

Instalando a Mini Navbar

1)Acesse o painel do Blogger (blogger.com)
2)Vá em "Layout"->"Editar HTML"
3)Procure pelo código abaixo, utilizando as teclas "CTRL" e "F":</body>Acima do código anterior adicione o seguinte:

<style type='text/css'>

<!--

#mininavbar

{

display:scroll;

position:fixed;

bottom:1px;

right:1px;

z-index:99;

}

#mininavbar a

{

filter:alpha(opacity=65);

-moz-opacity:0.65;

opacity:0.65;

border:0;

}

#mininavbar img

{

border:0;

}

#mininavbar a:hover

{

filter:alpha(opacity=100);

-moz-opacity:1;

opacity:1;

}

-->

</style>

<script language='JavaScript'>

    function cima() {

    window.scrollBy(0,20); // velocidade para cima

    scrolldelay = setTimeout(&#39;cima()&#39;,100); // tempo da rolagem

    }



    function baixo() {

    window.scrollBy(0,-20); // velocidade para baixo

    scrolldelay = setTimeout(&#39;baixo()&#39;,100); // tempo da rolagem

    }



    function stopScroll() {

    clearTimeout(scrolldelay); // para o rolar ao tirar o cursor do link

    }



    </script>

<div id='mininavbar'>

<a href='#' onClick='window.location.reload()' title='Atualizar página'>

<img src='http://imgur.com/mJT3c.png'/></a>

<a href='http://www.noticiaeblog.com/' title='Página principal'>

<img src='http://imgur.com/i9I74.png'/></a>

<a href='http://feeds2.feedburner.com/Noticiaeblog' title='Feed'>

<img src='http://imgur.com/Xzva4.png'/></a>

<a href='http://www.orkut.com.br/Main#Community?cmm=93902414' title='Orkut'>

<img height='16px' src='http://imgur.com/ooCIc.gif' width='16px'/></a>

<a href='' onmouseout='stopScroll()' onmouseover='baixo()' title='Ir para o topo da página'>

<img src='http://imgur.com/uYmkQ.png'/></a>

<a href='' onmouseout='stopScroll()' onmouseover='cima()' title='Ir para o final da página'>

<img src='http://imgur.com/BaWzD.png'/>

</a>

</div>

<a name='finalpg'/>

4)Substitua o código em verde pela url do seu blog, em vermelho pela url da comunidade,em laranja pela url do feed;
5)Salve as alterações e visualize. O resultado será este abaixo: