English Spain Français Deustsch Italiano Japan Russia Korea
Get this Widget by inWEBblog

Texto tachado (riscado) usando imagem

julho 28, 2009 Comente este artigo!: 1
Meus internéticos queridos leitores, já postei aqui sobre texto tachado riscado usando a tag <strike> </strike>. Agora,apresento uma forma diferente, e super fácil, de conseguir este mesmo efeito, só que usando uma imagem.

O efeito que se obtém consegue é igual ao visto neste trecho pequeno parágrafo de texto. Super bacana legal, né verdade?

Pois bem, isso é muito fácil de conseguir. São apenas 2 passos. Vamos a eles?!...

Passo 1: Logado no Painel do Blogger, vá a LAYOUT > Editar HTML (Não marque Expandir modelos de widgets) e insira o código abaixo, logo antes da tag </head> e salve suas alterações:

<style type='text/css'>
strike {text-decoration:none; background:transparent url(url_da_imagem) repeat-x left 55%}
</style>

Não esqueça de substituir o texto em LARANJA, pelo url da imagem escolhida.

Passo 2: Agora, toda vez que você quiser "riscar/tachar" um texto, basta usar a tag <strike> </strike>, colocando a palavra ou o bloco de texto a ser "riscado/tachado" entre a abertura (<strike>) e o fechamento </strike> da tag.

<strike>Escreva seu texto AQUI, dentro da Tag!</strike>

Seu texto será apresentado desta forma:

Escreva seu texto AQUI, dentro da Tag!

Note, porém, uma outra diferença: No post anterior, dizíamos que tanto faz usar a tag <strike> </strike> como, simplesmente, <s> </s>! Neste caso, usando-se a imagem, ele só será exibido desta forma com a tag completa (<strike> </strike>). Por qual motivo, juro, eu ainda não compreendi!

Assim, após a inserção do código de estilo (Text/CSS) você poderá usar ambos os estilos: SEM IMAGEM, usando simplesmes <s> </s> ou COM IMAGEM, usando a tag completa (<strike> </strike>), conforme você pode ver neste post.

Para facilitar sua vida, caso decida usar este efeito, utilize as imagens (em diversas cores e estilos) abaixo. Basta copiar o url da imagem  que quiser, conforme o layout de seu template, o substituir no estilo CSS (em laranja, acima):








Você poderá, ainda, criar suas próprias imagens, a seu gosto. Um tamanho razoável é 100 x 5 pixéis. Como ela se repete, qualquer que for o tamanho do bloco de texto, este será devidamente tachado!

Este efeito foi postado, há muito tempo, pelo Blog Bazar e repostado pelo excelente EL ESCAPARATE DE ROSA, que recomendo, fortemente, uma leitura!

Pronto! Fácil, não?!...



GOSTOU DESTE ARTIGO? ENTÃO ASSINE O RSS FEEDS DO BLOG. É GRÁTIS!
Ficaria, também, muito honrado com um COMENTÁRIO seu sobre este Post.


Continue Lendo...

bX-kcaau0 – Erro ao postar no blogspot

julho 03, 2009 Comente este artigo!: 1
"Não consigo postar no blog! O que fazer?" Ora, vem aqui no inWEBblog, claro!...

Ultimamente tenho recebido muitos pedidos de amigos sobre este erro. Dizem, os reclamantes que, ao tentarem postar recebem a mensagem de erro citado (Error Message: bX-kcaau0) no título deste post.

Como acreditamos que este problema não seja, apenas, de meus amigos, mas de muitas pessoas, vamos corrigir este ERRO, facilmente!

Primeiro, acesse sua conta no Blogger e vá a PAINEL > CONFIGURAÇÕES > FORMATAÇÃO > MODELO DE POSTAGENS e tente SALVAR CONFIGURAÇÕES. Provavelmente você receberá uma mensagem de erro, na parte superior, mais ou menos assim:

EXISTEM ERROS NESTE FORMULÁRIO
Corrija os erros listados abaixo e envie novamente.

E um aviso, lá em baixo, acima de SALVAR CONFIGURAÇÕES, com termos parecidos com este:

Seu HTML não pode ser aceito: Tag is not closed: <span id="fullpost">

