Aviso + Tutoriais

Depois de muito tempo sem postar nenhum tutorial resolvi postar hoje 3 tutorias que encontrei no Tutoriar.com, achei os tutos muito úteis e resolvi postar aqui para vocês. Confira:

Tutorial 1 - Slide no cabeçalho
  1. Primeiro instale e siga este tutorial para botar o slide.
  2. Agora, no código para botar o slide, bote neste gadget.
  3. Agora procure por b:skin, onde ficou o estilo do slide e procure por: .main_view { .
  4. Encontrou, então agora já com o slide pociocionado no designer do modelo certinho e o seu cabeçalho com um espaço em branco para ele, faça assim:
  5. Substitua todo esse parágrado até a chave também, e coloque o seguinte código:

.main_view {
float: left; /* esta na esquerda, se o seu espaço for na direita bote: right; */
position: relative;
margin-top:-nºpx; /* Pra ele ir subir na altura do cabeçalho */
margin-left:23px; /* para ele ficar mais para a esquerda */
}

Ajustando as imagens do Slide:

  1. Agora, chegou a hora das imagens, procure por: .window {
  2. Depois que achar, tem uma instrução ao lado, você quem vai fazer as imagens e ajusta-las, lembrando que no passo cinco onde há o código e o left ou right também irão ajudar.
  3. Os estilos do container das imagens diz para não ajustar, mas é presciso para que os numeros ou fiquem lá em cima ou embaixo, siga este tutorial para  te ajudar.
Pronto, o cabeçalho é você quem faz, só que vai deixar um espaço pro slide e nada mais.

Tutorial 2 - Menu Derp
PREVIEW DO MENU AQUI

Procure por : body {   ou   b:skin , se for o primeiro código cole o código abaixo depois de } , se for o skin cole ACIMA o código abaixo :

/* Menu de Memes by: www.tutoriar.com */
derp {
color: #fff; /* cor da letra */
font-size: 11px; /* tamanho da fonte */
line-height:22px; !importante!
font-family:Arimo; /* não modifica se quiser igual ao meu */
letter-spacing:1px; /* também não modifica */
margin-bottom: 1px;
float:left;
text-align:center;
background: #000; /* cor do fundo sem o mouse */
cursor: crosshair; /* cursor de cruz  */
width:68px; /* tamanho do menu */
font-variant:small-caps;
margin: 1px;
-webkit-transition-duration: .30s; /* transição */
}
derp:hover {
background: #000; /* cor do fundo quando passa o mouse */
color: #fff; /* cor da letra quando passa o mouse */
margin: 1px;
-webkit-transition-duration: .30s; /* ignore ¬ ¬ */
}
/* Fim do Menu :(  */
Só modifica onde esta a instrução do ladinho .

Como Usar :

Cole o código abaixo em um gadget html/java script :
<a href="Link"><derp>Nome</derp></a>
<a href="Link"><derp>Nome</derp></a>
<a href="Link"><derp>Nome</derp></a>
<a href="Link"><derp>Nome</derp></a>
<a href="Link"><derp>Nome</derp></a>
<a href="Link"><derp>Nome</derp></a>
Pronto, onde esta "Nome" é o nome da página e o "Link" é o link da página.

Tutorial 3 - Pop Up Fan box do facebook

Adicione um gadget html/java script o código abaixo:

Download do código

Nesse código procure por:

Receive all updates via Facebook. Just Click the Like Button Below.
Isso ai enxima, eu não sei o que quer dizer, traduz no google translate , rs. Agora procura por:
href=http%3A%2F%2Fwww.facebook.com%2FNOMEDAFANPAGE&amp;width=300
Onde esta em negrito bote o nome da sua Fan Page do seu blog salve . Espero que tenham gostado!

Creditos: Dicas para blog / Tutoriar.com

Nenhum comentário:

Postar um comentário

Deixe seu comentário