Menu com Imagem em Transição

Olá pessoal! Hoje irei ensinar como fazer o menu que fiz para o blog Cantar Es Lo Que Soy. Vocês precisam seguir passo a passo para que dê certo, pois ele é um pouco mais complicado de fazer.

1. Crie as imagens de cada link do menu, baseada na imagem abaixo:

2. Copie o código abaixo e cole antes de ]]></b:skin>

/* ------------------ Menu ------------------ */
.position {margin-top: 0px; margin-left:12px;}
 .bordernomedolink1 {display: inline-block; width:150px; height:45px;overflow: hidden;}
.bordernomedolink1 img{padding-top:0px;-webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s;}
.bordernomedolink1:hover img{margin-top:-44px;}
.bordernomedolink2 {display: inline-block; width:150px; height:45px;overflow: hidden;}
.bordernomedolink2 img{padding-top:0px;-webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s;}
.bordernomedolink2:hover img{margin-top:-44px;}
.bordernomedolink3 {display: inline-block; width:150px; height:45px;overflow: hidden;}
.bordernomedolink3 img{padding-top:0px;-webkit-transition: all 0.2s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s;}
.bordernomedolink3:hover img{margin-top:-44px;}
.bordernomedolink4 {display: inline-block; width:150px; height:45px;overflow: hidden;}
.bordernomedolink4 img{padding-top:0px;-webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s;}
.bordernomedolink4:hover img{margin-top:-44px;} 

OBS.: A largura está maior e a altura está menor que a das imagens no código, e elas devem continuar assim. Se depois que você fizer tudo, ficar desregulado, altere a numeração no código. Para alterá-la é só ir em width: 150px e height: 45px, e alterar a numeração até ficar certo. 

OBS2.: Como podem ver, no código, o nome dos links está assim ".bordernomedolink1, .bordernomedolink2", mude esses nomedolink, pelo nome de cada link do menu. Se você quiser adicionar mais um, copie é só criar outro abaixo com as mesmas configurações que os anteriores.

3. Após ter feito as imagens e colado o código, copie o código abaixo e cole onde quiser que o menu apareça:

<div class='position'> <div class="bordernomedolink1"> <a href="LINK DO MENU"><img src="IMAGEM DO LINK" /></a></div>
 <div class="bordernomedolink2"> <a href="LINK DO MENU"><img src="IMAGEM DO LINK" /></a></div>
 <div class="bordernomedolink2"> <a href="LINK DO MENU"><img src="IMAGEM DO LINK" /></a></div>
 <div class="bordernomedolink3"> <a href="LINK DO MENU"><img src="IMAGEM DO LINK" /></a></div>
 <div class="bordernomedolink4"> <a href="LINK DO MENU"><img src="IMAGEM DO LINK" /></a></div> </div> </div>

OBS.: Mude os "bordernomedolink" pelos nomes que você colocou no outro código, e coloque o link das imagens e os links do menu.

Prontinho! Já pode usar seu novo menu!

TUTORIAL FEITO POR LETÍCIA PERSI 

PERSONALIZANDO CADA GADGET DE FORMA DIFERENTE

Bom, já aviso que vou ensinar o básico. Vocês que com o tempo irão aperfeiçoar o código, como eu fiz no meu blog. Esse tutorial foi feito pelo blog Cherry Bomb, mas o código foi adaptado por mim, então se for repassar, dê os devidos creditos ao Cherry e ao Illustrarte.

Primeiro vamos procurar o gadget que queremos mudar. Vá em MODELO > EDITAR HTML e procure pelo nome que você deu ao seu gadget. No meu código, vou procurar (ctrl+ f) pelo gadget com o nome de Blog Info. 

Bom, temos duas coisas destacadas. O primeiro é o ID do gadget e o segundo é o nome do gadget. Sempre que você quiser mudar um gadget, procure pelo nome dele para achar seu ID.

Usaremos somente o ID do gadget, nesse caso o HTML7.

Agora copie o código abaixo:

#ID-DO-GADGET h2 {  /*Título do gadget transparente*/
Font-family: Raleway;
font-size: 18px;
padding-left: 70px;
background: transparent;
font-weight:800;
color:#transparent;}