É que você configurou algum modelo de postagem e não abriu e fechou corretamente as tags e, por um descuido do Blogger, este erro "passou"! Basta corrigir este pequeno erro, corrigindo as tags ou limpando totalmente os modelos de postagens, e SALVAR CONFIGURAÇÕES, novamente. Se estas forem devidamente salvas, pode voltar às suas postagens, tranquiilamente.

Pronto! Fácil, não?!...


GOSTOU DESTE ARTIGO? ENTÃO ASSINE O RSS FEEDS DO BLOG. É GRÁTIS!
Ficaria, também, muito honrado com um COMENTÁRIO seu sobre este Post.

Continue Lendo...

LEIA MAIS - EFEITO EXPANDIR/OCULTAR TEXTO

maio 09, 2009 Comente este artigo!: 6
Existem vários “estilos” de Leia Mais..., Ler Mais..., Continue Lendo... ou da forma que você quiser chamar. Inclusive o utilizado neste blog, que divide o texto, automaticamente, a partir de um determinado número de caracteres, mas neste post vamos aprender um estilo diferente, com efeito slide, usando o JQUERY.

A implementação deste processo é bastante simples, com a inclusão de apenas duas (2) linhas no código de seu template, para a chamada da biblioteca JQuery, e o inicializador do evento (Start).

Vamos começar?

Passo 1: Logado no Painel de seu Blogger/Blogspot, vá a LAYOUT, Editar HTML (Não é necessário Expandir Modelos de Widgets!) e localize (Use CTRL + F) a linha de código <head>.

Passo 2: Copie as duas (2) linhas de código a seguir e cole logo abaixo dela:

<script src='http://dl.getdropbox.com/u/814038/jquery.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/814038/start.js' type='text/javascript'/>

Passo 3: Salve seu template!

Agora, quando você for escrever um post, no modo EDITAR HTML, basta usar o seguinte esquema:

Início do Post
<div id="maisinfo">
Restante do Post. (Este bloco de texto ficará oculto)
</div>

DICA: Para facilitar seu trabalho, copie este código e vá a CONFIGURAÇÕES > FORMATAÇÃO > MODELO DE POSTAGEM e cole-o na caixa de texto, depois é só SALVAR CONFIGURAÇÕES, que toda vez que você for fazer um post este código já estará à sua disposição.

O resultado final é este!...

Que tal, gostou desta dica?!...

Mas vejamos, agora, alguns pontos importantes:

Os arquivos (.js) que você está usando (nas duas linhas adicionadas ao seu template) apontam para meus arquivos pessoais. O ideal é que você baixe estes arquivos e hospede-os em seu próprio site de hospedagem. Se você não tem um, ou não sabe como fazer isto, eu recomendo que você leia este post sobre o Dropbox, que eu recomendo firmemente.

Feito isto, copie a url dos mesmos e substitua as inseridas no seu template, que deverá manter a seguinte estrutura:

<script src='url_de_ seu_arquivo_jquery.js' type='text/javascript'/>
<script src='url_de_ seu_arquivo_start.js' type='text/javascript'/>

Para baixar os arquivos citados acima, clique nestes links: jquery.js e start.js.

Caso ocorra ruptura do link do JQuery, como por força do lançamento de uma nova versão, por exemplo, acesse o site (clicando aqui!) e faça o download do referido arquivo.

O arquivo start.js (que dispara o evento) está configurado para ecrever, no local onde você colocou <div id="maisinfo">, a expressão Ler [+] / Ocultar [-], mas você poderá substituí-la por qualquer outra de seu agrado. Para tanto, basta abrir o arquivo start.js no Bloco de Notas (Notepad) do Windows e alterar esta parte citada, TENDO O CUIDADO DE, AO SALVA-LO, USAR OS SEGUINTES PASSOS: ARQUIVO>SALVAR COMO>SALVAR COMO TIPO: TODOS OS ARQUIVOS, PARA QUE SEJA MANTIDA A EXTENSÃO .JS!

Pronto! Fácil, não?!... 



GOSTOU DESTE ARTIGO? ENTÃO ASSINE O RSS FEEDS DO BLOG. É GRÁTIS!
Ficaria, também, muito honrado com um COMENTÁRIO seu sobre este Post.


Continue Lendo...

Escala de cores hexadecimais

