about
Relax bro ?
Olá,Meu nome é yosuka podem chamar de yosu fiz o blog para e-e enton tenho 13 anos é bem vindo ao meu blog o/
Smile :D
quinta-feira, fevereiro 27, 2014
Tutorial - Menu Displacement @quinta-feira, fevereiro 27, 2014
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 Html Studio e passei ele para o blogger então os créditos vão para ele ;3 pra quem quer ver como ficou o menu Clique aqui 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 "<link href='http://fonts.googleapis.com/css?family=" quer dizer que é um fonte. Eles pedem para colar acima de </head>, MAS no blogger você vai colar acima de <head> e acrescentar uma barra no fim do código, ficando assim:
<link href='http://fonts.googleapis.com/css?family=nome da fonte' rel='stylesheet' type='text/css'/>
Se você não colocar a barra seu código vai dar erro.
- Quando eles falam para colar um código "acima de </style>", ou "no seu CCS" quer dizer que é pra colocar o código acima de ]]></b:skin> (basta procurar /b:skin que acha). Se o código começar com .algumacoisa { ou com @algumacoisa, com explicações e coisas do tipo /* Tutorial Tal by Fulano */ é porque deve ser colado acima de ]]></b:skin>.
- Quando eles dizem "coloque onde quiser" ou "depois de <body>" é para colocar em umGadget de HTML/JavaScript. Geralmente esses códigos começam com <div e tem espaço para links.
- Quando eles falam para colocar "acima de </body>" é para colocar em cima de </head>. Na maioria das vezes são scripts. Se começarem com <script você deve colocar acima de</head>. As vezes o script não funciona porque tem CCS no meio, então você deve colar em um Gadget.
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 ]]></b:skin> ao achar acima dele cole esse código :
/*** MENU DISPLACEMENT POR HTMLSTUDIO ***/.menudisplacement {font-family:georgia; font-style:italic;font-size:11px; padding: 1px;float:left; height:auto; margin:1px;padding: 5px; text-align:center;background-color:#A4ADC6; color:#fff;width:40px; height:12px;-moz-box-shadow: inset 0 0 10px #CDCDCD;-webkit-box-shadow: inset 0 0 10px #CDCDCD;box-shadow: 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);-moz-opacity:1.0; opacity:1.0; -webkit-transition-duration: .99s;}.menudisplacement:hover {margin-top:-15px;}
2 - Salve e no Layout > Gadget > Java script cole isso :
<a href="link" class="menudisplacement">link</a>
<a href="link" class="menudisplacement">link</a>
<a href="link" class="menudisplacement">link</a>
<a href="link" class="menudisplacement">link</a>
<a href="link" class="menudisplacement">link</a>
<a href="link" class="menudisplacement">link</a>
<a href="link" class="menudisplacement">link</a>
<a href="link" class="menudisplacement">link</a>
é Fim Agora os créditos vão para : HTML Studio Chá com Anjos Obrigado a esses blogs é tumblrs ^^
Marcadores: #Tutorial1