14 de mai de 2013

Tutorial - Widget do Ask.fm personalizado

Oi Oi Gente :3
Desculpem por só ter postado agora, mas é que eu tive aulão hoje e fiquei na escola o dia todo e só cheguei as 18:40. Sim, só postei 3 horas depois porque ninguém é de ferro e eu precisei descansar e estudar para prova de amanhã, aliás, eu não deveria estar aqui, mas como eu já passei tempo demais longe não queria que ele desatualizasse!
Ultimamente venho postando apenas Goodies & Tutoriais e vai ficar assim por um período, pelo menos da minha parte, vocês podem até ver outros assuntos com as garotas, mas comigo por enquanto só são utilitários. Hoje venho com um tutorial bem legal e que muitas pessoas não sabem fazer, então espero que aprendam e façam... 

Abra o ask.fm e faça login. Naquela barrinha que fica no topo da página, clique em configurações:




Depois clique na opção widget, e quando a página carregar, clique em "Editar CSS" lá no final.




Vai abrir uma janelinha com o código CSS. Apague tudo que tiver lá, e no lugar cole o código a seguir:

Código
body {
  margin: 0;
  padding: 0;
  background-color: none;
  overflow: hidden;
  font-family: Arial; /*Fonte geral do widget*/
}
.askAnywhere-link {
  color: #d24858; /*Cor dos links do widget*/
}
.askAnywhere-username {
  padding: 5px;
font-size: 11px; /*Fonte do nome de usuário*/
 background: #4b2512; /*Fundo do nome de usuário, apague essa linha se não quiser*/
  word-wrap: break-word;
}
.askAnywhere-username-link {
  display: block;
  color: #fff; /*Cor do nome de usuário*/
  text-decoration: none;
}
.askAnywhere-slogan {
  padding-top: 3px;
  font-weight: normal;
  color: #f85761; /*Cor da mensagem*/
  word-wrap: break-word;
font-size: 11px; /*Tamanho da fonte da mensagem*/
font-family: Verdana; /*Fonte da mensagem*/
}
.askAnywhere-box {
  padding: 10px;
  font-size: 11px;
}
.askAnywhere-input {
  display: block;
  width: 250px; /*Largura da caixa de texto*/
  max-width: 250px; /*Largura da caixa de texto (repita)*/
  height: 55px; /*Altura da caixa de texto*/
  max-height: 160px;
  padding: 0px;
  border: solid 1px #000; /*Borda da caixa de texto*/
  text-align: left;
  overflow: auto;
}
.askAnywhere-button {
background: #f85761; /*Fundo do botão "perguntar"*/
color: #fff; /*Cor da fonte do botão*/
border: none;
display: block;
padding: 3px 3px;
margin-top: 10px;


-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: 1s;



}
.askAnywhere-button:hover {
background: #cdeb8e; /*Fundo do botão quando passar o mouse*/
color: #000; /*Cor da fonte do botão quando passar o mouse*/



-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: 1s;



}
#askAnywhere_question_form {
  margin: 0;
  padding: 0;
}
#askAnywhere_input_layer,
#askAnywhere_captcha_layer {
  padding-top: 3px;
  color: #fff;
}
#captcha {
  display: block;
  width: 90px;
  padding: 8px 4px;
  margin-top: 5px;
  border: solid 1px #000000;
  font-size: 14px;
}
div.fieldWithErrors input,
div.fieldWithErrors textarea {
  background: #fff;
}


Agora é só modificar do jeito que você quiser!
Se não funcionar colando o código, edite o código que já está lá no ask mesmo, só modificando de acordo com as instruções que estão no código acima. 


Quando terminar as modificações, clique no botão salvar.
Para por o widget no blog, é só copiar o código que aparece logo abaixo da palavra "Código" e colar ele em um gadget de HTML/Javascript.



Atenção: Se você por o código do jeito que copiou, pode ser que a caixinha fique "cortada" e com um espaço em branco embaixo dela. Isso pode ser resolvido de maneira simples. Veja:



O código que você colou no widget é mais ou menos assim:



<iframe src="http://ask.fm/widget/dfdcbb4a12787c9467bf2bdeb549b292d58c2efb?stylesheet=custom&lang=21" frameborder="0" scrolling="no" width="120"height="275" style="border:none;"></iframe>



Onde está escrito width, altere o número 120 por um valor que seja um pouco maior que a largura que você colocou no css. Por exemplo, no meu a largura foi 250 então eu coloquei 270 no lugar de 120.



Onde está escrito height, troque o número 275 por 150.



Feito isso vai ficar tudo certinho. Deu para entender? Espero que sim. 
Tutorial retirado do Cherry Bomb

4 comentários:

  1. Gostei do tutorial. *3*

    Modern HTML

    ResponderExcluir
  2. Nossa em,que legal!Vou usar!
    http://morango-sabor.blogspot.com.br/
    Comenta?

    ResponderExcluir
    Respostas
    1. ~ Obrigaada :3
      Claro, já fui lá!

      Excluir


- Antes de qualquer coisa, fale um pouco da postagem.
- Não desrespeite ninguém e nem o blog!
- Aceito criticas construtivas.
- NÃO aceito APENAS: Seguindo, segue de volta?