maio 02, 2009 Comente este artigo!
Muitas vezes, quando vamos alterar o template de nosso blog, deparamo-nos com um pequeno mas chato problema: Qual o código hexadecimal da cor que queremos usar?

No Widgetbox, dentre muitas outras coisas super interessantes, temos uma ótima solução.

Veja, na escala abaixo, como é fácil definir qualquer cor. Basta clicar e arrastar os dois pequenos círculos abaixo e a cor já é automaticamente mostrada, na caixa "COLOR", com o seu respectivo código.



Fácil, não?!...



GOSTOU DESTE ARTIGO? ENTÃO ASSINE O RSS FEEDS DO BLOG. É GRÁTIS!
Ficaria, também, muito honrado com um COMENTÁRIO seu sobre este Post.


Continue Lendo...

No nofollow: O inWEBblog liberou geral!

abril 14, 2009 Comente este artigo!: 8
Este blog, agora, assumiu uma "nova postura” em relação a alguns detalhes importantes.

Primeiro, liberamos os comentários, que agora não terão mais a MODERAÇÃO. Ou seja, ao comentar neste blog, seu comentário é imediatamente publicado. E SEM CONFIRMAÇÃO de palavras! Afinal, entendemos que nossos leitores não iriam se aproveitar desta facilidade para fazer comentários que pudessem trazer quaisquer problemas para o blog, né verdade?!...

Segundo, mas importantíssimo! Assumimos a postura de blog DOFOLLOW, ou seja, os links em comentários e os backlinks do blog estão livres da restrição “nofollow” utilizada pelo Blogger/Blogspot.

MAS O QUE ISTO QUER DIZER?

Vamos explicar: Por um excesso de zelo, digamos assim, no intuito de evitar os SPAMs em comentários em nosso blog, o Blogger inclui uma linha em nosso código que impede que os mecanismos de buscas “leiam” os links eventualmente deixados nestes comentários. O mesmo ocorre com os backlinks, que são os links que diversas páginas possam ter entre si.

Ora, a não leitura destes links afeta, com certeza, o posicionamento do blog e seu pagerank. E isto, claro, não é nada interessante para nós, pobres bloggers!

Em verdade, o tema está muito longe de uma unanimidade. Alguns são contras, outros a favor, muitos se quedam indecisos, mas este blog resolveu aderir à ação NO NOFOLLOW, do DIRECTORIO DE BLOGS SIN NOFOLLOW, e eliminamos estas linhas. (Veja como fazer isto, mais abaixo). Se isto gerar spam indesejável, podemos voltar atrás, mas não acredito nesta possibilidade.

EM QUE ESTE PROCEDIMENTO AFETA SEU BLOG?

Desta maneira, todo e qualquer comentário postado neste blog será entendido pelo Grande G (Google, claro!) como um link para o próprio blog de quem comentou. E isto, claro, afetará, positivamente, seu pagerank!

É o mínimo que poderíamos fazer, em retribuição à generosa atenção de nossos leitores para com este blog. E todos saem ganhando!...

"Todo comentário postado neste blog será entendido pelo Google como um link para o próprio blog de quem comentou, afetando, positivamente, seu pagerank!"


Assim, doravante, fique à vontade para fazer seus comentários neste blog, SEM moderação, SEM confirmação de palavras e SEM nofollow!

Sobre esta “tendência”, você poder ler mais no link do DIRECTORIO DE BLOGS(...), acima ou clicando aqui. Caso você já tenha entendido o que isto realmente significa para seu blog e queira retirar as linhas que impedem a leitura de seus backlinks, vamos fazer isto agora! É muito fácil...

1. ELIMINANDO NOFOLLOW EM SEUS COMENTÁRIOS

Passo 1: Primeiro, lembre-se de fazer um backup de seu template! Depois, logado no Painel de seu Blogger, vá a LAYOUT > Editar HTML, marque Expandir Modelos de Widgets e procure (Use CTRL + F) pela seguinte linha de código:

<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/></a>

Passo 2: Elimine a parte destacada em AZUL, deixando-a, EXATAMENTE, assim:

<a expr:href='data:comment.authorUrl'>
<data:comment.author/></a>

2. ELIMINANDO NOFOLLOW EM SEUS BACKLINKS

Passo 3: Procure, agora, pela seguinte linha de código:

