Dicas Blogger: Template/Layout

Home » Categories: Template/Layout

Mostrando postagens com marcador Template/Layout. Mostrar todas as postagens

NOVIDADE: Novos Modelos de Template do Blogger

Hoje o Blogger lançou 4 novos modelos de templates responsivos. Isso mesmo, quando a gente menos espera o Blogger tira um coelho da cartola e mostra que está vivo trabalhando para melhorar a experiência do blogueiro com a plataforma. Tudo bem! Esse demorou um pouquinho pra sair, mas enfim está aí pra curtirmos e testarmos. Vamos ver o que veio de novo e dar deixar nossas primeiras impressões:<br />
<br />
<h3>
<span style="color: red;">Responsivos</span></h3>
Template com modelo responsivo, se adapta a qualquer tamanho de tela. Seja smartphones, tablets e computadores, eles se adaptam perfeitamente, contribuindo para um ótima experiência do leitor. Acredito que este seja o principal diferencial desses templates. O que demonstra uma grande aposta do Google na continuidade da plataforma, que cada vez tem mais acessos por dispositivos portáteis.<br />
<br />
<h3>
<span style="color: red;">Carregamento rápido</span></h3>
Os templates carregam rapidamente. Essa é a proposta para essa nova fornada. O que é muito positivo. Pois quando instalamos vários scripts para dar o efeito desejado nesses modelos, como o visto no modelo empório, que é um template de modelo magazine, o template fica pesado e o carregamento da página é lento.<br />
<br />
<h3>
<span style="color: red;">Funcionalidades</span></h3>
Existem personalizações que são o sonho de muitos blogueiros. Exemplo: o latyout magazine, a barra do cabeçalho que fixa no topo quando o leitor desliza para baixo, o leia mais na home page, botões de compartilhamento com layout arrojado e por aí vai. Posso garantir, esses são pedidos recorrentes nas personalizações de template que faço para meus clientes e que o Blogger mandou muito bem nesses novos modelos.<br />
<br />
<h3>
<span style="color: red;">Layout Limpo</span></h3>
Como sempre um layout limpo e prático, que pensa no leitor do blog. É assim que novos modelos precisam ser mesmo, limpos. Assim, o trabalho de personalização fica facilitado, sem a necessidade de ficar removendo códigos do template.<br />
<br />
Agora vamos conhecer um pouco dos modelos.<br />
<h3>
Tema Empório</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcCTazWh5L9R2zcmM0jKLhKilh-nUNEj9u_IaCrSjRkIv_7ODkZERYBFn9FnvoKXM0BqvYpd5DKC19eTtFD6coTa9TK_VxyTUtS-xVwjPeBXCyn8-m4nrmPIfhVMPOJubYRvXzUdftaHFX/s1600/en_Emporio.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcCTazWh5L9R2zcmM0jKLhKilh-nUNEj9u_IaCrSjRkIv_7ODkZERYBFn9FnvoKXM0BqvYpd5DKC19eTtFD6coTa9TK_VxyTUtS-xVwjPeBXCyn8-m4nrmPIfhVMPOJubYRvXzUdftaHFX/s320/en_Emporio.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: start;">De projetos a objetos, Emporio pode tomar qualquer variedade de mensagens e exibi-los de uma forma limpa e arrumada.</span><span style="text-align: start;"> </span>Veja <a href="http://tastytreats-blog.blogspot.com/" target="_blank">o blog aqui</a>. </div>
<h3 style="clear: both; text-align: left;">
Soho</h3>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWuZgAxTsUECfBFAP6RFe340bD_QwPbDb1WAZcUWx3pQBcKP9JUCY_qieRD4xEhPQ4aknwPdsgR6eSAxLIHKoSSs-7PirHTEWI8A_vFnBszsVf8eVcMJhMu8WEqhuEMZUTbR5Cenu3Afa5/s1600/en_Soho.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWuZgAxTsUECfBFAP6RFe340bD_QwPbDb1WAZcUWx3pQBcKP9JUCY_qieRD4xEhPQ4aknwPdsgR6eSAxLIHKoSSs-7PirHTEWI8A_vFnBszsVf8eVcMJhMu8WEqhuEMZUTbR5Cenu3Afa5/s320/en_Soho.jpg" width="320" /></a></div>
<div style="text-align: center;">
Sobressalente e simples, Soho é uma galeria construída para mostrar suas últimas fotos, desenhos ou reflexões em sua melhor luz. Veja <a href="http://dayinthelife-blog.blogspot.com/" target="_blank">o blog aqui</a>.</div>
<div style="text-align: center;">
<br /></div>
<h3 style="clear: both; text-align: left;">
Contempo</h3>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLPC2WNaz9OGvST20IEGJI4gAGLYw2WszedDe74zhNHT2mxft7l9V72g5uwsR5daIQcX3P4Z3JDQFVWRnzDeb7vK_aHKFV7dxvqP1zo9ikd0PQrNBFU-MIVsYRKUzGCiqknWmoSaUFp5hj/s1600/en_Contempo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLPC2WNaz9OGvST20IEGJI4gAGLYw2WszedDe74zhNHT2mxft7l9V72g5uwsR5daIQcX3P4Z3JDQFVWRnzDeb7vK_aHKFV7dxvqP1zo9ikd0PQrNBFU-MIVsYRKUzGCiqknWmoSaUFp5hj/s320/en_Contempo.jpg" width="320" /></a></div>
<div style="text-align: center;">
Tão bom para uma foto quanto para uma história, Contempo coloca uma nova e moderna rotação nas muitas aventuras da vida. Veja <a href="http://herethere-blog.blogspot.com/" target="_blank">o blog aqui</a>.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="clear: both; text-align: left;">
Notável</h3>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbX9V8mtxpD89GUOXHYzq7CSI970H74Wl_G4Orcd4lTRowxIwwY6xrfM8nX5nmqmHyLAm6FvIVskVBgFy05818T9b_NH8KB_6Ma5BG1fDt2kLEoB8he_o2xtx3XmGqwzx5W00ARg0QyiD7/s1600/en_Notable.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbX9V8mtxpD89GUOXHYzq7CSI970H74Wl_G4Orcd4lTRowxIwwY6xrfM8nX5nmqmHyLAm6FvIVskVBgFy05818T9b_NH8KB_6Ma5BG1fDt2kLEoB8he_o2xtx3XmGqwzx5W00ARg0QyiD7/s320/en_Notable.jpg" width="320" /></a></div>
<div style="text-align: center;">
Se você pretende escrever pouco ou escrever muito, Notável é o seu bloco de notas para rabiscos, histórias e muito mais. Veja <a href="http://poweroffriendship-blog.blogspot.com/" target="_blank">o blog aqui</a>.</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
Mas atenção! Antes de fazer a mudança <a href="http://www.dicasblogger.com.br/2012/05/como-fazer-backup-no-novo-blogger.html" target="_blank">faça o backup do seu template</a>, assim se você tiver algum problema poderá voltar a usar o modelo anterior. O próprio Blogger irá fazer a sugestão pra você antes de fazer a aplicação, então seja um blogueiro prevenido.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Gostei de ver o modelo Empório entre os novos modelos, esse estilo magazine foi uma recomendação minha TC Summit de 2015 na Califórnia e que também era uma reinvindicação da Juliana Sardinha. Trago um texto do feedback que compartilhei com você daquela viagem no post <a href="http://www.dicasblogger.com.br/2015/10/o-blogger-continua-evoluindo.html" target="_blank">O Blogger continua evoluindo</a>:</div>
<div style="text-align: left;">
<br /></div>
<blockquote class="tr_bq">
"Entretanto, esse avanço só é possível com o trabalho de uma equipe eficiente, que tive o prazer de conhecer na última semana no Top Contributor Summit 2015, em San Francisco - CA. Na sessão do Blogger a equipe de gerentes do produto anotou cada feedback dado pelos colaboradores dos fóruns de ajuda sobre as necessidades dos usuários, um interesse genuíno que acreditamos que trará bons resultados ao produto e quem sabe alguns poderão virar novidades? #dedinhoscruzados" <i>Priscila Fago</i></blockquote>
É galera! Demorou mas chegou ;)<br />
<div>
<br /></div>
<div>
E aí, o que você achou dos modelos? Já aplicou algum em seu blog? Quais foram as suas impressões? Compartilhe com a gente!!! O <a href="https://blogger.googleblog.com/2017/03/share-your-unique-style-with-new.html" target="_blank">anúncio oficial</a> foi feito no blog do Blogger.</div>