#ID-DO-GADGET .widget-content {
width: auto;
background: url("link da imagem de fundo");
color: #5C5C5C;
padding: 15px;
height: 378px;
padding-top: 80px;
padding-left: 28px;
margin-bottom: 50px;
margin-top: 0px;
overflow: hidden;
}

No lugar de ID-DO-GADGET, cole o ID do gadget que você quer. Se fosse baseado na ultima imagem, colaria HTML7.

OBS.: Esse tutorial serve perfeitamente para o meu código, não garanto que fique perfeito com outros códigos.

Tutorial feito por,

Letícia Persi

TUTORIAL: Postagens recentes em miniatura

Olá pessoal, hoje vim ensinar a fazer aquelas miniaturas de postagens recentes, como essa:

Primeiramente, gostaria de agradecer ao blog Janaína Poderon, pois foi lá que aprendi a fazer essas miniaturas.

1. Vá no painel do blogger > LAYOUT > ADICIONAR GADGET > HTML/Javascript.

2. O gadget precisa ser abaixo da header (topo), para ele ficar correto.

3. Nesse gadget, cole o seguinte código (para colar, selecione tudo, clique com o botão direito do mouse, e selecione COPIAR, ctrl+c não funciona aqui!):

<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
width:1130px;
margin-top: -30px;
background: #ffffff;
box-shadow: 0px 2px 10px #ECECEC;
padding: 20px;
margin-bottom: 30px;
height: 290px;
float:center; ==POSIÇÃO DO SLIDE==
clear:both;
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background: rgba(0,0,0,0.5);
display: block;
clear: left;
font-size: 15px;
text-transform:uppercase;
line-height:1.3em;
font-weight:700;
height: 50%;
width:79%;
font-family: Bitter;
position: absolute;
bottom:0%;
text-align: center;
OUTLINE-STYLE:DASHED;
OUTLINE-WIDTH:1PX;
OUTLINE-COLOR: #ffffff;
OUTLINE-OFFSET: -6PX;
margin:0 0 14px 13px;
padding:60px 10px 20px 10px;
color:#ffffff;
word-wrap: break-word;
overflow:hidden;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}
.bsrp-gallery .bs-item .ptitle:hover {
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity:0.9;
opacity:0.9;
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img {
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8;
}
/*FIM CSS FOTOS*/
</style>
<script>
//byjana
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Pegue esse código no Illustrarte Design">'];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBM4U9OC_Gm_g98giUy3CKQ8SF9qZrE5N4FHcmwcmzxN-IUG1wujfAs45sk0zpQOig5qPnsQIWn8cIzUMumj4lvYest_mt2_tysGgO4hR2ss4C-z7iYbl52cLk35pBXdpkS41yKkocExI/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
var links = post.link || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
html.push('<div class="bs-item">', item, '</div>');
}
html.push('</div>');
document.write(html.join(""));
}
hoje = new Date()
numposts =1
var bsrpg_thumbSize = 272;
var bsrpg_showTitle = true;
document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>

4. Pronto! Suas miniaturas estarão funcionando!

Se copiar esse tutorial, credite! Pois esse código é somente do Illustrarte Design.

Mudando a posição da sidebar e área de postagem

Olá pessoal! Primeiro, gostaria de dizer que não tenho muita previsão para abrir as encomendas, mas provavelmente abrirei nessa semana! Hoje ensinarei como mover a sidebar para os lados e para cima. É bem simples, abaixo mostrarei o passo-a-passo:

1. Vá em MODELO > EDITAR HTML > e procure (ctrl+f) por #sidebar-wrapper-left.
2. E você encontrará isso:

3. Em "margin-left: 12px;" é onde você mexerá a sidebar para a direita ou esquerda. Quanto maior a numeração, mais para a direita ela fica, e quanto menor a numeração, mais para a esquerda ela fica.

Agora, ensinarei como mudar a posição da área de postagem. É bem simples e igual a área da sidebar, porém você não pode afastá-la tanto da sidebar, pois tem um limite, e dependendo do quanto você afasta, ela vai para debaixo da sidebar. Aí está o passo-a-passo:

1. Ainda no código do layout, procure (ctrl+f) por #main-wrapper.
2. Você encontrará:

3. Em "margin-top: 10px;", você moverá a área de postagem para cima ou para baixo. Quanto maior a numeração, mais para baixo a área de postagem fica, quanto menor a numeração, mais para cima a área fica.

TUTORIAL: Mudando a posição do slide no layout base

Primeiramente, quero avisar que esse tutorial só serve para esse layout base.

1. Vá em MODELO > EDITAR HTML > e procure (ctrl+f) por .slider-grade.
2. Dentro de .slider-grade, você encontrará o sublinhado da imagem abaixo:
3. Primeiro, vamos mexer em "top: 950px".
Quanto maior a numeração dele, mais para baixo o slide ficará. Mude conforme quiser.
4. Agora, vamos mexer em "left: 530px".
Quanto maior a numeração dele, mais para a direita o slide ficará. Mude conforme quiser.
5. Após isso, seu slide estará no local que quiser! É só ir ajustando!

Tutorial exclusivo do Illustrarte Design,

Letícia Persi

Barra de rolagem com efeito hover

Quer uma barra de rolagem igual a do Illustrarte, que quando passa o mouse muda de cor? É simples ...

1. Vá em MODELO > EDITAR HTML > e procure por </b:skin>.
2. Cole o código abaixo, acima de </b:skin>.

	::-webkit-scrollbar {  width:15px; /* largura da barra de rolagem */
	height:auto;
	background:#000000;  /*cor de fundo da barra de rolagem*/
	height:5px;  /* altura da barra de rolagem */
	}
	::-webkit-scrollbar-thumb{
	background: #5d5d5d; /* Cor da barra de rolagem */
	height:5px; /* altura da barra de rolagem */
	}
	::-webkit-scrollbar-thumb:hover{
	background: #597594; /* Cor da barra de rolagem ao passar o mouse */
	}

Pronto! Sua barra de rolagem está pronta!

Atenciosamente,

Letícia Persi

TUTORIAL: Menu sem links aparecendo

Olá! Hoje vim trazer um tutorial para vocês de como fazer um menu com os links aparecendo somente na hora em que passa o mouse. Veja o exemplo aqui. Acho ele muito bom quando você quer poupar espaço na header. Gostou? Clique em "Leia Mais" para aprender a colocá-lo.

1. Primeiro vá em MODELO > EDITAR HTML > e procure por  </b:skin>.
2. Cole o código abaixo, antes do </b:skin>.

/*NAVIGATION*/
#menu { /* area geral */
  margin: 0 20px 0 10px;
  position: relative;
  width: 210px;
  z-index: 100;
}
#menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#menu li { list-style-type: none; }
#menu a { /* links */
  color: #ffffff;
  font-size: 12px;
  text-transform: uppercase;
  padding-bottom: 20px;
  text-decoration: none;
  font-family: 'Open Sans';
  font-weight:700;
}
#menu a:hover { color: #999999; }
#menu .palavra {/* palavra menu */
  background-color: #161616;
  padding: 10px 0;
  text-align: center;
  display: block;
  position: absolute;
  width: 100px;
}
#menu ul.palavra li {
  color: #ffffff;
  font-weight:700;
  text-transform: uppercase;
  font-family: 'Open Sans';
  font-size: 20px;
}
#menu ul.palavra ul li {/* itens ocultos */
  border-top: 2px solid #4e4e4e;
  padding: 0 0 0px;
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
/* links ocultos */
#menu .oculto {
  display: block;
  padding: 0px 10px;
  position: relative;
  top: 10px;
  height: 0;
  overflow: hidden;
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
#menu ul.palavra:hover .oculto { height: 100%;
}

3. Agora, cole o código abaixo onde quiser que o menu apareça:

<div id="menu">
  <ul class="palavra">
<li><img src='http://static.tumblr.com/jbehefw/JTjnokas4/sidebar_h2.png'/><ul class="oculto">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    </ul>
  </li></ul>
</div>

Pronto! Aproveite seu novo menu :)

Tutorial exclusivamente do Illustrarte Design,

por Letícia Persi

MUDANDO POSIÇÃO DO MENU NO LAYOUT

Olá! Primeiramente já vou avisando que esse tutorial só é válido no meu layout base, pois os layouts de outras pessoas não possuem o mesmo código que o meu. Para ver o tutorial, clique em Leia Mais.

1) Vá em modelo > editar html > e procure por Layer1.