<a expr:href='data:backlink.url' rel='nofollow'>
<data:backlink.title/></a>

Passo 4: Mais uma vez, elimine a parte destacada em AZUL, tal como feito nos passos anteriores.

É isto! adeus nofollow em seu blog.

Mas não basta só eliminar estas linhas, o ideal é que você insira seu blog, clicando no link a seguir, no DIRECTORIO DE BLOGS SIN NOFOLLOW, e siga as instruções ali contidas, pelo menos no que diz respeito a colocar um pequeno link para o DIRECTORIO(...)!

E BONS COMENTÁRIOS E BACKLINKS, melhorando seu pagerank e o posicionamento de seu blog, nos mecanismos de pesquisas!

Pronto! Fácil, não?!...



GOSTOU DESTE ARTIGO? ENTÃO ASSINE O RSS FEEDS DO BLOG. É GRÁTIS!
Ficaria, também, muito honrado com um COMENTÁRIO seu sobre este Post.


Continue Lendo...

Pullquotes ou Intertítulos: Você decide!

abril 13, 2009 Comente este artigo!: 2
Também chamado de "olho", um pullquote ou intertítulo é um recurso visual extremamente utilizado por revistas e jornais, há muitos anos e até hoje, e que confere um aspecto profissional ao seu blog, dando destaque a partes de seu artigo, além de quebrar grandes blocos de texto, com beleza.

Fácil de ser implementado, basta usarmos apenas umas poucas indicações em seu CSS. Mas se você não é um expert em HTML e CSS, não se preocupe. Aqui você aprenderá a criar um destaque extra a seu blog, de maneira extremamente fácil.

Seu pullquote ficará assim. Mas, antes de mais nada, lembre-se de fazer um Backup de seu template, afinal caldo de carne e canja de galinha nunca fizeram mal a ninguém!


Passo 1: Antes de mais nada, lembre-se de fazer um Backup de seu template.

Passo 2: Logado no Painel de seu Blogger, vá a LAYOUT > Editar HTML (Não é necessário marcar Expandir Modelos de Widgets) e localize (Use CTRL + F) a seguinte linha de código:

]]></b:skin>

Passo 3: ACIMA dela, de preferência próximo às suas definições de blockquote, cole o código abaixo:

.pullquote {
float:right;
width:200px;
margin-top:10px;
margin-bottom:10px;
margin-left:20px;
border-top-width:3px;
border-bottom-width:3px;
border-top-style:solid;
border-bottom-style:solid;
border-top-color:#1d3c6e;
border-bottom-color:#1d3c6e;
font-size:14px;
text-align:center;
line-height:25px;
font-family:Arial, Helvetica, sans-serif;
font-style:italic;
font-weight:400;
padding:10px;
}

Passo 4: Salve seu template. Depois, você poderá alterar o estilo de seu intertítulo  conforme o esquema de cores de seu template. Para isso basta alterar os principais códigos destacados em AZUL, que são óbvios, por sua nomeclaturas.

Passo 5: Agora, vá a CONFIGURAÇÕES > Formatação > Modelo de Postagens e cole, lá, o código abaixo:

<h4 class="pullquote">Texto de seu pullquote/intertítulo aqui!</h4>

Note que esta fase é a "chamada" para seu "olho" e estamos colocando-a em Modelo de Postagens  apenas para facilitar a utilização de seu pullquote. Assim, toda vez que você for fazer um post este código já estará disponível. Se você, em determinado artigo, não pretender utilizar este recurso, basta exclui-lo e pronto!

Passo 6: Salve suas Configurações.

Pronto! Fácil, não?!...



GOSTOU DESTE ARTIGO? ENTÃO ASSINE O RSS FEEDS DO BLOG. É GRÁTIS!
Ficaria, também, muito honrado com um COMENTÁRIO seu sobre este Post.


Continue Lendo...

Tradutor personalizado e eficiente no blog

abril 08, 2009 Comente este artigo!: 6
Hoje, com a dinâmica da Web 2.0, todo site ou blog que se preze deve ter um tradutor disponível, para que eventuais leitores em outras línguas possam ler suas páginas.

