Bela coleção de cores das principais marcas que atualmente acontece na internet.
Saiba exatamente qual real cor do: Adobe, Amazom, Behance, Blogger, Deviantart, Facebook, Google+, Pinterest, Technorati, Twitter, You Tube, etc.
Quando precisar, tá na mão o código de numeração hexadecimal.
Você está em: Home » Posts da Categoria códigos
Cores exatas de A-Z. Famosas marcas da internet
Reservar espaço para imagens [Layout websites]
Mais uma boa ferramenta auxiliar na criação de websites que permite criar caixas personalizadas para imagens em vários tamanhos e atributos, sendo assim uma maneira rápida para completar o layout dos seus projetos.
Imagens grátis para Bloggers
Mais uma ajuda para encontrar boas imagens e usá-las em suas postagens. Como qualquer outro buscador, basta procurar por temas usando a caixa de busca e visualizar os resultados. Depois, é só clicar em "Get photo" na imagem escolhida para abrir uma janela disponibilizando várias opções de tamanho de download como também links relacionados.
Web site pack effects - Free
Afirmando ser a maior biblioteca livre circulando na web oferecendo recursos grátis do tipo:
Sound Effects, Icons, Fonts, Tutorials, Buttons, Menus, Pages Text, Background Textures e ainda Gradient Texture Maker, Text Background Maker, Pattern Background Maker, etc. Taí um belo site que acabei de encontrar usando boas palavras-chaves em buscas que vale uma olhadinha.
Colocar efeito em Navbar - Blogger
Taí um pequeno código que dará um belo efeito na Navbar do seu Bloggerblogspot. Bem legal para deixar o seu blog mais limpo (só aparecendo quando passar o mouse na área onde ela normalmente trabalha).
Funciona nos antigos e novos templates do Blogger. Quanto aos navegadores, testei no Firefox, Chrome e Opera, só não funciona no Explorer. (sic!)
Estou usando aqui neste blog, passe o mouse logo acima do cabeçalho para ver o efeito. Já tem um bom tempo que coloquei nos meus blogs e não lembro mais a fonte para citar.
Ativar barra de navegação do Blogger - Novos templates
Nesta semana ajudando uma amiga a fazer o seu primeiro blog Bloggerblogspot, percebi que os novos templates disponibilizados já estão com uma funcional barra de navegação horizontal.
Só que ela precisa ser ativada para vir a funcionar. Como não encontrei nenhum tutorial nativo (pelo menos até agora não vi nada parecido), resolvi então arriscar testando um código que geralmente é usado para fazer uma lista de links, e né que deu certo gente. Aêêê...!!!
Bom, chega de blá-blá-blá e vamos ao que interessa né?!
1. Antes de tudo é bom fazer uma pequena alteração na área do Header do seu blog adicionando mais espaço que irá facilitar seu trabalho quando quiser instalar outros elementos.
Veja aqui como: "Cabeçalho do Blogger - Adicione elementos".
2. Depois de feita a alteração e se você já estiver usando alguns desses novos templates, clique em "Design" na barra superior do seu blog para automaticamente entrar em "Elementos da página". Agora clique em "Adicionar um Gadget" na área horizontal logo abaixo do título do seu blog (Cabeçalho).
Personalizar os "marcadores" no Blogger
Recebi um e-mail de um leitor perguntando como personalizei a nuvem de marcadores aqui do "Vítima". Já tem tempinho que fiz essa alteração que permite mudar cor e tamanho da fonte. Como não lembrava mais tive que mergulhar nas entranhas do meu querido blog para tentar resolver este enigma. E, acabei encontrando o "responsável" por isso, rsrs...(não tenho mais a fonte original para dar o crédito) mesmo assim taí para você experimentar se assim desejar.
Trocar cor botão "Subscribe FeedBurner"
Se você usa a caixa subscrição do FeedBurner e é daqueles que gosta de dar uma personalizada no seu blog aqui está uma dica. É rapidinho de fazer basta acrescentar uma pequena "extensão" ao código original disponibilizado pelo Feed Burner.
Colocar contador regressivo no blog
Com o aproximado início do Campeonato Mundial de Futebol, tenho visto em muitos blogs/sites contadores de tempo regressivo instalados. Resolvi então fazer uma busca na net e acabei encontrando vários sites que fornecem grátis.
Pesquisar cores - Online
Duas excelentes ferramentas on-line para ter um pouquinho mais de conhecimento das variações de qualquer cor. Ambas muito simples de usar e muito legal para você ficar mais íntimo delas e perder o medo.
Retirar título de vídeo do YouTube
Uma boa solução para quem costuma postar vídeos do YouTube e gostaria de retirar aquelas informações embutidas de títulos e classificações que talvez possam não combinar ou até poluir o layout da sua página web. Muito simples de fazer.
Se quiser retirar essas informações basta acrescentar este pequeno código ( showinfo=0 ) ao código original do vídeo que você pretende inserir no seu blog.
Veja abaixo como:
Trocar cor da seleção de texto no Blogger
Esta é para quem gosta de dar uma "personalizada" no seu Blogger/Blogspot. É um pequeno código que permite trocar a cor da área de seleção de texto do seu blog, fugindo assim da cor cinza escuro de alguns navegadores.
Caracteres especiais - Aprenda a usar
Uma excelente tabela de caracteres que você pode usar em suas postagens. Com ela é possível aprender e criar com o auxilio do teclado alguns códigos que serão interpretados e vizualizados corretamente em qualquer página web.
Colocar texto seguindo cursor do mouse
Continuando a saga de "coisas" seguindo o mouse, apresento agora como colocar um pequeno texto seguindo o mesmo. Se quiser experimentar esse efeito, basta copiar o código abaixo e colar em "Adicionar um Gadget" como explicado aí abaixo:
→ Já logado no seu blog vá na sua "Navbar" (é a barra horizontal aí em cima no seu blog) e clique em: Personalizar > Layout > Adicionar um Gadget.
Veja exemplo funcionando aqui no Vítima Testes.
Hospedando imagens no TinyPic
Já postei aqui como hospedar imagens no Photobucket e ImageShack. Continuo a trabalhar com eles, mas, ultimamente estou dando preferência ao TinyPic, por ser no meu entender bem mais simples e rápido de usar. Então estou apresentando para você também experimentar se quiser. Ele tem uma limpa, fácil e intuitiva área de trabalho.
Abrir mensagem ao "Clicar botão"
Essa dica é rapidinha e boa para você comunicar algo do seu interesse aos seus leitores. Trata-se de um código que instalado no seu blog permite colocar um botão que ao clicá-lo aparecerá uma mensagem escolhida por você.
É só copiar o código, alterar as partes em vermelho como no exemplo aí abaixo e instalar no seu blog.
<form>
<input type="button" value="TÍTULO do BOTÃO AQUI" onClick="alert('SUA MENSSAGEM AQUI'); return true">
</form>
<!-- End of Message Alert -->
Perfil do Blogger - Alterar tamanho da imagem
De vez em quando me dá na telha de ficar futucando nos códigos do Blogger, entendendo que existe "uma certa lógica" neles. Para isso criei uns Blogs de Testes que me permitem ficar tranqüilo se essas experiências não funcionarem direito. He, he, he!
Em um destes experimentos descobri como alterar o tamanho da imagem do Perfil do Blogger (aquele gadget "Quem eu sou").
Para fazer isso vá em:
Personalizar > Layout > Editar HTML, salve uma cópia do mesmo clicando "Baixar modelo completo", não marcar caixa "Expandir modelos de widgets" e procure por algo igual ou semelhante ao código abaixo.
.profile-img {Para alterar tamanho da imagem é só adicionar a parte em vermelho (o numeral é vc quem decide) como no exemplo abaixo.
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $bordercolor;
}
.profile-img {Para modificar a borda é só alterar a parte em azul podendo deixar assim:
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $bordercolor;
width: 60px;
height: 70px;
}
border: 1px solid #000000;Em azul, a largura e tipo de borda. Experimente: solid, dotted, dashed, double, groove, ridge, inset, outset. Vá testando clicando em "Visualizar", chegando a seu gosto clique em "Salvar Modelo".
Em vermelho, você pode colocar a cor que quiser. Veja Tabela de cores.
Cabeçalho do Blogger - Adicione elementos
Essa é uma das dicas que aprendi logo quando comecei a fazer meus dois primeiros blogs. O Burity Digital aonde apresento minhas criações no Photoshop, e o Burity Pinturas que apresento meus trabalhos nas "Artes Plásticas". Os links estão aí na barra de navegação para você fazer uma visitinha se assim desejar.
Microsoft widget translator
Mais um widget de tradução para colocar no seu blog que encontrei dando minhas navegadas na Net. Não sei se é uma "novidade" mas taí se quiser experimentar. Tem um visual limpo e muito fácil de instalar. É só colocar a URL do seu blog, escolher a linguagem, determinar a largura, a cor, marcar a caixa "I agree to the Microsoft Translator Terms of Use.", clicar em "Generator code", pegar o código e depois instalar na sua sidebar: Personalizar > Layout > Adicionar um Gadget > HTML/JavaScript..
Dá um clique na imagem abaixo e vai lá conferir.
Texto em movimento na barra de status - 02
Já postei aqui uma forma de colocar um pequeno texto em movimento na barra de status no seu blog. Agora é a vez de apresentar um script que dá um efeito tipo máquina de escrever (Type Text).
