Tutoriais Menus e Coisas do novo lay do Accio

Olá amores

Ultimamente ando tão sumida né? apareço um dia e depois de 2 ou 3 dias eu desapareço,está sempre assim.Mais é que em breve irei fazer uma viagem e minha mãe está me ocupando muito com isso,por isso acabo não tendo tempo para entrar nos dois blogs.E sempre quando eu entro venho com várias desculpas,de agora em diante irei me precipitar se não der para mim fazer uma postagem nova colocarei a que irei deixar em rascunhos e avisarei o motivo logo no começo.

Hoje irei ensinar como fazer um menu com i frame,esse tutorial eu encontrei no blog torrada com nutella mais o tutorial principal é do we heart html (créditos pelos dois).Logo abaixo você irá ver o print do menu:

torrada com nutella 

Viu? agora vamos aprender.

Vá em modelo >> editar html >> procure por

]]></b:skin>

Encontrando esse código,cole logo acima esse

#menusv {

display: inline-block;

text-align:center;

background: #f0e5eb;

color:#e5bbd3;

float: center; 

font-size:14px;

font-family: georgia;

margin:1px;

-webkit-transition-duration: .50s;

width:auto;

line-height:12px;

width:70px;

padding:6px; 

-moz-border-radius: 25px 10px / 10px 25px;  

border-radius: 25px 10px / 10px 25px;} 

#menusv:hover {

color:#b46090;

background: #dac8d2;

border-radius:10px;

background-filter: alpha(opacity=80);

opacity: .80;

-moz-border-radius: 25px 10px / 10px 25px;   

border-radius: 25px 10px / 10px 25px;} 

Agora salve e vá em layouts >> adicionar gadget html/javascript e cole isso

 <a href='link' id='menusv'>nome do link</a>

para adicionar mais é só ir repetindo até a quantidade que você desejar.

Bom por hoje é só.

http://www.kawaii-things.net/2013/03/tutorial-menu-com-i-frame.html

------------------------------------------------------------------------------------------------------------

Tutorial - Marcadores Personalizado

Yo Minna ~~

Baby_monster teria como me explicar direitinho qual o tutorial da caixa de pesquisa que você quer que eu ensine,assim você vai me ajudar muito e.e'. Bom desculpe está postando só agora mais é que eu fui dar uns rolê (não reparem hoje eu to meio pirada,risos).

Bom trouxe um tutorial bem rápido e fácil de se fazer,não deve levar nem 5 segundinhos. O tutorial que eu trouxe é de um marcador personalizado,esse tutor eu aprendi no blog Chovendo Diamantes (créditos),aqui está o print do menu (x) a imagem também é de lá,vamos aprender logo?

Vá em modelo >> Editar html >> Expandir modelo de widget >> Procure por

]]></b:skin>

Encontrando essa tag,cole isso acima:

.menutags a{

display: inline-block; 

margin-bottom:5px; 

background: #f2f2f2; /*cor do fundo*/

font-family: 'times new roman'; /*fonte*/

font-size: 9px; /*tamanho da letra*/

text-align: center;  /*alinhamento*/

text-transform: uppercase; 

width: 110px; /*comprimento*/

padding: 7px 8px 8px; 

border-bottom: 4px solid #6e5c4b; /*cor da borda*/

color:#856d57; /*cor da letra*/

-webkit-transition-duration: 1s;}

.menutags a :hover{

border-bottom:4px solid #735941; /*cor da borda quando passa o mouse*/

background: #f2f2f2; /*cor do fundo quando passa o mouse*/

color:#856d57; /*cor da letra quando passa o mouse*/

font-size: 9px;/*tamanho da letra quando passa o mouse*/

}

 Feito isso,salve!

Agora vá em layout >> adicionar gadget >> Html/JavaScript >> cole isso

<div class="menutags">
   <a href="link">nome</a>
 <a href="link">nome</a>
 <a href="link">nome</a>
 <a href="link">nome</a>
 <a href="link">nome</a>
</div>

 Salve de novo e pronto.Se quiser adicionar mais é só ir repetindo o código.

http://www.kawaii-things.net/2013/03/tutorial-marcadores-personalizado.html

------------------------------------------------------------------------------------------------------------

