Adicione um Favicon no seu website

Em Novembro 23rd, 2010, publicado em: Blog, Truques e dicas por

| Tags: , ,

Neste tutorial vou indicar como adicionar um Favicon no seu Website.
O que é um Favicon??

Regras importantes:
- O formato do ficheiro tem de ser na extensão .ICO
- O tamanho do Favicon deverá ser de 16×16 pixeis

Deverá criar uma imagem alusiva ao seu website com um simples editor de imagens grátis por exemplo: Gimp
Deverá criar um novo ficheiro com um tamanho de 16×16 pixeis e colar dentro desse espaço a sua imagem alusiva ao website. Geralmente utiliza-se uma zona importante do logótipo, no caso da tetoOnline usamos a imagem apresentada acima.
Poderá guardar o ficheiro que criar no formato .JPG ou .PNG e no passo seguinte vou indicar como converter para .ICO de uma forma rápida e gratuita.

Temos de converter o nosso ficheiro para o formato .ICO para que o nosso Favicon seja reconhecido.
Deverá entrar neste website: http://www.favicon.cc/
Neste site deverá fazer o upload do seu ficheiro .JPG ou .PNG e ele irá automaticamente gerar o seu ficheiro .ICO.
Para guardar o ficheiro no seu computador deverá apenas clicar no botão “Download Favicon”.

Abrir o seu site no backoffice ou seu possível editor de texto ou ainda dreamweaver e colocar antes da tag </head> a seguinte linha de código <link rel=”shortcut icon” href=”imagens/favicon.ico”>
Sabendo que deverá estar totalmente correcto o link da imagem “imagens/favicon.ico” é o local do ficheiro .ico no seu site.

Está concluído o tutorial! Faça um refresh ao seu browser por vezes também uma limpeza da cache e irá apresentar o favicon ao lado do endereço do seu website.

Espero que este tutorial lhe seja útil e seja totalmente esclarecedor.

ler mais

editar post/página WordPress

Neste post irei publicar como conseguir poupar tempo na edição dos seus post´s e páginas WordPress.

A partir do painel administrativo WordPress …/wp-admin/ podem editar o conteúdo das páginas/posts.
Sabia que pode editar as suas páginas/posts WordPress estando a visualizar o site apenas clicando num botão “Editar”

Como realizar tudo isto?

Na pasta do seu theme existem 2 ficheiros:
single.php
page.php

Abrindo esses ficheiros pelo editor online de temas do WordPress (seusite.com/wp-admin/theme-editor.php) poderá pesquisar nesses 2 ficheiros pelo texto:
the_content()

Depois desse código poderá adicionar esta linha:
<?php edit_post_link(__('Edit This')); ?>

Poderá nomear o nome do botão para o texto que desejar editando o texto “Editar”.

Relembro que este botão será apenas visível aos administradores e autores do seu Blog WordPress. Sendo assim o visitante não terá acesso nem irá visualizar o botão.

Espero ter ajudado e ter-lhe poupado minutos sagrados na edição do conteúdo do vosso site.

ler mais

Nestes pequenos passos vou exemplificar como inserir cantos arredondados num botão do seu website.

Este tutorial aplica-se apenas ao browser Mozilla Firefox, o Internet Explorer não irá aplicar os cantos arredondados deixando-os por defeito (quadrados).
Apliquei este tutorial no website: www.maisevents.com especificamente nesta página, também na aplicação do anterior tutorial: Criar um botão retroceder.

Dantes os cantos do botão “Retroceder” estavam quadrados agora com este pequeno código abaixo descrito poderão obter esse mesmo botão com cantos arredondados.

1º Passo

Terão de adicionar no ficheiro style.css (geralmente presente na pasta do tema do vosso website) as seguintes linhas de código (pode adicionar as linhas no fim do ficheiro):

.cantoarredondados {-moz-border-radius:5px;
-webkit-border-radius:5px;}

O texto: cantoarredondados é o nome do estilo que estamos a criar, que pudemos denominar de outra maneira por ex: “botoesrecondos” no meu caso escolhi “cantosarredondados” para a sua simples aplicação no website.

Após editado o ficheiro poderão guardar e reenvia-lo novamente via ftp para o servidor.

2º Passo

Em seguida é pegar-mos então então n anterior tutorial que referi acima da criação do botão retroceder.

O código fornecido era:

<input onclick=”history.back(-1)” type=”button” value=”Retroceder!” />

Agora teremos de aplicar o nossa classe que criamos.

<input class=”cantosarredondados” onclick=”history.back(-1)” type=”button” value=”Retroceder!” />

Agora pudemos inserir o código final com a class aplicada na página onde pretendemos que apareça o resultado.

Espero que este nova dica lhe seja útil,
Bons cliques.

ler mais

Se o seu browser tem um botão voltar atráz porque o seu site não tem?
Use este código

Javascript:
<input onclick=”history.back(-1)” type=”button” value=”Retroceder!” />

PHP:

<?php

$url = htmlspecialchars($_SERVER['HTTP_REFERER']);

echo “<a href=’$url’>Retroceder</a>”;

?>

Teste:

Esqueça o botão retroceder do seu browser

ler mais

pixelzoomer

PixelZoomer é uma extensão do browser Firefox, que permite fazer zoom em websites e capturar a cor de um determinado pixel.

Este plugin para Mozilla Firefox permite visualizar os pixeis de uma determinada área a escolha de um website graças ao seu motor em tempo real de recolha de cores em código HEX.
Assim com o PixelZoomer poderá copiar uma determinada cor proveniente de um pixel (ex: #FFFFFF) de qualquer página web que visualizar premindo o botão botao-pixelzoomer.
Com este plugin essencial poderá deixar de utilizar um software de edição de imagem e  passar a visualizar facilmente directamente no seu browser a fonte da cor de uma determinada ilustração na web.

Especificações:

  • As cores podem ser seleccionadas e copiados directamente no browser (como #FFFFFF)
  • Níveis de zoom de 100% a 3200% para visualizar a cor do pixel que desejar

Info:

Download: PixelZoomer
Página: PixelZoomer

ler mais