Paulo.Nichio - Tutorial

TUTORIAL

Neste tutorial você irá aprender como criar um template para sua página no fireworks.

Nível de dificuldade: 0 1 2 3 4 5 6 7 8 9 10

Esta página poderá demorar um pouco para abrir, por favor, aguarde!

Para começarmos, primeiramente, abra o fireworks...

Em seguida, escolha uma imagem do tamanho mínimo de 780x481.

Para tudo dar certo, como diz aí em cima, iremos usar uma imagem do tamanho 780x481, se sua imagem for maior, recorte ela ou diminua ela para essa dimensão.

Logo após, iremos começar a criar o template.

Com a imagem já recortada ou diminuída para o tamanho 780x481, iremos começar a criar a parte onde fica os posts do blog e a área "etc..."

Para facilitar a vida de vocês visitante, clique no endereço ao lado e salve a imagem em seu computador - CLIQUE AQUI PARA PEGAR A IMAGEM - assim irá ficar mais fácil e vocês não irão precisar mexer no código fonte do template.

Selecione a opção - "BORRACHA" , em seguida, aumente ela para o tamanho 50, na forma quadrada e borda 2.

Daí você irá pegar a imagem que você baixou, clique em "Arquivo", e em seguida "Importar...", conforme a figura abaixo.

Procure a imagem em seu computador, e clique em OK!

Pronto, daí a imagem irá aparecer junto a sua imagem de template.

Coloque ela bem no final, mais bem no final mesmo e também coloque ela no começo da margem, fazendo com que ela fique alinhado à esquerda (ficar do lado completamente), como a figura acima.

Aí vem a parte da borracha, você irá acompanhar só um pouquinho a barra para cima, só um clique, como a figura abaixo:

(A cor vermelha é só um destaque para ver como que eu fiz, mais não é aconselhável utilizar esta cor como fundo).

Por fim então, clique sobre a barrinha que colou:

e aparte "delete", daí irá ficar um espaço do template sobrando para pintar, (onde nós colocamos a barrinha) :

daí você irá continuar a apagar com a borracha, seguindo o que você já fez em cima da barrinha:

Agora, a parte menor (da esquerda) irá ser os "menu" do blog, e a parte direita os posts do blog...

Assim, iremos selecionar a opção "Ferramenta texto" , e escreva na parte esquerda "Etc..." ou qualquer outra coisa que quiser, como o exemplo abaixo:

Daí, em seguida, faça o mesmo no lado direito escrevendo "Blogando", ou qualquer outra coisa:

Assim, o início do template já está pronto, salve em seu computador clicando em "Arquivo", em seguida, "Visualizar exportação...", escolha a "opções" formato JPEG, qualidade "100" e por último clique em "Exportar...", escolha um nome para a imagem e clique em "Salvar".

Agora, iremos criar o background, que é o fundo do template.

Para isso, clique numa parte bege do lado da imagem que acabou de criar, daí em baixo irá aparecer a seguinte opção:

Clique na opção "Tamanho da tela...", na primeira opção deixe com o mesmo tamanho "780", já na segunda opção digite o tamanho "20", e em âncora, selecione o último do meio, conforme a imagem abaixo...

Daí irá ficar assim a imagem:

Daí faça o mesmo, clique em "Arquivo", em seguida, "Visualizar exportação...", escolha a "opções" formato JPEG, qualidade "100" e por último clique em "Exportar...", escolha um nome para a imagem e clique em "Salvar".

Logo após, hospede as duas imagens em um servidor da internet!

Para finalizar, abra a página do UOL Blog, vá em "configurações", "modelos de blog" e em "editor HTML", copie o código da caixinha abaixo e cole no lugar do código do seu blog.