NOVIDADE: Novos Modelos de Template do Blogger

Hoje o Blogger lançou 4 novos modelos de templates responsivos. Isso mesmo, quando a gente menos espera o Blogger tira um coelho da cartola ...

Continue Lendo >>

01:30

O blog está de cara nova!

Depois de quase 2 anos usando o mesmo template, achei que estava na hora de mudar. Minha idéia era criar um modelo mais limpo e leve. Eis que surge o DB 6.0!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg-4GjZMGh3gvkWzQlkRXqGeSJIu4h5hSsbglsl-ZY8HP7O4OMNLQ0tXKvWnbqhFBJO4woPTFg0OA1SxwMnHZpJUJettOck_YYXwLVKupouD91WHE0t4ENDNZSREs6Wtfleu4ra0DrLruo/s1600/novo-template.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg-4GjZMGh3gvkWzQlkRXqGeSJIu4h5hSsbglsl-ZY8HP7O4OMNLQ0tXKvWnbqhFBJO4woPTFg0OA1SxwMnHZpJUJettOck_YYXwLVKupouD91WHE0t4ENDNZSREs6Wtfleu4ra0DrLruo/s1600/novo-template.png" /></a></div>
<br />
<br />
Desta vez, optei por customizar um layout do <b>Designer do Modelo</b>, que são os templates fornecidos pelo próprio Blogger. Essa decisão aconteceu por algumas razões fortes:<br />
<ol>
<li>todas as novas funcionalidades lançadas pelo Blogger já são incluídas, automaticamente, nesses modelos, dispensando a correria em busca de códigos e gambiarras; </li>
<li>eles possuem um código mais limpo e moderno;</li>
<li>é possível ajustar, pelo painel do Blogger, toda a disposição do layout (quantidade e posicionamento das barras laterais e de rodapé), o que poupa tempo;</li>
<li>como editora de um blog que é referência sobre a plataforma Blogger, me senti no dever de aprender a personalizar os novos modelos;</li>
</ol>
Pensando em uma experiência mais satisfatória para o usuário, consegui reduzir o tempo de carregamento da página inicial, que antes era em torno de <b>20 </b>segundos, para <b>1,86</b> segundos. Pelo mesmo motivo, reduzi gadgets, links e anúncios.<br />
<br />
Também incluí uma descrição, no final do post, de todos os colunistas do blog.<br />
<br />
Quem me ajudou nessa aventura foi a <b>Priscila</b>, com seu olhar crítico mas de extremo bom gosto e o <b>Luan Felipe</b>  (pequeno gênio), que consertou um problema que tivemos em monitores com alta resolução. O meu <b>MUITO OBRIGADA</b> aos dois :)<br />
<br />
Espero que vocês tenham gostado do resultado.<br />
<br />

