Tutorial - Menu Displacement
Autor: yosu ♔ | Publicado: 2014-02-27T06:56:00-08:00










Oe




Bem gente ainda estou fazendo a surpresa então vim postar pra não ficar paradão aqui '-' hoje eu trouxe um menu que vi no&nbsp;Html Studio&nbsp;e passei ele para o blogger então os créditos vão para ele ;3 pra quem quer ver como ficou o menu&nbsp;Clique aqui&nbsp;ai você vão ver ok? é bem simples mesmo ^^ vamos lá ?







1 - Mas o menu é de Tumblr como vou passar para o blogger



Isso é a coisa mais fácil do mundo vou dar as dicas!






Quando o código começa com "&lt;link href='http://fonts.googleapis.com/css?family=" quer dizer que é um fonte. Eles pedem para colar acima de&nbsp;&lt;/head&gt;, MAS no blogger você vai colar acima de&nbsp;&lt;head&gt;&nbsp;e acrescentar uma barra no fim do código, ficando assim:



&lt;link href='http://fonts.googleapis.com/css?family=nome da fonte' rel='stylesheet' type='text/css'/&gt;


Se você não colocar a barra seu código vai dar erro.





Quando eles falam para colar um código "acima de&nbsp;&lt;/style&gt;", ou "no seu&nbsp;CCS"&nbsp;quer dizer que é pra colocar o código acima de&nbsp;]]&gt;&lt;/b:skin&gt;&nbsp;(basta procurar /b:skin que acha). Se o código começar com&nbsp;.algumacoisa {&nbsp;ou com&nbsp;@algumacoisa, com explicações e coisas do tipo&nbsp;/* Tutorial Tal by Fulano */&nbsp;é porque deve ser colado acima de&nbsp;]]&gt;&lt;/b:skin&gt;.




Quando eles dizem "coloque onde quiser" ou "depois de&nbsp;&lt;body&gt;" é para colocar em umGadget de HTML/JavaScript. Geralmente esses códigos começam com&nbsp;&lt;div&nbsp;e tem espaço para links.&nbsp;






Quando eles falam para colocar "acima de&nbsp;&lt;/body&gt;" é para colocar em cima de&nbsp;&lt;/head&gt;. Na maioria das vezes são scripts. Se começarem com&nbsp;&lt;script&nbsp;você deve colocar acima de&lt;/head&gt;. As vezes o script não funciona porque tem CCS no meio, então você deve colar em um Gadget.

Lembre-se de testar sempre em um blog de testes primeiro, pois alguns códigos não funcionam e podem dar erro no Template. É só ir tentando que rapidinho pega o jeito.


2 - Pronto aprendi mas agora vamos pro menu?



Sim claro vamos pro menu ^^



1 - Vá no seu HTML e em CTRL + F e procure por&nbsp;]]&gt;&lt;/b:skin&gt; ao achar acima dele cole esse código :





/*** MENU DISPLACEMENT POR HTMLSTUDIO ***/



.menudisplacement {


font-family:georgia; font-style:italic;

font-size:11px; padding: 1px;&nbsp;

float:left; height:auto; margin:1px;

padding: 5px; text-align:center;&nbsp;

background-color:#A4ADC6; color:#fff;

width:40px; height:12px;

-moz-box-shadow: inset 0 0 10px #CDCDCD;

-webkit-box-shadow: &nbsp;inset 0 0 10px #CDCDCD;

box-shadow: &nbsp;inset 0 0 10px #CDCDCD;

border-radius:70px;height:30px;}



.menudisplacement:hover {

border-radius:70px;border:4px solid #CEDAE7;

width:43px;margin-top:-5px;

-moz-transition-duration: .99s;filter:alpha(opacity=100);&nbsp;

-moz-opacity:1.0; opacity:1.0; -webkit-transition-duration: .99s;}&nbsp;



.menudisplacement:hover {

margin-top:-15px;}&nbsp;


2 - Salve e no Layout &gt; Gadget &nbsp;&gt; Java script cole isso :


&lt;a href="link" class="menudisplacement"&gt;link&lt;/a&gt;

&lt;a href="link" class="menudisplacement"&gt;link&lt;/a&gt;

&lt;a href="link" class="menudisplacement"&gt;link&lt;/a&gt;

&lt;a href="link" class="menudisplacement"&gt;link&lt;/a&gt;

&lt;a href="link" class="menudisplacement"&gt;link&lt;/a&gt;

&lt;a href="link" class="menudisplacement"&gt;link&lt;/a&gt;

&lt;a href="link" class="menudisplacement"&gt;link&lt;/a&gt;

&lt;a href="link" class="menudisplacement"&gt;link&lt;/a&gt;&nbsp;

é Fim Agora os créditos vão para : HTML Studio&nbsp;Chá com Anjos&nbsp;Obrigado a esses blogs é tumblrs ^^