É verdade que existem inúmeros tradutores disponíveis por aí, inclusive um do Google, muito bom, do qual, de certa forma, nos valemos para apresentar este, mas que esteticamente deixa muito a desejar. Outros, por sua vez, demoram “anos” para traduzir uma página. Este Tradutor Personalizado que vamos aprender a implementar é extremamente rápido na tradução e muito fácil de introduzir em seu blog.

Seu tradutor ficará igual ao que você vê no topo desta página. Vamos a ele!...

Passo 1: Antes de mais nada, lembre-se de fazer um Backup de seu template. Agora, copie o código abaixo:

<center><div id="tradutor">

<a class="bandeira" target="_blank" href="#" rel="nofollow" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cen&hl=en'); return false;" title="Uhu, Galera! in English">
<img border="0" width="24" alt="English" src="http://dl.getdropbox.com/u/814038/Band_English.png" height="24" title="Uhu, Galera! in English"/>
</a>

<a class="bandeira" target="_blank" href="#" rel="nofollow" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Ces&hl=en'); return false;" title="Uhu, Galera! en Español">
<img border="0" width="24" alt="Spain" src="http://dl.getdropbox.com/u/814038/Band_Spain.png" height="24" title="Uhu, Galera! en Español"/>
</a>

<a class="bandeira" target="_blank" href="#" rel="nofollow" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cfr&hl=en'); return false;" title="Uhu, Galera! en Français">
<img border="0" width="24" alt="Français" src="http://dl.getdropbox.com/u/814038/Band_France.png" height="24" title="Uhu, Galera! en Français"/>
</a>

<a class="bandeira" target="_blank" href="#" rel="nofollow" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cde&hl=en'); return false;" title="Uhu, Galera! in Deutsch">
<img border="0" width="24" alt="Deustsch" src="http://dl.getdropbox.com/u/814038/Band_Germany.png" height="24" title="Uhu, Galera! en Deutsch"/>
</a>

<a class="bandeira" target="_blank" href="#" rel="nofollow" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cit&hl=en'); return false;" title="Uhu, Galera! Italiano">
<img border="0" width="24" alt="Italiano" src="http://dl.getdropbox.com/u/814038/Band_Italy.png" height="24" title="Uhu, Galera! Italiano"/>
</a>

<a class="bandeira" target="_blank" href="#" rel="nofollow" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cja&hl=en'); return false;" title="Uhu, Galera! 日本語">
<img border="0" width="24" alt="Japan" src="http://dl.getdropbox.com/u/814038/Band_Japan.png" height="24" title="Uhu, Galera! 日本語"/>
</a>

<a class="bandeira" target="_blank" href="#" rel="nofollow" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cru&hl=en'); return false;" title="Uhu, Galera! на русском языке">
<img border="0" width="24" alt="Russia" src="http://dl.getdropbox.com/u/814038/Band_URSS.png" height="24" title="Uhu, Galera! на русском языке"/>
</a>

<a class="bandeira" target="_blank" href="#" rel="nofollow" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cko&hl=en'); return false;" title="Uhu, Galera! 한국어">
<img border="0" width="24" alt="Korea" src="http://dl.getdropbox.com/u/814038/Band_Korea.png" height="24" title="in WEB blog 한국어"/></a><br/><span style="font-size: 80%">Widget by <a href="http://inwebblog.blogspot.com/2009/04/tradutor-personalizado-e-eficiente-no.html">inWEBblog</a></span><br/> </div></center>

Passo 2: Logado no Painel de seu Blogger, vá a Layout > Elementos de Página > Adicionar um Gadet e, na janela Pop up que se abrirá, escolha HTML/Javascript. Cole o código copiado no passo anterior na caixa de texto. Não coloque título.

Passo 3: Altere as partes em LARANJA, substituindo-as pelo NOME de seu blog.

Passo 4: Caso queira, salve as imagens das bandeiras, uma a uma, hospede-as no seu site de hospedagem preferido. Se não souber ou não tiver nenhum, eu recomendo o Dropbox (Ver post sobre como usá-lo), que aceita todos os tipos de imagens.

Passo 5: Caso você tenha optado por hospedar as imagens em seu site preferido, substitua as partes destacadas em AZUL pelo url de suas próprias imagens, mas se não quiser ter esse trabalho poder deixar como está, sem problemas!

Passo 6: Salve seu template e seu tradutor já estará disponível.