2) Você achará isso:

#Layer1 {
	position:absolute;
	width:900px;
	height:70px;
	color: #ffffff;
	font-size: 13px;
	z-index:10;
	left: 70px;
	top: 878px;
	}

3) O que está marcado em negrito, será o que você deverá alterar. Quanto maior o número de pixels de "left", mais para a direita seu menu irá ficar. E quanto maior o número de pixels de "top", mais para baixo seu menu irá ficar.

4) Ajuste e pronto!

TUTORIAL FEITO POR LETÍCIA PERSI, SE COPIAR DÊ OS CRÉDITOS.

COMO BAIXAR E ATIVAR PHOTOSHOP CC

Bom, hoje venho trazer um tutorial de como baixar e ativar o photoshop CC (a versão mais nova da adobe), para vê-lo clique em "leia mais".

1. Entre nesse link.

2. Clique em Versão de Avaliação Gratuita (no menu que fica em cima).

3. Se tiver uma ID da adobe, clique em Entrar e faça login. Se não tiver, clique em Criar uma ID da Adobe Nova, e crie uma ID pra você.

4. Faça login com sua ID.

5. Automaticamente, um download irá se iniciar. Será o download do Creative Cloud do Adobe. Espere o download finalizar e instale o Creative Cloud.

6. Faça login com o mesmo ID da adobe nele, vá em Aplicativos (APPS), procure pelo Photoshop CC e clique nele para fazer o download.

7. Após a conclusão do download, o Creative Cloud te avisará de que você só tem 30 dias para usar o photoshop, não se preocupe, nós ativaremos ele.

8. Baixe esse ativador.

9. Veja se seu computador é 32bits ou 64bits antes de descompactar a pasta. (aprenda como ver isso aqui).

10. Depois de saber qual o processador dele, abra o arquivo winrar, e vá na pasta referente ao processador. Extraia o arquivo que estiver dentro dela (amtlib.dll) para sua área de trabalho.

11. Vá em Meu Computador > Disco Local/Local Disk ou OS > Arquivos de Programas > Adobe > Adobe Photoshop CC 2014 > e dentro dessa pasta cole aquele arquivo extraído do winrar.

12. Vai aparecer aquele aviso de que esse arquivo já é existente, mas ignore-o e substitua o arquivo existente por esse que baixamos.

13. Pronto! Seu photoshop está ativado!

OBS.: Tutorial feito por mim, se copiar dê os créditos. Qualquer dúvida mande um email para leticiapavoni@hotmail.com.

COLOCANDO SHAPES NO PHOTOSHOP

1. Primeiro abra seu photoshop.

2. Vá no retângulo que fica perto do botão onde cria texto.

3. Clique com o botão DIREITO do mouse em cima dele, e selecione Ferramenta Forma Personalizada.

4. Vá lá em cima na tela, e clique ao lado de onde está escrito "forma:".

5. Clique naquele ícone de ferramentas que fica no canto direito.

6. Selecione Carregar Formas.

7. Agora procure o arquivo do shape que você baixou e clique nele.

8. Clique em Carregar.

9. Pronto! Seu shape foi carregado, e agora é só usá-lo!

10. Se for repassar esse tutorial, credite! Ele foi totalmente feito por mim.

Efeito Sombreado

Para ver esse tutorial, clique em "Leia Mais."

Primeiro crie a frase ou palavra que quiser. Depois, clique com o botão direito direito em cima do layer dela, e clique em OPÇÕES DE MESCLAGEM.

Clique em SOMBRA INTERNA e edite assim:

Clique em SOMBRA PROJETADA e edite assim:

Pronto! Seu efeito está feito! rs

TUTORIAL FEITO POR LETICIA PERSI. NAO COPIE.

Efeito Pressionado

Para ver esse tutorial, clique em "Leia Mais."

Primeiro crie sua frase, ou palavra. Após isso, vá na sua camada e clique com o botão direito em cima dela, e clique em OPÇOES DE MESCLAGEM.

Agora clique em SOMBRA INTERNA. E edite ela assim:

Agora clique em SOMBRA PROJETADA e edite ela assim:

Pronto! Seu efeito está feito! rs

TUTORIAL FEITO POR LETICIA PERSI. NAO COPIE. 

