Neko


Visualize o menu aqui. A visualização não é minha, porém..é só pra vocês verem o funcionamento do menu mesmo! Eu encontrei este menu em um site, porém estava em inglês. É bem simples, vamos lá. Antes de </head> cole os scripts::

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js?ver=3.2.1" type="text/javascript"></script>
<script src="http://static.tumblr.com/ifqwhnb/AsRm14rnk/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/ifqwhnb/V7Im14sbh/animated-menu.js" type="text/javascript"></script>

Agora no seu css, cole o seguinte código::

ul{margin:0; padding:0;  font-size: verdana;}  
  
li{width:100px; height:50px; float:left; color: #191919; text-align:center; overflow: hidden;}  
  
a{color:#FFF; text-decoration:none;}  
  
p{padding:0px 5px;}  
  
.subtext{padding-top:15px; font-family: 'wintermelon'; font-size: 12px; text-transform: uppercase; text-indent: 5px;}  
  
/*Menu Color Classes*/  
.bege{background: #e7c7b3;  font-family: wintermelon; font-size: 20px;}  
.green {background: #e2edb3; font-family: wintermelon; font-size: 20px;}  
.pink{background:#fad4dd; font-family: wintermelon; font-size: 20px;}  
.marrom{background:#e6cfa8; font-family: wintermelon; font-size: 20px;}  
.blue{background:#b2d7ec; font-family: wintermelon; font-size: 20px;}  
@font-face {font-family: 'Wintermelon';src: url('http://themes.googleusercontent.com/static/fonts/yanonekaffeesatz/v4/YDAoLskQQ5MOAgvHUQCcLRTHiN2BPBirwIkMLKUspj4.woff') format('Woff'); font-weight: normal; font-style: normal;}

Agora cole aonde quer que você queira que apareça o menu o código abaixo::

 <ul>  
        <li class="bege">  
            <p><a href="#">Home</a></p>  
            <p class="subtext">The front page</p>  
        </li>  
        <li class="green">  
            <p><a href="#">About</a></p>  
            <p class="subtext">More info</p>  
        </li>  
        <li class="pink">  
            <p><a href="#">Contact</a></p>  
            <p class="subtext">Get in touch</p>  
        </li>  
        <li class="marrom">  
            <p><a href="/">Submit</a></p>  
            <p class="subtext">Send us your stuff!</p>  
        </li>  
        <li class="blue">  
            <p><a href="#">Terms</a></p>  
            <p class="subtext">Legal things</p>  
        </li>  
    </ul>

Simples né? Se usar credite, e se gostou dê like, dúvidas na ask.

Sunday, 19 de Aug - 2 notes

O que é? é quando você passa o mouse sobre uma imagem e a descrição da tal aparece.

A descrição em que irei ensinar a vocês hoje, é bem lindinha, veja o preview online aqui. Vamos lá, no seu css coloque o seguinte código::

.imagem {width: 270px; height: 280px; background-image: url('http://static.tumblr.com/bdvsetk/HbYm6t925/untitled-1.png'); -webkit-transition: all 0.5s linear;-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear; align: center;}
.descrip {position: fixed; width: 268px; height: 265px; font-family: '04b03'; font-size: 8px; color: #000; text-align: center; text-transform: uppercase; margin-top: -500px; -webkit-transition: all 0.5s linear;-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear; padding-top: 15px; padding-left: 1px; padding-right: 1px; align: center;}
.descrip:hover {opacity: 0.9; margin-top: -280px; -webkit-transition: all 0.5s linear;-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear; background: #fff;}
@font-face { font-family: '04b03'; src: url('http://static.tumblr.com/0yb7gbd/tpfm1cw3f/04b_03__.ttf'); } 

Em .imagem apague o link referente a imagem e substitua pelo link da imagem que você quer, bem simples! Agora cole o código abaixo aonde quer que apareça a sua descrição! Obs:: A descrição tem que ter um determinado espaço, ou seja, quando você por, coloque dentro de uma id de tamanho, tipo theme tableless.

<div class="imagem"></div><div class="descrip">
Sua descrição hover aqui >< nhac, escreva o que quiser, o texto pode ser médio se quiser.
</div>

Pronto, se gostou dê like, e se usar credite.

Sunday, 19 de Aug - 3 notes

É o meu primeiro block de música, portanto, relevem, o block em que vou ensinar, é esse:

No seu css, cole o seguinte código:

.audioplayer {background: #ECECEC;}
.playcount {background: #ECECEC; margin-top: 3px; padding: 5px;}
.artista {background: #ECECEC; margin-top: 3px; padding: 5px;}

Agora substitua o seu {Block:Audio} por esse::

{block:Audio}      
<center><div class="audioplayer">{AudioPlayerWhite}</div></center>
<div class="playcount">Música ouvida {PlayCount} vezes</div>
<div class="artista">{block:Caption}{Caption}{/block:Caption}</div>
{/block:Audio}

Simples né? Caso fique desconfigurado, coloque o Block em uma box! Se gostou dê like, e se usar credite!

Saturday, 18 de Aug - 6 notes

O estilo em que eu irei ensinar, é esse aqui: ~clique~

É um estilo simples, porém bonito e bem trabalhado! vamos lá. Antes de </style> cole o seguinte código, mudando apenas o que é pedido, ou seja, mudando as cores negritadas para as desejadas.

.pergunta {background: #d4a0bb; padding: 5px; font-size: 12px; font-family: tahoma;}
.seta {width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #d4a0bb; margin-top: -10px;}
.asker {background: #ECECEC; padding: 3px; font-size: 12px; font-family: tahoma; margin-bottom: 15px; width: 180px; margin-top: -20px;}
.asker a{color: #000;}
.imgask {border-radius:  100px; margin-right: 220px;}
.arrowperg {width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #ECECEC; margin-left: 185px;}
.resp {font-family: 'Play', sans-serif; font-size: 14px;}
page {background:transparent; color:#d4a0bb; margin:0px; padding:0px; margin-bottom:-0px; cursor:hand; text-align:center; letter-spacing:1px; font-family:'Tahoma'; font-size:20px; font-style:bold;}

Agora substitua o seu {Block:Answer} por esse::

{block:Answer}<div class="caixa">
     <img src="{AskerPortraitURL-24}" align="right" class="imgask"><div class="arrowperg"></div><div class="asker"> {Asker} </div><div class="pergunta"><div class="seta"></div> {Question} </div>
<center><div class="resp">{Answer}</div></center>
 </div>{/block:Answer}

Se a class da sua caixa for de nome diferente, mude o negritado! Pronto, sua ask está personalizada, bom uso..Se gostou dê like, e se usar credite.

Saturday, 18 de Aug - 3 notes

O que é? É a setinha que fica na lateral, que quando você clica você volta ao topo, um exemplo é a seta da dash no próprio tumblr.

Para obter, cole antes de </style> o seguinte código::

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script><a href="javascript:;"id="scrollToTop"><img src="LINK DA IMAGEM"></a>

No link da imagem, cole a url da imagem na qual você quer que clique para subir, agora é só salvar.

Thursday, 02 de Aug - 2 notes

Você está super ansioso para o dia e a data de que o próximo capitulo da sua temporada está por vir? então coloque um “cronometro” no seu theme e espere até que dê a hora exata para você baixar.

O site se chama Timeanddate, e é por ele que vamos colocar tempo e data no seu tumblr. Vamos lá:

Primeiramente entre no site, é claro..ele está aqui

Descendo a página você vai encontrar os espaços para você preencher com data, hora, mês, anos, minutos e segundos, preencha e logo depois escolha o estilo da sua data, descendo um pouco mais a página você vai encontrar a formatação, escolha como quer, e quando acabar abaixe tudo e clique em “Show HTML for countdown timer” copie o código que irá aparecer logo abaixo e cole no seu theme no lugar em que você quer que o relógio (tempo e data) apareça.

Se tiver dúvidas é só gritar na ask, e se foi útil dê like! =)

Monday, 23 de Jul - 1 notes

Muita gente vem me perguntando como põe i frame em menu opaque, pois há dificuldade, então irei ensinar aqui, o menu opaque é bem difícil de mexer porém não é um monstro de sete cabeças certo? vamos lá, entre no jennidesigns para ver as divs.

Primeiramente cole o seguinte código antes de <head>

Código aqui

Agora procure por {Block:Posts} e cole o seguinte código ACIMA dele, tem que ser bem em cima mesmo, não pode ter nenhum código depois.

<div id="jm">

Agora após {/Block:Posts} cole o seguinte código.

</div>

Agora volte ao seu menu opaque, e substituia esse código:

<li><a title="NOME" href="/">NOME</a></li>

Por esse:

<li><a span OnClick="changeNavigation('01')">NOME</a></li>

Pronto, agora vamos adicionar o conteúdo, logo acima de </body> cole o seguinte código:

<div id="01" style="display:none">
<div class="CLASS DA SUA BOX">
CONTEÚDO
</div></div>

Seu i frame está pronto, comigo funcionou, caso com você não funcione, leia o tutorial novamente e faça, pode ser erro seu.

Friday, 06 de Jul - 0 notes

Bom, como eu viciei em fazer estilos de ask, e muita das vezes precisamos fazer triangulos no photoshop para alguns recursos, decidi pesquisar mais sobre o assunto triângulos, e acabei achando uns sites na qual me ajudaram muito, e decidi passar pra vocês como fazer triângulos com Css, se usar credite por que foi difícil encontrar.

Seta apontando para cima (css)::

.arrowcima {width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #COR} 

Para usar a seta pra cima::</>

<div class="arrowcima"></div>

Seta apontando para baixo (css)::

.arrowbaixo {width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #COR;}

Para usar a seta pra baixo::

<div class="arrowbaixo"></div>

Seta apontando para a direita (css)::

.arrowdireita {width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #COR;}

Para usar a seta pra direita::

<div class="arrowdireita"></div>

Seta apontando para a esquerda (css)::

.arrowesquerda {width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right:15px solid #COR;}

Para usar a seta pra esquerda:: 

<div class="arrosesquerda"></div>

Para mudar o tamanho dos triângulos, é só você mudar todos os valores de border que está em 15px, quanto maior o número, maior o triângulo, e não esqueça de botar a cor hex aonde está negritado :)

Se usar credite, e se gostou dê like.

Friday, 06 de Jul - 1 notes

Na maioria muitas das vezes, a maior dúvida dos followers é a repetição de background, neste tutorial irei ensinar como deixar seu background fixo, ou como fazer ele se repetir várias vezes..

Cole este código de personalização depois de <style>

body {background-image: url(ENDEREÇO IMAGEM); background-repeat: código de personalização aqui;}

Agora vamos aos códigos de personalização, após background-repeat você deve por um código de personalização.

background-repeat: repeat :: o background se repetirá verticalmente e horizontalmente.

background-repeat: repeat-x :: a imagem vai se repetir verticalmente.

background-repeat: repeat-y :: a imagem vai se repetir horizontalmente.

background-repeat: no-repeat :: a imagem não vai se repetir.

Para deixar a sua imagem fixa, ou seja, quando você rolar o mouse ela não se mova, é só acrescentar no final do código do body a seguinte codificação:

background-attachment: fixed;

Tutorial por Jennifer, se gostou e/ou foi útil dê like.

Wednesday, 04 de Jul - 0 notes

O que é? O que muita gente não sabe, é que tableless não é só aqueles themes que tem footer e header e que é feito com imagens. Tableless faz com que o seu theme fique centralizado em todos os navegadores e em todos os tipos de telas, ou seja, faz com que o seu theme fique bem visualizado, sem estar muito pra esquerda ou pra direita, e sim no centro.

Vamos lá, cole o seguinte código depois de <style>

.side {width: 270px; float: left;}
.post {width: 515; float: right;}
.tudin {width: 800px;}

Agora após <body> cole o seguinte código:

<center><div class="tudin>
<div class="side">
CAIXA DA SIDE AQUI
</div>
<div class="post">
BLOCK DE POST AQUI
</div></div></center>

Pronto, se usar credite, e se não der certo peça ajuda na ask.

Tuesday, 26 de Jun - 6 notes
1 2 3 »