Mapa e globo de visitantes no seu Tumblr !

Muitos usuários gostam de colocar contadores de visitas em seus Tumblrs, para que possam mostrar quantas pessoas tem online, quantas já acessaram, entre outros.
Porém, mais que isso, alguns querem colocar também um mapa, que mostre de onde vem os acessos de todas as pessoas que estão visitando seu Tumblr, seu país e cidade. Neste tutorial ensinarei você a colocar 3 modelos diferentes, com diversos “submodelos” diferentes, de mapas para exibir de onde vem seus seguidores.

Existem três modelos modelos: O primeiro é um globo maior (o tamanho pode ser personalizado), que exibe o nome da cidade e o país de cada um dos visitantes. O segundo é um globo menor (também pode ter o tamanho personalizado, mas ainda assim é menor que o primeiro modelo), com as visitas um pouco mais discretas, apontadas apenas com marcadors. E o terceiro é um mapa mesmo.
Em todos os três modelos você pode configurar qual a cor dos marcadores de visitas, e também escolher modelos diferentes de mapa, podendo fazer com que ele seja exibido em negativo, preto e branco, separado por estações, entre outros.
Para colocar o globo é muito fácil, basta acessar o link correspondente ao modelo que você quer (links abaixo), personalizar como você quer que seja exibido o mapa, e depois copiar e colar o código da caixa “Copy The Code To Your Site…” no código do seu theme onde você quer que apareça o mapa, pode ser até na sua Description ! =)
Links dos modelos:

Globo maior

Globo menor

Mapa

Espero que tenham gostado. Se colocou no seu Tumblr e gostou, comente o post :D

__________________________________________________

Manual completo de como usar o Formspring no Tumblr

Hoje vou fazer um tutorial completo de como integrar o seu Formspring ao seu blog no Tumblr. Desta forma, seus seguidores do Tumblr poderão perguntar diretamente do seu Tumblr para seu Formspring, e suas perguntas do Formspring serão publicadas no Tumblr.

A primeira coisa a fazer é acessar a página “Connect Services” do Formspring, e clicar sobre o botão do Tumblr e depois digitar sua senha e login do Tumblr, como se estivesse fazendo login. Esta primeira parte já está configurada, agora toda vez que você responder uma pergunta no Formspring, deixe marcado o campo do Tumblr abaixo de onde você digita a resposta.

Agora ensinarei como exibir a caixa de perguntas do Formspring no Tumblr. Você deve acessar a página “Embed Widget” do Formspring e configurar como você quer que a caixa apareça, você definirá o tamanho, a cor do fundo (background) e a cor da letra (foreground) do seu widget. Depois basta copiar o código que aparece na parte de cima da página.

Após isso, basta colar este código onde você quer que sua caixa apareça no theme do seu Tumblr. Se você não souber onde colar no código, pode colar na sua Description.

__________________________________________________

Botão de "Curtir" do Facebook nos posts

Alguns usuários tem pedido para que eu faça um tutorial de como colocar o botão de “Curtir” nos posts do Tumblr igual tem aqui no TumbleTricks, farei então um tutorial sobre isso.

Antes de alterar o código do seu theme, lembre-se de guardar uma cópia dele no seu computador =)
Depois disso, basta procurar por {block:Posts} no código do seu theme (se tiver mais de um, será o último), e colar isso depois dele:
<script src="http://connect.facebook.net/pt_BR/all.js#xfbml=1" type="text/javascript"></script>

<fb:like href="{Permalink}" layout="button_count" send="false" show_faces="false" font="arial" action="like" colorscheme="light"></fb:like>

Não precisa alterar nada, basta colar.
Depois é só salvar o theme, e o botão aparecerá =)

__________________________________________________

Personalizar o player do SCM com CSS

Atualmente recebi alguns pedidos para que eu fizesse um tutorial ensinando a personalizar o SCM Music Player.

Portanto neste tutorial ensinarei como fazer isso, porém, para este tutorial é necessário que se tenha um conhecimento, no mínimo, básico de CSS para conseguir personalizar como você quer =)
Antes de usar alguma modificação no seu código, eu recomendo que você guarde uma cópia do código do seu theme no seu computador.

Após isso isso, você deve editar o código CSS abaixo, personalizando as propriedades abaixo (as explicações do que faz cada seletor está ao lado, entre /* e */). Abaixo do código haverá um exemplo de cada imagem a ser usada neste player.

