Oooooooi!! Mais um tutorial :) Eu estarei ensinando como você fazer ribbon e coloca-lo no titulo do gadget do seu blog!!
Vamos começar? Continue lendo ;)
vamos começar!!!
Primeiramente você precisa tirar o print da sua barra lateral para que o ribbon fique no tamanho certo ok?!
depois abra um arquivo de 300x300 para facilitar e clique em transparência automática.
Cole o seu print dentro da imagem que você abriu e coloque até a sua barra lateral, assim:
Depois de ter feito isso, com a imagem ainda selecionada copie, desfaça e cole novamente!
Repita o processo com o outro lado
Depois junte as camadas, selecione apenas a parte desejada (o ribbon) clique no botão direito do mouse e escolha a opção Camada Rente e salve.
Deu para entender até aí? tentei explicar da melhor formarsrs
Agora vamos aprender a colocar o ribbon no título do gadget !
Vá até o HTML do seu blog, clique em Ctrl F e pesquise por:
Entenda os códigos Margin-top e Margin-left !
Visualize e se estiver tudo certo salve!
Beijos e até o próximo post ;)
Vamos começar a montar !!!
(NÃO JUNTE AS CAMADAS)
Comece fazendo um retângulo um pouco maior que a barra lateral, depois escolha a cor e pinte dentro com a ferramenta "ferramenta do pincel" veja o exemplo aqui [www]
Com a imagem ainda selecionada copie e depois desfaça o retângulo feito, agora cole para que ele abra em uma camada ;)
Depois disso, vá até esta ferramenta > clique aqui < , escolha agora o mesmo tom de cor que você está usando, porém, mais escuro. Faça o seguinte :Depois de ter feito isso, com a imagem ainda selecionada copie, desfaça e cole novamente!
Repita o processo com o outro lado
Reta final :
EXCLUA a camada onde está a sua barra lateral e junte as camadas 1,2,3 em ctrl Enter
Vá até seleção> selecionar camada e depois até a ferramenta de degradê abaixo:
Ajuste desta maneira > clique aqui para ver a imagem
Na cor dois, coloque a cor que você escolheu. claro rsrs
Deu para entender até aí? tentei explicar da melhor forma
Vá até o HTML do seu blog, clique em Ctrl F e pesquise por:
/* MobileAntes do código body.mobile , cole o código abaixo:
Você precisa hospedar a imagem do seu ribbon e substituir no espaço LINK DO SEU RIBBON pelo link da sua faixinha!! Veja como hospedar aqui.
.sidebar .widget h2{
background: url(LINK DO SEU RIBBON) no-repeat left;
margin-top:-2px;
margin-left:-19px;
margin-bottom:0px;
padding:15px;
width:150%;
overflow:hidden;
}
Entenda os códigos Margin-top e Margin-left !
O código margin top é para SUBIR sua faixinha, se você quiser mais para cima substitua o valor até chegar no seu ideal.
O código Margin-left é para colocar sua faixinha mais para esquerda. Vá modificando até chegar no seu ideal.Lembrando que o tutorial para colocar as faixinhas na barra lateral, vi neste blog CupCake
Visualize e se estiver tudo certo salve!
Beijos e até o próximo post ;)
Que chique! Gostei ;)
ResponderExcluirhttp://pinkpimenta.blogspot.com.br/
:a Que bom que gostou!
ResponderExcluirOlhe como o meu ribbon ficou: http://i47.tinypic.com/2642uz6.png
ResponderExcluirFicou lindo amr! parabéns ;)
ResponderExcluirGostei muito, super útil!
ResponderExcluirObrigada!
ExcluirMega útil >.< Amei
ResponderExcluirObg! ^^
ExcluirAdorei o tuto, só que sou um c* pra mexer com o photofiltre KKKKK
ResponderExcluirAdorei o layout do seu blog u-u
Amei o blog, já estou seguindo ! *u*
OPS, lembrei, estou fazendo um bloco de afiliação lá no Blog, quer ser afiliar? Só seguir de volta e comentar em algum post que quer a afiliação, simples assim ;p
Espero sua visita, xoxo, Almost 18
A L M O S T 1 8 ~*
Obrigada! kkkkkk Beijos, linda!
ExcluirAmeii...Mas que ta um tuto de:Como fazer Ribbon no Photoscape?
ResponderExcluirObrigada! Boa ideia :) Vou fazer!
ExcluirCom o photoshop cs3 é a mesma coisa?
ResponderExcluirSim :)
ResponderExcluirAmei o tutorial, só assim consegui entender como colocar o ribbon (:
ResponderExcluir-> Magia Teen ( Em reforma ) & Always Dreeam
Legal, visite meu blog: http://black---cherry.blogspot.com.br/. Bjss
ResponderExcluir