Tutorial Menu Bars 02

Yo,

Nossas vizualisações no dia foram 9, pois é nen eu acreditei, é muito ruin ver isso...

Bom.. mais ok... estou tentando superar as dificuldades que estou enfrentando por causa da internet,

mais ok vamos lá... Bem.. Trouxe um menu bem legal que eu aprendi no Lovers Of designs, crédito total a eles...Preview do menu ( x ) 

Gostou? me siga...

1. Abra seu html e procure por ]] ( seu css ) e cole o codigo acima da tag achada,

oi ii {

background:#transparent;

list-style: none;

height: 44px;

float:left;

padding:10px 5px;

}

oi ii a {

width: 130px;

height: 40px;

line-height: 53px;

border-bottom: 4px solid #999;

padding:0px;

color: #fff;

font-size:18px;

font-weight:lighter;

text-align:center;

text-decoration: none;

display: block;

-webkit-transition: .2s all linear;

-moz-transition: .2s all linear;

-o-transition: .2s all linear;

transition: .2s all linear;

}

ii:nth-child(1) a {

border-color: #99e677;

}

ii:nth-child(2) a {

border-color: #ff6e9a;

}

ii:nth-child(3) a {

border-color: #c3e1f1;

}

li:nth-child(4) a {

border-color: #99999;

}

ii:nth-child(5) a {

border-color: #fdff7a;

}

ii:nth-child(1) a:hover {

border-bottom: 35px solid #86872f;

height: 7px;

}

ii:nth-child(2) a:hover {

border-bottom: 35px solid #eb4d7a;

height: 7px;

}

ii:nth-child(3) a:hover {

border-bottom: 35px solid #80bcd5;

height: 7px;

}

ii:nth-child(4) a:hover {

border-bottom: 35px solid #000;

height: 7px;

}

ii:nth-child(5) a:hover {

border-bottom: 35px solid #d99900;

height: 7px;

}

.position {margin-top: númeropx; margin-left: númeropx;}

Entendendo os código: As partes do “oi” e do “ii” eram coisas que já tinham no tumblr e que podiam atrapalhar na hora da postagens de vocês no tumblr então eu mudei para esses nomes. Se quiserem fuçar no código para entender onde muda as cores vocês podem mas tomem bastante cuidado ok? A parte .position é a parte que vai definir a posição do menu, então mude o valor de “Número” pelo valor que você quer ate que o menu fique do seu gosto.

2. Vizualise,  veja se esta certo, agora vá em layout, cole isso onde vc quer que apareça ( gadget de html java script) 

<div class="position"><oi id="nav">

    <ii class="link"><a href="#">home</a></ii>

<ii class="link"><a href="url">ask me</a></ii>

<ii class="link"><a href="url">tumblr</a></ii>

<ii class="link"><a href="url">about me</a></ii>

<ii class="link"><a href="url">textos</a></ii>

</oi>

http://www.kawaii-things.net/2013/04/tutorial-menu-bars-02.html

Prontinhu é isso...espero que tenham gostado Creditos ao LOD, e é isso galera bjinhus!

------------------------------------------------------------------------------------------------------------

Tutorial : Como fazer um menu pressionado no cabeçalho

~~Oiii

Essa semana está muito corrida pra mim, trabalhos e matérias, começo de trimestre é sempre assim, e eu preciso construir um livro pro meu professor de história, eu estou dando prioridade a escola dessa vez, por que estou preocupada com meus resultados futuros, não quero ficar preocupada, entendam por favor

Não me batem por favor, o layout do Little Mix vai sair, uahus eu preciso de tempo para ajeitar ele porque tem um erro nos marcadores, sim.. sempre dá esse erro por causa do tutorial eu esqueço sempre uma div pra traz, e não acaba saindo os marcadores e tals, é  eu vou concertar quero o layout perfeito pra vcs!!

Eu estou tão confortável com esse lay, sério ele é muito perfeito, eu prefiro layouts simples com cabeçalhos menores, eles são os únicos que duram mais aqui no Kt, até a Wendy falou uahsu.

Ok, agora chega de falar e falar, e falar... vamos ao nosso lindo tutorial, ele está super explicado.

