Mostrando postagens com marcador Tutoriais. Mostrar todas as postagens
Mostrando postagens com marcador Tutoriais. Mostrar todas as postagens

26 fevereiro 2016

TUTORIAL: Personalizando o titulo do sidebar

Ola pessoas, olha eu de volta e dessa vez com tutorial (aleluia). Hoje vou disponibilizar alguns códigos para vocês estarem personalizando o sidebar. É bem fácil.

Vamos la?!

Primeiramente você vai abrir um painel do seu blog, clicar em modelo > editar html > apertar "ctrl + F" e procurar por: .sidebar h2

Vai aparecer algo tipo assim:


Apague TODO esse código (vale lembrar que seu código pode estar diferente desse pois já pode ter sofrido alterações, mas não tem problema. É só apagar TODO ele). Apague desde .sidebar h2 até o }.

Depois de apagar escolha um dos códigos abaixo e cole no lugar. 

SIDEBAR 1



.sidebar h2 {
font-family: arial /*fonte do titulo*/ ;
color: #fff /* cor do texto */;
text-align: center;
background: url(http://i64.tinypic.com/2qxtk6v.png) no-repeat left;
background-color: #FFC1C1 /*cor do fundo */;
padding: 10px;
margin-left: -10px;
margin-right: -10px;
margin-top: -10px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
}


SIDEBAR 2




















.sidebar h2 {
font-family: arial /*fonte do titulo*/ ;
color: #e95179 /* cor do texto */;
text-align: center;
background: url(http://i67.tinypic.com/96ywi9.png) no-repeat left;
background-color: #FFC0CB /*cor do fundo */;
padding: 10px;
margin-left: -10px;
margin-right: -10px;
margin-top: -10px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
}


SIDEBAR 3




















.sidebar h2 {
font-family: arial /*fonte do titulo*/ ;
color: #92c3d7 /* cor do texto */;
text-align: center;
background: url(http://i65.tinypic.com/14wd3ip.png) no-repeat left;
background-color: #E0FFFF /*cor do fundo */;
padding: 10px;
margin-left: -10px;
margin-right: -10px;
margin-top: -10px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
}


SIDEBAR 4




















.sidebar h2 {
font-family: arial /*fonte do titulo*/ ;
color: #FFF /* cor do texto */;
text-align: center;
background: url(https://eagoradezoito.files.wordpress.com/2011/08/5561481690_baea1f430f_z_large.jpg?w=600) no-repeat left;
background-color: #FFE4E1 /*cor do fundo */;
padding: 10px;
margin-left: -10px;
margin-right: -10px;
margin-top: -10px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
}


Espero que vocês tenham gostado do tuto. Deixem nos comentários o que acharam. 
#Bjs

11 setembro 2014

Como colocar gadget em cima do cabeçalho do blog

Ola amores andei sumida né? (pra variar). Eu já estava enjoada daquele ultimo design do blog, achei ele muito simples. Então resolvi colocar esse, que é um pouquinho melhor. Como finalmente a minha vida esta menos corrida vou tentar postar bastante aqui, por isso façam pedidos de tutoriais pelos comentários para eu saber o que vocês querem.


   A um tempo atrás vi um tuto bem explicativo sobre como colocar gadget em cima do cabeçalho do blog. Quando eu tinha realizado o curso de web design eu já havia aprendido isso, porem de maneira bem mais complicada (para se aplicar em blog).
Abaixo esta o tutorial, créditos ao blog Lovelly Sumer.

Vá no painel do seu blog > Layout > adicionar um gadget > HTML/JavaScript > Deixe o titulo em branco > e na parte em que se coloca o conteúdo cole o código abaixo:

<div style="margin-left: 35px; margin-top:-292px;margin-bottom: 50px;"> CÓDIGO DO SEU GADGET</div>

Onde se pede coloque o código do seu gadget. Altere os número com cor destacada para ir movendo seu gadget e o posicionando no lugar desejado. Vá clicando em "visualizar" para ver onde esta ficando o gadget.

"35" >> vai para a direita
"-292" >> vai pra cima
"50" >> distancia entre cabeçalho e área de postagem (quanto maior o numero maior a distancia) .

Se quiser colocar mais de um gadget no cabeçalho basta repetir o código no mesmo gadget (caso contrário não vai funcionar), por exemplo:

<div style="margin-left: 35px; margin-top:-292px;margin-bottom: 50px;"> CÓDIGO DO SEU GADGET</div><div style="margin-left: 35px; margin-top:-292px;margin-bottom: 50px;"> CÓDIGO DO SEU GADGET</div>

E assim pode ser adicionado 3,4,5 ou mais gadgets. Vale lembrar que o gadget tem que esta posicionado abaixo da gadget do cabeçalho, caso contrario não dará certo. Quando terminar clique em "salvar".

Espero que tenham gostado do tutorial, eu particularmente acho ele muito legal e útil. Até a próxima postagem, Beijos ;*

08 novembro 2013

Cód. basicos sobre HTML + novo Lay!

Oiii paixões, isso mesmo eu estou postando um tutorial, podem soltar fogos de artificio comemorar e pegar seus guarda-chuvas por que hoje vai chover (kkkkk ><), obviamente vocês devem ter reparado no novo layout, lindinho né? eu que fiz as ilustrações (*-*) era pra ser eu, mas enfim, deixa pra la kkk. O blog estava merecendo algo mais bonito e a tempos estava falando que ia fazer, por isso esta ai e espero que gostem.

Mas vamos ao tuto de hoje... Quando eu não conhecia muito html eu sempre penava pra colocar link em palavras, imagens, mudar a cor da letra, ou mudar a fonte, colocar negrito, mudar tamanho de fonte e etc. E hoje estava aqui imaginando: aposto que muitos também penam com essas códigos simples pra alguns e já complicados para outros. E então por isso hoje eu estou aqui trazendo alguns cód. básicos sobre HTML para vocês. Simbora?


Mudando a cor da fonte:

Para mudar a cor da fonte use o seguinte cod.


<font color="#000000"> Seu texto </font>

Aonde esta de vermelho você ira colocar a cor desejada para o seu texto, e onde esta azul você ira colocar o texto desejado. Não esqueça do </font> no final pois é ele quem indica que o cod. acabou. 


Mudando a fonte: 

Para mudar a fonte usada coloque o codigo abaixo:

<font face=*> Texto desejado</font>

Onde esta de vermelho você ira colocar o texto que deseja. Vale lembra que a fonte só ira ser visualizado se o outro computador tiver a fonte instalada, então por isso é sempre bom colocar fontes padrão como arial, Helvetica, Sans, Times, Verdana, Courrier, Georgia e etc. Onde esta de verde você ira colocar o nome da fonte desejada, ex: arial. 


Mudando o tamanho da fonte: 

Para muda o tamanho da fonte use o seguinte codigo: 


<font size=*> texto </font>

Onde esta de vermelho você ira colocar o seu texto desejado e onde esta de verde você ira colocar um numero de 1 a 7 onde 1 é menor e 7 é maior. 



Texto em negrito, itálico e sublinhado:

Para colocar um texto em negrito use a tag <b> 
Ex:   <b>Meu texto</b>  
Feche com o </b> para indicar que o código acabou e que você quer que seu texto em negrito acabe ali. 



Para colocar seu texto em Itálico use a tag <i>
Ex: <i>meu texto</i>
Feche com </i>. 


Para colocar seu texto em sublinhado use a tag <u>
Ex: <u>meu texto</u>
Feche com </u>.


Colocar link em TEXTO: 

Para colocar link em uma palavra/frase/texto use o cod. abaixo:

<a href="link-do-lugar">Texto</a>

Aonde esta de vermelho você ira colocar o link desejado e onde esta de verde ira colocar a descrição. Simples. 


Colocar link em uma IMAGEM: 

Para "linkar" uma imagem use o cod. abaixo: 

<a href= “link-desejado”><img src="url-da-imagem" border="0"></a>

Onde esta de vermelho você ira colocar o link da pagina que deseja ir, e onde esta de verde colocara o link da imagem. 



Bom é isso gente, espero que vocês tenham gostado do tuto. Espero por comentário hein, e se reblogar credite e deixe um comentário avisando. 

Beijo, até a próxima. ;* 

14 setembro 2012

Como colocar assinatura nas postagens do blog.

Ola amores, dei uma sumida né? Poise graças a Deus estou recebendo muitas encomendas. Bom esse post estava programado para ter saído a 2 dias atras, mas toda vez acontecia alguma coisa e ele não saia. Mas hoje ele saiu o/
  Então vamos ao tutorial. Sabe aquelas assinaturas que fica no final da postagem? Poise hoje vou ensinar a colocar elas. Veja no exemplo abaixo:



Vá em Designe > Editar HTML > marque "Expandir modelos widgets". > aperte ctrl + F e procure por 
<div class='post-footer'>

Acima desse código cole o cod. abaixo:

<div align='right'>
<img src='Link da Imagem' style='border:0px;'/></div>


Onde se pede cole o link da imagem, para isso hospede ele em algum site. Como o Tinypic

Visualize, se tiver dado certo é só salvar! 

Espero que vocês tenham gostado, Beijos! 

05 setembro 2012

Personalize o fundo dos comentários!


Ola amores, hoje vou ensinar a vocês a mudar o fundo dos comentários. Sabe aquele fundo cinza indesejado?? poise, vamos colocar uma bela imagem la!

Vá em design > editar HTML > aperte ctrl + F > e procure por comments.  você vai achar algo assim: #Comments Padding: 15px ou .post-outer .comments { 

então abaixo de Comments. você vai colar o cod. seguinte:

background: url(link da imagem de fundo) repeat;

Cole o link da imagem que preferir onde se pede. e pronto é só salvar! Simples ?!

Pra quem ainda esta com duvida, é só repararem que nos nossos comentários tem uma areá que esta uns coraçõezinhos. É essa parte que ira mudar! 

Depois posto de personalizar os comentários mesmo, deixar igual o nosso!

Beijos!

30 agosto 2012

Como mudar o fundo da imagem!

Ola amores, uma coisa que tira a paciência da gente e tirar o fundo da imagem. Hoje eu vou ensinar a vocês como tirar, é muito básico e pratico.


Abra a imagem de sua preferencia no paint, selecione a ferramenta polígono, clique na terneira opção, e na imagem selecione as partes que você deseja retirar, não esqueça de colocar uma cor que não tem na sua imagem (ex: verde neon). Você tem que ir fazendo os contornos certinhos. Se achar muito difícil pinte com o spray com a ajuda do lápis nos contornos. Quando já estiver terminado clique em "salvar como..." e coloque em formato Tiff. Agora pronto abra ele no photoscape e salve ele como gif ( pode da erro, então no nome do arquivo coloque assim: nomedoarquivo.gif), salve e abra o Gif Movie Gear, se não tiver é só baixar no baixaki, abra a imagem la e clique em Pick transparency color (é uma bolinha azul com um conta gotas), e selecione a cor que esta no fundo da sua image. Você vai perceber que a imagem vai ficar sem fundo, agora pronto sua imagem esta com o fundo transparente, agora é só abrir uma imagem no photoscape e depois selecionar ela.

Espero ter ajudado vocês, até mais beijão!

29 agosto 2012

Aprenda a fazer Banner efeito Gif

Ola amores, como prometido hoje eu vou ensinar a fazer um banner com efeito Gif, é um banner bastante simples.
Vamos la: Primeiramente baixe as imagens que você vai precisar, são essas abaixo. Abra elas em outra guia para exibir em tamanho original!






Abra o photo scape, e clique em menu > nova foto > largura: 1000. Altura: 500 Cor: Branco > Ok!
  Coloque na opção quadrado e selecione um tom de rosa claro, e outro escuro. Faça uma barrinha na parte de baixo da imagem. Veja no ex:



Agora abra a imagem da Demi (a que ela esta de vestido) e coloque no canto esquerdo da imagem. Abra as duas fotos pequenas (redondas). E duplique a de sua preferência. Coloque como no ex abaixo:


Agora vamos colocar a escrita, eu coloquei Demi Lovato, mas você poem como você quiser, ai escolhe a fonte e a cor!
   Apos colocar a escrita, pegue a imagem daqueles coraçõezinhos e coloque ele no canto direito do blog. Mexa no tamanho até ele ficar mais ou menos assim:


Agora de Ctrl + C, abra outra pagina do photo scape (mas não feche essa), e na outra pagina de ctrl + V salve a imagem com o nome "Parte 1". Volte para a primeira pagina do PhotoScape e na primeira bolinha da imagem da Demi coloque a opacidade dela em 64. Novamente de ctrl + C, abra a segunda pagina do photoscape e de ctrl + V. Salve ela como parte 2. Volte para a primeira e faça esse processo com as duas bolinhas restantes (só não se esqueça de voltar a opacidade para o máximo depois)
  Agora coloque em animação Gif. Abra a parte 1, 2,3,4. E coloquem na ordem. Altere o tempo para 40. e Pronto, agora é só salvar!

Abaixo o meu:
(Abra em outra guia para visualizar em tamanho original e ver a animação em gif)


Espero que vocês tenham gostado! Podem usar a vontade! Se for reblogar não esqueça de usar créditos e nos avisar pelos comentários! 


26 agosto 2012

Como fazer um menu do seu jeito.

Ola amores, passei um tempo sem postar né? rsrs, estava sem inspiração, o numero de encomendas caiu, e isso me deixou meia triste. Mas estou voltando a ativa.
  Hoje vou ensinar vocês a fazer o menu do jeito que vocês desejarem, para isso vamos precisar de uma imagem do fundo transparente e do photoscape.

Baixe aqui a imagem do fundo transparente (Você não vai ver ela, mas esta la)

Abra a imagem no photoscape, vá na ala inicio clique em "Redimensionar", ira abrir uma caixinha la você ira colocar a Largura em 750 e a altura em 110, desmarque a opção "preserve aspecto proporcional".
Agora vá para a ala "Objeto" selecione a opção modo caixa arredondada, escolha a cor desejada e faça a caixinha do menu (faça apenas um), não precisa fazer da altura da imagem, faça um tamanho que já da pra por a escrita. Clique novamente na ala objeto, e clique na caixinha que acabou de fazer. Vai aparecer o sinal de mais (+), clique nele até o tanto de menus que deseja. (Tem que fazer assim para ficar todos do mesmo tamanho). Agora clique em cada um e vá modificando apenas as cores. Depois é só colocar na opção texto e colocar a escrita desejada.
 Pronto ele deve ter ficado assim:


Agora vamos por o link nele. Vá para o Image Map Tool clique em "escolher arquivo" e selecione o menu, depois clique em "Start mapping  your image". Vai aparecer um recado, espere os 10 segundos e clique em "continue to next step". Agora vamos mapear a imagem, clique em "rectangle"  e vá mexendo no quadradinho até ficar do tamanho o primeiro link, aonde ate o link do site você vai apagar e vai colar o link da pagina que você deseja (Ex: Ta escrito Chat, então você vai colar o link da pagina do chat). Clique em "Save" e passe para o próximo, apos fazer isso com todos clique em "Get your code", clique em "HTML Code" e copie o código até </map>, agora vá para seu blog, em elementos da pagina, coloque o gadget "HTML/JavaScript" e  cole o cod. que você copiou, e depois de </map> coloque </div>. Coloque o gadget abaixo do cabeçalho e pronto. Seu menu esta pronto! Espero que vocês tenham gostado! 

Beijos!!!




10 agosto 2012

Aprenda a Fazer o Brushe "Quimica do amor" no PhotoScape

Ola amores, gostaram do novo template do blog? Eu gostei, menos do cabeçalho, por que na hora eu estava meia sem ideia. Mas enfim, gostaram do menu? Logo Logo vou postar um tuto aqui ensinado a vocês fazer.
  Mas vamos ao tutorial de hoje. Hoje eu trouxe a vocês mais um brushe que aprendi a fazer.

Baixe uma imagem do Fundo transparente (no google tem um monte)
  Abra ela no PhotoScape, e em "objeto" selecione a ferramenta circulo. Coloque na cor Light Grey (é um cinza mais claro, coloque a seta em cima da cor que aparece o nome). Faça um circulo bem grande, com um formato oval.
  Agora coloque na ferramenta retângulo e selecione a mesma cor. Você vai colocar em cima do circulo ( olhe o brushe feito no final do tutorial para tirar suas duvidas).
  Novamente faça um circulo, só que agora bem oval mas bem fino. E coloque na ponta do retângulo.
Agora coloque na opção circulo, na cor rosa e dentro daquele circulo grande, faça outro circulo (rosa), só que um pouco menor. Faça a mesma coisa com o retângulo.
  Agora vá naquelas aspas (") embaixo e clique em Symbol, e casse o coração. Selecione o mesmo tom de rosa que utilizou e faça vários coraçõezinhos.

 Pronto! Veja abaixo como ficou o meu:




Se for reblogar coloque créditos, e por favor hein créditos com link. E avise nos comentários!

30 julho 2012

Personalizando os títulos dos Gadgetes!

Ola amores, faz tempo que eu num posto tutorial né? Fiquei muito atolada com as encomendas, com a lojinha do blog, e os Templates para venda. E por falar nisso eu quero a opinião de vocês, gostaram dos templates?? Ainda só tem dois la mas já já vou fazer mais. Haaa... e esta vindo layout free por ai, estou fazendo um bem fofo, bem teen, e logo logo eu boto ele aqui pra vocês!

Enfim, vamos ao tutorial! Hoje eu vou por aqui pra vocês alguns cod. html que personalizam os títulos dos gadgetes, eles ficam muito fofo, e é super fácil! Vamos la?!

O primeiro é bem parecido com o que a gente usa aqui. Letras pretas e um coração pequeno do lado. (sem fundo)


<style>
/*Inicio Titulo dos gadgets*/
.sidebar h2 {
font-family: pacifico;
font-style: italic;
font-size: 22px;
font-weight: bold;
text-align: medium;
color: #000000; /*Cor da fonte*/
background: url('http://i46.tinypic.com/k4dvv8.png') no-repeat left top; /*imagem do topo*/
padding-left: 20px;
margin-bottom: 50px;
/*Estilo para titulo dos gadgets por www.bombadecereja.tk, adaptado por http://http://personalizacaoblogs.blogspot.com.br/*/}
</style>


O segundo é bem fofo, ele tem o fundo rosa claro, com uma borda rosa mais escuro, letra preta e um coraçãozinho bem fofo.


<style>
/*Inicio Titulo dos gadgets*/
.sidebar h2 {
font-family: Verdana;
font-size: 14px;
text-align: left;
color: #40250A; /*Cor da fonte*/
font-weight: normal;
background: #FFCCDF url('http://img194.imageshack.us/img194/4015/miniheart.png') no-repeat left top; /*Cor de fundo e imagem do topo*/
padding-left: 12px;
margin-bottom: 5px;
border-top: 3px solid #FA3497; /*Borda do topo*/


-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
/*Estilo para titulo dos gadgets por www.bombadecereja.tk  e adaptado http://personalizacaoblogs.blogspot.com/ por */}
</style>






Para colocar os títulos personalizados é só ir em "Designe" "Elementos da pagina" "Adicionar gadget"  "HTML/JavaScript" e colar o cod. do estilo de titulo preferido. E pronto, todos o títulos de gadget já estarão personalizado!

Espero que vocês tenham gostado... Beijão!

Códigos criados pelo Cherry Bomb e adaptados pelo Personalização de blogs!

13 julho 2012

Aprenda a fazer rosquinha no PhotoScape

Oi amores, eu já ensinei a vocês a fazer um Smily e os Baloes no PhotoScape, agora eu vou ensinar a fazer rosquinhas. Elas são lindas e super fáceis de fazer.

Você vai precisar de uma imagem do fundo transparente (no google tem um monte).

Abra a imagem do fundo transparente no PhotoScape, e faça um circulo oval virado (do formato de uma rosquinha mesmo, se tiver duvidas olhe no final do tutorial a imagem), faça na cor marrom bem claro.
Agora faça circulos rosa, 2 pequenos, 2 medios, e 2 grandes. Veja na imagem a baixo (parte 1)



Agora coloque elas como na parte 2 uma do lado da outra.
Agora faça um circulo rosa do mesmo tom, um circulo largo, mas fino. Como no exemplo abaixo:



E ajeite ele ate ficar como no exemplo abaixo:


Agora faça um circulo branco no meio dele, como se fosse o furo da rosquinha. Abora faça 2 circulos pretos, pequenos, do mesmo tamanho, esses vão ser os olhos da rosquinha (se tiver duvidas olhe a imagem pronta no final do tutorial). Em objeto clique em fotografia (é a imagem, de um morro) e selecione "Efeito", escolha o effect005 (é o 5° da primeira fileira), coloque ele dentro da bolinha preta, se tiver duvidas olhe a rosquinha ja pronta no final do tutorial. Agora faça a boquinha, vá na ferramenta texto e faça o numero 3, selecione uma fonte de sua preferencia (lembrando que é na cor preta), e coloque entre os olhos, um pouco mais pra baixo, olhe a imagem no final do tutorial para tirar suas duvidas.
Agora faça dois circulos rosas (menores que os olhos), o tom do rosa tem que ser mais escuro do que o que havia ultilizado. Coloque eles no canto debaixo dos olhos. (Olhe a imagem no final do tutorial para esclarecer suas duvidas).
Agora vamos fazer os granulados: Coloque na opção linha reta, espessura numero 5, escolha uma cor de sua preferencia e faça risquinhos como granulado (Dica: Faça colorido).

Prontinho, veja como ficou a rosquinha pronta:


Espero que tenham gostado... Beijos e até mais!

12 julho 2012

Aprenda a Fazer Ribbons no PhotoScape

Ola amores, passei um tempinho sem postar né?! Mas é que eu estava fazendo as encomendas, logo logo eu posto elas aqui pra vocês. Mas vamos a postagem, hoje eu venho trazer a vocês os Ribbons, aquelas faixinhas que decoram o blog.


Sempre que eu vejo nos blogs/sites explicando é sempre ou no photoshop ou no photofiltre, e vou ser bem sincera eu ODEIO esses dois, acho eles ruim de mexer, por isso prefiro meu bom e velho photoscape. Vendo alguns Ribbons, tentei faze-los adaptados para o photoscape. E deu certo (Eba) não ficou muito lindo por que eu não estava com muita criatividade pra fazer. Segue abaixo o tutorial:




Abra o PhotoScape, vá em editor, menu, nova foto, e coloque assim: Largura: 500 e Altura: 240 cor: Branco
clique em "ok". Vá em objeto, e  selecione o quadrado. Escolha uma cor (que não seja branco) e faça um retângulo. Agora vá no modo polígono, selecione 3 sides, e faça um triangulo na cor que você havia escolhido só que um pouco mais escuro. Já com o triangulo feito já ajeitando ele no lugar certo (para isso clique em inicio e depois volte para objeto). Ajeite ele ate ficar como abaixo



Faça outro triangulo na cor branca, e ponha na outra ponta do ribbon. Agora coloque na opção linha reta, espessura 1, coloque na opção pontilhada, e selecione uma cor que não seja branco. Agora faça duas linhas, uma embaixo e uma encima. E pronto, veja como ficou abaixo:
Obs: Tem que salvar o ribbon no formato GIF para dar certo. 

Acho que não deu pra vocês perceberem, mas o fundo do ribbon esta branco, temos que deixar ele transparente. Para isso teremos que usar um programa editor chamado GIF Movie Gear (Para baixar é só ir no baixaki e colocar o nome do programa).
Abra o GIF Movie Gear, selecione o ribbon, clique na opção "Pick Transparency Color" e selecione a cor branca. Salve e pronto, seu ribbon esta pronto, Pode ocorrer dele ficar com o alguns contornos brancos mas isso ai infelizmente não da pra tirar. Mas é bem pouquinho, mau da pra perceber.  Espero que vocês tenham gostado. Apos esse tutorial você poderá fazer vários modelos de ribbon.


Abaixo alguns Ribbons feitos por mim, que ja estão com o fundo transparente:







24 junho 2012

Aprenda a fazer Brushes de balão no PhotoScape

Hoje vou ensinar a fazer o bhushes de balões, eles são super fáceis de fazer.

Primeiramente baixe uma imagem de fundo transparente (no google tem um monte). Vá no PhotoScape, editor, e abra a imagem. Vá na ferramente de fazer circulo, coloque a cor desejada e e faça uma bola com o formato de uma bexiga. Faça quantas quiser. Clique na ferramenta polígono e vá em 3 sides. e faça  os triângulos como de fossem a pontinha amarrada do balão. Vá na ferramente de fazer linha cursiva, coloque na cor preta, na opção pontilhada e coloque a espessura em "1". Agora faça como se fosse a linha do balão. 
  Na ponta do meu eu fiz um lacinho mega simples, mas você também pode deixar sem.



Espero que tenham gostado, depois eu posto mais! Bjs...

Tutorial feito por Ana Clara Santos

22 junho 2012

Criando Smiley no PhotoScape

Ola amores, hoje vim ensinar vocês a fazer o brushe mais fácil que tem, o Smiley.
Estarei ensinando a fazer o Smiley apaixonado, mas também daremos dicas de como fazer outros.

*Materiais
Base Transparente [Clique aqui para Baixar]
Você não vai ver a base por que ela é transparente, mas ela esta la.


*Como fazer

Abra o PhotoScape, e em editor abra a Base transparente. Vá em objeto e faça um "redondo" amarelo, grande.
Vá nas aspas (") logo ao lado, clique em Symbol e casse o coração, apos achar selecione ele e coloque ele na cor vermelha. Faça dois corações como se fossem os olhos do Smiley (do mesmo tamanho).
Ainda em Symbol selecione uma ferramenta que parece uma ferradura, essa sera a boca do smiley (essa ferramente esta um pouco abaixo do coração), deixe ele na cor preta e coloque ele como a boca do smiley.
Ele ficara assim:


Para fazer outras carinhas é só ir mudando os olhos, pode fazer ele redondo, como acento circunflexo (^), e outros.

 Se for reblogar coloque fonte com link e deixe nos comentários avisando. Caso contrario sera considerado plagio!


Tutorial feito por Ana Clara Santos

Como trocar o template no BlogSpot

Muita gente me pergunta como trocar o template do blog já feito por mim, mas sem ficar passando senha, sinceramente isso é chato. Por isso apartir de hoje eu só faço o template, a instalação é por conta de vocês, mas é logico que eu vou estar auxiliando. Por isso coloquei esse tuto bem básico pra vocês entenderem. Quem tiver duvidas é só deixar nos comentários!

Trocar o template do BlogSpot
  1. Acesse o blogger e clique em Design (Design substituiu a palavra Layout.Atualização:2010)
  2. Clique em Editar HTML
  3. Por uma questão de segurança clique em Baixar modelo completo e Salve ele em seu Computador
  4. Clique no botão Arquivo, para localizar o arquivo que está em seu Pc, Após isso clique no botão Fazer upload.
    Obs: pode variar dependendo do Sistema Operacional -Ao clicar no botão Arquivo possivelmente abrirá uma janela para você localizar o arquivo e depois clique em Abrir, Ok ou Concluir para depois Fazer upload.
  5. Se você tiver algum  , Agora o blogger melhorou isso, e, Talvez apareça a mensagem Manter Widgets, nesse caso eles não serão excluídos, apenas podem ficar em lados diferente, é só organizar
  6. Você pode clicar no botão VISUALIZAR para ver como ficará seu blog e ter certeza que quer mudar o modelo.
  7. Se você gostou pode clique em SALVAR MODELO ou se aparecer a mensagem com botão Manter Widgets clique nele.
    Se aparecer uma mensagem de erro Xml ou algo parecido, insista uma ou duas vezes em SALVAR MODELO, se não conseguir veja alguns erros ao adicionar template(clique aqui)

20 maio 2012

Barra de rolagem personalizada



Ola amores, agora vou ensinar vocês a personalizar a barra de rolagem do blog (barra de rolagem é aquela barrinha aqui no canto do blog que você vai abaixando ela para ver os arquivos que estão em baixo).
Aqui ensinar a colocar ela de outra cor e colocar borda se você quiser por borda, logico.

Tutorial:

Primeiramente, clique em "Editar HTML", aperte "Ctrl + F" e procure por ]]></b:skin> e ANTES disso cole o código abaixo:

/*** Rolagem da Vertical da Página ***/
::-webkit-scrollbar-thumb:vertical {
background: #ff0f72; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
height:50px;

border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

}
/*** Rolagem da Horizontal da Página***/
::-webkit-scrollbar-thumb:horizontal {
background-color:#ff0f72; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
height:10px;

border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

 }
/*** Parte fixa da rolagem (fundo que não se movimenta) ***/
::-webkit-scrollbar {
height:10px;
width:15px; /*Largura da barra*/
 background: #000000; /*Cor da parte  que fica no fundo*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
}


Se você não quiser as bordas arredondadas é só apagar as partes destacadas em rosa. Para ir modificando as cores da barra de rolagem é só presta atenção no que esta escrito, o Código já é auto explicativo.

Espero ter ajudado vocês, eu particularmente adoro esse tutorial pois ele deixa o blog com um ar mais profissional. 

Beijos, Beijos!!