Bom gente, já a mais de 3 mesês vocês vem querendo aprender a fazer themes, e então vou ensinar.
Dêem like, e NÃO REBLOGUEM.
ANTES DE MAIS NADA, TODA A VEZ QUE TIVER HOVER É QUANDO VOCÊ PASSA O MOUSE... VOCÊ
VAI ENTENDER...
No theme de HTML, existem as tags principais. Se elas não estiverem presentes o
computador não identifica. As tags são:
<html>
<head>
<title>
</title>
<style>
</style>
</head>
<body>
</body>
</html>
Todas as tags devem ser fechadas. Bom é indicado que todas as tags fiquem dentro da tag <html>.
Para que o computador entenda.
A tag <head> assim como ela mesmo diz, é a cabeça do theme. No <head> </head> É onde fica
todo o CSS e detalhes do theme, como por exemplo o famoso appearence.
Tudo que está entre <style> e </style> é o CSS do theme. Relembrando que a tag style está dentro
de head.
A tag <body> é o corpo da página. Mais além eu explico. Tudo o que você determinou no css, vai ser
aplicado aí para aparecer no seu theme. Pronto, agora vamos começar a fazer o theme. Paciência.
Para uma melhor resolução do theme em qualquer navegador, sugiro este código no começo do
theme, e logo em seguida, o código do favicon e do título.
O código a seguir é o começo do theme: (Lembrando que a tag title é aquela frase que fica na abinha
do navegador)
<html>
<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}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
Ok, depois de ter colado aquele código, vamos começar o <style>, coloque <style type=“text/css”>,
que é melhor.
O style no caso serve para a gente determinar, a cor da bg a letra e tal.
<style type="text/css">
body {background: #COR DA BG url('AQUI A URL SE FOR IMAGEM') color: #CORDASLETRAS QUE
ESTÃO SOLTAS NO THEME;
font-family: FONTE PADRÃO DO THEME COLOQUE GEORGIA; font-size: TAMANHO DA LETRApx;
text-align: center, right, left, justify;
As cores para irem em um theme, vc tem que ter ou o código ou saber inglês, no caso as básicas são
escritas tbm como por exemplo: red black blue e white. Mas é mais indicado que você veja as cores
em uma tabela de cores de html e as cores serão determinadas por #EONUMERODACOR então entre
aqui e escolha sua cor.
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. Coloque 13px.
Text-Align é o alinhamento do texto.
A Bg é o fundo do theme, ali o url('') quer dizer pra vc por o link de uma imagem se quiser ela na bg,
se vc nao quiser é só colocar a cor ali do lado, sempre preencha a cor, pois se chega a dar erro na
imagem fica a cor :D.
Agora cole isto:
#pagina {width: 810px;}
#conteudo {margin-left:430px; margin-top:5px; width: 540px; padding: 5px; text-shadow: 0 1px
1px AQUI A COR DA BORDA; }
#conteudo .post {margin-bottom:0px;}
.box {overflow:hidden; letter-spacing: 1px; text-align: justify; color: #fff; font: 11px tahoma; background-color: #828282; padding:6px;}
.post{margin-bottom:20px;}
.post .title {margin:0; padding:0; font-size:18px; line-height:22px; font-weight:normal;}
.info {border-bottom:1px solid #696969; margin:10px 0 0 0; padding:0 0 5px 0; font-size:11px; line-height:14px; color:#000000;}
.name{ text-align:right; line-height: 15px; font-family: tahoma;font-size: 11px;font-weight:bold; }
Isto serve para determinar os posts lá embaixo, depois você entenderá. Agora não se preocupe com isso, somente cole.
Agora vamos aos links, que você deve colocar o código logo em seguida:
a, a:link, a:active, a:visited {color: #COR DOS LINKS; text-decoration: none}
a:hover {color: #COR HOVER; text-decoration: none}
Depois dos links, é o riscado, sublinhado, negrito e o itálico, cole e modifique este código:
s {color: #COR;}
i {color: #COR;}
b, strong {color: #COR;}
u, span.sublinha {color: #000; text-decoration: none; border-bottom: 1px solid #AQUI A COR;}
E agora cole o seguinte código, que é o do blockquote:
blockquote{margin:2px 5px 2px 5px; padding: 1px 0 3px 6px; border-left: 2px solid #COR DO
BLOCKQUOTE}
Depois do blockquote nós vamos aprender a fazer o titulo do theme.
h1 {text-align: center; font: 20px FONTE USADA; color: #COR DA FONTE;}
Depois disso você tem que conhecer as famosas DIV’s: DIV ID E DIV CLASS.
Mas o que são elas?
As DIV ID normalmente são usadas para definir as posições no HTML.
As DIV CLASS estão dentro das Div Id e normalmente são nelas que estão os enfeites, fotos… e etc.
Bom vamos começar pela div id da sidebar. Os códigos são esses:
#sidebar {width: 300px; height: 100%; top: 120px; left: 80px; padding: 5px; text-align: center;
position: fixed;}
Width = Largura da sidebar em pixels.
Hight: Altura da sidebar. 100% significa que ela ocupa o topo até o fim da página.
Top: É a distância do topo até a sidebar em pixels.
Left: É a distância do lado esquerdo até a sidebar em pixels.
Padding: É o espaçamento entre o conteúdo da sidebar até a borda dela.
Text-align: É o alinhamento do texto.
Position: fixed é quando ele não desce com os posts. E absolute é quando desce.
Pronto. Agora que já temos o código da sidebar vamos a descrição.
Agora a descrição:
.descricao{background: transparent; padding: 5px; margin-bottom: 5px; width: 360px; left: 0px;
top: 270px; padding-top: 0px; z-index: 2;}
Copie este código e cole abaixo da div class das imagens:
.descricao{background: transparent; padding: 5px; margin-bottom: 5px; width: 360px; left: 0px;
top: 270px; padding-top: 0px; z-index: 2;}
Explicação:
Background: É a cor em #, mas eu particularmente prefiro a sidebar transparente, então usei
transparent;
Width: Largura da descrição.
Top: Distância do topo do theme até a descrição em pixels, aumente se quiser mais para baixo, e
diminua se quiser mais acima.
Não se preocupe com padding, margin-bottom, padding-top e z-index, na descrição eles não irão
interferir em nada.
Agora a imagem. Cole isto.
.imageana {padding: 0px; width: 360px; height: 240px;}
.imageana img { display: inline; text-align:center; height: 240px; width: 360px; }
Isso determina a sua imagem, vá alterando o valor de px e veja um que vc goste mais.
Agora vamos ao menu, existem muitos tutoriais por ai de menu, é a coisa mais facil. Faça o seu
primeiro menu de links. É o mais facil por enquanto.
Cole isso:
.menuana {background: transparent; padding: 5px; margin-bottom: 7px; position: fixed; width:
320px; left: 80px; top: DISTÂNCIA DO TOPO ATÉ O MENUpx; padding-top: 0px; z-index: 2; }
.nav1 {font-size: 13px; font-family:georgia; color: #000;float:left;padding: 4px;
letter-spacing:1px; text-align:center; height:20px;background-image:
Url('http://static.tumblr.com/4bage8q/7sklujr90/77words_patt7_041.gif');width:140px;-webkit-box-s
hadow:0 0 1em #eee;-moz-box-shadow: 0 0 2px #eee; -webkit-box-shadow: 0 0 2px #eee;
box-shadow: 0 0 5px #eee;margin:1px;}
.nav1:hover {color: #000;background:#fff;}
Agora vamos a paginação, copie este código e modifique:
#paginacaosm {width: 300px; height: 20px; margin-left: 80px; margin-top: 400px; position: fixed;}
/*** Paginação by madlyluv.com ***/
#paginacaoml {font-size: 10px; font-weight: bold; line-height: 21px; font-family: verdana;}
#paginacaoml a {background: #COR DA PAGINAÇÃO; margin: 0 1px 0 0; padding: 2px 4px; color:
#000000; text-decoration: none;}
#paginacaoml a:hover {background: #COR DA PAGINAÇÃO AO PASSAR O MOUSE;}
#paginacaoml span.pagina_atual {background: #COR DA PAGINAÇÃO; 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 código à acrescentar, acrescente abaixo
do código da paginação, depois, cole este código para fecharmos o style.
</style></head>
Agora que terminamos a parte dos códigos, vamos colocar para aparecê-los no theme! Vamos lá,
começando pela sidebar, claro.
Este é o código:
<body>
<div id="sidebar">
<div class="imageana"><img src="LINK DA IMAGEM"></div>
Lembre-se de fechar sempre as div's com </div> para que tudo funcione certo. Não fecharemos a div
id ainda, pois a nossa sidebar ainda não acabou.
Prosseguindo o código:
<div class="descricao">{Description}</div>
Caso você queria colocar barra de rolagem na descrição, coloque este código:
<div class="descricao">
<div style="overflow: auto; text-align: justify; height: 80px; padding: 5px 5px 5px 5px;
font-size:15px; line-height: 100%">
AQUI A SUA DESCRIÇÃO</div></div>
Obs: Como eu abri mais de uma div fecho 2 vezes (</div></div>).
E o código dos links:
<div class="menuana"><br>
<a href="LINK 1"><nav1>NOME DO LINK 1</nav1></a>
<a href="LINK 2"><nav1>NOME DO LINK 2</nav1></a>
<a href="LINK 3"><nav1>NOME NO LINK 3</nav1></a>
<a href="LINK 4"><nav1>NOME DO LINK 4</nav1></a>
<a href="LINK 5"><nav1>NOME DO LINK 5</nav1></a>
<a href="LINK 6"><un>NOME DO LINK 6</un></a>
</div>
<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: <a href="http://tomygaze.tumblr.com/"><b>Ana Alvarez - To my
gaze</b></a>
</div>
<div id="paginacaosm"><div id="paginacaoml"><div id="paginacaoml">
{block:Pagination}{block:PreviousPage}<a
href="{PreviousPage}">«</a>{/block:PreviousPage}{/block:Pagination}{block:JumpPaginatio
n length="8"}{block:CurrentPage}<span
class="pagina_atual">{PageNumber}</span>{/block:CurrentPage}{block:JumpPage}<a
class="jump_page"
href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}{block:Pagination}{bl
ock:NextPage}<a href="{NextPage}">»</a>{/block:NextPage}{/block:Pagination}</div>
</div></div>
</div>
Bom agora que acabamos a sidebar cole isto abaixo e o theme está pronto.
<div id="conteudo">
<!-- liuc -->
<div id="liuc">
<!-- TAGS PRINCIPAIS DO POST- NÃO APAGUE NADA AQUI -->
<!---------- POSTS --------------------------->
<div style="position:absolute; width:563px; left: 100px; top:320px; padding-top:0px;">
{block:Posts}
{block:Regular}<div class="post"><div class="box">
{block:Title}<h1>{Title}</h1>{/block:Title}
<div class="entry">{Body}</div>
<div class="divdate"></div>
<!---------------- DATA DOS POSTS ------------->
<div class="date"><a class="notes" href="{Permalink}"><center>Texto</a> postado em
<strong>{DayOfMonth}</strong>/<strong>{MonthNumberWithZero}</strong>/<strong>{Year}</s
trong> às {12Hour}:{Minutes}{AmPm} | <a class="notes">{NoteCountWithLabel}</a> | <a
href="http://tmv.proto.jp/reblog.php?post_url={Permalink};">reblog this shit!</a></center></div>
</div></div>
{/block:Regular}
<!---------- PHOTOS --------------------------->
{block:Photo}
<div class="post"><div class="box">
<center>{LinkOpenTag}<img src="{PhotoURL-500}" class="borderimage" alt="{PhotoAlt}"
width=550px/>{LinkCloseTag}</center>
{block:Caption}
<br>
<div class="caption">{Caption}</div>
{/block:Caption}
<div style="clear:both;"></div>
<BR>
<div class="divdate"></div>
<!---------------- DATA DOS POSTS ------------->
<div class="date"><a class="notes" href="{Permalink}"><center>Photo</a> postado em
<strong>{DayOfMonth}</strong>/<strong>{MonthNumberWithZero}</strong>/<strong>{Year}</s
trong> às {12Hour}:{Minutes}{AmPm} | <a class="notes">{NoteCountWithLabel}</a> | <a
href="http://tmv.proto.jp/reblog.php?post_url={Permalink};">reblog this shit!</a></center></div>
</div></div>
{/block:Photo}
<div style="clear:both;"></div>
<!---------- ASK --------------------------->
{block:Answer}
<div class="post"><DIV CLASS="BOX">
<img src="{AskerPortraitURL-40}"align="left" class="borda"/>
<div class="ask"><b>{Asker}</b>:
<br>{Question}<br></div>
{Answer}
<div style="clear:both;"></div>
<BR>
<div class="divdate"></div>
<!---------------- DATA DOS POSTS ------------->
<div class="date"><a class="notes" href="{Permalink}"><center>Mensagem</a> postada em
<strong>{DayOfMonth}</strong>/<strong>{MonthNumberWithZero}</strong>/<strong>{Year}</s
trong> às {12Hour}:{Minutes}{AmPm} | <a class="notes">{NoteCountWithLabel}</a>
</center></div>
</div></div>
{block:Answer}
<div style="clear:both;"></div>
<!---------- QUOTES --------------------------->
{block:Quote}
<div class="post"><div class="box">
<h1>{Quote}</h1>
</span>
{block:Source}<div class="source">— {Source}</div>{/block:Source}
<BR>
<div class="divdate"></div>
<!---------------- DATA DOS POSTS ------------->
<div class="date"><a class="notes" href="{Permalink}"><center>Quote</a> postado em
<strong>{DayOfMonth}</strong>/<strong>{MonthNumberWithZero}</strong>/<strong>{Year}</s
trong> às {12Hour}:{Minutes}{AmPm} | <a class="notes">{NoteCountWithLabel}</a> | <a
class="reblogue" href="http://tmv.proto.jp/reblog.php?post_url={Permalink};">reblog this
shit!</a></center></div>
</div></div>
{/block:Quote}
<div style="clear:both;"></div>
<!---------- LINKS --------------------------->
{block:Link}
<div class="post"><div class="box"><a href="{URL}" class="link"
{Target}><h1>{Name}</h1></a>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
<BR>
<div class="divdate"></div>
<!---------------- DATA DOS POSTS ------------->
<div class="date"><a class="notes" href="{Permalink}"><center>Link</a> postado em
<strong>{DayOfMonth}</strong>/<strong>{MonthNumberWithZero}</strong>/<strong>{Year}</s
trong> às {12Hour}:{Minutes}{AmPm} | <a class="notes">{NoteCountWithLabel}</a> | <a
class="reblogue" href="http://tmv.proto.jp/reblog.php?post_url={Permalink};">reblog this
shit!</a></center></div>
</div></div>
{/block:Link}
<div style="clear:both;"></div>
<!---------- CHAT --------------------------->
{block:Chat}
<div class="post"><div class="box">
{block:Title}<div class="h1"><a href="{Permalink}">{Title}</a></div>
{/block:Title}
<div class="chat">
{block:Lines}
<div class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</div>
{/block:Lines}
</div>
<BR>
<div class="divdate"></div>
<!---------------- DATA DOS POSTS ------------->
<div class="date"><a class="notes" href="{Permalink}"><center>Chat</a> postado em
<strong>{DayOfMonth}</strong>/<strong>{MonthNumberWithZero}</strong>/<strong>{Year}</s
trong> às {12Hour}:{Minutes}{AmPm} | <a class="notes">{NoteCountWithLabel}</a> | <a
class="reblogue" href="http://tmv.proto.jp/reblog.php?post_url={Permalink};">reblog this
shit!</a></center></div>
</div></div>
{/block:Chat}
<div style="clear:both;"></div>
<!---------- AUDIO --------------------------->
{block:Audio}
<div class="post"><div class="box">
{AudioPlayerWhite}
{block:Caption}
<div class="caption">{Caption}</div>
<div style="float:right; margin-top: -50px;"><h>Música ouvida {PlayCount} vezes</h>
{block:ExternalAudio}(<a
href="{ExternalAudioURL}">download!</a>){/block:ExternalAudio}</div>
{/block:Caption}
<div class="divdate"></div>
<!---------------- DATA DOS POSTS ------------->
<div class="date"><a class="notes" href="{Permalink}"><center>Música</a> postado em
<strong>{DayOfMonth}</strong>/<strong>{MonthNumberWithZero}</strong>/<strong>{Year}</s
trong> às {12Hour}:{Minutes}{AmPm} | <a class="notes">{NoteCountWithLabel}</a> | <a
class="reblogue" href="http://tmv.proto.jp/reblog.php?post_url={Permalink};">reblog this
shit!</a></center></div>
</div></div>
{/block:Audio}
<div style="clear:both;"></div>
<!---------- VIDEOS --------------------------->
{block:Video}
<div class="post">
<div class="box">
{Video-500}
<br>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
<BR>
<div class="divdate"></div>
<!---------------- DATA DOS POSTS ------------->
<div class="date"><a class="notes" href="{Permalink}"><center>Vídeo</a> postado em
<strong>{DayOfMonth}</strong>/<strong>{MonthNumberWithZero}</strong>/<strong>{Year}</s
trong> às {12Hour}:{Minutes}{AmPm} | <a class="notes">{NoteCountWithLabel}</a> | <a
class="reblogue" href="http://tmv.proto.jp/reblog.php?post_url={Permalink};">reblog this
shit!</a></center></div>
</div></div>
{/block:Video}
<div style="clear:both;"></div>
<!---------------- NOTAS DOS POSTS ------------->
{block:PostNotes}<div class="box">
<div class="notes-bottom">
{PostNotes}
</div>
{/block:PostNotes}
<!---------------- FIM DAS NOTAS DOS POSTS ------------->
{/block:Posts}
<center><div id="paginacaoml"><span class="info" style="font-weight: normal;">Página
<b>{CurrentPage}</b> de <b>{TotalPages}</b></span>
{block:Pagination}{block:PreviousPage}<a
href="{PreviousPage}">«</a>{/block:PreviousPage}{/block:Pagination}{block:JumpPaginatio
n length="5"}{block:CurrentPage}<span
class="pagina_atual">{PageNumber}</span>{/block:CurrentPage}{block:JumpPage}<a
class="jump_page"
href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}{block:Pagination}{bl
ock:NextPage}<a href="{NextPage}">»</a>{/block:NextPage}{/block:Pagination}</div>
</center>
<br>
</div>
</div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div></div></div></div></div>
</body>
</html>
