Criar Sites » Vídeo | Tutoriais

Como fazer um aplicativo/extensão do seu blog para o Chrome – Final

Yure Santana — Sun, 05 Feb 2012 18:57:52 +0000

Este artigo foi escrito pelo colaborador Yure Santana que bloga no Blog Indignado, onde escreve sobre esportes, curiosidades, novelas, noticias, TV, dicas e etc.

Nas duas semanas anteriores nós aprendemos a criar o APP/extensão e a publicá-lo. Hoje nós vamos aprender a dá uma nova funcionalidade ao APP (ou extensão, como preferir). Hoje vamos criar o APP em uma espécie de pop-up com os 10 últimos posts do blog, que si abre em cima de qualquer janela. Veja:

Para dar essa funcionalidade ao seu APP será preciso modificar os arquivos enviados para a Web Store, que já aprendemos na primeira e segunda parte deste tutorial. Então vamos lá.

Primeiro baixe os arquivos necessário neste link. Descompacte o arquivo.

Agora vá na pasta “pages” abra o arquivo “fb.html” com um editor de HTML ou o Bloco de Notas e modifique: “ENDEREÇO-DA-PÁGINA-DO-FACEBOOK” pelo endereço da sua pagina no Facebook.

Na pasta imagens procure pela imagem com o nome “background” e troque por uma de sua preferencia. Recomendamos que use o mesmo logotipo que você usa no seu blog, mas precisa ser no tamanho 368×70 e salve com o mesmo nome.

Abra o arquivo “page-bcf.html” com um editor de HTML ou o Bloco de Notas e modifique, no inicio do código, o titulo do seu blog e no final troque: “URL DO SEU BLOG COM HTTP://” pelo endereço do seu blog com “http://” e “/” no final.

Agora é a hora de configurar o arquivo principal o “manifest.json”. Abra ele com o Bloco de Notas e coloque o titulo do seu blog e a descrição do AP. Se você já enviou um outro APP para a Web Store será necessário modificar também a versão do APP mude de 1.0 para 1.1 e assim sucessivamente se for lançar novas vesões.

No arquivo “feed.html” coloque, com o Bloco de Notas ou outro editor HTML, o titulo do seu blog e troque: “ENDEREÇO-DO-BLOG” pela URL do seu blog SEM “http://” e ao lado troque: “URL DO SEU BLOG COM HTTP://” pelo endereço do seu blog COM “http://”. Lembre-se de trocar o nosso favicon pelo do seu blog.

Depois de fazer todos esses passos bastar compactar o a pasta em ZIP e enviar para a Web Store. Se algo dê errado ao enviar seu APP repita todos os passos com mais atenção e cuidado, mas se mesmo assim o erro persistir relate sua situação nos comentários que faremos o possível para lhe ajudar.

Oportunidade: Se depois de todas as nossa ajuda para você criar seu APP para o Google Chrome você não conseguir criar o seu, nós podemos fazer isso para você, deixamos o APP/extensão ao seu gosto por um preço relativamente baixo.

Podemos fazer tudo para você por apenas R$ 20,00 já incluindo a taxa de publicação na Web Store. Se tiver interessado deixe um comentário nesta pagina expressando seu interesse ou entre em contato pelo e-mail webmaster@blogindignado.com.

Créditos: Todo os código que trabalhamos na produção desse APP foi publicado primeiramente na internet pelo Iago Melanias do Blogando Com Facilidades. No post: Como criar uma Extensão do Google Chrome para um Blog você poderá encontrar mais detalhes sobre a criação de um APP para o Chrome.

Aproveite para baixar o App do CriarSites.com >>>

Este artigo foi escrito pelo colaborador Yure Santana que bloga no Blog Indignado.

Mais Artigos que você pode estar interessado

Como fazer um aplicativo/extensão do seu blog para o Chrome – Parte I

Como adicionar Propagandas em um Site no Wix

Celso Lemes — Mon, 30 Jan 2012 11:00:02 +0000

Está criando um site no Wix e gostaria de ganhar dinheiro com ele? Pois saiba que é possível adicionar propagandas fornecidas por programas de afiliados como é o caso do Google Adsense, Mercado Sócios ou Cursos 24 Horas.

