* TUTORIAL : COMO FAZER THEMES *

Tamanho: px

Começar a partir da página:

Download "********* TUTORIAL : COMO FAZER THEMES *********"

Manoela Leão Canário
8 Há anos
Visualizações:

1 ********* TUTORIAL : COMO FAZER THEMES ********* Por : Thamiris Figueiredo (carpe-dieem). Não copie, por favor. Se for usar, credite e não saia repassando o código, dizendo que ele é seu, PORQUE NÃO É. Faça SEU PRÓPRIO tutorial. Copiar é muito feio. 1.Abra o bloco de notas ou até mesmo o customize do seu tumblr. 2.Abriu? Agora, coloque as seguintes tags na EXATA ORDEM a seguir : <html> <head> <title>{title}</title> </head> <style type="text/css"> /***********Conteúdo de personalização****************/ </style> <body onkeydown="return false"> /***********Conteúdo dos posts, sidebar, i-frame, paginação****************/ </body> </html> Agora vamos ao que cada item significa: <title>{title}</title> : É aquele nome que aparece na barrinha lá em cima do navegador. O title no caso vai ser o título que você colocou naquele espaço "title" do seu customize. <head> e </head> : Onde fica o conteúdo de scripts, o código da janela de energia, código contra cópias, etc. <style type="text/css"> e </style> : Aonde fica o conteúdo de personalização de suas "divs". <body onkeydown="return false"> : bloqueia o teclado <body onkeydown="return false"> e </body> : Todo o conteúdo que será visível em seu blog. 3. Agora vamos à folha de estilos, ela é responsável pela aparência do seu blog e seu conteúdo deverá ficar entre as tags : <style type="text/css"> e </style> - Pegue o código que está neste link : E coloque ele entre as tags acima.

Abra o bloco de notas ou até mesmo o customize do seu tumblr. 2.Abriu?

2 - Você pode edita-lo da forma que achar melhor, adicionar o que achar melhor também. Porém, vou dar-lhes algumas dicas de fontes, tabelas de cores, estilos, etc; FONTE : Tahoma, Geórgia, Arial, Verdana. COR DE FONTES DO TEXTO : #666; CORES EM GERAL : ESTILOS DE BORDAS : Dashed ( traçado), dotted (pontilhado), solid (sólida). MARGIN-BOTTOM DA SIDE E DA CAIXA : 15px a 20px. 4. Agora, vamos ao conteúdo da side, ele deverá ficar entre as tags : <div id= sid > <div id= side > *********CONTEÚDO******** - É só algum conteúdo a esta div e pronto, se você quiser deixar um texto, separado de uma foto, basta você criar duas caixas, por exemplo : <div id= sid > <div id= side > *********CONTEÚDO1******** <div id= side > *********CONTEÚDO2 ******** 5. Agora, vamos as tags de posts Pegue o código aqui neste link : Este código deverá ficar entre as tags <body> e </body> Explicando os código : Todas as tags são em par, ou seja, tem uma que abre e outra que fecha. {block:posts} : Abre o conteúdo dos seus posts. {/block:posts} : fecha os conteúdos dos seus posts.  {block:text} {block:title} <center><div class="title"><a href="{permalink}">{title}</a></center> {/block:title} <div>{body}<br> {/block:text}<!--fim dos textos--!>

com/palettes ESTILOS DE BORDAS : Dashed ( traçado), dotted (pontilhado), solid (sólida). MARGIN-BOTTOM DA SIDE E DA CAIXA : 15px a 20px. 4.

3 <!--PHOTOS E PHOTOSETS--!> {block:photo} <center>{linkopentag}<a href="{permalink}"><img src="{photourl- 500}"class="bd"width="600"title="{PhotoAlt}"/></a>{LinkCloseTag}</center> {/block:photo} {block:photoset} <center>{photoset-500}</center> {/block:photoset} <! FIM DE PHOTOS E PHOTOSETS --!> <! QUOTE--!> {block:quote} <center><div class="title"> <b>"</b>{quote}<b>"</b></center> {block:source}<div align="right"> <div class="source"><b>-</b> {Source}{/block:Source} {/block:quote} <! FIM DE QUOTE--!> <! LINKS --!> {block:link} <center><a href="{url}" class="link"{target}><div class="title">{name}</a></center> {block:description}<div align="left">{description}{/block:description} {block:postnotes}<br>{postnotes}{/block:postnotes} {/block:link} <! FIM DE LINKS--!> <! CHATS --!> {block:chat} {block:title}<a href="{permalink}">{title}</a>{/block:title} <div id="chat"> <ul>{block:lines}<li> {block:label}<b>{label}</b>{block:label} {Line} </li>{/block:lines}</ul> {/block:chat} <! FIM DE CHATS--!>

<center>{photoset-500}</center> {/block:photoset} <! FIM DE PHOTOS E PHOTOSETS --!> <! QUOTE--!

4 <! VIDEOS --!> {block:video} <center> {Video-500} </center> {/block:video} <! FIM DE VIDEOS--!> <! PERGUNTAS E RESPOSTAS --!> {block:answer} <a href="{askerurl}"><img src="{askerportraiturl-48}"class="bdimg" width="48" height="48" align="left";></a> <div class="asker"><span></span> perguntou:<br><br>{question} <div class="ask2">{answer}<br> {/block:answer} <! FIM DE PERGUNTAS E RESPOSTAS --!> <! AUDIO --!> {block:audio} <div style="float:right; margin-top: 6px;"><i>Música ouvida {PlayCount} vezes</i> {block:externalaudio}(<a href="{externalaudiourl}">download!</a>){/block:externalaudio} <center>{audioplayerwhite}</center> {/block:audio} <! FIM DE AUDIO--!> {block:postnotes}<br>{postnotes}{/block:postnotes} : Faz aparecer no seu tumblr quem que deu like ou reblogou. <div class="tagsb2">{block:date} Posted on {MonthNumberWithZero}/ {DayOfMonth}/{Year} at {12Hour} {AmPm} {/Block:Date}<b>/</b> <a class="notes">{notecount}<a href="{permalink}"> notes!</a><b>/</b> <a href=" this!) / <a href="{reblogparenturl}">via</a> {/block:rebloggedfrom}</a> {block:contentsource} (<a href="{sourceurl}" target=blank><b>source</b></a>){/block:contentsource} São as informações dos posts, como data, hora, quantos notes tem, etc... <div class="tagsb">{block:hastags} Tagged :{block:tags} # <a href="{tagurl}">{tag}</a>{/block:tags}{/block:hastags}

class="ask2">{answer}<br> {/block:answer} <! FIM DE PERGUNTAS E RESPOSTAS --!> <! AUDIO --!

5 {/block:posts} São as tags que você deu aos posts.

Documentos relacionados

Ele vai localizar este código, substitua então o The Beat Was Goin' Strong pelo nome do seu tumblr.

Ele vai localizar este código, substitua então o The Beat Was Goin' Strong pelo nome do seu tumblr. Então gente, há alguns dias, disponibilizei meu theme antigo, o primeiro feito por mim, e eu não coloquei appearance nele, e quem não tem conhecimento de html fica meio tenso de editar. Então, ao invés