Retirar a borda azul das imagens

14 05 2009

Nível: Iniciante

As imagens geralmente apresentam uma borda azul a qual pode ser retirada de três formas diferentes.
1. Código para retirar o sublinhado dos links e a borda das imagens:
Copie e cole o código abaixo dentro da TAG <HEAD></HEAD>:
<style type="text/css">
A:link {text-decoration:none}
A:visited {text-decoration:none}
A:active {text-decoration:none}
A:hover {text-decoration:none}
a img {
border-width:0;
}

</style>
2. Código para retirar a borda das imagens no Blogger:
Copie e cole o código abaixo dentro da TAG <IMG> do seu link:
border="0" style=’border: 0px; padding: 1px;’

3. Código para retirar a borda das imagens no Blogger:

Procure este trecho no código HTML do seu blogue na aba Layout, Editar HTML.

.post img {
margin-top:0;
margin-$endSide:0;
margin-bottom:5px;
margin-$startSide:0;
padding:4px;
border:1px solid $borderColor; }

Substitua o "1" em "border:1px solid" pelo 0. Observe:

.post img {
margin-top:0;
margin-$endSide:0;
margin-bottom:5px;
margin-$startSide:0;
padding:4px;
border:0px solid $borderColor;
}

Pronto! Salve as modificações e note que as bordas de todas as imagens dos artigos não existem mais.

Caso você não queira retirar a borda e sim customizá-la basta usar o elemento style.

Por exemplo:

style="border: medium dashed #FFOOOO"

>> medium é a largura (da mais fina a mais grossa, temos a thin, medium e thich)
>> dashed é o estilo (veja os valores permitidos abaixo)
>> #FFOOOO é a cor
Valores permitidos para border-style:
inherit= repete o valor do elemento superior (elemento-pai)
none= a borda não é renderizada em torno do elemento
dotted= a borda é formada por linhas pontilhadas
dashed= a borda é formada por uma série de tracinhos
solid= a borda é formada por uma linha contínua
inset= a borda está em 3D e dentro da superfície
outset= a borda está em 3D e saindo da superfície
double= a borda é desenhada por linhas duplas
Outros elementos igualmente importantes são o float (flutuação) que renderiza a imagem seguindo o fluxo do texto e position que define o posicionamento da imagem.
Valores permitidos para float: none (nenhum), left (à esquerda) e right (à direita)
Valores permitidos para position: static, relative, absolute, fixed




Inserindo Favicon no Blogger

8 05 2009
favicon-galleryImagem: Stefanbucher 
Nível: Iniciante
“Favicons (palavra derivada do Inglês favorite (favorito) e icon (ícone)) são pequenas imagens no formato *.ico com cerca de 16×16 pixels que ficam guardados em um site para visualização pelo navegador.” (Wikipédia)
 
Você gostaria que a imagem ou logo do seu blogue ou site apareça na barra de endereços do navegador como um favicon?! Então você precisa fazer o que se pede abaixo:
 
  • Criar imagens com 16X16 pxls em programas como Adobe PhotoShop;
  • Hospedar estas imagens em sites como Tinypic, ImageShack, PhotoBucket;
  • Copiar o link da imagem que é fornecido pelo site;
  • Colar o link em ‘URL_DA_IMAGEM_PNG’  se for uma imagem com extensão PNG ou em ‘URL_DA_IMAGEM_ICO’ se for uma imagem com extensão ‘ICO’;
  • Copiar e colar o código modificado abaixo logo após ]]></b:skin> no Blogger;
  • Salvar o modelo e verificar as alterações nos navegadores.
<link href=’URL_DA_IMAGEM_ICO‘ rel=’shortcut icon’/>
<link href=’URL_DA_IMAGEM_PNG‘ rel=’shortcut icon’/>
<link href=’URL_DA_IMAGEM_PNG‘ rel=’apple-touch-icon’/>
<link href=’URL_DA_IMAGEM_PNG‘ rel=’shortcut icon’ type=’image/x-icon’/>

Outros exemplos:

<link href=’http://br.geocities.com/ileitura/favicon.ico’ rel=’shortcut icon’/>
<link href=’http://br.geocities.com/ileitura/favicon.png’ rel=’icon’ type=’image/x-icon’/>

Geradores de Favicon:

Favicons Grátis

Trate as imagens em:

Hospede as suas imagens nos sites abaixo:

Tutoriais que podem ajudar:

Via: Dicas Blogger





Barra de Rolagem

8 05 2009

barra


Nível: Iniciante


Barra de Rolagem