#player,#player a{ color:#5cd700; } /*Cor dos links*/ #player{ background:url(URL_DA_IMAGEM); background-position:bottom; } /*Imagem do volume*/ #player .mainImage{ background:url(URL_DA_IMAGEM); } /*Imagem de fundo*/ #player #baseLeft{ width:TAMANHOpx; } /*Tamanho do lado esquerdo*/ #player #baseRight{ width:TAMANHOpx;} /*Tamanho do lado direito*/ #player .button{ width:TAMANHOpx; } /*Tamanho dos botões*/ #player #play{ background:url(URL_DA_IMAGEM); } /*Botão de Play*/ #player #play,#player #pause{ left:26px; } #player #previous{ left:0px; } #player #next{ left:52px; } #player #title{ left:90px; } #player #tooltip{ right:196px; } #player #timer{ right:120px; } #player #list{ right:0px; } #player #seeker{ right:320px; } #player #seekerBase{ border-color:#COR; } /*Cor da área que procura a parte da música*/ #player #seekerBuffered{ background-color:#COR; } /*Cor da área da música que já carregou*/ #player #seekerSliderBase{ background-color:#COR; } /*Cor do quadradinho de ir pra parte da música*/ #player #volume{ width:65px; right:39px; } #player #volumeSlider{ width:8px; background:url(URL_DA_IMAGEM); } /*Controlador do volume*/ #playlist,#playlist .module,#playlist h3{ border-color:#COR_DA_BORDA; color:#COR_DA_LETRA; } /*Itens da playlist*/ #playlist h3{ background-color:#COR; } /*Cabeçalho da playlist*/ #playlist .even{background-color:#COR;} /*Cor de fundo dos itens pares da playlist*/ #playlist .odd{ background-color:#COR;} /*Cor de fundo dos itens ímpares da playlist*/
#playlist .focus{ background-color:#COR_DE_FUNDO; color:#COR_DA_LETRA;} /*Cor do ítem em foco na playlist*/

Imagens de exemplo:

Imagem do volume:http://scmplayer.net/skins/tunes/sizerAndVol.png
Imagem de fundo: http://scmplayer.net/skins/tunes/main.png
Botão de play: http://scmplayer.net/skins/tunes/playBtn.png
Controlador do volume:http://scmplayer.net/skins/tunes/sizerAndVol.png

Depois disso, você deve hospedar este arquivo com a extensão “.css” em algum site de hospedagem (recomendo o Webs e oXPG), e usar o endereço que você hospedou ele quando for configurar o SCM lá no site, veja abaixo onde colar:

O resto é normal, basta escolher sua playlist normalmente como já fazia no SCM mesmo sem ser personalizado com CSS =)

Não se se ficou meio confuso para quem não entende (ou entende pouco) de CSS, mas este foi o modo mais simples que encontrei para explicar. Espero que tenha ajudado =)

__________________________________________________

Menu glow

Vizualização do menu

Cole o código abaixo entre <style> e </style>

/***Menu Glow por Nicole (desencan-tada)***/
.nbmenu nb a{
    background: #000;
    padding: 5px;
    color: transparent;
    display: inline-block;
    text-transform: uppercase;
    text-shadow: 0px 0px 1px #fff;
    letter-spacing: 1px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    font-family: verdana;
    font-size: 12px;
}

.nbmenu:hover nb a{
    text-shadow: 0px 0px 1px #fff;
}
.nbmenu nb a:hover{
    color: #fff;
    text-shadow: 0px 0px 6px #fff;
    text-decoration: none;
}

Entendendo o código

background: cor do fundo
color: cor da letra;
font-family: tipo de letra;
font-size: tamanho da letra;

Depois, cole o código abaixo onde voce quer que apareça o menu depois de <body>

<ul class="nbmenu">
    <nb><a href="#">Home</a></nb>
    <nb><a href="#">About</a></nb>
    <nb><a href="#">Info</a></nb>
    <nb><a href="#">Ask</a></nb>
    <nb><a href="#">Theme</a></nb>
</ul>

__________________________________________________

Recuperando seu theme anterior

Gente, esse tutorial é super simples! Se você quiser recuperar um theme antigo que cê tava usando, é só vir nesse site, e clicar em revert na opção que você quiser.

__________________________________________________

Fazendo wishlist

Tem bastantes jeitos de fazer lista de desejos, e eu vou ensinar dois:

O primeiro é assim:

Eu não consegui <br>

<s>Consegui</s><br>

