Titulo do Post Colorido

O tutorial de hoje, é super simples e foi eu que fiz. Não sei se já existe e tal, só sei que foi eu que fiz. Eu vi que dava pra colocar negrito, itálico e sublinhado no título dos posts, então, fui ver se dava pra deixar o título com várias cores, e acabei conseguindo. O código é super simples, de boa.

Quando você for colocar o título do post, cole esse código:

<span style="color: #COR;">Palavra1</span> <span style="color: #COR;">Palavra2</span> <span style="color: #Cor;">Palavra

3</span>

Aonde está em negrito, você coloca a cor em códigos, claro. E onde está em itálico a palavra que você quer que fique com aquela cor. E assim vai indo, até todas as palavras ficarem coloridas.

Fontes para Download

No site dafont.com tem milhares e milhares de fontes maravilhosas para fazer download. Selecionei 5 das minhas preferidas para vocês baixarem as que gostarem. Clique na imagem para fazer o download.

Backgrounds Neutros

Backgrounds neutros para você usar no seu blog. Os bgs foram retirados do site super últil Subtle Patterns, visitem assim que puderem porque lá é cheio de backgrounds lindos para todos os tipos de gostos. Ao todo são 14 backgrounds.

 
 

 

 

Como Usar o @Font-Face

Como usar o @Font-Face, que é uma propriedade das fontes no Html.

A tag @font-face destina-se a especificar um tipo de fonte em uma página, site ou blog.

Lembre-se que você deve fornecer uma lista de fontes terminando com uma fonte genérica para exibir seus textos. Por exemplo:

font-family: "Lucida Grande", "Lucida Sans", Verdana, Sans-Serif;
}

Por exempo, queremos usar a fonte "RegencyScriptFLF Regular" no CSS. Observe as regras CSS a seguir ::

@font-face {
font-family: "RegencyScriptFLF Regular";
src: url("http://site/fontes/RegencyScriptFLF-Regular.ttf");
}

Como vocês podem ver, nós sempre colocamos no nome da fonte, e embaixo você vai ter que sempre colocar a Url da fonte, como mostra acima. Não é complicado, viram ?

Então sempre que for usar o @Font-Face, você irá usar esse formato, substituindo as partes em negrito:

@font-face {
font-family: "NOME DA FONTE";
src: url("URL DA FONTE");
}

Mini Music Player Colorido

Como fazer mini music players coloridos para colocar no blog. Exemplo:

1. Entre no MP3 Player (x)
2. Lá na página, haverá três abas, clique na que diz 'Players'
3. Na página, aparecerá várias opções de players, escolha o 'Mini'.
4. Aparecerá uma página com um player e um menu ao lado. Nesse menu, clique em 'Generator' (x)
5. Irá abrir uma página tipo essa aqui, certo?
Ótimo! Agora vamos personalizar o player. Se você observar, na página terá um player preto, ele é o preview do que você está fazendo,  ou seja, tudo o que você modificar ali, aparecerá naquele player preto.
Na parte que tem um menu drop down, são as categorias. Iremos editar primeiro a categoria 'General'.
6. Em 'MP3' você vai colocar o link da musica que você quer que fique no player.
Para fazer isso, entre nesse site aqui. E pesquise pela música que você quer. Pesquisei por All Time Low, da The Wanted, mas você pesquisa pela que você quiser, lógico.
Irão aparecer várias opções da música que você pesquisou, clique em uma. 
Assim que você clicar em uma, irá aparecer uma pergunta tosca que matemática, tipo essa (x). Aí é só colocar a resposta lá e clicar em 'download'. (não irá fazer o download).
Aparecerá uma página, e lá estará: "MP3 URL:" acompanhado do seu código. Copie esse código e cole lá na página do Mini MP3, onde se pede.
7. Abaixo de 'mp3' terá width e height, ou seja, largura e altura do player. Ajuste do modo que quiser.
8. Se você quiser que a música se inicie sozinha, marque a opção '1' do autoplay. Caso queira que tenham que clicar no play do player pra musica começar, deixe como '0'.
Agora personalizaremos as cores do player.  10. Na aba de categorias, selecione a opção 'colors' (x).
11. Em bgcolor você escolhe a cor do fundo do player
12. Em loadingcolor você escolhe a cor da linha que vai passando, no decorrer do carregamento da musica.
13. Em buttoncolor você escolhe a cor do play e do pause
14. Em slidercolor você escolhe a cor do botton que fica andando no decorrer da musica.
Você pode usar essa ou essa tabela de cores. Lembrando que quando você for colocar o código das cores, você NÃO PODE colocar com esse negócio '#'. Tipo, se eu for colocar a cor branca, o código será esse: #FFFFFF, mas eu tenho que tirar isso # e deixar só o código.
Seu player está pronto! Agora para coloca-lo no seu blog, é só copiar o código que está na caixinha, e colar em um widget de HTML/JavaScript.