A barra de rolagem é aquela barra que fica à direita no navegador. Ela pode ser personalizada para ficar com as cores do seu layout. Para personalizar a sua barra basta modificar as cores #000000 do código abaixo. Clique aqui para consultar a tabela de cores.

Insira o código abaixo em laranja entre as tags <head></head> ou dentro da folha de estilo – CSS do seu código fazendo a modificação das cores.

<html>
<head>
<style type="text/css">
body {
scrollbar-arrow-color:#000000;
scrollbar-3dlight-color:#000000;
scrollbar-highlight-color:#000000;
scrollbar-face-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-darkshadow-color:#000000;
scrollbar-track-color:#000000;
}
</style>
</head>
<body> conteúdo do documento </body>
</html>

Via: Interney





Customizar a área dos comentários

1 05 2009

Nível: Intermediário

O BloggerSPhera publicou uma sensacional e completa série de tutoriais sobre a área de comentários do Blogger. Então eu resolvi divulgar aqui para vocês. De brinde, divulgo o tutorial do Usuário Compulsivo sobre a caixa de comentários e dois tutoriais do Icebreaker na lista abaixo.

Clique nos títulos que lhe interessam para ter acesso aos tutoriais.





Como dividir postagens e a barra lateral (sidebar) em colunas

29 04 2009

Nível: Iniciante

Esta dica mara foi encontrada nos blogs Templates para Novo Blogger e Dicas da Mamanunes

Copie e cole o código abaixo onde você quiser. Você pode colar em uma postagem ou em um elemento de página do tipo HTML/Java. É realmente muito simples, fácil e prático.

Código para dividir em duas colunas

<div style=”float: left; WIDTH: 45%”>Aqui o Texto da Coluna da Esquerda</div>
<div style=”float: right; WIDTH: 45%”>
Aqui o Texto da Coluna da Direita</div>
<divstyle=”clear: both”></div>

Código para dividir em três colunas

<div style=”float: left; WIDTH: 30%”>Aqui o Texto da Coluna da Esquerda</div>
<div style=”float: center; WIDTH: 30%”> Aqui o Texto da Coluna Central</div>
<div style=”float: right; WIDTH: 30%”>Aqui o Texto da Coluna da Direita</div>
<divstyle=”clear:both”></div>

Substitua o texto em laranja pelo seu texto, outros códigos, imagens, objetos, elementos de página.

Veja como o código funciona na prática:

Esta dica é sucesso de bilheteria e adianta a vida de muita gente. Você pode usar estes códigos acima para dividir postagens e/ou a barra lateral
em duas ou três colunas, organizar imagens e objetos dentro do template e o que a sua imaginação e a sua criatividade permitirem.




Abrir link em outra janela ou frame (moldura)

29 04 2009


Nível: Iniciante

Uma dica muito interessante anda circulando pela internet. Como abrir todos os links em outra janela. Esta dica foi criada pelo blog Templates para novo Blogger.

Para que todos os links abram em outra janela é necessário acrescentar a seguinte linha de código entre as tags <head></head>.


<base target=”_blank”/>

Agora, se você deseja que apenas um link abra em outra janela, é necessário acrescentar o atributo target=”_blank” no código do link. Por exemplo:

<a href=”http://ileitura.blogspot.com/” target=”_blank”>Blogmania</a>

Outros destinos do atributo target

“_parent” = abre o link no frame ou moldura principal
“_self” = abre o link na mesma janela ou frame *
“_top” = abre o link na janela inteira do navegador ou remove todos os frames
“nome” = abre o link no frame cujo nome foi especificado

*Se o destino do link não for especificado pelo atributo target, ele será aberto na mesma janela.




Inserir imagem em sites e blogues

20 04 2009


Nível: Iniciante

Segundo o wikipédia, Imagem (do latim: imago) significa a representação visual de um objecto. Na web 2.0, a imagem contribui significativamente para a construção do layout, da aparência de sites e blogues e é um elemento muito usado por webdesigners and webmasters. Se você for um iniciante na arte de manipulação de imagens e códigos, dedique-se a leitura deste artigo que trará informações e códigos importantes para que você comece a tratar imagens.

As imagens são inserídas no código através da tag <img> e possui atributos os quais definem o alinhamento, o tamanho, o posicionamento, o nome do arquivo, o endereço da página da internet cuja imagem está representando e outros.

Por exemplo:


<img src="http://i42.tinypic.com/33a4hlj.jpg" alt="Imagem"/>

Agora vamos analisar os atributos da tag <img>:

