#HTML - Menu Flower [EXCLUSIVO]

Ah yeah, ah yeah, ah yeah ah yeah ah yeah ~ ♫

Olá ~ boa tarde milkshakes ♥ Como estão?? Espero que bem ♥ eu vou meio bem, meio mal. Deixem-me explicar direito. Ontem passei o dia inteiro passando a limpo um trabalho de história, no qual devia escrever um diário como se estivesse na Primeira Guerra Mundial. Eu envelheci o papel com café sexta e logo naquele dia fiquei meio mal de tanto sentir aquele cheiro forte. Daí ontem eu passei a limpo, deram 9 páginas. E minha mão doeu um pouco T^T mas pelo menos ficou muito bonito ♥ eu pelo menos adorei, vou tirar umas fotos e depois mostro para vocês ok? Enfim, voltando ao assunto de eu não estar tão bem, hoje eu acordei às 6:20 com uma dor de garganta terrível.

Doía bastante, só de engolir era horrível. Levantei em silêncio para não acordar ninguém, e fui tomar água. Aliviou um pouco. Mas aí depois voltou, tomei mais água e aliviou. E fiquei nisso por um tempinho até perceber que não ia adiantar muito. Fiquei deitada no sofá da sala com minha coberta esperando o tempo passar para ver se melhorava. Conforme o tempo passou a dor aliviou, mas aí quando fui levantar para comer e fazer tudo o que queria fazer me deu uma dor de cabeça, que não sei se foi por não dormir direito ou por ter ficado muito tempo escrevendo ontem. Mas depois passou e agora estou aqui. Mesmo que ainda um pouco cansada :c Mas tudo bem, vamos ao post <3

Temos algumas novidades!

Sim, enfim mais novidades ♥ a primeira é que criei um portfólio com meus layouts só descobri que não tem o "i" entre o t e o f hoje .-. pensava que tinha :c ~burra~ <3 se quiserem ver, esse é o link: l-ovelyportfolio.blogspot.com, com o Lovely por causa do LM u.u sempre com os Lovely. A segunda novidade é a página do blog no facebook. Criei essa página para: 1) se alguém quiser falar comigo, pode mandar uma mensagem para a página que terei o maior prazer em responder; 2) colocar as atualizações de posts por lá, já que muitas vezes o blogger dá um bug no feed, resolvi deixá-los atualizados por lá também <3 3) para que eu possa divulgar o que ando ouvindo para vocês, colocando links de MVs e tals. Enfim, o link é esse: facebook.com/lovelymilkshake, por favor, curtam ♥

Agora sim o tutorial:

Regras dos tutoriais do blog!

 Sempre que usar um tutorial credite o Lovely Milkshake, não quero saber de ver meus tutoriais sendo usados sem nenhum agradecimento ou link no layout u.u;

 Lembre-se de que os códigos que aqui postos são modelos que podem ser editados, mas mantendo os créditos viu?;

 Não copie códigos do layout do blog para fazer os seus códigos, para editar esses códigos que liberarei, porque se eu perceber isso, pararei de postar tutoriais e se ficar realmente brava até irei deixar os tutoriais em rascunho;

Tutorial: Menu Flower - seis modelos de cores para vocês (⌒▽⌒)☆

LIVE PREVIEW (´∇ﾉ｀*)ノ

Lembram-se do layout free que postei quando chegamos aos 100 seguidores? Ele tem um menu com as tags, certo? É bem esse menu que postarei o tutorial. Ele foi criado por mim, porque até onde sei não há nenhum menu com esse estilo, há? Porque até onde sei, eu que criei isso para o lay free u.u vocês gostam daquele menu?? Espero que sim ♥ mas enfim, vamos aos tutorial. Se viu em algum outro blog, por favor me avise, e se puder me mandar o link por mensagem na página do blog agradeceria para que eu possa ver tudo direitinho ok?

1) Procure por ]]></b:skin>

2) Acima deste código, cole a base do menu que está no código abaixo:

#flower {
  float: left; /*não remova, é o que permite que estipulemos um tamanho para o menu*/
  margin-right: 2px; /*distância para o outro menu*/
  margin-top: 2px; /*distância para o outro menu*/
  width: 103px; /*tamanho do menu, arrume de acordo com o tamanho de seus gadgets*/
  padding: 2px 3px; /*distância do texto para a borda do menu*/
  text-align: center; /*texto alinhado no centro*/
  font: normal normal 12px Calibri;
  text-transform: lowercase;
  letter-spacing: 2px;
  -moz-transition: all 0.6s ease-out;
  -webkit-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  -ms-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
}