Mas o que é o Wix

O Wix é um serviço que oferece um construtor de sites grátis baseados em Flash, que permite criar um site com aparência profissional, cheio de cores e animações. A administração do site é feita através de um painel de controle online, onde é possível configurar a aparência, editar e adicionar páginas, adicionar textos, imagens e vídeos e etc.

Como adicionar propagandas

Para adicionar qualquer tipo de código HTML ou Javascritp que são utilizados para exibir as propagandas, você deve adicionar um Widget HTML na página. Repare que os passos descritos aqui também podem ser utilizados para adicionar contadores de visitas, botões de redes sociais, chats e etc.

Para fazer isso, posicione o ponteiro do mouse no botão “Adicionar“, em “Widgets” e em “HTML” como mostra a imagem abaixo.

Na nova janela que se abre, clique sobre o botão “Blank HTML“.

Um novo campo HTML será adicionado a página, você deve arrastá-lo até o local em que deseja que a propaganda ou seja lá o que você pretende adicionar a página. Depois clique no link “Configurações” que aparece no menu de navegação do lado direito da página.

Agora é só colar o código do banner no campo “Inserir código HTML“, configurar o tamanho que o widget deverá ter (de acordo com o tamanho do banner) e salvar.

Pronto, seu banner já estará inserido na página. Agora basta publicar as alterações para que os visitantes o vejam.

Ainda não tem um site em Flash no Wix? Clique aqui e crie o seu ou saiba mais lendo o artigo “Crie um site profissional em Flash no Wix“.

Gostou deste tutorial? Ainda tem dúvidas? Deixe um comentário abaixo.

Mais Artigos que você pode estar interessado

Como trabalhar com o editor de conteúdo do Weebly

Celso Lemes — Fri, 27 Jan 2012 21:01:15 +0000

A criação de conteúdo nas páginas do Weebly é feita de uma forma um pouco diferente de outros sistemas , por isso, se você já estiver acostumado com outros serviços de criação de sites, poderá ficar um pouco confuso a primeira vista.

Se você ainda não sabe o que é o Weebly, confira o artigo “Weebly – serviço grátis em Português para criar um site“.

Assim que você criar uma nova página, ela estará pronta para receber o conteúdo, mas antes você precisa decidir como deseja que o conteúdo seja organizado dentro da página. Isso é feito adicionando os elementos que aparecem em cima do editor até o campo de edição de textos.

Confira abaixo uma descrição de cada um deles.

Parágrafo – Permite adicionar somente textos ao editor.

Parágrafo com imagem – Permite adicionar uma imagem que é contornada com o texto a sua volta.

Imagem – Permite adicionar uma imagem sem texto a sua volta.

Youtube video – Permite adicionar um vídeo do Youtube.

Título – Permite adicionar um título destacado. Este recurso é ideal para criar subtítulos dentro da página.

Ler mais Quebra – Este recurso permite adicionar um link escrito “Read more” (Leia mais) que é exibido na página principal do blog e das categorias, desta forma, o leitor somente verá um pequeno trecho do texto e caso ele queira ler o restante, basta ele clicar sobre o link.

Multiple Columns – Permite dividir um campo em duas ou mais partes, de forma a adicionar outros elementos separadamente, um do lado do outro. Este recurso é útil por exemplo, para adicionar texto de um lado e publicidade de outro ou mesmo um grupo de imagens, um em cada espaço disponível.

Google Adsense – Permite adicionar publicidades do Google Adsense a página.

Para adicionar um elemento ao editor, basta clicar e segurar o botão do mouse e arrastar até o local desejado dentro da página. Você poderá adicionar quantos campos forem necessários, que vão sendo alinhados verticalmente, um após o outro.

Confira um exemplo abaixo.

No exemplo acima, eu adicionei um campo “Parágrafo com Imagem“, seguido por um “Read More” e uma “Imagem“. Repare que um campo não ultrapassa os seus limites. Você não poderia por exemplo, adicionar o Read more dentro do campo Parágrafo com imagem. Ele teria que ser adicionado abaixo ou acima.