1. As imagens que vamos usar no tutorial para fazer o menu são essas:

2. Agora lá no seu photoshop, quando estiver construindo seu cabeçalho, coloque as figuras de ( home, pedidos tutoriais, essas figuras acima ) no lugar que voce queira que fique, e precione as imagens usando os styles que eu postei aqui no kt, esses aqui. e ficara assim:

clique em cima da imagem para ver melhor.

2. Após ter feito isso no seu Cabeçalho salve ele em png, feche e abra novamente o cabeçalho, e recorte apenas as partes das imagens do menu uma por uma, irá ficar assim: 

Salve as imagens uma por uma,  e as hospede em algum site que voce costuma hospedar imagens

3. Depois de ter hospedado cole isso em um gadget de java script, ( para elas ficarem uma em baixo da outra precisa por uma altura e largura para cada um - tutorial de gadgets no cabeçalho )

<div style="position: absolute; margin-top: -313px; left: 440px;">
<a href="seu link" target="_blank"><img src="ulr da sua img" border="0" alt=" photo 1_zps793827c8.png"/></a></div>

Repita o codigo todo até ir completando seu menu, substituindo nos lugares desejados,

Bom é isso, quem usar... credite o Kawaii Things, e quem re passar credite o Kawaii Things, ou denuncio, sério, esse menu foi feito por mim, ele é simples eu sei, mais eu tive a ideia dele no layout do Little Mix, se existe outro tuto desse? não sei mais esse eu fiz mesmo.. Bejinhus 

http://www.kawaii-things.net/2013/09/tutorial-como-fazer-um-menu-pressionado.html#more

------------------------------------------------------------------------------------------------------------

~~Bom dia~~

tenho que estudar pra minha prova de matemática de amanha, como eu não fiz na sexta já que eu faltei pois estava passando muuito mal, trouxe um tutorial de um menu bem simples, mais que se bem personalizado ficará muito bom!, o tutorial é do blog Sonho mais Profundo, o preview do menu está aqui,

Like? vamos ao tuto então!

1. Vá no seu html, dê Ctrl + F ou F3 e procure por ]]></b:skin>

Cole o código seguinte, acima da tag

#navbarmenu {

width: 100%;

height: 35px;

font-size: 12px;

font-family: arial, tahoma, verdana;

color: #fff;

font-weight: bold;

margin-top: -33px;

padding: 0;

background-color: #fa8072;

}

#navbarmenuleft {

float: left;

margin: 0;

padding: 0;

}

#navbarmenuright {

width: 270px;

font-size: 11px;

float: right;

margin: 0;

text-align: right;

padding-top: 6px;

padding-right: 0;

padding-bottom: 0;

padding-left: 0;

}

#nav {

margin: 0;

padding: 0;

}

#nav ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#pesquisa {

color: #ffffff;

background-color: ;

border: 1px solid #000000;

}

#nav li {

list-style: none;

margin: 0;

padding: 0;

}

#nav li a, #nav li a:link, #nav li a:visited {

color: #fff;

display: block;

font-size: 16px;

font-family: georgia, times new roman;

font-weight: normal;

text-transform: lowercase;

margin: 0;

padding: 9px 15px 8px;

}

#nav li a:hover, #nav li a:active {

color: #fff;

margin: 0;

padding: 9px 15px 8px;

text-decoration: none;

background-color: #ff8c00;

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

width: 150px;

color: #fff;

font-size: 14px;

font-family: georgia, times new roman;

font-weight: normal;

text-transform: lowercase;

float: none;

margin: 0;

padding: 7px 10px;

border-bottom: 1px solid #fff;

border-left: 1px solid #fff;

border-right: 1px solid #fff;

background-color: #fa8072;

}

#nav li li a:hover, #nav li li a:active {

color: #fff;

padding: 7px 10px;

background-color: #ff8c00;

}

#nav li {

float: left;

padding: 0;

}

#nav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 170px;

margin: 0;

padding: 0;

}

#nav li ul a {

width: 140px;

}

#nav li ul ul {

margin: -32px 0 0 171px;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

left: -999em;

}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

left: auto;

}

#nav li:hover, #nav li.sfhover {

position: static;

}

#navbar-iframe { height: 0px; visibility: hidden; display: none; }

