UOL - Blog

Modificando o template

I - No menu à esquerda, selecione o nome do blog cujo template você pretende editar.

II - Clique o botão "Configurações", que aparecerá no canto direito superior.

III - No menu à esquerda, clique a opção "Modelo".

IV - Procure o link "Editor HTML" no final da página e clique-o.

V - O código do template, com todas as variáveis e HTML, será apresentado na tela.

A alteração do template manualmente só é recomendada para pessoas com experiência em HTML, CSS e Javascript.

Atenção: para utilizar o novo sistema de arquivamento é necessário atualizar o modelo do seu blog. Escolha novamente seu modelo preferido e republique o blog. Caso tenha personalizado seu modelo, siga as instruções abaixo:

1. Estilo de CSS

Localize as definições CSS do seu modelo e inclua o código abaixo. Se você não sabe onde fica as definições CSS, procure a linha iniciada por "a {text-decoration:none}" ou "body {background-...}" e - depois de uma quebra de linha - cole o código abaixo

/* ----------- início do Estilo CSS ----------- */
	/* Últimas 10 mensagens publicadas */
	#ultimas {font:normal 12px arial; padding:10px; text-align:left;} #ultimas * {margin:0; padding:0; background:0;} #ultimas h4 {font-size:13px; margin-bottom:10px;} #ultimas li {list-style:none; padding:5px 0 0 20px; font:normal 12px arial; list-style-image:none;} #ultimas li a {color:#000;}

/* Busca Histórico */
	#buscaHistorico {font:normal 12px arial; padding:10px; text-align:left;} #buscaHistorico h4 {font-size:12px;} #buscaHistorico label {padding-left:20px;} #buscaHistorico input {font-size:12px;}

/* Calendário */
	#calendario {padding:10px 0; width:100%;} #calendario * {margin:0; padding:0; background:none;} #calendario .ano {overflow:hidden; width:100%; text-align:left;} #calendario .ano strong {display:block; font-size:12px; border-bottom:solid 1px #000; margin:20px 10px 0 10px; padding:0 10px;} #calendario .mes span {font:bold 12px verdana;} #calendario .mes {float:left; width:115px; margin:10px 0; text-align:center;} #calendario li {list-style:none; font:normal 12px arial;list-style-image:none;} #calendario li a {color:#000;}

/* Histórico Lateral */
	#historico-lateral {padding:0 0 4px 0; margin:0; list-style:none;list-style-image:none;}
	#historico-lateral li {padding:1px 0 1px 5px;} #historico-lateral li a {color:#666;} #periodos-lateral {padding:0 0 4px 0; margin:0; list-style:none;list-style-image:none;}
	#periodos-lateral li {padding:1px 0 1px 5px;} #periodos-lateral li a {color:#666;} #vejaMais {text-align:right; padding:0 4px 4px 4px;} #vejaMais a {text-decoration:underline; color:#666;}
	/* ----------- fim do Estilo CSS ----------- */

[ clique aqui para copiar o código ]

2. Atualização do JavaScript

Localize os códigos JavaScript no início do seu modelo e inclua o código abaixo. Se você não sabe onde ficam estes códigos, procure a linha iniciada com "<body>". Localize a tag "</script>" algumas linhas acima e cole o código abaixo antes desta tag.

/* ----------- início da Atualização do JavaScript ----------- */
	/* Declaração das variáveis */
	var periodoMesAtual = "";
	var periodoAnoAtual = "";
	var k = 0;
	var j = 0;
	var periodo = new Array();
	var periodoURL = new Array();

<%WHILE ARCHIVE_LINK%>
	 periodo[k++] = "<%VAR ARCHIVE_DATE_BEGIN%> a <%VAR ARCHIVE_DATE_END%>";  periodoURL[j++] = "<%VAR ARCHIVE_LINK%>"; <%ENDWHILE%>

/* Acerta a altura das colunas dos meses para que não haja quebra de layout. */ function defineAlturaColunas() {  var arquivo = document.getElementById("calendario").getElementsByTagName("ul");
	  var maiorAltura = 0;
	 for (i = 0; i < arquivo.length; i++) {
	  ((arquivo[i].offsetHeight > maiorAltura) ? maiorAltura = arquivo[i].offsetHeight : arquivo[i].style.height = maiorAltura);  } }