1. Note que cada bloco de texto/código, logo após a abertura da tag (<center><div id="tradutor">), refere-se a um idioma. Você pode eliminar qualquer idioma que queira, apenas deletando o bloco de texto/código correspondente. Assim, claro, o "tamanho" de seu tradutor diminui, pela ausência da bandeira relativa ao idioma excluído. 2. Convém eliminar os espaços em branco, existentes entres tais blocos, aqui deixados somente para efeitos de ilustração da informação acima(1).

Pronto! Fácil, não?!...



GOSTOU DESTE ARTIGO? ENTÃO ASSINE O RSS FEEDS DO BLOG. É GRÁTIS!
Ficaria, também, muito honrado com um COMENTÁRIO seu sobre este Post.


Continue Lendo...

Como Usar o Dropbox

abril 03, 2009 Comente este artigo!: 3
Se você chegou a este post, sem ter lido a primeira parte dele, recomendo, firmemente, que você a leia, antes. Basta clicar aqui.

Se você já tem seu Dropbox corretamente instalado (Verifique no System Tray de seu micro - a barra inferior, lado direito, onde tem o relógio - se o ícone do aplicativo já está lá!) vamos aprender a usá-lo, agora!

Clicando com o botão direito do mouse sobre o respectivo ícone, aparecem as opções para seu Dropbox, como visto na imagem a seguir, e logo mais abaixo descriminado:


Open My Dropbox (Abre a pasta onde estarão seus arquivos)

Web Interface (0,0% of 2.0 Gb used (% de uso de seus 2.0GB disponíveis).

Recently Changed> Exibe suas últimas alterações, uploads, arquivos alterados, deletados, etc)

Fórums (Link para o fórum – em inglês - de discussão do Dropbox)

Up to date (Não disponível. Refere-se a atualizações que não sei, mesmo, quais!)

Upgrade My Account (Para atualizar sua conta grátis para um plano pago, com mais espaço disponível)

Preferences (Definições de configurações do programa. Esqueça!)

Exit (Sair, claro!)

SUA CONTA DROPBOX LHE DÁ DIREITO A 2GB, INTEIRAMENTE GRÁTIS!

Mas, vamos centrar nossas atenções no primeiro item Open My Dropbox!

Pois bem, clicando nesta opção, você será enviado para uma Pasta típica do Windows, onde constará um arquivo .txt (This is your Dropbox.txt – Leia sobre isto mais adiante) e as seguintes sub-pastas:


Photos (Algumas fotos estarão previamente armazenadas aqui. Faça delas o que quiser!)

Public (Os arquivos colocados nesta pasta serão públicos e terão seus links disponibilizados para você, mediante um único clique. Veremos isto mais adiante)!

O arquivo .txt é apenas uma mensagem de boas vindas. E que boas vindas! Vejamos o que ele diz, textualmente:

"Anything you put in this folder is seamlessly uploaded to Dropbox and available on-line.

We'd love to hear what you think. E-mail us at beta@getdropbox.com or visit our forums (http://getdropbox.com/forum) anytime.

The Dropbox Team"

Traduzindo, para um bom e claro português:

"Tudo que você colocar nesta pasta é, continuamente, carregado no Dropbox e disponibilizado on-line"


“Tudo que você colocar nesta pasta é, continuamente, carregado no Dropbox e disponibilizado on-line.

Gostaríamos, muito, de ouvir o que você pensa...”

Ora, o que eu penso? Só digo mais adiante!...

Você entendeu direitinho? TODO E QUALQUER ARQUIVO que você colocar nesta pasta, via Copiar e Colar, via Arrastar e Soltar, não interessa como, SERÁ AUTOMATICAMENTE carregado para o Dropbox e estará disponível on-line IMEDIATAMENTE!

MARAVILHA! Era tudo que nós queríamos! Todos aqueles ícones, Javascripts, PHPs, imagens que você usa em seu site ou blog serão disponibilizados on-line com o devido url com apenas um clique. Quer saber como? Vamos direto ao assunto.

NOTA: SOMENTE OS ARQUIVOS DA PASTA PUBLIC TERÃO URLs PÚBLICOS!

Carregando arquivos e recebendo seu respectivo url

Pegue qualquer arquivo e salve-o, mova-o, copie-o e cole-o nesta pasta e ele será atualizada em sua conta no Dropbox. Colocando-o dentro da pasta PUBLIC ele será tornado público e terá um url único. Vamos ver como?

