Como deixar a imagem com efeito opaco no gadget

Bom, o Matheus, me fez uma pergunta, interessante, "Como colocar o efeito opaco no gadget", bom, o que eu entendi, é colocar a imagem no gadget com o opaco. Faz o seguinte, primeiro, como eu disse na postagem, naaqueela postagem, eu disse aquilo, né? Pois é, faça exatamente tudo aquilo, e depois, quando o assunto for gadget, vá em html/Java Script, e vá em HTML e cole isso:

<img src="URL DA IMAGEM"/></a>

Acho que isso funciona... Pois já vi em vários blogs, se dê errado, eu faço outro, aliás, quero avisar, que ODIEI esse design, e vou fazer um bem bonito ^^


Tutorial - Como deixar imagens mapeadas

Gente, aqui vou ensinar, como fazer um menu, fazendo que leve para algum lugar, chamamos de imagens mapeadas, vou ensinar a fazer com um menu, mas serve para mapear com qualquer tipo de imagem, e lembrando, tem que colocar a URL, mas um que não precisa é esse: Tinypic, mas vou ensinar com o Image Maps, vamos lá?



Primeiro de tudo, vá no programa onde você faz o menu e depois salve a imagem.


Calcule para que fique da mesma largura do banner, a altura pode ser diferente.

se você quiser fazer transparente, salve como png, se quiser o fundo branco ou de outra cor, salve como jpg, jpeg, gif e etc.


Quando fizer isso, vá nesse site (www) e coloque a URL da imagem do menu.


Clique em Start Mapping Your Image, vai aparecer, isso:


Clique em:


depois, clique em:


Selecione onde você quer que fique o link e coloque o link.


Não precisa nem colocar o título, bom, quando você selecionar todos os lugares onde você quer colocar com o retângulo, você clica em:


Clique em:


Não clique em saída HTML, apesar de mostrar logo a imagem, quando você for colocar no blog, vai retirar os links e deixar como uma imagem normal.

Depois disso, copie todo o código e coloque abaixo do cabeçalho no layout um gadget do HTML/Java Script.

Beijos, espero ter ajudado ^^

Tutorial - Como editar as fotos e deixa-las mais bonitas

Hey, pessoas! Vejam só, eu vou pegar essa imagem:


E agora vou editar, do jeito que eu quiser!


"Você só deixou ela preto e branco, e daí?"

Não, mas veja só, vou editar mais.


Ainda tem mais


Agora parou, mas se eu fizesse diferente?




Esse programa é o Paint.NET, ele é ótimo, fiz tudo isso com ele!

Apenas clico em efeito acima, e coloco na doida. Do mesmo que faço com o fundo, veja:


Legal? Pois bem, não pegue nenhuma dessas fotos, se pegar, você vai ter a honra de ser o primeiro da lista de copycats!






Design novo + Peça presentes

Oii! Tô super alegre! O The Path comemora o um mês dele! Por isso, para comemorar, quero que você peça no blog, os presentes que você vai querer! Como estou MUITO alegre, você pode pedir o que quiser, lembrando, não fazemos OCs, ok?

Também quero comemorar o design novo, que passou do jeito fofo para mais teen! Espero que tenha gostado!

Beijooos! Sigam meu novo blog, Monster High IC!

Dica: Nomes bons pra blog + Divulgação

Bom, cada pessoa tem a sua criatividade (Uns nem tem e, se fazem plágios), vou dar uma dica, de um nome bom pra blog, não importa de que for, vou usar minha criatividade, se for copiar os nomes, credite!


  • Miss Monster High
  • Frases MH
  • Laura Maria Fonseca (Ou seja, usar seu próprio nome)
  • Dicas MH
  • Tutoriais M (Usar a primeira letra do seu nome)
Espero que use os nomes, mas credite!

                                                                 Divulgação:


Bom, toda terça vai ter divulgação, e a de hoje é TG MH, um blog muito bom, muito mesmo, cheio de tirinhas, muito legal! Eu adoro mesmo esse blog, é muito divertido! Por favor, entre nele, siga, comente, divirta-se!


Quer divulgação também?


  • Siga o blog
  • Tenha menos que 7 seguidores
  • Peça parceria
OBS: Não colocaremos sua parceria como mágica aqui, peça!


Como deixar a imagem em circulo

Nesse tutorial, vou ensinar, como deixar a imagem que nem a minha, assim:

Antes:




Depois:


É só ir no Design > Personalizar > Adicionar CSS e colocar esse código:

}
/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
height:10px;
width:15px; /*Largura da barra de rolagem*/
 background: #FFC0CB; /*Cor da parte fixa, que fica no mundo*/
border: 2px dotted #FF69B4; /*Coloque borda se quiser*/
}
b, strong {color: #FF69B4; text-decoration: none; cursor: normal; }
i {color: #FF69B4; text-decoration: none; cursor: normal; }u, underline {color: #FF69B4; text-decoration: none; border-bottom: 2px dotted #FF69B4; cursor: normal;}.post img {
-webkit-transition-duration: .50s;
border-radius: 10px 10px 10px 10px;
}
.post img:hover {
-webkit-transition-duration: .50s;
border-radius: 200px 200px 200px 200px;
}

Olhe um print, onde está o CSS:


Coloque o código e pronto, perfeito, depois, repare na sua imagem, quando o mouse ficar encima dela, virará um circulo. 


OBS: Ela deletará um outro efeito qualquer que estiver na sua imagem.

Como colocar o efeito opaco e arredondar a imagem

Bom, aqui vou ensinar como colocar o efeito opaco na imagem e arredondar quando passamos o mouse, é muito fácil, vá em Editar HTML > Ctrl + F > ]]></b:skin> > Acima deste código, coloque:


.post img{ filter:alpha(opacity=60); -moz-opacity:0.60; opacity:0.60;-border-radius: 40px 40px 40px 40px;-moz-border-radius: 40px 40px 40px 40px;-webkit-border-radius: 40px 40px 40px 40px;-transition-duration: 1.90s;-webkit-transition-duration: 1.90s;-moz-transition-duration: 1.90s; } .post a:hover img{ filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0;-border-radius: 0px 0px 0px 0px;-moz-border-radius: 0px 0px 0px 0px;-webkit-border-radius: 0px 0px 0px 0px;-transition-duration: 1.90s;-webkit-transition-duration: 1.90s;-moz-transition-duration: 1.90s; } 

Pronto, agora, poste uma imagem, e você verá que a imagem vai ter um efeito opaco e as pontas arredondadas,  só que após você colocar o mouse encima a ponta fica normal e o efeito também, vejam um modelo:

Antes de passar o mouse:


Depois de passar o mouse:


Gostaram? Coloque no seu blog!