<HTML>
<HEAD><title><%VAR BLOG_TITLE%></title>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE>
textarea, select {BORDER: #000000 1px solid; FONT-SIZE: 9px; FONT-FAMILY: verdana; COLOR: #000000; }
INPUT {BORDER: #000000 1px solid; FONT-SIZE: 9px; COLOR: #000000; FONT-FAMILY: verdana; BACKGROUND-COLOR: #ffffff}
body, table, td, p, div, span {FONT-SIZE: 8pt;COLOR: #000000; FONT-FAMILY: Verdana, Helvetica, Arial; TEXT-DECORATION: none}
img {border: 0px;}
A:link {COLOR:#000000; 	TEXT-DECORATION: none}
A:visited {COLOR:#000000; TEXT-DECORATION: none}
A:active {COLOR:#000000;	TEXT-DECORATION: none}
A:hover {COLOR: #000000; FILTER: shadow(color=#FFCC00,Strength=3); POSITION: relative; HEIGHT: 1px;}
.titulo { 
	font-weight: bold; FONT-SIZE: 10pt;  
	COLOR: #000000; FILTER: shadow(color=#FFCC00 Strength=3); POSITION: relative; HEIGHT: 1px; }
BODY {
	SCROLLBAR-FACE-COLOR: #FF9900; 
	SCROLLBAR-HIGHLIGHT-COLOR: #808080;
	SCROLLBAR-SHADOW-COLOR:#000000; 
	SCROLLBAR-3DLIGHT-COLOR: #000000; 
	SCROLLBAR-ARROW-COLOR:  #ffffff; 
	SCROLLBAR-TRACK-COLOR: #ffffff;
	SCROLLBAR-DARKSHADOW-COLOR: #000000;}
</STYLE></HEAD>
<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');
}

<BODY bgColor=#ffffff background=ENDEREÇO DO LINK DO BACKGROUND>
<P><SPAN style="LEFT: 0px; POSITION: absolute; TOP: 0px"><img src="ENDEREÇO DO LINK DO TODO DA 
IMAGEM" width="780" height="483"></SPAN></P> 
<DIV style="LEFT: 265; WIDTH: 482; POSITION: absolute; TOP: 413; height: 350">    <%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%>
  <p align="center" class="titulo"> 
    <script>
							dataPost = "<%VAR POST_DATE_HEADER%>";
							if (dataPost != "") {document.write("<tr><td height=20 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>
  </p>
  <%IFNOT POST_TITLE=''%>
  <p align="center"><b> 
    <%VAR POST_TITLE%>
    </b></p>
  <%ENDIF%>
  <p align="justify"> 
    <%VAR POST_TEXT%>
  </p>
  <p align="left"> :: Postado por <b> 
    <%VAR POST_USER%>
    </b> às 
    <%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%>
    <br>
    :: <a id=b href="javascript:abre('http://navblog.uol.com.br/recommend.html?idBlog=<%VAR BLOG_ID%>&postFileName=<%VAR POST_ID%>','340','400','1');">Enviar 
    esta mensagem</a> </p>
  <%ENDIF%>
  <%ENDWHILE%>
  
  <%ENDIF%>
</DIV>

<%IFNOT BLOG_GENDER='NULL'%>
  <div align="center" class="titulo">Meu Perfil </div>
  <table cellpadding=0 cellspacing=2 border=0 width="100%">
    <tr> 
      <td width=4 rowspan=2> </td>
      <br>
    </tr>
    <tr> 
      <%IFNOT BLOG_EMOTICON_HEAD="NULL"%>
      <td width=35 valign=top> <img src="<%VAR BLOG_EMOTICON_HEAD%>" border="0"><br>
        <img src="<%VAR BLOG_EMOTICON_BODY%>" border="0"><br>
        <img src="<%VAR BLOG_EMOTICON_FOOT%>" border="0"><br>
      </td>
      <%ENDIF%>
      <td width=159  valign=top style=padding-right:15px id=m> 
        <%IFNOT BLOG_COUNTRY='NULL'%>
        <%VAR BLOG_COUNTRY%>
        <%ENDIF%>
        <%IFNOT BLOG_STATE='NULL'%>
        , 
        <%VAR BLOG_STATE%>
        <%ENDIF%>
        <%IFNOT BLOG_CITY='NULL'%>
        , 
        <%VAR BLOG_CITY%>
        <%ENDIF%>
        <%IFNOT BLOG_DISTRICT='NULL'%>
        , 
        <%VAR BLOG_DISTRICT%>
        <%ENDIF%>
        <%IFNOT BLOG_REGION='NULL'%>
        , 
        <%VAR BLOG_REGION%>
        <%ENDIF%>
        <%IFNOT BLOG_GENDER='NULL'%>
        , 
        <%IF BLOG_GENDER="M"%>
        Homem 
        <%ELSE%>
        Mulher 
        <%ENDIF%>
        <%ENDIF%>
        <%IFNOT BLOG_AGE='NULL'%>
        , 
        <%VAR BLOG_AGE%>
        <%ENDIF%>
        <%IFNOT BLOG_LANGUAGE1='NULL'%>
        , 
        <%VAR BLOG_LANGUAGE1%>
        <%ENDIF%>
        <%IFNOT BLOG_LANGUAGE2='NULL'%>
        , 
        <%VAR BLOG_LANGUAGE2%>
        <%ENDIF%>
        <%IFNOT BLOG_INTEREST1='NULL'%>
        , 
        <%VAR BLOG_INTEREST1%>
        <%ENDIF%>
        <%IFNOT BLOG_INTEREST2='NULL'%>
        , 
        <%VAR BLOG_INTEREST2%>
        <%ENDIF%>
        <%IFNOT BLOG_INTEREST='NULL'%>
        , 
        <%VAR BLOG_INTEREST%>
        <%ENDIF%>
        <%IFNOT BLOG_IM_TYPE='NULL'%>
        <br>
        <%VAR BLOG_IM_TYPE%>
        - 
        <%ENDIF%>
        <%IFNOT BLOG_IM_ID='NULL'%>
        <%VAR BLOG_IM_ID%>
        <%ENDIF%>
      </td>
    </tr>
    <%ENDIF%>
  </table>
  
  
  <%IF BLOG_OWNER_MOOD%>
  <p align="center"><span class="titulo">Meu Humor</span><br>
    <span id="mood"></span> </p>
  <%ENDIF%>
  
  <p> 
    
    <%IFNOT BLOG_NEIGHBOOR_QTTY=0%>
  </p>
  <p align="center" class="titulo">Blogs Amigos</p>
  <p align="left"> 
    <%WHILE NEIGHBOOR_TITLE%>
    :: <a id=l href="<%VAR NEIGHBOOR_URL%>" target="_blank"> 
    <%VAR NEIGHBOOR_TITLE%>
    </a><br>
    <%ENDWHILE%>
    <%ENDIF%>
  </p>
  
  
  <%IFNOT BLOG_LINK_QTTY=0%> <p class="titulo" align="center">Links</p>
<p align="left"> :: <a href="http://www.paulo.nichio.zip.net" target="_blank">Paulo.Nichio</a><br>    <%WHILE LINK_TITLE%>
    :: <a id=l href="<%VAR LINK_URL%>" target="_blank"> <%VAR LINK_TITLE%>
    </a><br>
    <%ENDWHILE%>
  </p>
  <%ENDIF%>

<%IF BLOG_VOTE%>
  <p class="titulo" align="center">Votação</p>
  <p align="center"><a href="javascript:abre('http://navblog.uol.com.br/webvote.html?id=<%VAR BLOG_ID%>','340','390','0')">Dê 
    uma nota para meu blog </a> 
    <%ENDIF%>
    
  </p>
  <p align="center"> 
    
    <%IF BLOG_RECOMMEND_BLOG%>
    ..:: <a href="javascript:abre('http://navblog.uol.com.br/recommend.html?idBlog=<%VAR BLOG_ID%>','365','400','1');"><b>INDIQUE 
    ESSE BLOG</b></a> ::.. 
    <%ENDIF%>
    
  </p>   
  <%IF BLOG_ARCHIVE_LINK%>
  <p align="center" class="titulo">Arquivo do Blog </p>
  <p align="center"> <a id=l href="<%VAR BLOG_ARCHIVE_LINK_URL%>">Ver mensagens 
    anteriores</a>
                    <div id="vejaMais"><a id=b href="/listArchive.html">+ veja mais</a></div> 
 <%ELSE%>
 <p align="center" class="titulo">Arquivo do Blog </p>
<p align="center">
  <%WHILE ARCHIVE_LINK%>
  <a href="<%VAR ARCHIVE_LINK%>" id=l> 
    <%VAR ARCHIVE_DATE_BEGIN%>
    a <%VAR ARCHIVE_DATE_END%>
  </a>   <br>
  <%ENDWHILE%>
  <%ENDIF%></p>
  
  
  <%IFNOT BLOG_ARCHIVE_PAGE%>
  <p align="center" class="titulo">Visitas</p>
  <p align="center"><img src=http://bloghosting.uol.com.br/contador.gif?tipo=22&tam=10&borda=0&cor=0,0,0> 
  </p>
  <%ENDIF%>

<p align=center>

<script type="text/javascript">
var curUrl = location.href; var re = new RegExp("http:\/\/(.+)\.(zip.net|blog.uol.com.br)(.*)", "g");
var urlFim=curUrl.replace(re,"http://$1.rssblog.$2/");
urlFim=urlFim.replace(/\.rssblog\.blog\./,".rssblog.");
</script>
<script type="text/javascript">document.write('<a href=\"'+urlFim+'\"><img src=\"http:\/\/rss.i.uol.com.br\/xml2.gif\" class="rssimage" width=\"36\" height=\"14\" border=\"0\" alt=\"XML\/RSS Feed\"><\/a>');</script><br>
<a href="http://rss.uol.com.br/" target="_blank" title="O que é o XML/RSS?">O que é isto?</a>

<br><br>

<a href="http://www3.uol.com.br/celular/blog.jhtm" target="_blank"><img src="http://blog.i.uol.com.br/ico_celularsms.gif" border=0 align=absmiddle> Leia este blog no seu celular</a>

</p>
  <p class="titulo" align="center">Créditos</p>
  <p align=center><a href=http://blog.uol.com.br target="_blank"><img src=http://paulo.nichio.vilabol.uol.com.br/imagens/uolblog.gif border=0></a></p>
  <p align=center><b class="titulo">Layout por</b> </p>
  <p align=center><a target=_blank 
href="http://www.paulo.nichio.zip.net/">Paulo.Nichio</a><br>
    Todos os direitos reservados ©</p><p align=center><a target=_blank href="http://www.paulo.nichio.zip.net"><img 
  height=31 alt="Paulo.Nichio.zip.net" src="http://s221.photobucket.com/albums/dd151/paulo_nichio/paulonichio88.gif" 
  width=88 border=0></a><br>
</DIV>

<%IF BLOG_ACCEPT_COMMENT%><script src=<%VAR BLOG_SCRIPT_URI%>></script><%ENDIF%>
<%IF BLOG_OWNER_MOOD%><script src="mood.js"></script><%ENDIF%>
	  
</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%>

E altere os seguintes lugares...

Onde estiver escrito "ENDEREÇO DO LINK DO TODO DA IMAGEM", altere pelo link do servidor onde hospedou a imagem do topo:

Onde estiver escrito: "ENDEREÇO DO LINK DO BACKGROUND", altere pelo link do servidor onde hospedou o fundo do seu site:

Daí, caso queira alterar o "style" da página, isso fica por sua conta, só não pode retirar os créditos do site Paulo.Nichio!

Por fim, no UOL Blog, clique em "Salvar", e por último clique em "Republicar", daí você irá ver como ficou o resultado do seu template.

Qualquer dúvida em relação a este tutorial, entre em contato comigo pelo seguinte endereço de e-mail:

paulo.nichio@bol.com.br

TUTORIAL CRIADO POR MIM, NÃO COPIE...