Pegue o mesmo arquivo e jogue-o dentro da pasta PUBLIC. Agora, com o BOTÃO DIREITO do mouse, clique sobre ele. Dentre as várias opções, agora, há uma nova: Dropbox!

Escolhendo Dropbox você terá duas (2) opções:

Revisions...

Mostra o histórico de todas as alterações que você fez no arquivo desde a data que você o carregou e, AINDA, a possibilidade de restaurá-lo, incluída aí a recuperação de arquivos antes DELETADOS!

Copy Public Link

Escolhendo essa opção você já terá na sua área de transferência (clipboard) o url de seu arquivo, para inseri-lo onde quiser!

E a equipe do Dropbox ainda quer ouvir o que eu penso?!...

Por que será, mesmo, que eles querem ouvir o que nós pensamos? 

Tá bom, eu digo!...

Pois ouçam, caras, sem meias palavras: S-E-N-S-A-C-I-O-N-A-L!

Nota do Autor: Este post NÃO É PATROCINADO!



GOSTOU DESTE ARTIGO? ENTÃO ASSINE O RSS FEEDS DO BLOG. É GRÁTIS!
Ficaria, também, muito honrado com um COMENTÁRIO seu sobre este Post.


Continue Lendo...

Criar e inserir Favicon no blog, usando Favicon.CC

Comente este artigo!: 2
Mas, por que você deveria colocar um favicon no seu blog? Bom, primeiro, entendamos o que é um Favicon e esta questão já estará resolvida.

Segundo a Wikipédia, “Favicons (palavra derivada de favorite (favorito) e icon Ícone) são pequenas imagens no formato *.ico com cerca de 16x16 pixels que ficam guardados em um site para visualização pelo seu navegador. Em alguns navegadores como Internet Explorer, até a versão 6, só exibem os favicons quando um site/blog é adicionado aos favoritos. Neste caso, apenas no menu correspondente aos favoritos pode-se encontrar a imagem. Em outros navegadores como Firefox, Óper e Internet Explorer 7(+), os favicons podem ser encontrados também nas abas e na barra de endereço.

Os favicons tem alto teor de acessibilidade, pois ajudam um usuário comum a identificar uma página quando ela está exibida em uma lista ou em uma barra de abas. Visando isto, muitos favicons são imagens simplificadas do logotipo da marca que representam.

Na ausência de um favicon, os navegadores exibem seu próprio ícone ou um ícone padrão como uma folha em branco.”

Entendido isto, vejamos, agora, como é muito simples criar e inserir seu favicon no blogspot.

Passo 1: Crie uma imagem (*.png, *.gif, *.jpg) no tamanho de 16x16 pixels e faça o upload para seu site de hospedagens favorito. Para tanto, recomendo o Dropbox (Veja nosso tutorial), pois este aceita TODOS os formatos de arquivos, inclusive a extensão .ico, de que estamos tratando aqui. Anote o url desta imagem.

(Note que esta imagem pode ser o que você quiser, até mesmo uma foto sua!)

Passo 2: Agora, vamos criar, online, a imagem com extensão .ico. Clique no link a seguir e acesse o Favicon.CC. Você será levado à página mostrada abaixo:


Passo 3: Clique em Import Image (Importar Imagem). Você chegará à pagina abaixo:


Passo 4: Clique em Procurar, escolha a imagem no seu computador, depois clique em Upload. Você chegará ao campo de edição de seu favicon, como mostrado a seguir:


Note que já temos uma prévia de como ficará nosso favicon!


Estando a seu gosto, clique em Dowload Favicon. Se não, edite-o, usando o pincel do Color Picker (clique na cor que quiser, depois clique na sua imagem, que fica ao lado esquerdo e esta será editada).

(Você pode, inclusive, criar um ícone animado (Use Animation), mas isto não é recomendável!)

Passo 5: Agora que você já criou sua imagem .ico hospede-a, conforme dito no Passo 1 e anote, também, seu url.


Passo 6: Logado no Painel de seu blog, vá a Layout > Editar Html e procure (Use CTRL + F) pela seguinte linha (Não é necessário marcar "Expandir modelos de widets"):

]]></b:skin>