Efeito Desfocado

Para ver o tutorial, clique em "Leia Mais".

Bom, primeiro crie sua frase, ou palavra. Depois de criá-la, vá nos layers. Clique em cima dela com o botão direito e duplique duas vezes sua imagem.

Agora, coloque o layer principal acima dos duplicados.

E nas duas camadas duplicadas, troque a opacidade para 20%.

Agora, mexa as duas camadas duplicadas pra onde você quer que fique o desfoque. Geralmente eu mexo uma delas pra cima e pro lado direito, e a outra pra baixo e pro lado esquerdo.

Pronto! Seu efeito está feito! rs

TUTORIAL FEITO POR LETÍCIA PERSI. NAO COPIE.

Colocando fontes diferentes no Layout

Sabe aquela fonte, que você acharia super demais colocar no titulo de seus posts, mas como ela não é comum não funciona? Trouxe a solução.
1. Primeiro abra esse site.
2. Procure a fonte que você quer. (OBS.: nem todas as fontes são registradas lá, portanto algumas não dão certo). 
3. Ao achá-la, clique nesse botão destacado na imagem abaixo. 

4. Abrirá uma nova página após você clicar. Desca essa página até achar o código mostrado na imagem abaixo.

5. Copie esse código, adicionando uma "/" antes do ">". Exemplo:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>

6.Copie esse código com a "/" (nao esqueça de colocá-la, como mostrei no item anterior), e cole antes de </head>.
7. Depois é só ir onde você quer que a fonte fique. Exemplo, no seu layout você procura a parte de titulo do post ou sidebar, e onde tiver "font-family: alguma fonte", você coloca no lugar do nome da fonte que já está lá, o nome da sua fonte.

Pronto!! Espero ter ajudado.

TUTORIAL FEITO PELA LETICIA PERSI. DON'T COPY.

Link que abre em outra aba

Sabe aquelas horas que você clica em um link e ele abre na mesma página e você perde essa página? Então, isso é muito chato! rs. Então vim trazer uma maneira de fazer seus links abrirem em uma nova aba.
Toda vez que for adicionar um link, copie esse código:

<a href="URL DO LINK" target="_blank">NOME DO LINK</a>

Pronto! Seu link abrirá em uma nova aba!

TUTORIAL FEITO POR LETICIA PERSI. DON'T COPY.

Mudando o player do Youtube

Bom, muita gente não sabe, mas você sabia que pode mudar a cor do player do seu youtube? Não tem muita opção, mas eu  gosto mais da barrinha cinza. Se quiser colocá-lo em seus vídeos, siga esse tutorial.

VÍDEO NORMAL:

CINZA:

O que eu sublinhar e colocar em negrito será o que você deverá acrescentar ao código do seu video.

<iframe width="560" height="315" src="//www.youtube.com/embed/NLdp5T7GBhQ?theme=light&color=white
" frameborder="0" allowfullscreen></iframe>

TUTORIAL FEITO POR LETICIA PERSI DO ILLUSTRARTE DESIGN. NÃO COPIE.

Bloqueando o botão direito do mouse

Como vocês sabem, com o botão direito do mouse é possível ter acesso ao código HTML do seu site e de outros, implicando, muitas vezes, cópias. Portanto, vou colocar aqui embaixo um código que impedirá as pessoas de fazerem isso com seu blog.
Primeiro, procure </head> e acima dele cole esse código:

Pronto! Seu blog já está protegido!!

TUTORIAL FEITO POR LETICIA PERSI. DON'T COPY.

Como colocar um cursor hover

Vá em LAYOUT, adicione um widget "HTML/JavaScript". Nesse widget copie e cole esse código:

<style>
HTML,BODY, form, input {cursor: url("URL do cursor"), auto;}
</style>
<style>A:hover{cursor: url("URL do cursor hover"), auto;}</style>

No lugar de "URL do cursor", coloque o endereço da imagem do cursor setinha.
No lugar de "URL do cursor hover", coloque o endereço da imagem do cursor que você quer que apareça ao passar por um link.

Salve o widget, e pronto! Seu cursor já estará funcionando rs

ALGUNS CURSORES:

TUTORIAL FEITO POR LETICIA PERSI DO ILLUSTRARTE DESIGN. DON'T COPY.