Depois que adicionar um elemento qualquer na página, você deve clicar sobre ele para começar a editá-lo.

Ainda não tem um site no Weebly? Clique aquie crie o seu agora mesmo.

Gostou deste artigo? Então deixe um comentário e/ou divulgue nas redes sociais.

Mais Artigos que você pode estar interessado

Como criar uma nova Página Otimizada no Weebly

Celso Lemes — Fri, 27 Jan 2012 12:39:29 +0000

O Weebly é um construtor de sites que permite criar e gerenciar um site completamente através do navegador de Internet. Tudo é feito através de um painel de controle online, onde é possível customizar a aparência, criar e editar páginas, adicionar textos, imagens e vídeos e etc.

Se você ainda não sabe o que é o Weebly, confira o artigo “Weebly – serviço grátis em Português para criar um site“.

Vendo que muitas pessoas tem tido problemas para trabalhar com o construtor de sites do Weebly, eu decidi criar alguns artigos ensinando como trabalhar melhor com o Weebly e neste primeiro artigo, vamos aprender como criar uma nova página ou blog em seu site.

Para começar, acesse o painel de controle de seu site, clique na aba “Páginas” que aparece na parte superior do construtor, em seguida no botão “Add Page” ou “Add Blog” (para adicionar um blog) e para finalizar, adicione um nome para sua página e clique em “Guardar definições“.

SEO

Depois de adicionar a página ao seu site, você ainda pode fazer mais algumas configurações para melhorar o desempenho dela nos mecanismos de busca. Para fazer isso, clique novamente na aba “Páginas“, selecione a página que deseja customizar e clique em “Definições avançadas” como mostra a imagem abaixo.

Uma nova janela surgirá, onde é possível adicionar um título da página, descrição e palavras-chave (meta tags). Confira a imagem abaixo que mostra uma configuração que eu fiz para mostrar de exemplo.

Depois de pronto, é só clicar em “Guardar definições” e adicionar conteúdo a página. Ainda não tem um site no Weebly? Clique aqui e crie o seu agora mesmo.

Gostou deste artigo? Então deixe um comentário e/ou divulgue nas redes sociais.

Mais Artigos que você pode estar interessado

Como fazer um aplicativo/extensão do seu blog para o Chrome – Parte I

Yure Santana — Sun, 22 Jan 2012 11:00:18 +0000

Este artigo foi escrito pelo colaborador Yure Santana que bloga no Blog Indignado onde escreve sobre esportes, curiosidades, novelas, noticias, TV, dicas e etc.

Algo fundamental para um blogueiro que quer fazer sucesso na blogosfera é: Levar o conteúdo do seu blog até o visitante, e não esperar que o visitante vá até seu conteúdo. É como diz aquele velho ditado: “Se Maomé não vai à montanha. Montanha vai a Maomé”.

E é justamente isso que irei ensinar hoje, claro que, levar o conteúdo do seu blog ao visitante não se resumi apenas nessa técnica, mas em várias outras que irei ensinar futuramente. Hoje vamos aprender a fazer um aplicativo/extensão do seu blog para o navegador Google Chrome, que já é um dos navegadores mais usados na atualidade.

Para entender um pouco o que é um aplicativo (ou extensão) do Chrome recomendo a leitura de um artigo do Gustavo Freitas publicado no GF Soluções: Já conhece a Chrome Web Store?.

Nesse primeiro artigo iremos aprender somente o básico, que é a parte estrutural do aplicativo e no próximo domingo iremos aprender os demais detalhes.

1ª passo: Abra o Bloco de Notas do Windows e digite:

{

“name”: “Blog Indignado”,

“description”: “Dicas, notícias, esportes, entretenimento e novelas, agora no Chrome. Informações de montão e diversão garantida.”,

“version”: “1.0″,

“icons”: {

“128″: “128.png”

“app”: {

“urls”: [

"http://www.blogindignado.com/"

“launch”: {

“web_url”: “http://www.blogindignado.com/”

}

“permissions”: [

"unlimitedStorage",

"notifications"

]

}

Agora edite o código:

Em “name” está: Blog Indignado. Mude para o nome do seu blog ou para o nome do seu aplicativo.

Em “description” coloque uma breve descrição do seu blog ou do seu aplicativo. Mas atenção não pode ser mais do que 132 caracteres.

Mude a URL do Blog Indignado (http://www.blogindignado.com) pra o endereço do seu blog. E por fim repita o endereço do seu blog em: “web_url“.

Agora crie uma pasta (em seu computador. Obvio!) com o nome “aplicativo”. Salve o código do Bloco de Notas na pasta com o nome “manifest.json” e codificação “UTF-8”. Cuidado para não salvar “manifest.json.txt”. Veja:

2º Passo: Crie um ícone, que será usado na visualização do seu aplicativo. Use um ícone que tenha haver com o seu blog/site. A imagem precisar ser no tamanho 128X128, no formato PNG e de preferencia transparente. Salve a imagem na pasta “aplicativo” (que você criou anteriormente) com o nome “128”.

3º Passo: Compacte a pasta no formato ZIP. Veja:

Por hoje é só. Domingo que vem, iremos aprender a publicar o aplicativo e a inserir os últimos detalhes.

Este artigo foi escrito pelo colaborador Yure Santana que bloga no Blog Indignado.

Mais Artigos que você pode estar interessado

Como fazer um aplicativo/extensão do seu blog para o Chrome – Final

Como adicionar vídeos do Youtube em sites criados no Webnode

Celso Lemes — Mon, 09 Jan 2012 12:30:02 +0000

O construtor de sites do Webnode permite adicionar diversos tipos de scripts ao conteúdo das páginas, como é o caso de contadores de visitas, chats, jogos e também vídeos do Youtube.

Se você criou ou pretende criar um site no Webnode e gostaria de adicionar vídeos para deixar o seu conteúdo mais atrativo para os visitantes, confira este tutorial que ensina como proceder.

Como adicionar um vídeo do Youtube no Webnode

A primeira coisa que você precisa fazer é acessar o site do Youtube e encontrar o vídeo que deseja adicionar em seu site. Abaixo do vídeo, você deve clicar no botão “Compartilhar” e em “Incorporar“.

Em seguida marque a opção “Usar código de incorporação antigo” e selecione o tamanho desejado para o vídeo. Feito isso é só copiar o código do vídeo que aparece em azul.

Com o código do vídeo, acesse o painel de controle de seu site no Webnode e inicie uma nova página ou edite uma página existente. Depois que abrir o editor de conteúdo do Webnode, clique sobre a pequena setinha que aparece do lado direito e em seguida em “<> Fonte“.

Agora é só colar o código do vídeo do Youtube no editor no local desejado e Publicar ou Salvar para continuar editando o conteúdo.

Ainda não tem um site no Webnode? Clique aqui e crie um agora mesmo ou saiba mais no artigo “Webnode – Construtor de Sites Grátis sem Propaganda“.

Vídeo Tutorial

Também preparei um pequeno vídeo tutorial ensinando os passos descritos acima.

Gostou deste tutorial? Deixe um comentário e/ou divulgue nas redes sociais.

Mais Artigos que você pode estar interessado

Como Instalar o WordPress em Servidores com Cpanel

Celso Lemes — Fri, 09 Dec 2011 10:40:33 +0000

O WordPress é um sistema de gerenciamento de blogs de distribuição gratuita mais utilizado entre os blogueiros profissionais (o Criar Sites foi feito com ele), que permite criar blogs incríveis.

Vendo que muitas pessoas tem problemas para instalá-lo, eu decidi preparar esta vídeo aule em que eu mostro como instalar ele em um servidor equipado com um painel de controle Cpanel, no entanto o vídeo serve de base para a instalação da plataforma em qualquer tipo de servidor.

Para baixar o pacote de instalação do WordPress, clique aqui.

Para publicação dos arquivos foi utilizado o programa FileZilla.

Confira o vídeo

Gostou desta vídeo aula? Então deixe um comentário e/ou ajude a divulgá-lo na Internet.

Mais Artigos que você pode estar interessado

Tutorial para criar um Blog no Webnode

Celso Lemes — Mon, 28 Nov 2011 11:00:38 +0000

O Webnode é um excelente serviço de criação de sites que permite administrar o site e gerir todo o conteúdo através de um painel de controle online muito completo, sem a necessidade de ter conhecimentos avançados sobre a área.

Mas além de permitir criar sites, o Webnode também permite criar blogs que funcionam em conjunto com o site, para a publicação de artigos de forma fácil e prática, além de receber comentários dos visitantes.

Saiba mais sobre o Webnode lendo o artigo “Webnode – Construtor de Sites Grátis em Português“.

Nota
Lembrando que a criação de um blog no Webnode somente é possível quando se escolhe a opção “Blogue” durante a criação do novo projeto, não sendo possível adicionar o blog em sites já prontos (pelo menos eu não consegui adicionar).

Como criar um blog no Webnode

Se você também deseja criar um blog no Webnode, crie uma nova conta ou caso já tenha, acesse sua atual conta e digite o endereço desejado para seu novo site/blog. Caso o endereço esteja disponível, clique em “Registre-se e crie seu site“.

Na página seguinte escolha a opção “Sites Pessoais” (que é o plano totalmente de graça), digite um nome para o site, um slogan e selecione o idioma. Lembrando que estas configurações podem ser alteradas posteriormente.

No próximo passo escolha o template que mais lhe agrada, mas lembrando que ele também pode ser alterado a qualquer momento.

Por último você deve escolher as páginas que deseja que seu site contenha. Lembre-se de marcar a opção “Blogue” neste passo, porque não será possível adicionar esta opção posteriormente.

Clique no botão “Finalizar” para ser redirecionado ao painel de controle onde poderá começar a trabalhar em seu site.

Como escrever posts em seu novo blog

Para adicionar um novo post em seu blog, clique sobre o link Blogue que aparece no menu de navegação (a posição deste link vai depender do template escolhido) e na nova página clique sobre o pequeno botão que aparece no canto esquerdo superior da área em que os posts devem aparecer.

Gostou deste tutorial? Então deixe um comentário e/ou divulgue nas redes sociais.

Mais Artigos que você pode estar interessado

WordPress – Plataforma Gratuita de Criação de Blogs

Cadastre o Feed de seu site no Webnode no FeedBurner

Celso Lemes — Mon, 14 Nov 2011 11:00:08 +0000

Se você tem um site criado com o construtor de sites do Webnode, poderá utilizar o FeedBurner para gerenciar o RSS Feed e assim saber dados como quantas pessoas estão acompanhando seu site pelo feed, artigos mais lidos, cliques e etc.

Eu descobri que o cadastro no FeedBurner era possível recentemente, após (em um momento de ociosidade) olhar o RSS Feed do meu site e decidir fazer um teste, pois até então eu achava que o FeedBurner somente aceitava o cadastro de blogs.

Mas o que é o Webnode

Para quem não sabe, o Webnode é um serviço de criação de sites que permite criar sites fantásticos através de um construtor de sites online, onde é possível configurar a aparência, criar e editar páginas, adicionar vídeos, imagens entre outros, sem a necessidade de ter conhecimentos avançados sobre a desenvolvimento de websites.

Como descobrir o endereço de seu Feed

Você deve cadastrar o endereço feed dos artigos que são publicados em seu site no Webnode. Para descobrir ele, clique sobre o botão RSS que aparece na barra superior de seu site.

Em seguida o Webnode irá fornecer todos os endereços feed disponíveis. No meu caso, eu também tenho a opção de cadastrar apenas o Feed dos artigos que são publicados no meu site, que foi a que eu escolhi para cadastrar no FeedBurner.

Escolha o endereço feed que você acha melhor para cadastrar no FeedBurner e copie o endereço URL.

Como cadastrar o feed no FeedBurner

Para começar, é necessário que você tenha uma conta ativa no FeedBurner, que pode ser feita utilizando uma conta qualquer do Google, como o Gmail, Orkut ou Google Mais ou caso ainda não seja um usuário dos serviços do Google, poderá criar uma nova conta gratuitamente.

Depois de acessar o painel de controle do FeedBurner, role a página até o final e cole o endereço feed no campo “Burn a feed right this instant” e clique em “Next“.

Na próxima página dê um nome sugestivo para o seu novo endereço Feed e clique em “Next“.

No meu caso eu escolhi a palavra “criarsiteswbnd” para o meu feed, que passou a ser http://feeds.feedburner.com/criarsiteswbnd

Feito isso o seu novo endereço Feed já estará pronto, mas você poderá adicionar algumas funções extras seguindo o assistente.

O que você tem que fazer agora é indicar o endereço fornecido pelo FeedBurner aos visitantes. Desta forma você poderá saber como os visitantes estão acessando o seu conteúdo pelo Feed.

Como configurar seu site

Agora que você já tem um endereço feed do Feedburner, você precisa alterar o feed padrão de seu site para que o FeedBurner possa contabilizar todos os leitores.

Para fazer isso, acesse o painel de controle de seu site, clique sobre a pequena setinha que aparece embaixo do botão “Configurações“, em “RSS e Favoritos” e em “Configurar RSS”.

Na nova janela que aparece, selecione a opção “Artigo completo“, adicione uma mensagem a ser exibida no rodapé de cada postagem e cole o endereço Feed fornecido pelo FeedBurner em “Todos os artigos” e em qualquer outro campo existente.

O que fazer agora

Para aumentar o número de pessoas cadastradas no seu feed, você pode adicionar um botão do RSS Feed no menu de navegação, adicionar uma caixa de cadastro no sistema de newsletter e pode adicionar uma janela popup para captar endereço de emails.

Gostou deste tutorial? Então divulgue nas redes sociais, deixe um comentário e não se esqueça de se cadastrar no Feed do CriarSites.com

Mais Artigos que você pode estar interessado

Customize a Newsletter de seu Blog no FeedBurner

Celso Lemes — Wed, 12 Oct 2011 13:57:08 +0000

Recentemente uma amiga me perguntou como editar o título dos emails que são enviados pelo Feedburner, o que foi uma surpresa para mim, já que não fazia ideia de que isso era possível e nem de como proceder.

O problema é que por padrão, o Feedburner envia os boletins tendo como assunto o nome do site, o que não é nada chamativo para os leitores que sempre veem o mesmo assunto em todos os boletins. No caso do CriarSites.com, o boletim sempre vinha com o texto “Criar Sites” no assunto de todos os emails como mostra a imagem abaixo.

Fuçando um pouco no painel eu descobri como fazer a alteração, que agora exibe o nome do título do post + Criar Sites. Confira a imagem abaixo.

Como Customizar a newsletter

Para editar o título dos boletins enviados pelo Feedburner, você precisa acessar o painel de controle, clicar em “Publicize“, em “Email Subscriptions” e em “Email Branding“.

No campo “Email Subject/Title” adicione o código:

${latestItemTitle} Nome de seu Blog

E em “Logo URL“ adicione o endereço completo de onde se encontra seu logotipo.

Você também tem a opção de customizar a fonte, cor da fonte e cor do fundo dos emails. No meu caso eu deixei na configuração padrão, mas isso fica a seu critério. Só tome cuidado para não escolher uma combinação que torne difícil a leitura do texto.

Dica extra

Você também pode traduzir o texto com o link de ativação que é enviado para os visitantes que acabaram de se cadastrar na newsletter. Para fazer isso, ainda no campo “Email Subscriptions“, clique em “Communication Preferences” e traduza o texto de acordo com as suas preferências.

Se você não souber o que colocar na caixa “Confirmation Email Body“, adicione o seguinte texto que eu traduzi.

Olá,

Recentemente você se cadastrou no boletim de novidades do CriarSites.com.
Para que o sistema possa enviar emails para você, é necessário que você ative o seu cadastro. Para fazer isso, clique no link abaixo: Não é vírus!

${confirmlink}

(Se o link acima não for clicável, copie o link e cole em seu navegador e aperte “Enter“.)

Nota
A dica de personalização do boletim de novidades no Feedburner foi enviada por Silvia do blog Japão em Foco.

E se você ainda não está recebendo as novidades do CriarSites.com, cadastre-se aqui.