Eu não consegui <br>

<s>Consegui</s><br>

E o segundo:

<s>consegui</s> + não consegui + <s>consegui</s> + não consegui + <s>consegui</s> + não consegui + <s>consegui</s> + …

__________________________________________________

Como colocar um lugar para os followers responder no post

1° - Você vai criar um novo post ~~obvio né ?~~

2° - Faça o que o print manda.

Print aqui

Pronto e só salvar.

__________________________________________________

Como colocar e tirar opacidade nas imagens

Na verdade, é beeeeeeeeeeeeeem simples!

Só colocar esse código entre <style> e </style>:

img {opacity: 0.8; filter:alpha(opacity=80);}

img:hover {opacity:1; filter:alpha(opacity=99);}

As imagens ficam claras, e quando passa o mouse ficam da cor natural, mais escuro. É bem fofo para themes cute, mas fica ótimo com todo tipo de theme! Se você quer tirar a opacidade, só retirar o mesmo código acima!

__________________________________________________

Bolhas subindo do mouse

O código é bem pequeno e você só precisa configurar a quantidade máxima e a cor das bolhas.

procure por </head> e cole isso antes dele:

<script src="http://tumbletricks.webs.com/bolhas.js"></script>

<script>

var colours=new Array("#COR_CIMA", "#COR_DIREITA", "#COR_BAIXO", "#COR_ESQUERDA", "#COR_DENTRO");

var bubbles=QUANTIDADE;

</script>

E substitua as cores em: #COR_CIMA, #COR_DIREITA, #COR_BAIXO, #COR_ESQUERDA, #COR_DENTRO

Respectivamente por: Cor da parte de cima da bolha, cor do lado direito da bolha, cor da parte debaixo da bolha, cor do lado esquerdo da bolha, e cor de dentro da bolha (o preenchimento dela).

Você pode pegar o código das cores aqui:http://tumbletricks.tumblr.com/cores

E substitua QUANTIDADE pela quantidade máxima de bolhas que pode ter na tela ao mesmo tempo. Caso você não saiba muito bem que número colocar, 100 é um número ideal

__________________________________________________

Como recuperar o botão de Follow e Dashboard

1º passo: adicione o código abaixo antes da tag </style> no seu HTML.

.onemoredream {
top: 0px;
right: 0px;
text-decoration: none;
position: absolute;
text-align: left;
width: auto; }

Não modifique nada, nem mesmo o nome da class.

2º passo: agora copie o código abaixo e cole depois da tag <body> do
seu HTML.

<div class="onemoredream"> <a href="http://www.tumblr.com/follow/SEU
TUMBLR" style="cursor: hand;"><img
src="http://static.tumblr.com/mpornxv/nBnlkj3re/follow.png"></a> <a
href="http://www.tumblr.com/dashboard" style="cursor: hand;"><img
src="http://static.tumblr.com/mpornxv/XGBlkj3s5/dashboard.png"></a>
</div>

__________________________________________________

Como deixar a side parada,sem rolar com a pagina

Vou ensinar como deixar a sidebar parada que nao rola com a pagina igual as outras,veja um exemplo de side parada nesse tumblr.

Primeiro: Ache no seu codigo da sidebar (ou voce pode apertar ctrl+f) “position: fixed” Provavelmente vai aparecer varios,veja qual eh da sidebar e mude o “fixed” para ”absolute”.

Aperte Update Preview e veja se ela esta parada sem rolar com a pagina,se estiver tudo certo,salve!

__________________________________________________

Como colocar nuvem na side

Procure por <body> e cole ISSO no final ou no começo da sua side.

- Em width mude até a nuvem ficar certinha na sidebar.

Não esqueça de repor as aspas

__________________________________________________

Colocando duas caixas na sidebar

Primeiro, recomendo você salvar uma cópia do seu theme, caso dê algo errado :D

Vamos ao tutorial:

1° - Você deve achar a div que compõe a sua sidebar, ou seja, que determina o espaço da sua sidebar, e também onde ela termina. Exemplo(da minha base):

Depois disso, você tem que achar a div que faz as caixas. Exemplo:

Entre isso, tem o conteúdo da minha sidebar. Agora, em baixo da </div> que está marcado na imagem acima, você coloca:

<br><div class="DIVDACAIXA"> conteúdo da caixa</div>

Lembrando que você só pode colocar isso antes da </div> que termina a area da sidebar, se não, o theme fica toooooodo desconfigurado