Passo 7: Cole, logo ABAIXO dela, o código a seguir:

<!—Inicio Favicon -->
<link href='http://url_de_sua_imagem1' rel='shortcut icon'/>
<link href='http://url_de_sua_imagem2' rel='shortcut icon'/>
<!—Fim Favicon -->

Passo 8: Substitua o que está em VERMELHO pelo url de sua imagem .ico e o que está em AZUL pela sua imagem .png, .jpg, etc, conforme você a tenha criado. Salve seu template. Agora, visualize seu blog. Se você fez tudo certinho, seu favicon já pode ser visto.

Pronto! Fácil, não?!...



GOSTOU DESTE ARTIGO? ENTÃO ASSINE O RSS FEEDS DO BLOG. É GRÁTIS!
Ficaria, também, muito honrado com um COMENTÁRIO seu sobre este Post.


Continue Lendo...

Usando o Dropbox para hospedar arquivos

abril 01, 2009 Comente este artigo!

Dropbox: Hospede todos os seus arquivos num só lugar!

Quer saber onde e como hospedar seus arquivos? Use o Dropbox! É grátis e suporta todos, eu disse TODOS(!) os formatos de arquivos. Quer aprender a usar o Dropbox? Pronto, você acaba de chegar ao lugar certo!...

De interface super amigável e de fácil manipulação, o Dropbox é, hoje, no meu entender, a melhor alternativa de hospedagem Grátis de arquivos, já que alguns sites que prestavam estes serviços ou cessaram suas atividades, ou estão causando problemas, como o JavaScript Host, que nestes últimos dias deixou este blog quase desfigurado, por conta de alguns arquivos JS lá hospedados. Isto, pra não citar outros como SkyDrive, Ning, Geocities, GoogleDocs etc.

Mas vamos ao que interessa, de fato!...

Pra usar os serviços do Dropbox você terá que baixar um aplicativo, de pouco mais de 14Mb. Dependendo de sua conexão, isto não levará mais do que 5 minutinhos e, tenha certeza, VALE A PENA! Afinal, esta será, talvez, a primeira e última vez que você terá que visitar este site, para gerenciar, compartilhar e sincronizar seus arquivos, de onde você quiser, apenas arrastando e soltando!

E aqui, vamos aprender isso, passo a passo!

Passo 1: Para baixar este aplicativo, acesse o site do Dropbox, clicando aqui. Você será direcionado para a página que viu lá no topo deste post. Clique em Download Dropbox. Você verá um Aviso de Segurança, sobre o Editor. Sem problemas! Opte por Salvar seu download e aguarde a conclusão deste.


Passo 2: Download concluído, é hora de instalar o Dropbox! Clique em Executar e aguarde (É bem rápido!) a instalação ser processada.


Passo 3: Antes da tela abaixo, você será instado a escolher a pasta para instalação de seu Dropbox. Não perca tempo com isso e aceite a pasta sugerida.

Passo 4: Aceite, também, sem problemas, os "Termos dos Serviços", clicando em "I agree"!


Passo 5: Como você é Novato no pedaço, aceite, na próxima tela, a marcação (1) “I'm new to Dropbox“ e clique em “Next” (2)!


Passo 6: Estamos, quase, chegando lá!... Vamos criar sua conta (1). Informe os dados solicitados: Primeiro nome, Último nome, Email válido, digite e confirme sua senha. Clique, mais uma vez, em "Next" (2)!


Passo 7: Pule o tour (Skip tour and finish), se quiser, e finalize seu cadastro.


Pronto! Você já está apto a usar seu novo site de hospedagem de arquivos, gratuitamente! Dê uma olhada no seu "system tray", na barra inferior direita, de seu micro que o ícone do Dropbox já está lá. Enjoy!


Mas este tutorial está ficando muito longo e pesado! Que tal transformá-lo em dois posts? Tudo bom pra você? Então, vá logo treinando, pois o sistema é muito intuitivo e depois você poderá ler o outro post, com detalhes de utilização do Dropbox, clicando aqui!



GOSTOU DESTE ARTIGO? ENTÃO ASSINE O RSS FEEDS DO BLOG. É GRÁTIS!
Ficaria, também, muito honrado com um COMENTÁRIO seu sobre este Post.


Continue Lendo...