31/12/2014

Tutorial • Colocar Ask no Blog e personalizá-lo

Olá moranguinhos! Como estão hoje??
Estão animados para a virada de ano?? Eu não estou TÃO animada não. Ano que vem vai ser um ano de muitas complicações na minha vida pessoal. Espero que eu consiga tomar as decisões certas!! Mas deixando isso de lado, hoje trago um tutorial de como por Ask no blog e de como personalizado.
Me pediram esse tutorial lá no ask, como não é um tuto difícil, decidi postar ele hoje! Então, vamos por a mão na massa! ;)

Faça login no seu Ask. Depois vá na barrinha que fica no topo e clique em Configurações:


Depois você é direcionado para outra página, e nessa página você irá clicar onde estiver escrito Widget:


Quando a outra página aparecer, é só clicar em Editar CSS que está no final da página.

Ao clicar, vai abrir uma caixinha de códigos, e dentro dela você irá fazer as alterações nesessárias!


Quem tem noções de CSS consegue editá-la sem problemas, agora quem não entende muito pode se guiar pelas explicações abaixo :
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 do usuário*/
 background: #4b2512; /*Fundo do nome de usuário*/
  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 caixinha de texto*/
  max-width: 250px; /*Largura da caixinha 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;
}
.askAnywhere-button:hover {
background: #cdeb8e; /*Fundo do botão ao passar o mouse*/
color: #000; /*Cor da fonte do botão quando passar o mouse*/
}
#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!

Não use esse código no ask, porque não irá funcionar. Apenas se guie editando o que achar necessário.
Depois de ter modificado, visualize e salve!

Agora para por ele no blog é bem simples! Depois de salvo, você irá copiar o código que se encontra dentro da caixinha onde está escrito "código" e vai colar dentro de um Gadget de HTML/ Java Script


  Quando colocar dentro do Gadget, provavelmente ficará cortado com um grande espaço vazio e muito grande. 

Para ajustar o tamanho você vai fazer o seguinte: 

O seu código será mais ou menos esse: 
<iframe src="http://ask.fm/widget/320c66e253550c8a25df6f51f1eefb787cf8680d?stylesheet=custom&lang=21" frameborder="0" scrolling="no" width="120" height="275" style="border:none;"></iframe>

Onde estiver escrito Width corresponde a largura da caixinha. Você vai trocar o número até que fique ajustado.  No meu eu troquei 120 por 240.

E onde estiver escrito Height corresponde a altura da caixinha. Troque o número para ajustar a altura. No meu eu troquei 275 por 175

Espero que tenham conseguido entender! Qualquer dúvida deixe nos comentários!! Bjoos ♥ 


6 comentários:

  1. Que blog mais lindo *-* muito Kawaii >< te convido para conhecer o meu.
    http://vihpaula.blogspot.com.br/
    Bjs!

    ResponderExcluir
    Respostas
    1. Muito obrigada! *-*
      Vou conferir seu blog com todo prazer!!
      Bjoos! ♥

      Excluir
  2. Respostas
    1. Realmente é um pouco complicado...
      Mas você conseguiu entender um pouco?
      Bjos!

      Excluir
  3. Bem útil ^^
    Cheguei agra no seu blog e já estou amando ^^
    ~seguindo

    Kissus ^3^ http://imaginandomais.blogspot.com/

    ResponderExcluir

♥ Comente algo relacionado ao post !
♥ Proibido xingar, ofender e ser agressivo !
♥ Seja educado (a) !