__________________________________________________

Como colocar banner no theme.

Escolhe o lugar aonde quer que ele apareça e coloca isso:

Se quiser que ele fique maior ou menos, é só mudar o valor de width.

__________________________________________________

Como disponibilizar themes igual a nós.

Você faz o theme e salva no bloco de notas. Depois você vai lá em customize e coloca o theme, pra vizualizar, clica lá para vizualizar, depois clica em F11 pra deixar a tela grande, clica em PrtSc para tirar um print. Depois que vc tirar o print coloca ele no Photoscape e corta as partes que não precisa, que é o botão Iniciar que aparece na tela rs. Depois você salva a imagem. Vai nesse site e hospeda o HTML que você salvou no bloco de notas, depois hospeda a imagem. Depois que você hospedar é só colocar o link da Imagem e Vizualize aqui e o do HTML em Código aqui

__________________________________________________

Como fazer theme? Base do Rh Themes.

Oi, gente… Muita gente vem me perguntando como fazer um theme e blábláblá.. Então resolvi fazer um tutorial com base.
Eu sei que muitas pessoas por ai já fizeram uma base com o tutorial explicando tudo…

Mais resolvi fazer um mais explicado, vamos dizer detalhado. Vamos começar?

Vamos para a base… pegue-a AQUI e a visualize AQUI

Entendendo o código… (o que significa cada coisa)

<title>SEU TUMBLR</title>

Title significa o titulo que fica na aba do navegador.

