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.
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.
É 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!
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.
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.
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! =)
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.
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.
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.
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.