Separar Postagens e Widgets

Ao invés de deixar os posts/widgets da página colados, você pode deixar um espaço entre eles.

Separar Área dos Posts

1. No HTML do seu blog, aperte F3 e procure por .main-inner .column-center-outer { 2. Apague todo o código que o acompanhe, ou seja, do código procurado até a } 3. E no lugar, cole:

.post-outer {
	margin: 3px 8px 15px;
	background:#fff; /* Cor do fundo dos posts */
	padding: 5px 5px;
	padding: 5px;
	box-shadow: inset 0 0 0px #B2D3D7, 0 0 3px #d9d7d7; /* Sombra */
	border-radius: 8px; /* Bordas Arredondadas */
	}

Visualize e se estiver tudo separadinho, salve.

 Separar Widgets

1. No HTML do seu blog, aperte F3 e procure por /* Widgets

2. Abaixo dessa tag, haverá um código que começa assim .sidebar .widget {

3. Apague todo esse código e o que o acompanha, ou seja, o título do código até a }

4. E no lugar cole isso:

.sidebar .widget {
	width:100% !important;
	background:#fff; /* Cor do fundo dos widgets */
	padding-left: 10px;
	padding-bottom: 10px;
	padding-right:10px;
	padding-top: 5px;
	margin: 30px 0;
	box-shadow: inset 0 0 0px #B2D3D7, 0 0 3px #d9d7d7; /* Sombra */
	border-radius: 8px; /* bordas arredondadas */
	}

Visualize e se estiver tudo separado, salve.

Mudar a Cor da Seleção de Texto do Computador

Como mudar a cor (de azul para a que deseja) da seleção de texto do seu computador.

1. Na sua desktop (página inicial, onde fica os ícones de navegação e tal), aperte o botão direito do mouse, e clique em 'Personalizar', a ultima opção.

2. Vai aparecer uma página, clique em 'Cor da Janela' [x]

3. Na outra página que aparecer, clique em 'Configurações de Aparência Avançada...' [x]

4. Na janelinha que abrir, em 'Item', selecione Itens Selecionados [x]

5. Ao lado você poderá escolher o tamanho da fonte e a cor da seleção de texto [x]

Aí é só você personalizar de acordo com o que você quer o tamanho e a cor, e clicar em 'ok'. Pronto, sua seleção de texto do pc estará colorida.

Como Fazer uma Vídeo Aula

Passo a passo de como fazer uma vídeo aula (gravar a tela do computador com som).

1. Faça o download do Camtasia Studio 8 clicando aqui.

2. Assim que o download terminar, para abrir o programa você precisará do serial, então coloque:

Name: Team Z.W.T
Key: ZACAC-7K3Z5-T8KYD-C4PVF-4569B

3. Se o seu programa abrir, ok! Logo no início irá aparecer uma página, perguntando o que você quer fazer, e você terá que escolher entre gravar um vídeo ou editar um vídeo, e óbvio, escolherá a primeira opção. (x)

4. Irá aparecer uma mensagem de aviso, igual o meu exemplo abaixo, é só clicar em 'ok'.

5. Ao clicar em ok, irá aparecer uma janelinha, como essa:

Em 'Select area' você define o tamanho do local onde vai gravar sua tela. Se quiser que filme tudo, deixe como está.

Em 'Recorded inputs' deixe apenas a opção 'audio on' ativada, caso queira que no vídeo saia o som do seu computador.

No botão vermelho, você clica quando estiver preparado pra fazer o vídeo. Ao clicar nele, aparecerá uma tela dizendo que quando você quiser parar de gravar, deverá apertar o F10 (x) e logo após uma contagem para começar a gravação.

Assim que a contagem terminar, você poderá dar o play na sua musica de fundo, e começar a fazer o que vai ensinar na vídeo-aula. Quando terminar de explicar, aperte F10 e a gravação irá parar, aparecerá uma tela, mostrando o vídeo que você gravou. 

Ao lado, vai aparecer um botão escrito 'save and edit', clique nele e salve seu vídeo. Depois, caso queira, edite ele, e não se esqueça de salvar ao terminar.

Com isso, é só hospedar no youtube ou em qualquer outro site que você queira que apareça e pronto.

Como Colocar Instagram no Blog

Passo a passo de como colocar o widget do Instagram no seu blog.

1- Vá no Google Tradutor e cole esse link (http://snapwidget.com/) para traduzir o site. 

2- Preencha os dados como mostra a imagem abaixo:

3- Clique em Visualização para conferir se está tudo certo.

4- Clique em Obter Widget. Vai aparecer uma janelinha.

5- Copie o código que irá aparecer.

5- Agora é só você adicionar um Gadget HTML/JavaScript e colar o código nele.