body - Fundo do seu theme / E a color que está do lado da url de fundo? (color: #949494) - É a cor do texto dos posts.

h1 e h2 - É o titulo dos posts e também titulo das caixinhas do menu falso-iframe.

.box - Caixas onde os posts ficam, e as coisas do menu.

.divdate - É as informações sobre o post que ficam abaixo do seu post (ex: Photo postado em … __/__/___ )

.infopost - Tracinho que fica abaixo do h1 e do h2 (~~h1 e h2 = titulos~~)

s ~~{color: #000;}~~ - Riscado / i ~~{color: #000;}~~ - Itálico
b ~~{color: #000; }~~ - Negrito / u ~~span.sublinha {cursor: nw-resize; text-decoration: none; border-bottom: 1px dashed #000;}~~ - ~~Sublinhado~~

a:link - É o link que fica em todos os posts ou na sua descrição (TODOS OS LINKS). / a:hover - É o mesmo link, só que quando passa por cima muda de cor.

.wishlist - Marca linhas para por o texto um embaixo do outro (ex: nos créditos)

un - É o menu de navegação como por exemplo no theme é o Home, About, Ask, Tumblr, Link 1 e Link 2.
un:hover - É o menu de navegação quando se passa em cima deles.

.imgpost - Imagem dos posts

.title - Formatação do titulo dos posts

::selection
{color: #000 - Cor da fonte da seleção de texto
background: #eee;} - Background da seleção do texto

Pronto o resto é só sobre o menu falso-iframe que você escreve lá e tals.

Agora vamos para as formatações e códigos mais simples

Códigos das posições do texto:

Esquerda - text-align: left;
Centro - text-align: center; (ou coloque <center>TEXTO</center>)
Direita - text-align: right;
Justificado - text-align: justify;

Algumas coisas que há no theme:

Font-size - Tamanho da fonte
Font-family - Nome da fonte
Color - Cor da fonte
Line-height - Distância entre as frases, as “linhas”
Letter-spacing - Distância entre as letras
Border - Borda
Padding - Espaço entre o escrito e a borda
Color - Cor da fonte

Como eu faço o negrito, italico, riscado e sublinhado?

<b> Seu texto </b> - negrito
<i> Seu texto </i> - italico
<u> Seu texto </u> - sublinhado
<s> Seu texto </s> - ~~riscado~~

__________________________________________________

Como colocar tags tumblr.

1) O que são tags?

Tags são aqueles códigos de busca, que você escolhe as tags que tem a ver com seu post, e todas as vezes que as pessoas procurarem sobre aquele assunto, ou aquela palavra, abre seus posts com aquelas tags. Tipo os meus tutoriais : girlaimlessly.tumblr.com/tagged/tutoriais.

2) Como colocar?

Primeiro de tudo, abra o new text no tumblr. Em seguida, faça seu post normalmente, e antes de salvar, digite as palavras chaves, ou seja, tags, na caixinha destacada abaixo.

Você pode colocar quantas tags quiser, e sempre que quiser um mesmo link para os posts que tem a ver um com o outro, coloque a mesma tag em todos os posts.

3) Como colocar o link?

Vá no html do seu theme, e cole esse link onde você que ele apareça:

Feito isso, todas as vezes que a pessoa clicar nesse link, aparecerão todos os posts essa tag.

Não tire o tagged do meio do link, ele indica que é uma tag.

__________________________________________________

Como bota contador de visitas total e online?

entre aqui escolha o modelo do seu contador e gere o codigo HTML

Depois abra uma nova aba entre no tumblr» Customize

Temos 3 opçoes agora:

- Se voce quer colocar o contador na sidebar(lateral) cole na sua info.

- Se voce quer colocar o código no topo da página cole o código abaixo de<body>

- Se voce quer colocar ele no final da página cole o código ANTES de </body>

Aperte Update Preview para ver se deu certo, e sair.

__________________________________________________

Tutorial: Menu Lavalamp (Reponha as aspas)

Cole este código logo após <head>:

$(function() { $(“.lavaLamp”).lavaLamp({ fx: “backout”, speed: 700 })});

</script>

//<![CDATA[

jQuery(document).ready(function($){

$(‘#top-s’).val(”).focus(function(){ $(this).val(”); }).blur(function(){ if($(this).val() == ”) $(this).val(”); });

$(‘#searchform’).parent().addClass(‘search-fix’);

$(‘.current_page_item’).addClass(‘current’);

$(‘.lavaLampWithImage’).lavaLamp({

fx: “backout”,

speed: 900

});

$(‘.tagpost’).each(function(){

tagPosW = $(this).width();

if(tagPosW > 532) $(this).addClass(‘longtag’);

});

$(‘.widthfix + .meta .tagpost’).each(function(){

tagPosW = $(this).width();

tagPosH = $(this).height();

if((tagPosW > 420) || (tagPosH > 37)) $(this).removeClass(‘longtag’).addClass(‘tagfix’);

});

$(‘#tab-content’).tabs({ fxSlide: true });

$(‘.widget’).wrapInner(‘<div class=”inner”></div>’);

//toggle on sidebar

$(‘.toggle’).each(function() {

$(this).addClass(‘pointer’);

var widgetHeader = $(this).parent();

$(this).toggle(

function() {

$(this).addClass(‘toggle-down’);

widgetHeader.addClass(‘compact’);

function() {

$(this).removeClass(‘toggle-down’);

widgetHeader.removeClass(‘compact’);

}

);

});

//]]>

</script>

E este código no seu CSS:

/* Menu Lavalamp códigos por by WWW.COISINHASMIL.COM adaptado por FRANKEYNESM.TUMBLR.COM */

.lavaLamp {position: relative; height: 29px; width: 300px; background: #fff;padding: 15px; margin: 10px 0;overflow: hidden;}

.lavaLamp li {float: left;list-style: none;}

.lavaLamp li.back {background: #EEE;width: 9px; height: 30px;z-index: 8;position: absolute;}

.lavaLamp li.back .left {background:#EEE;height: 30px;margin-right: 9px;}

.lavaLamp li a {position: relative; overflow: hidden;text-decoration: none;text-transform: uppercase;outline: none;text-align: center;height: 30px; top: 7px;z-index: 10; letter-spacing: 0;float: left; display: block;margin: auto 10px; font-family: Verdana; font-size: 11px; color: #888 ;text-align: center;overflow: hidden; }

.lavaLamp li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {color: #F49DB8;border: none;}

Você pode mudar apenas o que está em negrito, mas atenção, no lugar de #EEE você deve colocar nos DOIS a mesma cor.

Agora, você vai mudar a parte de onde ele é mostrado (Ex: sidebar.)

_________NO MENU DE LINKS:

</ul>

_________MENU FALSO IFRAME:

<li>CÓDIGO DO MENU FALSO IFRAME</li>

<li>CÓDIGO DO MENU FALSO IFRAME</li>

<li>CÓDIGO DO MENU FALSO IFRAME</li>

</ul>

________MENU POP-UP:

<li>CÓDIGO DO MENU POP UP</li>

</ul>

No lugar de “CÓDIGO DO MENU POP-UP” você coloca como um exemplo:

<a href=”#?w=600“rel=”pp2” class=”poplight“><un>Tumblr</un></a>

(mudando as coisas em negrito pelas determinadas no seu theme)

E PRONTO!

__________________________________________________

Tutorial: Como colocar balão de ask. (REPONHA AS ASPAS)

Primeiro você vai ir no seu CSS e colar este código:

/*** ask by biibis ***/ .bubble {align:right;background: #8F8F8F; margin:1px 0px 3px 63px;padding:10px;position: relative;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;} .bubble p {margin:1px 0px;} .bubble span {display:block;position:absolute;width:1px;height:1px;font-size: 0;line-height: 1px;left:-10px;top:10px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:10px solid #8F8F8F;}

Depois você pega este código abaixo e cola ANTES de {asker}:

Agora é fácil, você procura por {Question} e coloca uma </div> DEPOIS.

E mude as cores em negrito (É MELHOR QUE SEJA A MESMA COR UMA DA OUTRA)

__________________________________________________

Como colocar uma imagem

coloque <img src=“linkdafoto“ > onde quer que fique a foto

__________________________________________________

Como criar uma página

Vá em customize depois em pages e clique em add page.

onde diz page URL coloque o nome da pagina para ficar assim:

http://nomedoseutumblr.tumblr.com/nomedapagina

onde diz page title coloque o titulo

e por último onde diz body coloque o conteúdo.

__________________________________________________

Como colocar cor na barrinha de tags /Como a do help HTML

Primeiro passo:

Crie uma class assim:

.tagged {text-align: right; font-size:11px; font-family:FONTE; color:#CORDALETRA;background:#CORDOBG; width:530px; margin-left:-5px; height:15px;margin-bottom:-8px;}

Segundo passo:

Ache o código das tags (provavelmente se vc proucurar por ‘tags’ ou ‘tagged’ no html do seu theme você vai achar) e coloque isso bem no inicio:

<div class=”tagged”> (refaça as aspas)

e no final do código da tag ponha: </div>

__________________________________________________

Como fazer janela de energia.

Para quem não sabe o que é “janela de energia” é quando alguém que ta mexendo no seu tumblr fica alguns minutos sem mexer, e ele desativa e fica a tela toda preta escrito uma mensagem, para fazer isso cole esse código:

Depois de <head>

Se usar por favor credite o tutoriais-you.

__________________________________________________

Como colocar fonte personalizada

1° entre nesse site.

2° Escolha uma fonte, e clique aonde a imagem mostra:

3° Você será redirecionado para outra página. Desce um pouco, até chegar onde está o número 3.

4° Agora cole o código que está lá no seu html (entre e ).

5° Agora coloque o seguinte codigo no seu css, e troque o #CORDAFONTE pelo codigo da cor que você quiser que tem nesse site.

.fontht{ color:#CORDAFONTE; font-size:30px; line-height:TAMANHODAFONTEpx;margin:0px; padding:0px; margin-bottom:-0px; text-align:left; letter-spacing: 1px; }

6° Agora, após o último ponto e vírgula do código que você colocou no seu css, você vai colocar o código que apareceu no passo 4 do google web fonts. Olhe onde é que você tem que pegar o código:

No final ficará assim:

.fontht{ color:#CORDAFONTE; font-size:30px; line-height:TAMANHODAFONTEpx;margin:0px; padding:0px; margin-bottom:-0px; text-align:left; letter-spacing: 1px; CODIGO QUE TEM NO PASSO 4 DO GOOGLE WEB FONTS}

Agora aonde você for usar essa fonte deverá colocar assim:

<div class=”fontht”>O QUE VOCÊ QUER ESCREVER </div>

como colocar essa fonte nos títulos dos posts?

1° Posts de texto:

Procure por {block:Title}<a href=”{Permalink}” no seu html. Achou ? Então depois disso coloque class=”fontht” logo após disso. E pronto, os títulos dos seus posts já estarão com a letra personalizada.

2° Posts de links:

Procure por {block:Link} <a href=”{URL}”>{Name}</a> no seu html e troque isso por {block:Link}<div class=”fontht”><a href=”{URL}”>{Name}</a></div>

3° Posts de quote:

Procure por {block:Quote}<h3><big>”</big> {Quote} “</h3> no seu html e troque por {block:Quote}<div class=”fontht”><big>”</big> {Quote} “</div>

4° Posts de chat: Procure por {block:Chat}{block:Title}<a href=”{Permalink}”>{Title}</a>{/block:Title} no seu html e troque por {block:Chat}<div id=”fontht”>{block:Title}<a href=”{Permalink}”>{Title}</a>{/block:Title}</div>

OBS: Recoloque todas as aspas desse tutorial, porque senão não vai funcionar.

__________________________________________________

Colocando música no tumblr pelo Youtube:

Primeiro vá no Youtube, escolha a música que quiser e copie a URL do vídeo. Agora vá nesse site e arrume de acordo com sua preferência.

URL To Video: Coloque o link que você copiou do vídeo.

Progress Bar: Mostrar barra de progresso.

Autoplay: Tocar automaticamente.

Loop: Repetir a música.

Invisible: Player invisível.

Agora clique em Make!, copie o código e cole onde quer que o player apareça. Você pode ajustar o tamanho em width e height

__________________________________________________

Criando uma faq.

Faq simples:

<b>-</b> Sua pergunta?

<b>R:</b> Resposta. <br>

<b>-</b> Sua pergunta?

<b>R:</b> Resposta.

Faq de HTML:

<a href=”LINKDOTUTORIAL”> Nome do tutorial. </a> <br>

Obs: Copie e cole quantas vezes for necessário.

__________________________________________________

Parceria ou moderação passando.

Se quiser com imagem passando cole esse código onde quer que apareça:

Se quiser o nome do tumblr passando cole esse código ode quer que apareça:

__________________________________________________

Trocando a favicon

Vá no HTML do seu tumblr, aperte CTRL+F e digite <link rel=”shortcut icon” href=, depois desse código, irá aparecer um link. Retire esse link e troque por o link de sua favicon desejada!

Simples!!

O que é favicon? É o ícone que fica na barra de digitar os url’s.

__________________________________________________

Colocando botão de TOP

Pra quem usa paginação infinita, esse tutorial será bem útil. Esse botão de top! além de ser algo prático, facilita a navegação pela página. Então vamos lá.

01) Cole esse código, no ínicio do seu html, abaixo da tag <head>.

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script> <script type=”text/javascript” src=”http://LINK_GERADO_AQUI”></script>

02) Agora, pegue esse código aqui, e cole no bloco de notas. Feito isso, procure bem no início desse código o endereço de uma imagem. Para facilitar a localização, aperte CTRL+F e digite na caixinha ttop. Esse é o link do botão de top. Se quiser mudar por um outro, troque esse link, pelo link da imagem que você quer. Salve normalmente.

03) Agora abra um site de hospedagem. Recomendo o Upload Static File, no tumblr mesmo. E procure o código que você acabou de salvar. Em seguida será gerado um link, pegue esse link e leve até aquele primeiro código (vide item 01). E onde está escrito LINK_GERADO_AQUI, coloque o que você acabou de hospedar.

__________________________________________________

Alerta ao entrar no seu Tumblr

<!———inicio alerta———>
<script>
alert (” Escreva aqui sua mensagem “)
</script>
__________________________________________________

Como bloquear botão direito do mouse

É beeeeeem, simples!

Cole esse código depois de <head>…

__________________________________________________

Menu com Ícones

Bom gente, veio várias pessoas aqui me pedindo pra fazer tutorial de menu com ícones, então vou fazer! haha

1- Se seu menu for falso iframe faça assim :

2- Se o menu for pop up faça assim :

Espero ter ajudado. Qualquer dúvida, venha na ask.

__________________________________________________

Wishlist e recomendo

Wishlist

1º passo: copie o código abaixo e cole onde deseja sua wishlist.

O que quero
<*s>O que consegui<*/s>

2º passo: tire os asteriscos e escreva seus desejos e realizações.

_______________________________________________________

Recomendo

1º passo: copie esse código e cole onde você quer o recomendo.

<a href=”http://LINKDOTUMBLR.tumblr.com/”>Recomendo</a>

2º passo: substitua as aspas e as partes “linkdotumblr” e “recomendo” pela url e título do tumblr.

__________________________________________________

Como colocar cursores personalizados

1°- Entre nesse site ou em qualquer outro de cursores;

2°- Cole o código abaixo de <head> em seu theme.

__________________________________________________

Opacidade nas imagens

Opacidade

Coloque este código no CSS (entre <style> e </style>):

img{opacity: 0.6;}

Simples

Opacidade em mousehover:

Coloque este código no CSS:

img{opacity: 1;}
img:hover{opacity: 0.6;}

Sem opacidade no mouse hover:

img:hover{opacity: 0.6;}

img{opacity: 1;}

Com efeito fade

Opacidade no mousehover:

Coloque este código no CSS:

img{opacity: 1;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;}

img:hover{opacity: 0.6;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;}

Sem opacidade no mousehover:

img{opacity: 0.6;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;}

img:hover{opacity: 1;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;}

__________________________________________________

Favicons

Os favicons animados só pegam no Firefox.Os que não são animados pegam em qualquer navegador.Para usar os favicons você deve colar o código abaixo depois da tag <head>.

<link rel="shortcut icon" href="LINK DO FAVICON" />

__________________________________________________

Como colocar Cúfon Font

Para utilizar a Cúfon Font,você deve seguir todos os passos.

1-Escolhendo a Font

Entre nesse site Aqui.E escolha uma categoria e depois uma font(se você está procurando fonts em letra de mão procure na categoria “Script”). Depois de escolhida a font você fara o download dela clicando em “Cufon File Download“.Agora você será redirecionado a uma página cheia de símbolos e letras,não mecha nada apenas aperte “Ctrl F” e procure por Latin-1 Supplement,e depois marque-o(essa opção serve para a sua Cúfon Font ter acentos).Depois de seguir esse passo vá no final da página e clique em “Font Download as cufon”.Você deverá baixar um arquivo JavaScript.

2-Hospedando a Cúfon Font

Agora você devera vir nesse site Aqui,para hospedar a sua font.Para hospedar a imagem você deve clicar em “Selecionar arquivo…” e depois preencher o seu e-mail corretamente.NÃO marque “Make private”. em hipótese alguma.Depois que você clicar em “upload” a página inteira ficara branca.Agora você vai no seu e-mail e você terá recebido um link(o link da hospedagem da font).Copie esse link(O primeiro).

3-Código Html

Agora vá no código Html do seu Tumblr e cole o seguinte código antes da tag </head>.Mas antes mude a parte em que está escrito “COLE O URL DA HOSPEDAGEM AQUI”,pelo url que você recebeu pro e-mail.

<script src=”http://cufon.shoqolate.com/js/cufon-yui.js” type=”text/javascript”></script>
<script src=”COLE O URL DA HOSPEDAGEM AQUI” type=”text/javascript”></script>
<script type=”text/javascript”>
Cufon.replace(‘.cufon’);
</script>

Agora procure por </body> e cole o seguinte código antes da tag.

<script type=”text/javascript”> Cufon.now(); </script>

Agora procure por{Body} e cole isto antes dele <div class=”cufon”></div>

Procure por {block:Text},embaixo deverá ter {Title}.Antes de {Title} cole:

<div class=”cufon”></div>

Agora procure por {Description} e cole o código abaixo antes dele:

<div class=”cufon”></div>

A Cúfon Font não funciona em todos os Themes.Se você tem alguma dúvida deixe ela na minha Ask e eu responderei.

Como personalizar o dashboard do tumblr

Para quem não sabe o que seria mudar a dashboard vou colocar duas imagens aqui embaixo como exemplo. Clique nelas para aumentar

Somente os usuários do Firefox e do Google Chrome conseguem fazer essa modificação.

1º Passo) Instale o Stylist,

Firefox : https://addons.mozilla.org/en-US/firefox/addon/stylish/
Chrome: https://chrome.google.com/extensions/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe

2º Passo) Feche o seu navegador e abra novamente.3º Passo) Entre nesse site http://userstyles.org/styles/browse/tumblr.com e procure por algum tema que você goste, para achar as dashboards relacionadas a ele, ou então vai clicando em uma por uma até achar uma que lhe agrade.

4º Passo) Depois de achar a Dashboard que você quer, clique em Install with Stylist

5º Passo) Abra o tumblr e veja como ficou o resultado.

OBS: No caso do Chrome vai aparecer um S no canto superior direito do navegador, do lado das ferramentas.

Clique nesse S quando estiver na página do tumblr, ele lhe dará a opção de desinstalar a Dashboard (Disable).

Caso tenha instalado mais de uma dashboard é normal elas se misturarem, para resolver esse problema é só clicar no S e desistalar todas as dashboards menos a que você quer usar.

6º Passo) Comente aqui no blog se conseguiu instalar a Dashboard e o que achou do resultado. E se quiser deixe o link do seu tumblr.

NOTA: Para desinstalar no Firefox vá em Ferramentas >> Complementos >> Vai abrir uma nova janela >> aperte em extensões >> desinstale o Stylist.

__________________________________________________

Mais em breve!