Para fazer as alterações cole o codigo no bloco de notas, onde vá futucando onde tem as cores e vá mudadndo até adiquirir o resultado, 

2. : Dê Ctrl + F novamente e procure por :

 <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> 

Abaixo dele cole :

<div id='navbarmenu'><div id='navbarmenuleft'><ul id='nav'><li><a expr:href='data:blog.homepageurl'>home</a></li><li><a href='#'>pagina</a><ul><li><a href='#'>sub pagina</a><ul><li><a href='#'>sub sub pagina</a></li><li><a href='#'>sub sub pagina</a></li></ul></li><li><a href='#'>pagina</a></li><li><a href='#'>pagina</a></li></ul></li><li><a href='#'>pagina</a></li><li><a href='#'>pagina</a></li><li><a href='#'>pagina</a></li><li><a href='#'>pagina</a></li></ul></div><div id='navbarmenuright'>&lt;form method=get action=&quot;http://www.google.com.br/search&quot;&gt;&lt;input type=text name=q size=25 maxlength=255 value=&quot;&quot;&gt;&lt;input type=submit name=btng value=&quot;pesquisar&quot;&gt;&lt;input type=hidden name=sitesearch value=&quot;endereço do seu blog&quot;&gt;&lt;/form&gt;</div></div><div style='clear:both;'/>

Explicações (por sonho mais profundo) : Onde está escrito " Páginas " substitua pelo nome do menu que você quer , vai ter também sub página e sub sub página é só ir colocando os nomes que você quer .

Caso você não queira tantas paginas apague apenas isso. Quantos for necessários:

<li><a href='#'>pagina</a></li>

E se você quer mais ou menos sub sub páginas, adicione ou apague isso:

<li><a href='#'>sub sub pagina</a></li>

Se você não quiser sub sub pagina é só apagar os dois que já vem!

Faça a mesma coisa para apagar ou adicionar sub pagina:

<a href='#'>sub pagina</a>

Ah , no primeiro código que eu lhes passei , é só personalizar a cor, letra e tal'z , ele sempre vinha certinho para mim , porém quando eu fui colocar esse menu no blog de testes tive que também abaixa-lo um pouco , caso aconteça a mesma coisa com vocês é só    

ir abaixando o número no trecho : margin-top: -33px; . 

Bom é isso, espero que todos tenham gostado,

Kiss

http://www.kawaii-things.net/2013/05/tutorial-menu-no-topo.html

------------------------------------------------------------------------------------------------------------

Olá anjinhos 〜(・▽・〜)(〜・▽・)〜

Como vocês estão? Espero que bem, eu também estou ótima e queria agradecer pelos leitores que desejaram que eu ficasse melhor. Na verdade, eu estou um pouquinho cansada, pois hoje não teve aula e eu tive que limpar a casa inteirinha para mim mãe enquanto ela trabalhava, porque ela não está legal. Mudando de assunto, eu decidi que não irei colocar ninguém na equipe, pelo menos no momento. Estou até que dando conta de tudo, mas tomei uma decisão e vou sim colocar mais alguém na equipe, que no caso será a Ro, porque é uma das pessoas que mais confio!

Não tenho certeza se já irei colocar ela pois ainda estou me organizando. Mas quem sabe daqui alguns dias vocês estarão á recebendo de volta aqui! A blogosfera ainda muitíssimo parada e infelizmente, ás vezes acabo participando disso por falta de animação mesmo... As visualizações das postagens caíram bastante, os seguidores faz tempo que não sai do mesmo e quando sai, é muito devagar e isso está me preocupando bastante em questão do  crescimento do blog. Mas mudando de assunto, estou trazendo hoje três modelos simples para tooltip. Divirtam-se!

Para começar, daremos uma procuradinha no código </head> e acima dessa tag, você colará:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://static.tumblr.com/oiizew6/8B5lzwf17/script.js' type='text/JavaScript'/>

Agora, escolha o modelo de tooltip que você quer abaixo, e clique na escrita linkeada de "Código", ao lado dele e cole á cima de ]]></b:skin>.
http://www.havingcherry.com/2014/04/tres-modelos-para-tooltip.html

  « Código    « Código   « Código