Vous êtes sur la page 1sur 8

Feito por Mikaela Mascarenhas (http://consolar.tumblr.com/).

Bem, eu desativei meu tumblr, j decidi, ento eu gostaria de ensinar isso para vocs, muita gente tem curiosidade de aprender, sempre me pedem, enfim, vou ensinar como fazer. Aprender a fazer themes a regra dos C. Chato, Cansativo e Complicado. Mas voc aprende, s precisa de prtica. Eu aprendi todo este tutorial sozinha, sem ajuda de ningum, ento voc tambm aprende n? Bem, vamos comear. No theme de HTML, existem as tags principais. Sem ela, nada tem sentido no theme. So elas: <html> <head> <style> </style> </head> <body> </body> </html> Todas as tags devem ter um final. Por exemplo, <html> termina em </html>, assim como as outras. essencial para o funcionamento delas. Entre <html> e </html> fica TODOS os cdigos, pois sinaliza que ali o HTML do theme comea, e ali no final termina. Todo theme deve comear com <html> e terminar com </html>. A tag <head> assim como ela mesmo diz, a cabea do theme. A o lugar onde fica os cdigos do appearance, do ttulo, do favicon e de diversos scripts, e o style. Tudo que est entre <style> e </style> o CSS do theme. a que define a aparncia, os links, as cores, as posies, os enfeites Basicamente tudo! A tag <body> onde aplicado tudo o que voc escolheu no CSS. Mas como assim? Em breve voc vai entender. Tudo o que voc posicionou no css, toda a aparncia que voc escolheu no css vai ser aplicada a para aparecer no seu theme. o corpo da sua pgina.

Pronto, agora vamos comear a fazer o theme. Pacincia. Para uma melhor resoluo do theme em qualquer navegador, sugiro este cdigo no comeo do theme, e logo em seguida, o cdigo do favicon e do ttulo. Abra o seu customize, de preferncia o classic (http://www.tumblr.com/customizeclassic/), e comece colando este cdigo: (http://static.tumblr.com/pjp1ppe/u49lyqrvm/themes_sem_base_consolar_1.txt). Na boa, no tira meus crditos da. Esses cdigos seguir so respectivamente a cabea do theme, o cdigo do ttulo a parecer na aba do navegador, o favicon (imagem que aparece do lado do ttulo na aba do navegador), o RSS e o cdigo da description a ser mudada no Info. Jamais pense em mudar nada.

<head> <title>{Title}</title> <link rel="shortcut icon" href="{Favicon}"> <link rel="alternate" type="application/rss+xml" href="{RSS}"> {block:Description} <meta name="description" content="{MetaDescription}" /> {/block:Description} Lembrando que, logo abaixo desse cdigo a deve ficar as opes do appearance, as chamadas default variables, que vou ensinar depois. Ok, depois de ter colado aquele cdigo, vamos comear o <style>, que o vamos substituir por <style type=text/css>, que melhor. Eu sempre comeo o style com as coisas bsicas do theme, como background, cores, fontes principio, vou ensinar sem as opes do appearance, depois eu ensino como colocar. <style type="text/css"> body {background-color: #COR DO BACKGROUND; color: #COR DAS LETRAS; font-family: FONTE DO THEME; font-size: TAMANHO DA LETRApx; text-align: ALINHAMENTO DO TEXTO; background-image:url('LINK DO BACKGROUND'); background-repeat: SE O BACKGROUND REPETE SIM OU NO; backgroundattachment: FIXO OU NO;} Vou explicar: Todas as cores do HTML devem ser por exemplo assim: #000000, que preto, #FFFFFF que branco Voc pode descobrir o cdigo da cor que voc quer (aqui). O background-color a cor de fundo do theme. O color a cor da fonte, a cor das letras. A font-family a fonte usada nas letras. Ex: Tahoma, Georgia, Verdana Font-size o tamanho da letra, em pixels. Costumo usar 10px. Text-Align o alinhamento do texto (center = centro, right = direita, left = esquerda, justify = justificado) Background-image caso voc queira um bg ou um pattern no fundo, voc coloca o link. Background repeat se o background repete ou no. Para repetir = background-repeat: repeat; para no repetir = background-repeat: norepeat; Background Attachment se o background fixo ou no. Para ficar fixo colocar fixed; para no ficar coloque absolute;

Mas como eu descubro o link do meu background? Eu tenho ele no meu computador, mas no sei o link dele Entra nesse site e hospeda. Agora vamos aos links, que voc deve colocar o cdigo logo em seguida: a, a:link, a:active, a:visited {color: #COR DOS LINKS; textdecoration: none} a:hover {color: #COR DOS LINKS AO PASSAR O MOUSE; text-decoration: none}

Toda vez que aparecer hover no seu theme, saiba que ao passar o mouse. Troque #COR DOS LINKS pela cor dos links (bvio), e a #COR DOS LINKS AO PASSAR O MOUSE pela cor dos links ao passar o mouse (bvio tambm). Depois dos links, o riscado, sublinhado, negrito e o itlico, cole e modifique este cdigo: s {color: #COR DO RISCADO;} i {color: #COR DO ITLICO;} b, strong {color: #COR DO NEGRITO;} u, span.sublinha {color: #000; text-decoration: none; border-bottom: 1px solid #COR DO SUBLINHADO;} Mas como assim cor do riscado? Ahn? o seguinte, quando voc riscar um texto <s>PALAVRA</s> voc pode deixar ela de outra cor, assim como os outros. Para escrever qualquer palavra riscada coloque:<s> PALAVRA </s>, em itlico <i> PALAVRA </i>, em negrito <b> PALAVRA </b> e sublinhado coloque <u> PALAVRA </u>. E agora cole o seguinte cdigo, que o do blockquote: blockquote{margin:2px 5px 2px 5px; padding: 1px 0 3px 6px; borderleft: 2px solid #COR DO BLOCKQUOTE} Depois do blockquote, vamos aos ttulos do theme! Cole este cdigo abaixo do blockquote: h1 {text-align: center; font: 20px FONTE USADA; color: #COR DA FONTE;} Agora vamos a barra de rolagem personalizada! Fala srio, ningum gosta daquela barra de rolagem feia e normal. Modifique ela, e cole o cdigo depois do h1. ::-webkit-scrollbar{width:5px;height:8px;} ::-webkit-scrollbar-button:start:decrement ::-webkit-scrollbarbutton:end:increment{display:block;height:0;backgroundcolor:transparent;} ::-webkit-scrollbar-track-piece{background-color: #FFFFFF;-webkitborder-radius:0;-webkit-border-bottom-right-radius:3px;-webkit-borderbottom-left-radius:3px;} ::-webkit-scrollbar-thumb:vertical{height:50px; background-color: #COR DA BARRA DE ROLAGEM;-webkit-border-radius:px;} ::-webkit-scrollbar-thumb:horizontal{width:50px; background-color: #COR DA BARRA DE ROLAGEM;-webkit-border-radius:px;} Agora que voc colou o cdigo da barra de rolagem personalizada, vamos a parte mais complicada e chata: As DIVs: DIV ID E DIV CLASS. Mas o que so elas? As DIV ID normalmente so usadas para definir as posies no HTML. As posies, medidas dos posts, da sidebar As DIV CLASS esto dentro das Div Id e normalmente so nelas que esto os enfeites, fotos e etc. Para voc fazer um theme, no sei voc, mas eu sempre desenho ele primeiro. O theme que vou ensinar para vocs simples, depois vocs melhoram e mudam ele. Exemplo: (http://static.tumblr.com/pjp1ppe/BSklyspnh/demonstracao.jpg). Voltando ao assunto das divs, vamos comear pela div id da sidebar. Os cdigos so esses:

#sidebarsm {width: 300px; height: 100%; top: 120px; padding: 5px; text-align: center; position: fixed;} Explicao:

left:

80px;

Width = Largura da sidebar em pixels. Hight: Altura da sidebar. 100% significa que ela ocupa o topo at o fim da pgina. Top: a distncia do topo at a sidebar em pixels. Left: a distncia do lado esquerdo at a sidebar em pixels. Padding: o espaamento entre o contedo da sidebar at a borda dela. Text-align: o alinhamento do texto. Position: Se fixo (fixed) ou se ao descer a pgina, ele no desce junto (absolute).

Como eu disse, a div id mais para posicionamento. Todas as propriedades e cdigos usados nela foram de posicionamento da sidebar no theme. Agora vamos as imagens, descrio, enfeites, e os links! Comecemos pela imagem, cole este cdigo abaixo do cdigo da sidebar: .imagesm {padding: 0px; width: 360px; height: 240px;} .imagesm img { width: 360px; } display: inline; text-align:center; height: 240px;

Como voc j sabe, width a largura da imagem, e height a altura da imagem em pixels. Modifique at achar que fica legal. Voc tambm pode colocar outros recursos nessa imagem como por exemplo: Tutorial: Imagem passando

(http://apenashtml.tumblr.com/post/14494623044/tutorial-como-fazer-as-imagens-passando) Tutorial: Imagem que muda ao passar o mouse sobre ela

(http://apenashtml.tumblr.com/post/16018512682/tutorial-imagem-que-muda-quando-passa-omouse-sobre) Eu fiz estes tutoriais no meu tumblr de HTML, voc pode us-los, mas como iniciante eu esperaria um pouco ok? Pronto. Agora que j temos o cdigo da sidebar, da imagem, vamos a descrio, certo? Copie este cdigo e cole abaixo da div class das imagens: .descricaosm{background: transparent; padding: 5px; margin-bottom: 5px; width: 360px; left: 0px; top: 270px; padding-top: 0px; z-index: 2;} Explicao: Background: a cor em #, mas eu particularmente prefiro a sidebar transparente, ento usei transparent; Width: Largura da descrio. Top: Distncia do topo do theme at a descrio em pixels, aumente se quiser mais para baixo, e diminua se quiser mais acima.

No se preocupe com padding, margin-bottom, padding-top e z-index, na descrio eles no iro interferir em nada.

Feita a descrio, vamos a parte que na minha opinio a que mais d dor de cabea: o menu. .menusm {background: transparent; padding: 5px; margin-bottom: 7px; position: fixed; width: 320px; left: 80px; top: DISTNCIA DO TOPO AT O MENUpx; padding-top: 0px; z-index: 2; } un {font-style: Tahoma; width: 32%; float: left; background: #COR DOS LINKS; color: #COR DA LETRA DOS LINKS; padding: 4px 0 4px 0; textalign: center; margin: 1px; line-height:15px; font-size: 12px; letter-spacing:1px; text-decoration: none; display: inline-block; } un:hover {font-style: Tahoma; float: left; background-color: #COR DOS LINKS AO PASSAR O MOUSE; color: #COR DAS LETRA DOS LINKS AO PASSAR O MOUSE; cusor: hand;} Modifique onde eu escrevi (background, color, top e etc). Agora vamos a paginao, copie este cdigo e modifique: #paginacaosm {width: 300px; height: 20px; margin-left: 80px; margintop: 400px; position: fixed;} /*** Paginao by madlyluv.com ***/ #paginacaoml {font-size: 10px; font-weight: bold; line-height: 21px; font-family: verdana;} #paginacaoml a {background: #COR DA PAGINAO; margin: 0 1px 0 0; padding: 2px 4px; color: #000000; text-decoration: none;} #paginacaoml a:hover {background: #COR DA PAGINAO AO PASSAR O MOUSE;} #paginacaoml span.pagina_atual {background: #COR DA PAGINAO; margin: 0 1px 0 0; padding: 2px 4px; color: #000000; text-decoration: none;} #paginacaoml span.info {background: #cor de fundo; margin: 0 1px 0 0; padding: 2px 4px; color: #cor da fonte; text-decoration: none;} Modifique onde pede. Na div id #paginacaosm o top eu estimei, mas voc pode mud-lo, quando maior mais para baixo, quando menor mais para cima. Pronto, terminamos basicamente o style. Se voc tiver algum cdigo acrescentar, acrescente abaixo do cdigo da paginao, depois, cole este cdigo para fecharmos o style. </style></head> Agora que terminamos a parte dos cdigos, vamos colocar para aparec-los no theme! Vamos l, comeando pela sidebar, claro. Este o cdigo: <body> <div id="sidebarsm"> <div class="imagesm"><img src="LINK DA IMAGEM"></div> Lembre-se que, toda div aberta deve ser fechada com um </div> para que tudo funcione direito. No fecharemos a div id ainda, pois a nossa sidebar ainda no acabou. Prosseguindo o cdigo: <div class="descricaosm">{Description}</div>

Caso voc queria colocar barra de rolagem na descrio, coloque este cdigo: <div class="descricaosm"> <div style="overflow: auto; text-align: justify; height: padding: 5px 5px 5px 5px; font-size:11px; line-height: 100%"> {Description}</div></div> 80px;

Obs: Como eu abri mais de uma div (perceba que tem duas divs, uma da descrio e outra da barra de rolagem na side) ento ela deve ser fechada duas vezes (</div></div>). E o cdigo dos links: <div class="menusm"><br> <a href="LINK <a href="LINK <a href="LINK <a href="LINK <a href="LINK <a href="LINK </div> 1"><un>NOME 2"><un>NOME 3"><un>NOME 4"><un>NOME 5"><un>NOME 6"><un>NOME DO DO NO DO DO DO LINK LINK LINK LINK LINK LINK 1</un></a> 2</un></a> 3</un></a> 4</un></a> 5</un></a> 6</un></a>

<div style="font-family: Tahoma; font-size: 10px; background:transparent; color: #000; width= 250px; margin-left: 100px;">Theme por <a href="LINK DO SEU TUMBLR"><b>SEU NOME</b></a>, base dos cdigos por <a href="http://consolar.tumblr.com/"><b>consolar</b></a> </div> <div id="paginacaosm"><div id="paginacaoml"><div id="paginacaoml"> {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">&laquo;</a>{/block:PreviousPage}{/block:Paginati on}{block:JumpPagination length="8"}{block:CurrentPage}<span class="pagina_atual">{PageNumber}</span>{/block:CurrentPage}{block:Jum pPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}{ block:Pagination}{block:NextPage} <a href="{NextPage}">&raquo;</a>{/block:NextPage}{/block:Pagination} </div> </div></div> </div> Como terminamos os links, os crditos (por favor no retire meu link) e tambm a sidebar, coloquei mais uma </div> no final, para terminar a sidebar. J temos a sidebar pronta, e agora vamos aos posts! Eu modifiquei t-o-d-o o cdigo, portante eles so m-e-u-s, e devem ter m-e-u-s crditos, vou falar isso e repetir, n mole no fazer um tutorial gigante e cansativo desses. Enfim, o cdigo este aqui: (http://static.tumblr.com/pjp1ppe/euilyssoh/themes_sem_base_consolar_2.txt) Copie, cola l depois do fim do cdigo da sidebar, e pronto, acabou o theme! Modifique o que est pedindo neste cdigo, como cores, largura e etc. Ok, agora falta a data e as tags dos posts apenas, que so essas (http://static.tumblr.com/pjp1ppe/ehJlyst39/themes_sem_base_consolar_3.txt), modificadas por mim (como sempre). Copie-as, e cole-as dentro daquele cdigo que eu passei anteriormente dos posts. Procure por {/block:posts} e cole exatamente acima dele.

Pronto! Seu theme est completssimo. Caso o boto de follow ou dashboard desaparecer, coloque umas 10 </div> antes de </body> pois pode ser que alguma div no foi fechada. Obs: Este theme foi feito sem appearance. Para colocar appearance, eu fiz este tutorial: Tutorial: Como colocar appearance no theme. (http://apenashtml.tumblr.com/post/16444848924/colocando-appearance-em-um-

theme)
H tambm outros tutoriais necessrios que voc pode usar no theme que eu fiz: Tutorial: Texto que muda ao passar o mouse sobre ele

http://apenashtml.tumblr.com/post/16027097281/texto-que-muda-para-outro-aopassar-o-mouse-sobre-ele
Tutorial: Como fazer o BG no repetir

http://apenashtml.tumblr.com/post/12768756698/tutorial-como-fazer-o-bg-naorepetir
Tutorial: Ttulo digitando na aba do navegador

http://apenashtml.tumblr.com/post/16656078269/como-faco-pras-letras-do-nomedo-meu-tumblr-ficar-tipo
Tutorial: Menu Falso I-Frame

http://apenashtml.tumblr.com/post/16016106056/menu-falso-i-frame
Tutorial: Fonte personalizada (cufon font)

http://apenashtml.tumblr.com/post/8139866141/como-colocar-fonte-personalizadano-seu-theme
Tutorial: Bloqueando Ctrl U (Anti Plgios)

http://apenashtml.tumblr.com/post/16032856293/bloqueando-ctrl-u
Tutorial: Como colocar banner acima dos posts

http://apenashtml.tumblr.com/post/14495415197/como-se-colocar-banner-acimados-posts
H diversos tutoriais tambm, ou melhor, qualquer dvida pode me perguntar, de preferncia no apenashtml pois eu gosto de fazer tutoriais l. Enfim, espero que tenham entendido, dvidas > ask, NO RETIRE MEUS CRDITOS, FALO E REPITO, EU GASTEI TRS DIAS DA MINHA VIDA FAZENDO ESSE TUTORIAL, ENSINANDO PARA VOCS O QUE EU APRENDI SOZINHA E SEM NENHUM TUTORIAL PARA ME ENSINAR, ENTO NO FAAM EU ME ARREPENDER.

No reblogue este post, se usar, apenas d like e me avise na ask se foi til. D like o suficiente que vocs podem fazer n? Agradecer minha boa vontade e pacincia tambm. Tornando a repetir NO, N--O, N//O, N**O, N~~O, N!!O retire meus crditos. Se colocar os seus crditos em outro lugar, coloque o link do meu tumblr l poxa. OS CDIGOS SO TODOS MEUS, e EU RECONHEO MEUS CDIGOS, e se eu ver algum usando sem creditar, eu vou no mnimo arrumar barraco e no mximo denunciar plgio pro support do tumblr. Obrigada. Espero que tenham gostado (e entendido) o tutorial. Beijos, Mikaela.