Aula de Flickr – I Parte

Tambem participando da Postagem Coletiva: EU BLOGO NAS QUARTAS, do meu blog.
Flickr Gamma esta no ar, mais leve, mais moderno e com a mesma qualidade de sempre. Sempre gostei do Flickr e os caras nunca me decepcionaram.

Ontem eu estava ensiando uma cliente a postar do proprio Flickr para dentro do seu blog WP, e achei que tambem seria benvindo com um tutorial aqui no Login.

Esse tutorial eh valido para qualquer um que tenha uma conta Flickr, quem ainda nao tem o que esta esperando, eh gratuito e muito bom.

Partindo do principio que vc ja tenha uma conta flickr, faca seu login e vamos la:

I PARTE: Informando o Flickr sobre seu Blog:

1 – Clique na setinha ao lado “YOU” e selecione a opcao: Your Account.

2 – Ele vai abrir uma outra pagina, desca um pouco e voce ira encontrar a opcao: Blogging, clique no primeiro link: Your Blogs.

3 – Na proxima pagina clique em: Set up your blog>>


4 – Escolha seu sistema de Blog na lista, o meu eh wordpress, mas eles tem os outros sistemas tambem.

5 – Siga as instrucoes abaixo nas linhas cinzas para colocar o endereco correto, o username e o password:

6 – A proxima tela sera apenas uma confirmacao, se voce colcou corretamente o endereco e so clicar OK e pronto seu flickr esta conectado ao seu blog.

Proximo post: Blogando suas fotos.

Lancamento

Tenho andado bem ocupada, e hoje finalmente ficou pronto o site: WordPress Brasil a lista

Se voce esta blogando WP e quer fazer parte dessa lista, mande um e-mail ou se preferir deixa um comentario.

Personalizando Blogsome – Parte II

CORES:

As cores das letras, bordar, fundo e etc… Tambem estao relacionadas nas declaracoes dentro do arquivo CSS, Style.

Vou partir do principio que voce ja sabe do que estou falando, caso nao saiba eh melhor ler antes o post anterior: Pernonalizando Blogsome – Parte I

As cores sao representadas por codigos de 6 digitos, antecedidos por um “#” – Ex: #FFFFFF = Branco, #000000 = Preto.

Voce pode encontrar paleta de cores na internet bem como os codigos de cada uma delas. Alguns softwares da Microsoft tambem possuem essa paleta, Paintshop e Photoshop tambem. (paleta de cores na web).
Eu uso a paleta do Photoshop aonde eu posso clicar na cor que eu gosto e ela me da o codigo. Alias se alguem usa o Firefox ele tem um plugin que tambem faz isso.
Dentro do arquivo CSS voce vai encontrar inumeras vezes codigos de cores, e o primeiro passo pode ser dificil, principalmente para aqueles que ainda estao engatinhado no codigos CSS, mas eh fundamental: Identificar a que parte do template exatamente a cor se refere. Abaixo algumas declaracoes que definem cores:

body {
margin:0;
padding:0;
font-family: Georgia;
font-size: 0.9em;
text-align:center;
color:#4d4c71;
line-height:1.3em;
background: #ffffff url(‘http://img517.imageshack.us/img517/4063/snow9we.gif’);
}
a {
color: #007dcc;
text-decoration:none;
}
a:visited {
color: #007dcc;
}
a:hover {
color: #007dcc;
text-decoration:underline overline;

O que essa declaracao esta dizendo eh que para o texto principal a cor eh: #4d4c71, e para os links : #007dcc, nesse caso os links visitados e quando o mouse passa por cima estao da mesma cor pq eu modifiquei, mas nem sempre eh assim, alias na maioria das vezes nao eh assim.

Indentifique todas as cores que quer mudar, e tome nota ou marque em algum lugar o codigo delas.

Quando comecei a fazer alteracao eu sabia muito pouco de CSS, e ficava exausta indo item por item do codigo procurando pelas cores para altera-la. Mas a pratica ensina, e hoje eu faco diferente:

1 – Copie e cole num editor de texto todo o codigo CSS (notepad eh o melhor)

2 – Usando o recurso: Edit>Replace coloque ali no “find what” a cor que vc quer alterar, e no “replace with” a nova cor, sempre usando os codigos.

3 – Republique e veja o resultado. Talvez voce tenha que fazer isso algumas vezes. Pode acontecer de que em alguns lugares a cor esteja numa variacao de ton e vc tem que novamente repassar o codigo para tentar acha-la.
Essa eh a maneira mais rapida de fazer a mudanca de cores, porque muitas vezes as cores se repetem em varias declaracoes diferentes responsaveis por uma determinada parte do template.

Esse esquema pode ser usado nao so para mudar as cores das letras mas tambem as cores de fundo, bordas, etc…

Quem tentar depois me diga se obteve sucesso.

Personalizando Blogsome – Parte I

Aprenda tambem a alterar as cores no Personalizando Blogsome – Parte II

BANNER:

O Blogsome eh um servidor que oferece blogagem gratuita com a ferramenta WP (WordPress). Nao tenho certeza qual a versao WP que eles usam, acho que eh: 1.2. De qualquer forma eh diferente da versao disponivel no momento (2.02), eh mais simples e mais restrita, mas funciona perfeitamente e eh um otimo comeco para que nunca usou o WP.

Nessa primeira parte vou ensinar apenas como se mudar uma banner. So para constar, esquecam HTML, nos vamos mexer apenas no CSS.

1 – Faca o login no seu Blogsome.

2 – Click em: Manage > Themes – Voce vai ver uma tela assim:

3 – Escolha um dos temas disponiveis, antes de seguir adiante teste o tema, veja se ele eh adquado as suas necessidade, meu favorito eh o Green Track do Sadish, esse aqui:

4 – Escolhido o tema, click em: Manage> Files tela 2:

Observer que o arquivo Index.html eh o primeiro e ja vem aberto quando vc vai para essa pagina. Desce a barra de rolagem e va la embaixo na pagina, e vc vera essas opcoes:

You can also edit the following files.

File

Backups

Notes

Main Page

1

2

3

4

5

When you edit a file a backup is made of the old file.
Up to 5 backups are made before the oldest is lost. It’s a FIFO queue so the newest backup is always 1 and the oldest being 5.
If the backup of a particular file exists it will be hyperlinked and clicking on that link will allow you to edit that file. Updating that backup template will restore the backup when saved and overwrite the template.

Site Style Sheet

1

2

3

4

5

Posts

1

2

3

4

5

Comments

1

2

3

4

5

Selecione a opcao: Site Style Sheet, esse eh o famoso arquivo CSS.

Daqui para frente requer ainda mais atencao, se voce fizer qualquer coisa errada e seu blog sumir, nao se disespere, volta ate voce ver novamente a opcao de escolher um tema e seleciona novamente.

5 – Como eu escolhi o Green Track, a tela que tenho na minha frente agora eh essa aqui:

6 – Leia com atencao os codigos dessa pagina, isso sao instrucoes dadas ao browser para formar a aparencia da pagina, como nesse primeira parte vamos mudar apenas a banner, vamos direto procurar por ela, no Green Track a banner esta nesse trecho aqui:
#header {
background: url(‘/wp-inst/wp-content/sitetemplates/GreenTrack/img/rail.jpg‘);
height: 175px;
margin: 0;
padding:0;

Essa “declaracao” diz que a imagem esta hospedada no endereco: /wp-inst/wp-content/sitetemplates/GreenTrack/img/rail.jpg, esse endereco eh dentro dos servidores do Blogsome, voce nao pode mexer nela, mas vc pode substituir por outro endereco. Entao se voce ja tiver uma outra imagem (Banner) eh so colocar o endereco aonde ela esta hospedada ali, dentro dos “parenteses: ( )” e entre ‘apostrofo’.

ATENCAO: Antes de fazer qualquer mudanca, copie e cole todo o arquivo para dentro de um editor de texto qualquer, eu uso o notepad para isso, word nao eh aconselhavel.

Importante: Se a imagem que voce colocar no lugar dessa acima nao for exatamente no mesmo tamanho da imagem substituida, ela nao vai aparecer. Para saber o exato tamanho da imagem vc precisa copiar a imagem da banner e colar num editor de imagens: Paintshop ou Photoshop, ou outro aonde vc possa verificar o tamanho em pixel.

Outra forma eh ajustar o CSS ao um novo tamanho de banner. Voltando na declaracao eh possivel saber que:

#header {
background: url(‘/wp-inst/wp-content/sitetemplates/GreenTrack/img/rail.jpg’);
height: 175px;
margin: 0;
padding:0;

Heigh ou altura eh igual a 175px. Agora a largura nao esta nessa declaracao e sim na de cima:

#rap
{
background:#fff;
border-left: 4px solid black;
border-right: 4px solid black;
width:760px;
margin:0 auto;
padding:8px;
text-align:left;
font-family: Trebuchet MS, Georgia, Arial, serif;
font-size: 0.9em;

Nesse CSS o “#rap” eh responsavel por toda a estrutura dessa parte central do blog. Observe o width ou largura eh igual a 760px.

Em geral eu preparo uma banner de 750x250px, e modifico a height para 250px, nao mexo na width, nesse caso especifico eu apenas alterei de 0 para 5 a margem na declaracao header, para compensar os 10px de diferenca. E a minha declaracao final da header (Banner) fica assim:

#header {
background: #FFFFFF url(‘http://img183.imageshack.us/img183/2746/winter7vv.jpg‘);
height: 250px;
margin: 5px;
padding:0;

Outra coisa que alterei nesse caso foi a cor do background, acresentando um #FFFFFF (BRANCO) antes da url. Isso para dar um efeito que a banner esta colada num papel branco.

Se eu tiver um bom feedback desse tutorial irei adiante, e ensino mudar as cores, o lado da sidebar e outras coisinhas mais. Espero que ajude a quem me pediu!!

Trackback

Voce sabe o que eh, sabe usar um “trackback”??

“TRACKBACK” Eh uma forma de linkar e dar a referencia a alguem. Voce usa o “trackback” quando for citar um artigo que leu em algum outro blog/site, no post que voce esta criando.
Alguns sistemas de blog oferencem um link para isso, no final de cada post ao lado dos comentarios, mas se nao existir o link ainda assim eh possivel fazer um “track back”

Passo a passo:

1 – Leu algo e quer falar a respeito daquele post especifico? – Clica no titulo.

Ex: Clicando no titulo desse post vai abrir uma outra pagina e la no endereco, URL, voce vai ler isso aqui http://loginstyle.com/archives/33, esse eh o endereco (URL) especifico desse post.

*OBS: Se vc ja tiver clicado antes o endereco ja esta acima.

2 – Copia o endereco.

3 – Estiver escrevendo o seu post, faca a refencia e ao clicar no botao link (geralmente tem como simbolo dois elos de uma corrente) e coloque o endereco (URL) que voce copiou.

Fica assim: …. bla, bla, bla, conforme li aqui,

E se vc clicar no link vai ver que ira voltar aqui na mesma pagina porque eu criei um “trackback” para esse post. E se a pessoa de quem vc fez o “trackback” tiver um bom sistema de blog ela sera avisada que voce fez referencia a ela.
PRONTO “Trackback” criado.

Emocoes do Segundo Capitulo

2ª Apuracao da Promocao BLogin Style

Pois eh gente essa foi a segunda semana da Promocao, e houveram algumas mudancas como eu previa, mas, nao se esquecam ainda tem mais 3 semanas pela frente e muita coisa pode mudar.

Quem esta na frente eh hora de ter uma conversinha com seus leitores, afinal o que eh um Clique??? E todos tem chances, como voces mesmos podem observar nos relatorios.

Vejam, sao tres relatorios, referentes aos tres links que voces estao promovendo em vossos sites/blogs, entao fiquem de olho na sua posicao, afinal muita agua ainda vai rolar pela frente!!

*Semana passada eu deixei esses relatorios em forma de links, mas acredito que muita gente nao viu, quem quiser voltar la para dar uma olhada click aqui.

Continue lendo AQUI>

+ 1 do Google

Batendo um papo com a Cris falavamos sobre o espaco gratuito que o Google agora da para quem quiser fazer um site.

Isso nao eh exatamente novidade o Yahoo ja fazia isso muito antes com o Goe Cities, criei uma conta la e foi por la tambem que fiz meus primeiros experientos no mundinho virtual, mas nunca sai do padrazao. Alias nem sei mais qual quer meu endereco por la.

O Google Pages, com eh chamado, me pareceu bem semelhante o Goe Cities, com a diferenca de que nao Google Pages a opcao de editar o HTML manualmente nao existe, bom pelo menos eu nao vi.

Qualquer um que tenha um Gmail pode ter tambem um Google Pages, e simples de usar e bem bonitinho, bom para colocar fotos, nao eh blog, apenas uma pagina estatica, que pode ser editada com algumas limitacoes, num estilo WYSIWYG.

Quem quiser ver como ficou o meu, click aqui, fiz apenas com alguns clicks e antes de terminar a conversa com a Cris ja estava pronta…. :-)

Aprenda com os BONS

Depois de dois anos e meio na Blogosfera, confesso que nunca me senti tao de saco-cheio com a rodinha que me rodeia…. Parece que todos os que realmente escreviam algo interessante pararam de blogar ou estao distantes por alguma razao…. Sinto falta!

Talvez eu simplesmente tenha feito um caminho diferente… A agora empaquei num meio que nao eh o meu…

Acabo de quebra uma regra que coloquei aqui, falar coisas pessoais aqui, quando tenho o Photos&Fatos para isso.
Mas eh apenas para registrar minha insatisfacao, porque eu quero mais, quero ler posts com conteudo, textos longos e proprios, pessoas pensantes e nao repetitivas… Quero aprender com os BONS!
E por falar em bons, so como lembrete, ja que Login nao tem leitores ;-), ai vai o que realmente eu gosto de ler:

Rodrigo Muniz foi o promeiro a chamar minha atencao, dai fui ler o que ele e ele escreveu, e depois ouvir a discussao, que me levou a explorar ele e ele.

DICA do Dia: Tableless criado pelo Diego. Nao acredito que so descobri esse blog agora.

1a. Apuracao – Promocao BLogin Style

Eh o resultado da primeira semana ficou assim:

1 colocado com 50 pontos: Taliesin – que ficou em primeiro lugar nas 3 lista, por isso ganhou 5 pontos de bonus.

2 colocado com 20 pontos: Elizabeth – que ficou em segundo lugar em duas listas: Sabris Host e Design.

3 colocados com 10 pontos (cada): houve um empate.

Vivi – que ficou em segundo lugar na lista do: Login Style.

Marcinha – que ficou em terceiro lugar em duas listas: Sabris Host e Login Style.

4 colocado com 5 pontos: Anna – que ficou em terceiro lugar na lista da Sabris Design.

So estao na lista acima aqueles que ocuparam nos tres primeiros lugares das listas. LEIA MAIS DETALHES AQUI.

PROMOCAO BLogin Style

PROMOCAO ja esta rolando, visite os inscritos: Anna, Bruna, Cilene, Delma, Elizabeth, Elza, Marcinha, Marcos, Priscila, Susana, Taliesin, Vivi.

E nao deixe de clicar aonde voce ver esses selinho. Boa sorte aos participantes.

Image hosting by Photobucket

Image hosting by Photobucket

Image hosting by Photobucket

Existem mais dois possiveis participantes de quem estou aguardando confirmacao. Ainda da tempo de participar, passe aqui, leia as regrinhas e se inscreva.
E so para lembrar a todos: Qualquer coisa me mandem um e-mail, se eu nao souber como ajuda-lo vou perguntar para alguem que saiba… Alias ja fiz isso em relacao o BLOG UOL.Como eu nao assino UOL eu nao tenho a minima ideia de como o operacional do Blog funciona, entao se eu tiver leitores que usam BLOG UOL ou que saibam como ele funciona, e quiserem ensinar como se coloca um link na lateral, pode mandar ai nos comentario. THANK YOU!