Sidebar: textarea personalizada + menu + imagem ♡

| |
Imagem de inicio do Leadership! ♡\( ̄▽ ̄)/♡
Oi, oi tortinhas de morango! Como estão? Caso queiram saber, estou bem, graças à Deus! ♡ Gostaria de avisá-los que faltam apenas 2 seguidores para eu liberar o layout, uhu~! Gente, que rolo que deu com o comercial da O Boticário, né? Para quem está desatualizado: A linha de cosméticos O Boticário lançou um comercial "à favor da homossexualidade" e como sempre, choveu homofóbico! Eu realmente fico bem triste, pois acredito que toda forma de amor é válida, e quando entram nesse assunto de homossexualismo, eu fico bem revoltada! Por quê uma mulher e um homem podem se amar e dois homens, ou duas mulheres não podem? Gente, tenham a mente mais aberta por favor!

Depois desse grande desabafo (uuh, acalmei-me q.) vamos ao post (ou quase). Hoje trago pra vocês um tuto 3 em 1! Sim, hoje irei ensinar a personalizar a sidebar com textarea, menu e afins... O código foi "montado" por mim, mas darei créditos aos respectivos donos do menu e imagem! Vamos lá 

Antes de mais nada, a prévia está aqui
Vá em seu quadro HTML e procure por ]]>< assim que encontrar essa tag, cole esse código abaixo:
blockquote{
margin:1.6em 10px;
  padding:5px;
  background:#f3f0f5; /* cor de fundo, coloque a cor que quiser */
  border:1px solid #cdbed4; /* cor, tipo e espessura da borda */
  font:11px 'Courier', sans-serif; /* tamanho e tipo da fonte */
  font-weight:normal;
  line-height:1.6em;
  text-align:left;
}
.dd1{
width:50px;
padding: 5px 0 4px 0;
margin: 0 0 4px 4px;
float: left;
height: 13px;
text-align: center;
font-family: Trebuchet MS;
font-size: 11px;
background: #e3e4e8;
box-shadow: inset 0 0 3px #d0d3dd;
-webkit-transition: all 1.5s ease-out;
}
.dd1:hover{
background: #ebecef;
box-shadow: inset 0 0 3px #d6d9e2;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transition: all 1.5s ease-out;
}
.dd1 a{
color: #fff;
text-shadow: 1px 1px 0 #c9ccda;
text-transform: lowercase;
text-decoration: none;
}
.dd2{
width:50px;
padding: 5px 0 4px 0;
margin: 0 0 4px 4px;
float: left;
height: 13px;
text-align: center;
font-family: Trebuchet MS;
font-size: 11px;
background: #ffe6ea;
box-shadow: inset 0 0 3px #ffd1d9;
-webkit-transition: all 1.5s ease-out;
}
.dd2:hover{
background: #ffd8de;
box-shadow: inset 0 0 3px #ffc5ce;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transition: all 1.5s ease-out;
}
.dd2 a{
color: #fff;
text-shadow: 1px 1px 0 #ffcbd4;
text-transform: lowercase;
text-decoration: none;
}
.dd2 a:hover{ text-shadow: 1px 1px 0 #ffc0cb;}
.efeitopisca1{
padding:2px;
border:1px solid #dcdbdb;
}
PS: Você pode apagar o trecho "blockquote {" se quiser deixar a textarea com seu blockquote, caso contrário, apague o blockquote de seu HTML antes de fazer, para não misturar dois blockquotes!
Salve e visualize para ver se nenhum código escapou! Depois, vá na aba "Layout", crie um gadget HTML/JS e cole o seguinte código:
<blockquote class="tr_bq"><center><img height="70" src="LINK DA IMAGEM" width="210" / /></center>
<div class="dd1"><a href="/">Título</a></div>
<div class="dd2"><a href="/">Título</a></div><div class="dd1"><a href="/">Título</a></div>
<div class="dd2"><a href="/">Título</a></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et elit finibus nibh malesuada iaculis egestas eget turpis. Nam tempus mauris non</blockquote>

Pronto! Dai é só modificar o tamanho da imagem e colocar o link! Espero que tenham gostado ♡
Créditos: menu & imagem (www) ♡ Até a próxima, beijos!

11 comentários

  1. Nossa, super ridículo essa briga por causa do comercial! Gente, o crime ser homossexual? Meu Deus ><.
    Amei o tuto ficou ótimo! Tori, hoje eu criei um blog novo (o meu antigo foi excluído por um bug do Blogger) e utilizei um nome do que você passou em um post passado (dei créditos viu?) Só passei para avisar mesmo *≧ω≦*
    Kisses ♥ | Creamy ♡

    ResponderExcluir
    Respostas
    1. Também achei! Sim, é ridículo como as pessoas agem ;-;
      Que bom que gostou, Lio <33 Okay, bom uso! o3o
      Beijos ♥

      Excluir
  2. Eu não tinha visto o comercial, mas eu ia aprovar porque eu acho justo toda forma de amor igual a música do Lulu Santos
    Sobre esse tutorial muito bom, eu amei...
    Melhor tutorial do mundo, to encantada
    Rumble.

    ResponderExcluir
    Respostas
    1. Que pena, o comercial é muito fofo. Lulu <33
      Que bom que gostou, flor ♥ NHAAAAC~!
      Aceito sim >//<

      Excluir
  3. Oii Tori <3
    Acho ridículo essas pessoas que desprezam qualquer forma de amor e se escondem atrás de telas de computadores para ofender os outros.
    Adorei a textarea da sidebar <3
    xoxo *3*
    Candy Bomb (っ・ω・)っ

    ResponderExcluir
    Respostas
    1. Olá amore <33 Também acho, julgam sem nem ao menos por a cara no sol q.
      Que bom que gostou! ♥
      Beijos~~

      Excluir
  4. Não assisti o comercial do Boticário, mas com certeza toda forma de amor é válida. Traga mais tutorias de html, eu adoro!
    Beijo,
    http://pactoliterario.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Assista, sim? <33 Com certeza ♥
      Que bom que gosta, vou trazer sim >//< Beijos!

      Excluir
  5. Também achei ridícula essa briga.Os coitados não estão fazendo mal a ninguém.
    Adorei a textarea, fica super fofo!

    Menina Venilla

    ResponderExcluir
    Respostas
    1. Sim! :( Deixem eles serem felizes em paz, oras!
      Que bom que gostou ♥

      Excluir

• Não comente apenas um link para divulgação, comente algo sobre o post.
• Pode utilizar palavrão desde que não ofenda ninguém.
• Aceito afiliação e tags, menos selinhos.