#flower:hover {
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

3) Agora a segunda etapa da "colagem de códigos" é em relação a cor que você escolher. Deixarei abaixo prints com as cores que montei e os códigos. Siga a instrução de cada imagem.
4) Depois de fazer a etapa 3 e colocar as cores tudo certinho, vá no gadget (tipo HTML/Java Script) que você deseja colocar o menu e cole o seguinte código:

<a href="#" id="flower" title="título">título</a>
<a href="#" id="flower" title="título" style="margin-right: 0px;">título</a>

<a href="#" id="flower" title="título">título</a>
<a href="#" id="flower" title="título" style="margin-right: 0px;">título</a>

<a href="#" id="flower" title="título">título</a>
<a href="#" id="flower" title="título" style="margin-right: 0px;">título</a>

Cinza

Cole o código a seguir logo depois de #flower {

  background: #eee;

  border: 1px solid #ddd;

  box-shadow: inset 0 0 5px #ddd;

  text-shadow: 1px 1px 0 #ddd;

  color: #fff;

Cole o código a seguir logo depois de #flower:hover {

  background: #fff;
  border: 1px solid #ccc;
  color: #fff;
  text-shadow: 1px 1px 0 #aaa;
  box-shadow: inset 0 0 500px #aaa;

Rosa

Cole o código a seguir logo depois de #flower {

  background: #FAE7ED;

  border: 1px solid #F7D7E2;

  box-shadow: inset 0 0 5px #F7D7E2;

  text-shadow: 1px 1px 0 #F7D7E2;

  color: #fff;

Cole o código a seguir logo depois de #flower :hover{

  background: #fff;

  border: 1px solid #F5CFDC;

  color: #fff;

  text-shadow: 1px 1px 0 #EDA7BD;

  box-shadow: inset 0 0 500px #EA95B3;

Laranja

Cole o código a seguir logo depois de #flower {

  background: #FAEADC;

  border: 1px solid #F7DCC4;

  box-shadow: inset 0 0 5px #F7DCC4;

  text-shadow: 1px 1px 0 #F7DCC4;

  color: #fff;

Cole o código a seguir logo depois de #flower :hover{

  background: #fff;

  border: 1px solid #F4D3B5;

  color: #fff;

  text-shadow: 1px 1px 0 #F4D3B5;

  box-shadow: inset 0 0 500px #EEBC8E;

Azul

Cole o código a seguir logo depois de #flower {

  background: #E3F1F9;

  border: 1px solid #CFE7F5;

  box-shadow: inset 0 0 5px #CFE7F5;

  text-shadow: 1px 1px 0 #CFE7F5;

  color: #fff;

Cole o código a seguir logo depois de #flower :hover{

  background: #fff;

  border: 1px solid #AED7EE;

  color: #fff;

  text-shadow: 1px 1px 0 #AED7EE;

  box-shadow: inset 0 0 500px #88C2E6;

Verde

Cole o código a seguir logo depois de #flower {

  background: #E4ECCE;

  border: 1px solid #D8E3B6;

  box-shadow: inset 0 0 5px #D8E3B6;

  text-shadow: 1px 1px 0 #D8E3B6;

  color: #fff;

Cole o código a seguir logo depois de #flower :hover{

  background: #fff;

  border: 1px solid #D8E3B6;

  color: #fff;

  text-shadow: 1px 1px 0 #C2D38D;

  box-shadow: inset 0 0 500px #BBCE82;

Roxo 

ou lilás/violeta, não sei

Cole o código a seguir logo depois de #flower {

  background: #EFEAFB;

  border: 1px solid #E3DBF9;

  box-shadow: inset 0 0 5px #E3DBF9;

  text-shadow: 1px 1px 0 #E3DBF9;

  color: #fff;

Cole o código a seguir logo depois de #flower :hover{

  background: #fff;

  border: 1px solid #D3CAEE;

  color: #fff;

  text-shadow: 1px 1px 0 #D3CAEE;

  box-shadow: inset 0 0 500px #B09EE0;

Esse foi o tutorial de hoje <3 o que acharam?? gostaram?? Deixe seu comentário aqui ♥ e não se esqueça de visitar meu portfólio e curtir a página do blog no facebook ok?

Ah yeah <3 amei a música <33 mas achei tão parecido com Up&Down, mas mesmo assim achei a música melhor do que a anterior <33 a Junghwa ♥ tão fofa ♥ virou bias ♥