/* Define o nome do mês baseado pelo index */ function defineMes(numMes) {  var nomeMes = new Array();  nomeMes = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];  return nomeMes[eval(numMes - 1)]; }

/* Monta o calendário */
	 function montaCalendario(){
	 for(i in periodo) {
	  var periodoMes = periodo[i].substr(3,2); //Mes do periodo
	  var periodoAno = periodo[i].substr(6,4); //Ano do periodo

/* Separa os anos */
	  if (periodoAnoAtual == "") {
	   document.write ("<ol class=\"ano\"><li><strong>" + periodoAno + "</strong></li>");
	   periodoAnoAtual = periodoAno;
	   periodoMesAtual = "";
	  }
	  else if (periodoAno != periodoAnoAtual) {
	   document.write ("</ol></ol><ol class=\"ano\"><li><strong>" + periodoAno + "</strong></li>");
	   periodoAnoAtual = periodoAno;
	   periodoMesAtual = "";
	  }

/* Separa os meses */
	  if (periodoMesAtual == "") {
	   document.write ("<ul class=\"mes\"><li><span>" + defineMes(periodoMes) + "</span></li>"); 
	   periodoMesAtual = periodoMes;
	  }
	  else if (periodoMes != periodoMesAtual) {
	   document.write ("</ul><ul class=\"mes\"><li><span>" + defineMes(periodoMes) + "</span></li>"); 
	   periodoMesAtual = periodoMes;
	  }

/* Períodos */
	  document.write ("<li><a href=\"" + periodoURL[i] + "\">"+ periodo[i].replace(/\/20[0-9][0-9]/g, "") +"</a></li>");  }

/*Fecha Calendário*/
	 document.write ("</ol>");
	}

/* Monta os períodos do arquivo no box lateral */ function montaPeriodos(numMaximo) {
	  if(periodo.length < numMaximo) {numMaximo = periodo.length};
	  for(i = 0; i < numMaximo; i ++) {
	   document.write ("<li><img src=\"http://blog.i.uol.com.br/mdl/adolescente/bullet.gif\ <http://blog.i.uol.com.br/mdl/adolescente/bullet.gif\> "> <a href=\"" + periodoURL[i] + "\">"+ periodo[i] +"</a></li>");
	  }
	}

/* Faz o request do XML */
	var http_request = false;

function makeRequest(url) {
	    http_request = false;

if (window.XMLHttpRequest) {
		http_request = new XMLHttpRequest();
		if (http_request.overrideMimeType) {
		    http_request.overrideMimeType('text/xml');
		}
	    } else if (window.ActiveXObject) {
		try {
		    http_request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
		    try {
		    http_request = new ActiveXObject("Microsoft.XMLHTTP");
		    } catch (e) {}
		}
	    }

if (!http_request) {
		alert('Giving up :( Cannot create an XMLHTTP instance');
		return false;
	    }

http_request.onreadystatechange = alertContents;
	    http_request.open('GET', url, true);
	    http_request.send(null);
	}

function alertContents() {
	    if (http_request.readyState == 4) {
		if (http_request.status == 200) {
		    mostraHistorico();
		}
	    }
	}     
	//Fim Request

/* Monta a lista dos últimos posts */     
	 function mostraHistorico() {                  
	 var xmlDoc = http_request.responseXML;
	 var item = xmlDoc.getElementsByTagName("item");
	 for(i = 0; i < item.length; i ++) {
	  var link = item[i].getElementsByTagName("link")[0].firstChild.nodeValue;
	  var titulo = item[i].getElementsByTagName("title")[0].firstChild.nodeValue.replace(/\s\-\sAutor$.*$$/,"");
	  if (titulo == "") titulo = "Sem título";
	  var data = item[i].getElementsByTagName("pubDate")[0].firstChild.nodeValue;
	  var er = /([a-z]{3}), ([0-9]{2}) ([a-z]{3}) ([0-9]{4}) ([0-9]{2}\:[0-9]{2}\:[0-9]{2}) -[0-9]{4}/i;
	  data = data.match(er);
	  var mes;
	  switch(data[3])
	  {
	   case 'Jan' : mes = '01' ; break;
	   case 'Feb' : mes = '02' ; break;
	   case 'Mar' : mes = '03' ; break;
	   case 'Apr' : mes = '04' ; break;
	   case 'May' : mes = '05' ; break;
	   case 'Jun' : mes = '06' ; break;
	   case 'Jul' : mes = '07' ; break;
	   case 'Aug' : mes = '08' ; break;
	   case 'Sep' : mes = '09' ; break;
	   case 'Oct' : mes = '10' ; break;
	   case 'Nov' : mes = '11' ; break;
	   case 'Dec' : mes = '12' ; break;
	  }
	  <%IF BLOG_ARCHIVE_PAGE%>document.getElementById("historico").innerHTML += "<li>" + data[2] +'/'+ mes + "/" + data[4] + " - " + data[5].substr(0,5) + " -  <a href=\"" + link + "\">" + titulo + "</a></li>";<%ENDIF%>  <%IFNOT BLOG_HISTORY_LINK='FALSE'%>document.getElementById("historico-lateral").innerHTML += "<li id=b><img src=\"http://blog.i.uol.com.br/mdl/adolescente/bullet.gif\ <http://blog.i.uol.com.br/mdl/adolescente/bullet.gif\> "> " + data[2] +'/'+ mes + " - <a id=b href=\"" + link + "\">" + titulo + "</a></li>";<%ENDIF%>  } }
	/* ----------- fim da Atualização do JavaScript ----------- */

