Você está em: Home >> Tutoriais >> HTML de um template

Esse tutorial ensinará a configurar o html de um layout (ou template) para o UOL Blog.

Programas necessários: Paint e Bloco de notas

1. Copie cole o código abaixo no Bloco de Notas (ou o editor de texto de sua preferência).

<html>
<head>
<meta http-equiv="Content-Language" content="pt-br">
<title><%VAR BLOG_TITLE%></title></head>
<STYLE type="text/css">
P, body, td, tr, div {
	font-style: normal;
	font-weight: normal;
	font-size: 10px;
	color: #000000;
	font-family:'Century Gothic';
	line-height: 12px;
}
A, A:link{color:#a275a9;text-decoration:none}
A:visited{color:#f4e9f6}
A:active{color:#000000;font-weight: bold;}
a:hover {color: #000000}
body {scrollbar-3dlight-color: #f4e9f6;
scrollbar-arrow-color: #ffffff;
scrollbar-base-color: #FFFFFF;
scrollbar-darkshadow-color: #f4e9f6;
scrollbar-face-color: #a276a9;
scrollbar-highlight-color: #f4e9f6;
scrollbar-shadow-color: #f4e9f6;
SCROLLBAR-TRACK-COLOR: #ffffff; }
</STYLE>
<script>
var zeroComm = "<%VAR BLOG_TEXT_NO_COMMENT%>";
var humComm = "<%VAR BLOG_TEXT_ONE_COMMENT%>";
var enesComm = "<%VAR BLOG_TEXT_MORE_COMMENTS%>";

var url;
function abre(url,w,h,scr) {
	window.open(url,'comentarios','width='+w+',height='+h+',directories=0,location=0,menubar=0,resizable=0,scrollbars='+scr+',status=0,toolbar=0,marginleft=0,margintop=0,left=25,top=25');
}

<div style="position: absolute; top:337; left: 244; width: 129; height: 316">

<center><img src="http://i301.photobucket.com/albums/nn80/thah_mynothing/Layouts%20Free/avatar1.png"></center>					<br>

<b> Nome: </b> SEU NOME <br>
<b> Idade: </b> SUA IDADE <br>
<b> Nasci dia: </b> NÍVER <br>
<b> Gosto de: </b> ESCREVA AQUI AS COISAS QUE VOCê GOSTA! <br>
<b> Detesto: </b> ESCREVA AQUI AS COISAS QUE VOCÊ NÃO GOSTA! <br>
<br>
								
<b> Histórico: </b> <br>
<%IF BLOG_ARCHIVE_LINK%>
-<a id=l href="<%VAR BLOG_ARCHIVE_LINK_URL%>">Ver mensagens anteriores</a><br><br>
<%ELSE%>
<%WHILE ARCHIVE_LINK%>
 -<a href="<%VAR ARCHIVE_LINK%>" id=l><%VAR ARCHIVE_DATE_BEGIN%> a <%VAR ARCHIVE_DATE_END%></a><br>	
<%ENDWHILE%>
<br>
<%ENDIF%>
							

<br><br>

<%IFNOT BLOG_LINK_QTTY=0%>
<tr>
<td style=padding-left:20px>
<b> Outros sites: </b> <br>
<%WHILE LINK_TITLE%>
- <a id=l href="<%VAR LINK_URL%>" target="_blank"><%VAR LINK_TITLE%></a><br>		<%ENDWHILE%>
<%ENDIF%>

<br><br>
					

<b> Visitas: </b> <br>
<%IFNOT BLOG_ARCHIVE_PAGE%><tr><td height=22 align=center bgcolor=#000000><img src=http://bloghosting.uol.com.br/contador.gif?tipo=17&tam=10&borda=0&cor=0,0,0></td></tr><%ENDIF%>

<br> <br>

<b> Tutorial de layout e HTML by.:  </b><BR>
<a href="http://mynothing.zip.net"> <img src="http://i301.photobucket.com/albums/nn80/thah_mynothing/Layouts%20Free/link_mnefy.png" border=0> </a> <br> <br>
</div>

<div style="position: absolute; top: 339; left: 391; width: 287; height: 316">

<%IF BLOG_ARCHIVE_PAGE%>
		          <%WHILE ARCHIVE_LINK%>
		        	<a href="<%VAR ARCHIVE_LINK%>"><%VAR ARCHIVE_DATE_BEGIN%> a <%VAR ARCHIVE_DATE_END%></a>
			     <%ENDWHILE%>
				 
	<br><br><a href="index.html">voltar</a>
					<%ELSE%>

	<%WHILE POST_TITLE%> 
<script>
dataPost = "<%VAR POST_DATE_HEADER%>";
		if (dataPost != "") {document.write("<tr><td height=15 id=head><a name=<%VAR POST_ID%>></a><%VAR POST_DATE_HEADER%></td></tr>");}	else {document.write("<tr><td id=head><a name=<%VAR POST_ID%>></a><%VAR POST_DATE_HEADER%></td></tr>");
}
					</script>
<BR>
<tr>
<td valign=top style=padding-left:15px;padding-right:15px>
<%IFNOT POST_TITLE=''%> <b><%VAR POST_TITLE%></b>
<br> 
<%ENDIF%>
									<%VAR POST_TEXT%><br clear=all><br>- <span id=f>Postado por quem? <b><%VAR POST_USER%></b> Quando? <%VAR POST_DATE%><br> 
									<%IF BLOG_ACCEPT_COMMENT%>[ <a id=b href="javascript:abre('http://navblog.uol.com.br/comment.html?postFileName=<%VAR POST_ID%>&idBlog=<%VAR BLOG_ID%>','356','478','1');"><span id="post<%VAR POST_ID%>"></span> </a> ]
					      	<%ELSE%>
					       		<%IF POST_HAS_COMMENT%>[ <a id=b href="javascript:abre('http://navblog.uol.com.br/comment.html?postFileName=<%VAR POST_ID%>&idBlog=<%VAR BLOG_ID%>','356','478','1');"><span id="post<%VAR POST_ID%>"></span> </a> ]<%ENDIF%>
					      	<%ENDIF%>
									<%IF BLOG_RECOMMEND_POST%>[ <a id=b href="javascript:abre('http://navblog.uol.com.br/recommend.html?idBlog=<%VAR BLOG_ID%>&postFileName=<%VAR POST_ID%>','340','400','1');">envie esta mensagem</a> ]<%ENDIF%><br clear=all><br>
					
<center>
------------------------
</center><BR>
		
<%ENDWHILE%>		

 <%ENDIF%>
</div>

<%IF BLOG_ACCEPT_COMMENT%><script src=<%VAR BLOG_SCRIPT_URI%>></script><%ENDIF%>

<%IF BLOG_OWNER_MOOD%><script src="mood.js"></script>

<%ENDIF%> 
</span>

</body>
</html>

<%DEFINE POST_TEXT STRING NULL%><%DEFINE POST_TITLE STRING NULL%><%DEFINE POST_DATE STRING NULL%><%DEFINE POST_USER STRING NULL%><%DEFINE POST_DATE_HEADER STRING NULL%><%DEFINE BLOG_POST_QTTY INTEGER 0%><%DEFINE BLOG_LINK_QTTY INTEGER 0%>
<%DEFINE LINK_URL STRING NULL%>
<%DEFINE LINK_TITLE STRING NULL%>

<%DEFINE BLOG_NEIGHBOOR_QTTY INTEGER 0%>
<%DEFINE NEIGHBOOR_URL STRING NULL%>
<%DEFINE NEIGHBOOR_TITLE STRING NULL%>

<%DEFINE BLOG_OWNER_NAME STRING NULL%>
<%DEFINE BLOG_CURRENT_DATE STRING NULL%>

<%DEFINE ARCHIVE_DATE_BEGIN STRING NULL%>
<%DEFINE ARCHIVE_DATE_END STRING NULL%>
<%DEFINE ARCHIVE_LINK STRING NULL%>

<%DEFINE BLOG_ARCHIVE_QTTY INTEGER 0%>
<%DEFINE BLOG_ARCHIVE_LINK BOOLEAN FALSE%>
<%DEFINE BLOG_ARCHIVE_PAGE BOOLEAN FALSE%>
<%DEFINE BLOG_ARCHIVE_LINK_URL STRING NULL%>

<%DEFINE BLOG_ID STRING NULL%>
<%DEFINE BLOG_SCRIPT_URI STRING NULL%>
<%DEFINE POST_ID STRING NULL%>

<%DEFINE BLOG_EMOTICON_HEAD STRING NULL%>
<%DEFINE BLOG_EMOTICON_BODY STRING NULL%>
<%DEFINE BLOG_EMOTICON_FOOT STRING NULL%>

<%DEFINE BLOG_VOTE BOOLEAN FALSE%>

<%DEFINE BLOG_RECOMMEND_BLOG BOOLEAN FALSE%>
<%DEFINE BLOG_RECOMMEND_POST BOOLEAN FALSE%>

<%DEFINE BLOG_ACCEPT_COMMENT BOOLEAN FALSE%>
<%DEFINE POST_HAS_COMMENT BOOLEAN FALSE%>
<%DEFINE BLOG_TITLE STRING NULL%>

<%DEFINE BLOG_TEXT_NO_COMMENT STRING Sem comentários%>
<%DEFINE BLOG_TEXT_ONE_COMMENT STRING Um comentário%>
<%DEFINE BLOG_TEXT_MORE_COMMENTS STRING Comentários%>

<%DEFINE BLOG_COUNTRY STRING NULL%>
<%DEFINE BLOG_STATE STRING NULL%>
<%DEFINE BLOG_CITY STRING NULL%>
<%DEFINE BLOG_DISTRICT STRING NULL%>
<%DEFINE BLOG_REGION STRING NULL%>
<%DEFINE BLOG_GENDER STRING NULL%>
<%DEFINE BLOG_AGE STRING NULL%>
<%DEFINE BLOG_LANGUAGE1 STRING NULL%>
<%DEFINE BLOG_LANGUAGE2 STRING NULL%>
<%DEFINE BLOG_INTEREST1 STRING NULL%>
<%DEFINE BLOG_INTEREST2 STRING NULL%>
<%DEFINE BLOG_INTEREST STRING NULL%>
<%DEFINE BLOG_IM_TYPE STRING NULL%>
<%DEFINE BLOG_IM_ID STRING NULL%>

<%DEFINE BLOG_OWNER_MOOD BOOLEAN FALSE%>

2. Localize essa parte do código:

Em COLOQUE AQUI SEU BACKGROUND cole a URL do seu background (aquela segunda imagem que fizemos, só com as colunas), em COLOQUE AQUI SEU LAY cole a URL do seu template (a imagem do template, com o desenho e uma parte das colunas, certo?!). Em width deixe 780 mesmo.

3. Agora abra a imagem de seu lay/template no Paint, clique em Imagem - Atributos e anote a Altura. Volte no seu código e coloque esse número no Height.

4. Localize essa parte do código:

5. Para saber o tamanho do Top vá lá no Paint onde está aberta a imagem de seu lay. Selecione a parte de baixo do título até o topo da página [isso mesmo, de baixo para cima] como mostra a figura. Sem soltar o botão do mouse, pegue o 2º número que aparece ali embaixo.

6. Para saber o tamanho do Left meça da coluna até a borda esquerda da página, como mostra a figura. Sem soltar o botão do mouse, pegue o 1º número que aparece lá embaixo.

7. Agora meça o width, a largura da coluna, conforme a figura, ainda com o botão do mouse pressionado pegue o 1º número que aparece ali embaixo.

8. O height não precisa alterar o valor que está lá, porque a página não terá uma altura definida já que aumentrá conforme você colocar o conteúdo. Agora localize a Coluna 2 e repita os passos 5, 6 e 7 para encontrar o valor do Top, do Left e do Width.

Quando configurar o html do seu template sempre comece pela coluna do perfil, mesmo que ela não seja a primeira na sua imagem é a primeira no html e isso ajudará a não se confundir.

Ir para a Parte 3 - Configurando o CSS

Espero que esse tutorial tenha ajudado, se ajudou, credite-me , se não ajudou me mande um comentário para me ajudar a melhorá-lo.