SRC= especifica a URL ou caminho para o arquivo da imagem
alt= define um texto alternativo
align= especifica o alinhamento da imagem em relação à linha de texto
border= especifica a largura e o tipo de borda
height= informa a altura da imagem
width= informa a largura da imagem
hspace= define o espaço à direita e à esquerda
vspace= define o espaço acima e abaixo
lowsrc= carrega uma imagem em baixa resolução
usemap= define o nome do mapa de imagem
style= cria uma folha de estilo interna

O atributo align possui outros atributos:

absmiddle= alinha o meio da imagem com o meio da linha
absbottom= alinha o inferior da imagem com o inferior da linha
baseline= alinha o inferior da imagem com a base da linha
top= alinha a parte superior da imagem com o topo da linha
middle= alinha o meio da imagem com a parte inferior do texto
bottom= alinha o inferior da imagem com a parte inferior do texto
left= alinha à esquerda
right= alinha à direita
texttop= alinha o topo da imagem com o topo do texto

*Os valores dos atributos podem ser expressos em pixels (px) ou porcentagem (100%)

As imagens geralmente apresentam uma borda azul a qual pode ser retirada de três formas diferentes.

1. Código para retirar o sublinhado dos links e a borda das imagens:

Copie e cole o código abaixo dentro da TAG <HEAD></HEAD>:

<style type="text/css">
A:link {text-decoration:none}
A:visited {text-decoration:none}
A:active {text-decoration:none}
A:hover {text-decoration:none}
a img {
border-width:0;
}

</style>

2. Código para retirar a borda das imagens no Blogger:

Copie e cole o código abaixo dentro da TAG <IMG> do seu link:

border="0" style=’border: 0px; padding: 1px;’

3. Código para retirar a borda das imagens no Blogger:

Procure este trecho no código HTML do seu blogue na aba Layout, Editar HTML.

.post img {
margin-top:0;
margin-$endSide:0;
margin-bottom:5px;
margin-$startSide:0;
padding:4px;
border:1px solid $borderColor;
}

Substitua o "1" em "border:1px solid" pelo 0. Observe:

.post img {
margin-top:0;
margin-$endSide:0;
margin-bottom:5px;
margin-$startSide:0;
padding:4px;
border:0px solid $borderColor;
}

Pronto! Salve as modificações e note que as bordas de todas as imagens dos artigos não existem mais.

Caso você não queira retirar a borda e sim customizá-la basta usar o elemento style.

Por exemplo:

style="border: medium dashed #FFOOOO"

>> medium é a largura (da mais fina a mais grossa, temos a thin, medium e thich)
>> dashed é o estilo (veja os valores permitidos abaixo)
>> #FFOOOO é a cor

Valores permitidos para border-style:

inherit= repete o valor do elemento superior (elemento-pai)
none= a borda não é renderizada em torno do elemento
dotted= a borda é formada por linhas pontilhadas
dashed= a borda é formada por uma série de tracinhos
solid= a borda é formada por uma linha contínua
inset= a borda está em 3D e dentro da superfície
outset= a borda está em 3D e saindo da superfície
double= a borda é desenhada por linhas duplas

Outros elementos igualmente importantes são o float (flutuação) que renderiza a imagem seguindo o fluxo do texto e position que define o posicionamento da imagem.

Valores permitidos para float: none (nenhum), left (à esquerda) e right (à direita)
Valores permitidos para position: static, relative, absolute, fixed

Dicas da autora:

Sites para hospedagem de imagens:

Sites para ler mais sobre este assunto:





Botões voltar, home, avançar, topo da página, atualizar, …

10 04 2009


Nível: Iniciante

Um recurso muito útil e muito usado em sites é um menu com os botões voltar, home, avançar, topo da página, atualizar, fechar página, imprimir, favoritos, indique aos amigos. Estes botões facilitam a navegação do usuário, principalmente se a página foi construída dentro de uma janela popup, que não tem os botões padrão do navegador…

Continue lendo… digg story





Botão Home

10 04 2009


Nível: Iniciante

Um recurso muito útil e muito usado em sites é um menu com os botões voltar, home, avançar, topo da página, atualizar, fechar página, imprimir, favoritos, indique aos amigos. Estes botões facilitam a navegação do usuário, principalmente se a página foi construída dentro de uma janela popup, que não tem os botões padrão do navegador.

O botão Home [home( )] abre na janela onde está o link a página definida como página inicial (homepage) do navegador. É o mesmo que pressionar o botão Página inicial [home( )] da barra de ferramentas do navegador…

Clique em continue lendo…


Continue lendo… digg story





Caracteres Especiais

6 03 2009


Imagem: Xtibia


Nível: Iniciante








Seguir

Get every new post delivered to your Inbox.