[ clique aqui para copiar o código ]

3. Mensagens arquivadas

Atualize as linhas do arquivamento, que possuem as tags <%WHILE ARCHIVE_LINK%> e <%VAR ARCHIVE_DATE_BEGIN%> para o novo código. Se você tiver dificuldade em achar este bloco, localize este trecho e substitua pelo novo código.

<td>
       <%IFNOT BLOG_HISTORY_LINK='FALSE'%>
       
       <div id="ultimas">
        <h4>Últimas mensagens publicadas:</h4> 
        <ul id="historico"></ul>
       </div>
       
       <%ENDIF%>
      
       
       <div id="buscaHistorico">
        <h4>Escolha o período para ler as mensagens arquivadas ou use a busca:</h4>
      
        <form action="http://blog.busca.uol.com.br/uol/index.html" method="get" name="form-uol-busca">
         <label>Buscar mensagem antiga: </label><input type="text" name="q" />
         <input type="submit" value="Buscar" />
         <input type="hidden" name="id" value="1" disabled="disabled" />
         <input type="hidden" name="rd" value="1" disabled="disabled" />
         <input type="hidden" name="t" value="10" disabled="disabled" />
         <input type="hidden" name="ref" value="" disabled="disabled" />
         <input type="hidden" id="siteInput" name="site" value="" /> 
         <script type="text/javascript">document.getElementById("siteInput").value = location.host</script>
        </form>
      
       </div>
       
      
       
       <div id="calendario">
        <script type="text/javascript">
         montaCalendario();//calendario.js
        </script>
       </div>
       <br><br>
       <div style="text-align:center;"><a class="linksmensagem" href="index.html">voltar</a></div>
       
     </td>

[ clique aqui para copiar o código ]

4. Inclusão do link de cada mensagem

Você pode incluir um link direto (url) para cada mensagem publicada, para facilitar a divulgação dos textos pelos seus visitantes. Inclua o código abaixo depois da tag <%ENDIF%> que aparece logo após a frase "envie esta mensagem".

[ clique aqui para copiar o código ]

5. Menu com os períodos arquivados

Atualize o código abaixo para que o blog liste os títulos das suas últimas 10 mensagens e/ou liste os períodos arquivados conforme sua escolha. Localize a área delimitada pelas tags "<%IF BLOG_ARCHIVE_LINK%>" e "<%ENDWHILE%>" Substitua o código antigo pelas linhas abaixo

[ clique aqui para copiar o código ]

6. Novo formato de exibição do histórico

Novo formato de exibição do histórico Inclua as linhas abaixo antes da tag "</body>" para melhorar a apresentação do histórico das mensagens

[ clique aqui para copiar o código ]

7. Inclusão das novas variáveis

Insira as linhas abaixo no final do seu template para que seu blog fique pronto para aceitar os novos recursos de arquivamento

[ clique aqui para copiar o código ]

Erros no código podem fazer com que seu blog não seja publicado de maneira correta ou mesmo indisponibilizá-lo completamente. Se isto acontecer, escolha um modelo pronto do UOL e republique seu blog. Mensagens publicadas não serão perdidas nesta operação.