Dicas para Blogs e Sites

Uma das coisas mais básicas quando o assunto é blog ou site é como colocar imagem neles, é um assunto fácil, mas tem alguns detalhes interessantes, veja o código:

<img style="border: none;margin:10px; float: right;" src="URL
DA IMAGEM" width="250" height="150">

A parte principal do código é <img src="URL DA IMAGEM"> , se você hospedar ou pegar a url de uma imagem da internet e colocar aqui ela aparecerá no seu blog, você pode hospedar suas imagens no http://photobucket.com ou http://www.imageshack.us mas se somente essa parte do código já faz aparecer à imagem, para que todo o resto? As demais partes são opcionais, mas devem ser colocadas, vamos ver uma parte por vez:

alt="texto" Quando o mouse está sobre a imagem surgira palavra texto, claro que você pode escrever o que quiser o importante é não esquecer de colocar entre aspas.

width="250" height="150" Isto controla a largura e altura da imagem, é opcional a diferença entre colocar ou não essa parte é quando o site está carregando, você já notou que alguns sites enquanto não apareceu a imagem o espaço dela está com um quadradinho e quando ela aparece as coisas ao seu redor mudam um pouco de lugar para se adaptarem ao tamanho dela, e em outros sites já tem um lugar vazio onde aparecerá a imagem, pois é essa a diferença entre colocar ou não essa parte do código, ela faz que já tenha um espaço reservado para imagem enquanto ela não é carregada, tenha cuidado ao preencher esses valores, pois se não forem os mesmo da imagem ela ficará distorcida.

border: none; Quando queremos remover a borda somente de uma imagem colocamos esse código.

style="margin:10px; float: right;" Para deixar o texto ao lado da imagem como neste texto usamos float:right (à direita) e float:left (à esquerda) dependendo de qual lado quisermos, a parte margin: 10px é um espaço vazio ao redor da imagem para o texto não ficar encostado nela.
Mas quando falamos de imagens ainda temos uma outra questão muito importante é o formato que salvamos a imagem que pode ser .jpg, .gif, .png e outros, mas qual a diferença entre eles? Principalmente o tempo que ela levará para aparecer.
É recomendável salvar a imagem nos formatos .jpg e .gif e ver qual tem tamanho menor (ex: 12k), a qualidade varia também um pouco dependendo do formato, mas vale a pena olhar esses dois.

Existem vários programas que são ótimos para imagens como Photoshop, Fireworks, mas se você for fazer download de um deles veja antes quais os requisitos do sistema, ou seja, quando de memória RAM, HD, memória de vídeo são necessários para cada uma desses programas, pois se seu computador não atender esses requisitos mínimos e mesmo assim você fizer o download e instalar seu computador ficará muito lento ou irá travar quando usar esses programas.

Sempre ficamos com vontade de colocar tudo que vemos em outros sites no nosso, mas evite deixar seu blog muito pesado (demorando para carregar), pois muita gente usa internet discada e perde a paciência esperando e fecha a janela antes de ver seu blog.

Marcadores: Códigos, Iniciantes

Mudar a largura do blog, do menu ou das postagens são coisas fáceis de fazer e muito úteis, pois nem sempre o formato padrão atende nossas necessidades, para fazer tais mudanças precisamos encontrar no html do blog o código “width:” do que desejamos mudar a largura,

Usarei como exemplo o blog Frases Curtas que foi alterado a partir do modelo padrão Son of Moto (Mean Green Blogging Machine variation).

Mudando a largura total do blog:

#outer-wrapper {
margin: 0 auto;
border: 0;
width: 750px;
text-align: left;
background: url(http://i55.photobucket.com/albums/g138/robertojd/corpo.jpg);
font: normal normal 100% tahoma, 'Trebuchet MS', lucida, helvetica, sans-serif;
}

Esta parte definirá a largura do blog para deixar do tamanho que você deseja mude o numero 750, mas lembre-se que a maioria das pessoas usa resolução de tela 800x600, portanto não é recomendável usar um tamanho maior de 780, dependendo do contador de visitas do seu blog é possível ver a resolução de tela dos seus visitantes (no caso do Sitemeter na pagina de estatística clique em resolução, na parte de baixo da pagina tem Web Browsers e embaixo disso tem Monitor Resolution clicando você saberá qual a resolução de tela que seus visitantes mais usam).

Largura das postagens e do menu:

#main {
width: 395px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar {
width: 255px;
float: right;
color: #000000;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

O procedimento é o mesmo, altere os valores 395px(postagem) e 255px(menu) para a largura desejada para as postagens e menu respectivamente. Outra coisa que podemos fazer aqui é trocar o lado que as postagens e o menu aparecem, para isso basta mudar onde está float: left; e float; right; simplesmente trocando as palavras left e right de lugar. O resultado disso será a troca de lado entre as postagens e o menu. Veja também:
Como altera o espaço entre as colunas do blog
Quando Desistir de um Blog? Trabalhar na Internet vale à pena?

Marcadores: CSS, Template

Uma das maneiras de ganhar dinheiro com a internet é usando o Orolix, que paga pelo tempo que você fica conectado a internet. Isso também pode servir como uma maneira de ganhar dinheiro com seu blog ou site, pois após fazer seu cadastro no Orolix você pode colocar um link do Orolix no seu blog e quando alguém se cadastrar através desse link você ganhará uma porcentagem sobre o tempo que esse novo usuário ficar conectado.

Orolix é um provedor de acesso gratuito que paga em dinheiro para você navegar na Internet. Além do acesso à Internet, ela oferece outros serviços como um e-mail com capacidade de 5 GB, Blog, Fotolog, Disco Virtual, Álbum de Fotos, Discador, Acelerador e o Oromix (um programa que importa seus contatos de outros provedores).

A maioria dos provedores, tanto os pagos quanto os gratuitos, tem parcerias com as companhias telefônicas de onde é gerada uma parte de sua receita. A Orolix também tem parcerias com as companhias telefônicas e outras empresas e gera uma receita adicional com a venda de mídia. O que a Orolix faz é repassar uma boa parte da sua receita para seus usuários, de forma a incentivá-los a acessar a internet e a convidar pessoas para se cadastrarem no provedor, pagando a eles 20% dos Oros acumulados de cada pessoa convidada. Enfim, quanto mais horas de conexão a Internet você utilizar, mais a Orolix fatura e divide com você.

A cada uma hora de conexão o usuário recebe 10 Oros ou R$ 0,10 (0,10 centavos de Real) independente do horário de navegação. Quem navegar mais de 100 horas no mês ou indicar 1 amigo que navegar mais de 10horas, atingirá sua OROmeta e receberá como bonificação da Orolix a duplicação de todos os Oros navegados no período da campanha. Sendo assim, o usuário ganhará 20 Oros ou R$ 0,20 (0,20 centavos de Real). O usuário também recebe 20% dos Oros acumulados de cada amigo que ele tiver convidado e se cadastrado na Orolix. Melhor ainda, ele recebe 20% dos 20% dos Oros dos convidados de seus convidados. Estes 20% não são retirados dos convidados, mas pagos pela Orolix.

Marcadores: Ganhar Dinheiro

O código abaixo mostra quantas vezes uma pessoa visitou seu blog, ele funciona com base nos cookies, ou seja, quando os cookies do navegador(Internet Explorer, Firefox, Opera) forem excluidos a contagem será perdida, mas isso não é um problema pois quase ninguém faz isso.Se quiser contadores de visitas como sitemeter, analytics e outros veja neste link:Usando Melhor os Contadores de Visitas.

Para usar esse código é bom simples basta copiar e colocar no lugar que você deseja que apareça no seu blog. No começo do código tem a frase "Obrigado por sua visita! Você já esteve aqui", você pode alterar para qualquer frase.

Obrigado por sua visita! Você já esteve aqui
<script language=JavaScript>
function getCookieSlsv (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieSlsv (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0)
break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString()))
+
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie(name) {
var exp = new Date();
FixCookieDate (exp); // Correct for Mac bug
exp.setTime (exp.getTime() - 1); // This cookie is history
var cval = GetCookie (name);
if (cval != null)
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}

var expdate = new Date();
var num_visits;
expdate.setTime(expdate.getTime() + (365*24*60*60*1000));
if (!(num_visits = GetCookie("num_visits")))
num_visits = 0;
num_visits++;
SetCookie("num_visits",num_visits,expdate);
document.writeln(num_visits+" vezes!");
</script>

Para mostrar visitantes online, ou seja, quantas pessoas estão visitando seu blog naquele momento você pode pegar o código aqui. Outra coisa bem interessante é saber o total de visitas e também saber de onde vieram seus visitantes para isso o Sitemeter é muito bom, ele fornece estatística detalhadas informa de que site vieram suas visitas, de que cidade ou país, resolução de tela, navegador que seus visitantes usaram e outras coisas.

Marcadores: Códigos, Contador de Visitas

Para fazer alterações no template do blog precisamos saber um pouco de CSS, então aqui vão algumas dicas para ajudar você a modificar seu template, olhe o código abaixo:

.exemplo {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #000000;
text-decoration: none;
background-color: #FFFFCC;
background-image: url(URL DA IMAGEM);
text-align: left;
border: 2px solid #666666;
margin: 5px;
padding: 10px;
width: 600px;
}

Agora vamos ver o que faz cada uma das linhas deste código:

font-family: Arial, Helvetica, sans-serif; - tipo da fonte(letra)

font-size: 12pt; - tamanho da fonte

color: #0000FF; - cor da fonte

text-decoration: none; - essa linha nos permite “decorar” o texto, na verdade é sublinhar(underline) sobrelinha(overline), piscando(blink), tachado(line-through) ou nenhum(none), você só precisa trocar a palavras que está entre parênteses e ver o resultado, o blink não funciona no Internet Explorer somente no Firefox

background-color: #FFFFCC; - essa é a cor do fundo, veja aqui o Código das Cores

background-image: url(URL DA IMAGEM); - coloca uma imagem como fundo do blog/site, você só precisa hospedar a imagem em algum lugar e colocar a url

text-align: left; - alinhamento de texto esquerda(left), direita(right), centro(center), justificado(justify)

border: 2px solid #666666; - faz uma borda, existem vários tipos de borda: linha(solid), tracejado(dashed), pontilhado(dotted) esse são os principais estilos de borda, mas existem outros, o valor 2px é a espessura e #666666 é a cor que podem ser alterados conforme seu gosto.

margin: 5px; - essa linha faz uma margem externa ou seja deixa um espaço vazio do lado de fora(veja imagem)

padding: 10px; espaço vazio dentro(veja imagem)

width: 600px; - largura da coluna, também pode ser usado em %

Então para alterar o modelo do blog você deve procurar esses códigos nele, mas quando digo procurar não quero dizer que você deverá ler o código todo, mas use o ctrl+F, isso funciona no Internet Explorer, Firefox, Opera, nos demais navegadores não testei, então para achar alguma coisa use as teclas de atalho ctrl+F e digite o que você quer encontrar.

Um exemplo que como mudar algo no seu layout, caso você queira mudar a cor do fundo o que controla isso é background. Para mudar o fundo das postagens procure .main{.....} que é a parte principal do blog e coloque o código background-color: #FFFFCC; e para mudar o fundo do menu coloque o mesmo código junto com .sidebar{..............}.

Este exemplo serve para qualquer coisa que você queria mudar no seu template, por exemplo, cor, o tipo e tamanho da letra, margens, etc... Mas isso não significa que o código deve conter todas essas linhas, pois não quiser usar uma borda basta apagar a linha border: 2px solid #666666; isso também vale para as outras partes do código. Veja aqui mais detalhes sobre Colocar ou alterar as bordas

Esta explicação é para você ter algumas noções de CSS e saber modificar seu template, mas se quiserem ver mais detalhes e outras coisas que podemos fazer com o CSS, visite o site http://www.maujor.com , eles têm ótimos tutoriais sobre o assunto.

Marcadores: Template

Como usar o Feed, RSS, atom? É mais fácil do que parece, este assunto se divide em dois, pois podemos colocar um Feed de outro site no nosso blog ou divulgar o nosso feed.
Primeiro vamos explicar como e por que colocar um feed de outro site no blog. Um blog para atrair mais visitantes além de ser bem escrito precisa ter coisas que interessem ao seu leitor, uma boa opção para isso são os feeds. Existem muitas coisas para serem colocadas no blog, noticias, esportes, humor, etc. enfim qualquer site que você visite e que tenha feed, rss, você pode colocar esse conteúdo no seu blog e aparecerá somente o link para estes sites, ou seja seu blog não vai demorar mais para carregar por causa disso.

Para colocar o feed de outro site no seu primeiro encontro o link do feed, isso é fácil muitos sites tem e adoram divulgar, copie o link(geralmente ele termina com .xml), agora vá ao seu blog e entre em editar layout, elementos de página e clique em adicionar um elemento de página depois escolha a opção Feed(Adicione conteúdo de um feed RSS ou Atom ao seu blog.), na janela que aparecer você deve colocar o link do feed que deseja adicionar e clica em continuar, na próxima tela tem a opção de quantos links vão aparecer, e depois é clicar adicionar e pronto.

Na hora de divulgar o nosso feed, o deste blog é também é simples no caso do blogspot a url do feed do seu blog é: http://dicasparablogs.blogspot.com/atom.xml , ou seja, basta você acrescentar /atom.xml ao seu link. Isso funciona para qualquer coisa, você pode usar essa url atom.xml para fazer um link para as pessoas adicionarem e também é assim que você deve usar para colocar o feed do seu blog no orkut.

Marcadores: Template