O blog está de cara nova!

Depois de quase 2 anos usando o mesmo template, achei que estava na hora de mudar. Minha idéia era criar um modelo mais limpo e leve. Eis qu...

Continue Lendo >>

20:02

Como colocar o hack leia mais com imagens nos modelos do Blogger ( designer de modelo)

Em 2010 ensinei como colocar o hack leia mais automático e com imagens nos templates antigos do Blogger e nos personalizados por nós usuários :<br />
<ul><li><a href="http://www.dicasblogger.com.br/2010/09/hack-leia-mais-com-imagens.html">Hack “Leia mais” automático e com imagens</a> </li>
</ul>Talvez os novatos não saibam, mas de 2006 para cá o Blogger passou por incontáveis mudanças e, atualmente, contamos com 5 tipos de templates: os anteriores a 2006 (super básicos), os após 2006 padrão, os após 2006 personalizados, os do designer do modelo e os de visualização dinâmica. Para maiores detalhes, acessem:<br />
<ul><li><a href="http://www.dicasblogger.com.br/2010/09/opcoes-de-templates-para-blogger.html">Opções de templates para Blogger</a> </li>
<li><a href="http://www.dicasblogger.com.br/2012/05/usar-template-visualizacao-dinamica.html">Como usar os templates de visualizações dinâmicas</a> </li>
</ul>Muito bem. Para colocar o resumo dos posts na página inicial, também chamado de “hack leia mais”, no designer do modelo usando a nova interface, vá em “modelo” e clique em “editar HTML”<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBtCkJDdpLeZ2Ot4s2ZRVMC_RpHGmwbfjNU9lkf1PDYrZQ2Tp8AB3GWgLrmW22CMfwtUyxurgNUaVCwDwXQ0VYEeGXCGXn22Fck2ULIB8_P89cD5YIjqM_cA8zeNkpSC7sc96yfNtdQEHa/s1600-h/modelo-blogger%25255B4%25255D.png"><img alt="modelo-blogger" border="0" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1hgW8zshUKStZ9JhlhRqkpbNbSgawg9-pSGCgmrOrlQUzgSC1Kaoxmt5o3HnN3G_5oS5cobCFGS5t8e367u36mzEVDQqQfjXg3iMvXoTuWg-_ivUCAtHa7s9Q4ddiHR4Vu6XSJ_WDphCI/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="modelo-blogger" width="552" /></a><br />
Em editar html, marque “expandir modelos de widgets” e procure (Crtl+F do teclado) por: <b><data:post.body/></b><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlBCKXfkwRLrDm0spcV3IoPtqX-PyxP68KFuX50-3VIV2J9uuYvmz9Vtj3Gjuxj5SVnQDE7fCar1KyDCkixlTyvd_3XRaA9HqMdcrk9hMms3ydhqG-j8XHXoabheYm-YBvKQQBIEe1sUl0/s1600-h/editar-html%25255B7%25255D.png"><img alt="editar-html" border="0" height="352" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3g5s7YUeoimTAu-hTArboOhI19Dxko4N2aYFJ6bGqNjmqzyagX2ajvoF6vzDoMC9BqJ-V49NbWTuVWibV_67Ql_7tjmXNDwpUlgySAW9ONaGNOZ-IQHe_0y69tHwjxjtqP41KL33m3tU7/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="editar-html" width="552" /></a><br />
Substitua <b><data:post.body/></b> por:<br />
<blockquote><b:if cond='data:blog.pageType != "item"'>      <br />
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>       <br />
<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>       <br />
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>       <br />
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>Leia mais »»</a></div>       <br />
</b:if></b:if>       <br />
<b:if cond='data:blog.pageType == &quot;item&quot;'>       <br />
<data:post.body/></b:if>       <br />
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>       <br />
</b:if></blockquote>Agora vá no CSS do template e <b><span style="color: red;">antes </span></b>da tag <b>]]></b:skin></b> cole este código:<br />
<blockquote>.rmlink {      <br />
font-size: 100%;       <br />
float: right;       <br />
margin-right: 30px;       <br />
margin-top: 10px;       <br />
font-weight: bold;}       <br />
.rmlink a {       <br />
font-style: normal;       <br />
font-weight: bold;       <br />
font-variant: small-caps;       <br />
font-family: Arial,Sans-Serif;       <br />
color: #24618e; /*Cor do Link*/}       <br />
.rmlink a:visited { color: #649dc7;}/*Cor do link depois de clicado*/       <br />
.rmlink a:hover { color: red;} /*Cor do link ao passar o mouse em cima*/</blockquote>Procure então pela tag <b></head></b> e cole este outro código <span style="color: red;"><b>acima</b></span><b><span style="color: red;"></span></b> dela:<br />
<blockquote>      <br />
       <br />
<style type="text/css">       <br />
.thumbnailimg IMG {       <br />
max-width:150px;       <br />
  width: expression(this.width > 150 ? 150: true);       <br />
  max-height:120px;       <br />
  height: expression(this.height > 120 ? 120: true);       <br />
}       <br />
.thumbnailimg {       <br />
float:left;       <br />
padding:0px 10px 5px 0px;       <br />
}       <br />
</style>       <br />
<script type='text/javascript'>       <br />
var thumbnail_mode = "no-float" ;       <br />
var classicMode = false ;       <br />
var summary_noimg = 50;       <br />
var summary_img = 40;       <br />
var indent = 3;       <br />
</script>       <br />
<script  type='text/javascript'>       <br />
//<![CDATA[       <br />
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}       <br />
function getSummaryLikeWP(id) {       <br />
       return document.getElementById(id).innerHTML.split(//)[0];       <br />
}       <br />
function getSummaryImproved(post,max){       <br />
  var re = /<.*?>/gi       <br />
  var re2 = /<br.*?>/gi       <br />
  var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi       <br />
  var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi       <br />
  post = post.replace(re4,'')       <br />
  post = post.replace(re3,'<br /> ').split(re2)       <br />
  for(var i=0; i<post.length; i++){       <br />
   post[i] = post[i].replace(re,'');       <br />
  }       <br />
var post2 = new Array();       <br />
for(var i in post) {       <br />
//if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);       <br />
if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;       <br />
}       <br />
var s = "";       <br />
var indentBlank = "";       <br />
for(var i=0;i<indent;i++){       <br />
indentBlank += " ";       <br />
}       <br />
if(post2.join('<br/>').split(' ').length < max-1 ){       <br />
  s = post2.join(indentBlank +' <br/>');       <br />
} else {       <br />
var i = 0;       <br />
while(s.split(' ').length < max){       <br />
  s += indentBlank + ' ' + post2[i]+'<br/>';       <br />
  i++;       <br />
}       <br />
}   <br />
return s;       <br />
}       <br />
function createSummaryAndThumb(pID){       <br />
var div = document.getElementById(pID);       <br />
var content = div.innerHTML;       <br />
if (//.test(content)) {       <br />
div.innerHTML = getSummaryLikeWP(pID);       <br />
div.style.display = "block";       <br />
}       <br />
else {       <br />
var imgtag = "";       <br />
var img = div.getElementsByTagName("img");       <br />
var summ = summary_noimg;       <br />
if(img.length>=1) {       <br />
if(thumbnail_mode == "float") {       <br />
  imgtag = '<span class="thumbnailimg"><img src="'+img[0].src+'" /></span>';       <br />
  summ = summary_img;       <br />
} else {       <br />
  imgtag = '<div class="thumbnailimg" align="center"><img src="'+img[0].src+'" /></div>';       <br />
  summ = summary_img;       <br />
}       <br />
}       <br />
var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';       <br />
div.innerHTML = summary;       <br />
div.style.display = "block";       <br />
}       <br />
}       <br />
//]]>       <br />
</script><!-- Fim JavaScript Posts Resumidos—></blockquote>Clique em “visualizar”  e se estiver tudo correto, clique em “salvar modelo”

Como colocar o hack leia mais com imagens nos modelos do Blogger ( designer de modelo)

Em 2010 ensinei como colocar o hack leia mais automático e com imagens nos templates antigos do Blogger e nos personalizados por nós usuário...

Continue Lendo >>

14:28

Como ver antigos templates do seu blog

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIeD3fJc4CePdcYxvSCxgcqtpl4JGrIHD8ne-AXub2FBCUKG9MiimSvn4rb9hYfALGPWd3SXf7U8yDZsl2wtOMFMbkpB_IWQJmaWbhp7_vleftrnl38yj1ILTjx421VdjfZ0-sWzQf2fBg/s1600/tunel-do-tempo1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIeD3fJc4CePdcYxvSCxgcqtpl4JGrIHD8ne-AXub2FBCUKG9MiimSvn4rb9hYfALGPWd3SXf7U8yDZsl2wtOMFMbkpB_IWQJmaWbhp7_vleftrnl38yj1ILTjx421VdjfZ0-sWzQf2fBg/s320/tunel-do-tempo1.jpg" width="320" /></a></div>
<br />
Ontem a <a href="https://plus.google.com/100442449732308518941" target="_blank">Priscila</a> me perguntou se era possível ver os antigos templates do Dicas Blogger. Eu disse que não sabia, mas fui me socorrer com o São Google e acabei encontrando um site que faz uma divertida viagem no tempo. Trata-se do <a href="http://www.archive.org/web/web.php" target="_blank">Way Back Machine</a>, uma espécie de museu virtual que mostra o visual de sites desde 1996!  Foi engraçado rever os antigos templates do DB :)<br />
<br />
Para relembrar sites que você gosta e ver os antigos templates do seu blog, digite o endereço na caixa assinalada na imagem abaixo e clique em "take me back"<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxHG837iuEM7jivMH6Fl5GJ6nkFZE9IbtMX-vT3Zyta21GSQpA5JPPIw0OAj2gcRC7aUiwJ_TD_YRnxLqFhqE4Hr_nh4yYUnjaAwPpVSCH0m9A8pRgXU5-i7AdmvsEOhWEgPwvH3d38c7O/s1600/way-back-machine.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxHG837iuEM7jivMH6Fl5GJ6nkFZE9IbtMX-vT3Zyta21GSQpA5JPPIw0OAj2gcRC7aUiwJ_TD_YRnxLqFhqE4Hr_nh4yYUnjaAwPpVSCH0m9A8pRgXU5-i7AdmvsEOhWEgPwvH3d38c7O/s1600/way-back-machine.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
Aparecerá um calendário com anos e meses. Escolha o ano e o mês que deseja ver.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV4mZjYFGIwV6QsIvfniXTLtpEmKuyEOzIYvVokAF-Pyv0aZDd0BUTfVDq7mGV99M0QNC0b_Ev5i_-YEizUHWW115Pm9Umf1qWvppaX4zMV4w252AmNPTP1bbf6w1LRM8_86549Y8P9wtt/s1600/way-back-machine-calendar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV4mZjYFGIwV6QsIvfniXTLtpEmKuyEOzIYvVokAF-Pyv0aZDd0BUTfVDq7mGV99M0QNC0b_Ev5i_-YEizUHWW115Pm9Umf1qWvppaX4zMV4w252AmNPTP1bbf6w1LRM8_86549Y8P9wtt/s1600/way-back-machine-calendar.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
Depois que aparecer o primeiro modelo, é só ir clicando na setinha azul (imagem abaixo) para ir vendo os templates posteriores. No exemplo abaixo, temos o template do Dicas Blogger em 2008, feito pelo Paulo Estevão do <a href="http://www.codigosblog.com.br/" target="_blank">Códigos Blog</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeLgcK4sdmQH79UupupTSSFfSnMygkKmU-R7MpTXELUCV5FzDLqXnGoTC18DyD3APZS7sZ4s0aRAwXtk1Wr5qtrTQYCng6cFpK6ev80ifCp5-zd2OdkOOevB4882QbdpJDdnb-81sjguR5/s1600/template-2008.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeLgcK4sdmQH79UupupTSSFfSnMygkKmU-R7MpTXELUCV5FzDLqXnGoTC18DyD3APZS7sZ4s0aRAwXtk1Wr5qtrTQYCng6cFpK6ev80ifCp5-zd2OdkOOevB4882QbdpJDdnb-81sjguR5/s1600/template-2008.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
<br />
<div style="text-align: justify;">
Para blogs que mudaram de domínio, é preciso digitar o endereço com o "blogspot.com" para conseguir ver os templates mais antigos. Exemplo: <a href="http://web.archive.org/web/20080527140031/http://dicasblogger.blogspot.com/" target="_blank">http://web.archive.org/web/20080527140031/http://dicasblogger.blogspot.com/ </a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br />
<b>Fonte:</b> <a href="http://tecnologia.uol.com.br/ultnot/2009/09/02/ult4213u849.jhtm" target="_blank">Uol Tecnologia </a></div>
</div>

Como ver antigos templates do seu blog

Ontem a Priscila me perguntou se era possível ver os antigos templates do Dicas Blogger. Eu disse que não sabia, mas fui me socorrer com...

Continue Lendo >>

19:30

Como configurar o Analytics nos templates de visualizações dinâmicas e layout do Blogger

<div style="text-align: justify;">
Os templates de visualizações dinâmicas são modernos, clean e se tornaram uma nova aposta para quem gosta de novidades. Tanto que alguns usuários do Blogger gostaram e já a aplicaram em seus blogs. Mas junto com a novidade veio a questão: se o html está fechado, como posso configurar o Google Analytics?</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Mesmo que a nova interface do Blogger não tenha sido opcional, o que não agradou muitos blogueiros, no entanto, ela trouxe algumas vantagens. Uma delas é a maneira fácil e prática de configurar o Google Analytics nos templates de visualizações dinâmicas e layout do Blogger, não sendo necessário instalar manualmente o código no html do template. O que resolve o problema e possibilita a configuração da ferramenta nos templates de visualizações dinâmicas.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Posts relacionados:</div>
<a href="http://www.dicasblogger.com.br/2012/05/usar-template-visualizacao-dinamica.html">Como usar os templates de visualizações dinâmicas</a><br />
<a href="http://www.dicasblogger.com.br/2012/01/contador-de-usuarios-online-do.html">Contador de usuários online do Analytics</a><br />
<a href="http://www.dicasblogger.com.br/2010/02/como-usar-o-google-analytics.html">Como usar o Google Analytics – funções básicas</a><br />
<div>
<br />
<div style="text-align: justify;">
A primeira coisa que deve ser feita por quem já possui a conta no Google Analytics e tem o blog configurado é identificar o código de acompanhamento gerado para o seu blog.</div>
<br />
Para isso, acesse a sua conta no Google Analytics e selecione o blog que você fará a configuração, conforme indicado na figura abaixo:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbBzRSF8SM-Bq2hySaNf3jYjRBTAdztCGmrgZSNV6XQuUoH865v1WS30ce3MDl-U-3-SFI0LAv9lD44flHbF7FXXjuaw33Vd0WFzO_t_YycLdoSrU46vBzyn1TuOt2tTugPPU_HCL9wy8/s1600/Analytics+Todas+as+Contas+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbBzRSF8SM-Bq2hySaNf3jYjRBTAdztCGmrgZSNV6XQuUoH865v1WS30ce3MDl-U-3-SFI0LAv9lD44flHbF7FXXjuaw33Vd0WFzO_t_YycLdoSrU46vBzyn1TuOt2tTugPPU_HCL9wy8/s400/Analytics+Todas+as+Contas+1.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<span id="goog_129997965"></span><span id="goog_129997966"></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
Na página que abrir, clique na opção "Administrador":<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4VqBXtrsD-F_5khL_29SJTrraFd4XRMN36pAafIpcoc8pgwOq7WigGLNeDbKn_9tWsDz5auI4sDBlvOiZu_kRyPV7LR0SXr8q3BRYCqNlVLi82P2reoFUOXz-Aj4OC3rxG0gqnazGgag/s1600/Analytics+Administrador1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4VqBXtrsD-F_5khL_29SJTrraFd4XRMN36pAafIpcoc8pgwOq7WigGLNeDbKn_9tWsDz5auI4sDBlvOiZu_kRyPV7LR0SXr8q3BRYCqNlVLi82P2reoFUOXz-Aj4OC3rxG0gqnazGgag/s400/Analytics+Administrador1.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
Em seguida, clique em "Código de acompanhamento" e copie o ID (um código com letras e números). Esse código é a identidade do seu blog no Google Analytics. É por meio dele que a ferramenta irá identificar o seu blog e receber os dados de visitação.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiDYfq4Lm8kn9o2-J6CoLmbiScGOmPP2aMvDTx8tgD6BCF2HsRpd4B27R5bSMfv6DQzCYDDGcZKlZmnZkRAfDqx015KY5VYK7gZ0bt8Ng19evYmeJaj5hP6dJPH2u8uIm-w4LDiXfglGs/s1600/Analytics+ID+Acompanhamento1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiDYfq4Lm8kn9o2-J6CoLmbiScGOmPP2aMvDTx8tgD6BCF2HsRpd4B27R5bSMfv6DQzCYDDGcZKlZmnZkRAfDqx015KY5VYK7gZ0bt8Ng19evYmeJaj5hP6dJPH2u8uIm-w4LDiXfglGs/s400/Analytics+ID+Acompanhamento1.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div style="text-align: justify;">
Agora vamos para a etapa mais simples. Acesse o painel de controle do seu blog no Blogger e clique em "configurações", depois em "Outro". Ao final da tela você irá localizar o "ID de propriedade da web do Google Analytics". No espaço em branco insira o ID de acompanhamento gerado no Google Analytics. Salve as configurações e pronto. Você inseriu com facilidade o código.</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWHOf4sJ58T4JGOrymOf9S-dZ0sKfNc2kaCdcPmv6QJRie-75LskF343goOh1hB4sZN-dOzdOmeZWkTZ8aNBPGCYzFFTjfDnZfbSALXQWL_SC1S_Go7cnpvSqXFlAfZApoJ1_si6A0eLI/s1600/Analytics+Configura%25C3%25A7%25C3%25A3o+Blogger1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="275" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWHOf4sJ58T4JGOrymOf9S-dZ0sKfNc2kaCdcPmv6QJRie-75LskF343goOh1hB4sZN-dOzdOmeZWkTZ8aNBPGCYzFFTjfDnZfbSALXQWL_SC1S_Go7cnpvSqXFlAfZApoJ1_si6A0eLI/s400/Analytics+Configura%25C3%25A7%25C3%25A3o+Blogger1.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div style="text-align: justify;">
Para ter certeza que a configuração foi feita com sucesso. Volte no Google Analytics, acesse "Administrador", em seguida clique em "Código de Acompanhamento" e verifique o "Status de acompanhamento". Se aparecer a informação "Recebendo dados", conforme figura abaixo, você realizou a configuração com sucesso.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBzo_ml82cCbBFf8NSe5SD6_NuN_Z5DxvvNpbvlfW1QKlohGseWUYOQoHDjtLms7ITs5GqvfqzOenNlbZK_SShR70QXvg6XwF_lBOIj5VEFlHnusbcELMYotRSV_29Fsce4rqdvebTR8g/s1600/Analytics+Configurado+Corretamente.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="112" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBzo_ml82cCbBFf8NSe5SD6_NuN_Z5DxvvNpbvlfW1QKlohGseWUYOQoHDjtLms7ITs5GqvfqzOenNlbZK_SShR70QXvg6XwF_lBOIj5VEFlHnusbcELMYotRSV_29Fsce4rqdvebTR8g/s400/Analytics+Configurado+Corretamente.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div style="text-align: justify;">
Contudo, se ao verificar o "Status de acompanhamento" aparecer a informação "Acompanhamento não instalado", conforme figura abaixo, repita as etapas acima porque alguma coisa foi feita de maneira errada.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ORlxIn63iHSMlOQH2ntJvgyY-FKm8-HfYShCPyhgiMPZR9oZ5UrHXoPcOqXrQuFWMdntTNdG9R3WHdjhJci9zYGS4wuvjdh0j3qVsHR-znJg9mFRkoueif_SI8958fAUhwUXFQqYieI/s1600/Analytics+Configurado+Incorretamente1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ORlxIn63iHSMlOQH2ntJvgyY-FKm8-HfYShCPyhgiMPZR9oZ5UrHXoPcOqXrQuFWMdntTNdG9R3WHdjhJci9zYGS4wuvjdh0j3qVsHR-znJg9mFRkoueif_SI8958fAUhwUXFQqYieI/s400/Analytics+Configurado+Incorretamente1.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div style="text-align: justify;">
Mas atenção, esse meio de configuração não funciona para os templates personalizados. Fizemos alguns testes e esse tipo de configuração só funcionou para os templates padrão do Blogger e de visualizações dinâmicas. Para os personalizados continua valendo a configuração com inserção manual do código no html do blog.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
E ai, o que você achou desta opção na nova interface?</div>
</div>

Como configurar o Analytics nos templates de visualizações dinâmicas e layout do Blogger

Os templates de visualizações dinâmicas são modernos, clean e se tornaram uma nova aposta para quem gosta de novidades. Tanto que alguns us...

Continue Lendo >>

10:00

Como usar os templates de visualizações dinâmicas

<div style="text-align: justify;">
Um dos recursos mais legais dessa nova fase do Blogger, são os <a href="http://www.dicasblogger.com.br/2011/04/novas-opcoes-de-visualizacoes.html" target="_blank">templates de visualizações dinâmicas</a>. Eles são feitos usando AJAX, HTML5 e CSS , que são a tendência atual para design de páginas web.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0AOVSF4-j2KoakE40b8Yg87hasUBzY_EIsp7Scg7y5CgXiiUxcpVdHf-c9vmfKOx_okx7oBpQyIK5cnzaRBXc5EXIRcvLrVe7ym59CMM2ZPKcpjn0UuzoNghr40QPUfUs08nZ_gcP_Vlk/s1600/visualizacoes-dinamicas.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Templates de visualização dinâmica" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0AOVSF4-j2KoakE40b8Yg87hasUBzY_EIsp7Scg7y5CgXiiUxcpVdHf-c9vmfKOx_okx7oBpQyIK5cnzaRBXc5EXIRcvLrVe7ym59CMM2ZPKcpjn0UuzoNghr40QPUfUs08nZ_gcP_Vlk/s1600/visualizacoes-dinamicas.png" title="Templates de visualização dinâmica" /></a></div>
<div style="text-align: justify;">
Qualquer blog do Blogger pode ser visto dinamicamente. Basta digitarmos "view," após o endereço do blog. Exemplo:<a href="http://www.dicasblogger.com.br/view/" target="_blank"> http://www.dicasblogger.com.br/view/</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Além disso, é possível usarmos um dos 7 modelos disponíveis em nossos blogs. Todos eles possuem um visual <i>clean</i>, moderno e arrojado.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
O modelo Magazine, por exemplo, confere um visual de site e o Snapshot fica muito bom em blogs de fotografias. Vejam um exemplo no <a href="http://www.templates.dicasblogger.com.br/?view=snapshot" target="_blank">DB Templates</a>:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMudpNxKIzR53pavgApBLb5W3nr5wrZ9hTlIwO01o0Vf_J__1jLJolXYORgomypc66prCRRPM6aVGvjmP6w0y1tpT5qLa4hpv2Y7qAXLpWRLXs9Bg62VwiKtx-JWm5BCRO86uSLoGlWREz/s1600/snapshot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Snapshot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMudpNxKIzR53pavgApBLb5W3nr5wrZ9hTlIwO01o0Vf_J__1jLJolXYORgomypc66prCRRPM6aVGvjmP6w0y1tpT5qLa4hpv2Y7qAXLpWRLXs9Bg62VwiKtx-JWm5BCRO86uSLoGlWREz/s1600/snapshot.png" title="Snapshot" /></a></div>
<div style="color: #e69138;">
<b>Como colocar um template de visualização dinâmica no blog</b></div>
<ol>
<li>Entre em "modelo" e clique em "personalizar"</li>
<li>Escolha um dos modelos de visualização dinâmica</li>
<li>Clique em "avançado" para editar algumas cores ( não tem muitas opções)</li>
<li>Ao término, clique no botão "aplicar ao blog"</li>
</ol>
<div style="color: #e69138;">
<b>Como colocar gadgets na barra lateral</b><br />
<br />
<div style="color: #444444;">
<div style="text-align: justify;">
Nem todos os gadgets estão disponíveis para as visualizações dinâmicas. 
Nesses templates, temos apenas a opção de uma barra lateral que aparece 
quando passamos o mouse sobre ela. Vejam exemplo na imagem abaixo.</div>
</div>
<div style="color: #444444;">
<br /></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigjzT242tTgwbjGjIQ6aStuwUi3c8Gec48RnxmuCLGZgXoXj6tWQH1f6mwi2twXv9cLx7zd7xzQbJfGkxQ_au_q6sYPp22lO4oBebplHV2hfrOhDhlIlfglXaEatgYOdjuFORRXiMY-arM/s1600/barra-lateral.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Gadgets Barra Lateral" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigjzT242tTgwbjGjIQ6aStuwUi3c8Gec48RnxmuCLGZgXoXj6tWQH1f6mwi2twXv9cLx7zd7xzQbJfGkxQ_au_q6sYPp22lO4oBebplHV2hfrOhDhlIlfglXaEatgYOdjuFORRXiMY-arM/s1600/barra-lateral.png" title="Gadgets Barra Lateral" /></a></div>
<br />
<br />
<div style="text-align: justify;">
<b>Para adicionar gadgets a barra lateral</b>, entre em "layout" e clique em "adicionar gadget". Os gadgets disponíveis aparecerão com a mensagem "disponível para visualizações dinâmicas"</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVt-we9r7ax2vy4XLg0JVQZQIN8pop7slOA9bPY98UjpMCpwr69BBLEhyK1V0e_h7UUApei2KzVoBb65xf3B2tgb2nG4xfCCVx6E0dKBt6kRI0XXNNqI4tvegCdNaSH-PPhMRQwenfwu5r/s1600/gadgets.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Gadgets" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVt-we9r7ax2vy4XLg0JVQZQIN8pop7slOA9bPY98UjpMCpwr69BBLEhyK1V0e_h7UUApei2KzVoBb65xf3B2tgb2nG4xfCCVx6E0dKBt6kRI0XXNNqI4tvegCdNaSH-PPhMRQwenfwu5r/s1600/gadgets.png" title="Gadgets" /></a></div>
<div style="text-align: justify;">
Estou usando templates de visualizações dinâmicas em 3 dos meus blogs e notei que ao mudar de um template personalizado, para um dinâmico, todos os gadgets foram mantidos, mas - obviamente - nem todos funcionam. O único problema que encontrei foi referente ao serviços de estatísticas. O código do Google Analytics, por exemplo, parou de funcionar e, infelizmente, não foi possível inserir via HTML pois essa função encontra-se desabilitada nos templates de visualização dinâmica.<br />
<br />
<b>Atualização:</b> A Priscila descobriu como usar o Analytics nos templates de visualizações dinâmica. <a href="http://www.dicasblogger.com.br/2012/05/configurar-analytics-nos-templates-de.html" target="_blank">Clique aqui</a> para ler o post. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Apesar de lindos, esses modelos não são recomendados para blogs que necessitam de recursos mais avançados. Pelo que pude notar, o Adsense pode ser inserido apenas através do painel do Blogger, na guia "ganhos".<br />
<br />
Para desfazer o uso desses templates, basta escolher um dos modelos padrão ou enviar um modelo personalizado.<br />
<ul>
<li><a href="http://www.dicasblogger.com.br/2012/05/como-mudar-o-template-na-nova-interface.html" target="_blank">Como mudar o template no novo Blogger </a></li>
</ul>
</div>
<br />

Como usar os templates de visualizações dinâmicas

Um dos recursos mais legais dessa nova fase do Blogger, são os templates de visualizações dinâmicas . Eles são feitos usando AJAX, HTML5 e ...

Continue Lendo >>

10:58