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

Como mudar o template no novo Blogger

Para mudar o tema (modelo, template) na nova interface do Blogger, devemos acessar a guia "modelo" na coluna lateral esquerda no painel de configurações do blog.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBSfOtVUOjB_085xdvxB63zdKTXOIlYvSU1ZkkvtDKA1bre1rYuMqgPLkud3c1sR4t4gud3KhxeUyz3eYsOTS_3P142ILonMdZCbMwXyibq7f9nAv-nalpnhus0ExHVxEnSZO_shjyuM6T/s1600/novoblogger-template.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBSfOtVUOjB_085xdvxB63zdKTXOIlYvSU1ZkkvtDKA1bre1rYuMqgPLkud3c1sR4t4gud3KhxeUyz3eYsOTS_3P142ILonMdZCbMwXyibq7f9nAv-nalpnhus0ExHVxEnSZO_shjyuM6T/s1600/novoblogger-template.png" /></a></div>
Clicando no botão "personalizar", iremos acessar os templates que são disponibilizados pelo próprio Blogger, chamados de Designer do Modelo.<br />
Para aprender a criar ou editar esses modelos, acesse este post:<br />
<ul>
<li><a href="http://www.dicasblogger.com.br/2010/03/como-criar-um-template-para-blogger.html" target="_blank">Como criar um template para Blogger/Blogspot</a></li>
</ul>
Clicando em "editar HTML", temos a opção de editar o modelo que está em uso. <br />
<br />
E para fazer o <b>backup do template</b> ou <b>enviar um template personalizado</b>, clicamos no botão <b>Fazer  backup/restaurar</b>.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE0zlkNoAcD7o12UkKzUgqqxipCCUtajAjOMd64IFmpb0tj_vPNd7KybAzXQtoZobxO_t2Q1RrIo-Xi5YHotec1azKw_4sQGKPW6rV5oLKYAAaTpNzBZuMLhPLZ0VJ9p5odEXM-F60QBLg/s1600/backup-template.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE0zlkNoAcD7o12UkKzUgqqxipCCUtajAjOMd64IFmpb0tj_vPNd7KybAzXQtoZobxO_t2Q1RrIo-Xi5YHotec1azKw_4sQGKPW6rV5oLKYAAaTpNzBZuMLhPLZ0VJ9p5odEXM-F60QBLg/s1600/backup-template.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEq6mageZ1vFpy-sp_HKE__AYhdzZk0kvSkMCxIVbty0fMjnpNS90tZxJTFoBkf1V34jo-MfDN_h_ukKWObMZQ57oWMSnRA2qp_8sfB9Cy2acncraM335nt4i3z7xEhae30-HXegUfD6Eu/s1600/template-novo-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEq6mageZ1vFpy-sp_HKE__AYhdzZk0kvSkMCxIVbty0fMjnpNS90tZxJTFoBkf1V34jo-MfDN_h_ukKWObMZQ57oWMSnRA2qp_8sfB9Cy2acncraM335nt4i3z7xEhae30-HXegUfD6Eu/s1600/template-novo-blogger.png" /></a></div>
Post de referência (antiga interface): <a href="http://www.dicasblogger.com.br/2010/09/mudar-template-blogger-blogspot.html" target="_blank">Como mudar o template do Blogger</a><br />
<br />
<b>Onde baixar templates personalizados:</b><br />
<a href="http://btemplates.com/" target="_blank">bTemplates</a><br />
<a href="http://www.soratemplates.com/" target="_blank">Sora Templates </a><b></b><br />
<a href="http://www.dicasblogger.com.br/2010/02/templates-para-blogger-blogspot.html" target="_blank">Templates para Blogger</a><b><br /></b><br />
<br />

Como mudar o template no novo Blogger

Para mudar o tema (modelo, template) na nova interface do Blogger, devemos acessar a guia "modelo" na coluna lateral esquerda no p...

Continue Lendo >>

10:30

Como hospedar javascript no Blogger

<img align="left" alt="" border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf3Hh7TJRKi62mcLbdmN9lYlVuIx_zZAQS5QP1G5rXVgxTfPPyrmFGA9np9XR63YMLm-vuevTG8UMlWw5NmJ19yvYBhU1L5kT6N3MSbVWaFGZBwI2afe8zgTVIq_5WbZJS8O1aUVH4GguU/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: left; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="153" />Depois de ter publicado dois posts com modelos para apresentação de slides, usando JQuery, resolvi pesquisar uma forma eficaz de hospedar os arquivos em javascript dentro do template, evitando assim que vocês tenham que hospedá-los externamente.<br />
<blockquote>
<strong></strong><br />
<strong>JavaScript </strong>é uma <a href="http://pt.wikipedia.org/wiki/Linguagem_de_script">linguagem de script</a> (…)Sua união com o <a href="http://pt.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a> é conhecida como <a href="http://pt.wikipedia.org/wiki/Dynamic_HTML">DHTML</a>. Usando o Javascript, é possível modificar dinamicamente os estilos dos elementos da página em <a href="http://pt.wikipedia.org/wiki/HTML">HTML</a>. <br />
<strong>Fonte:</strong> <a href="http://pt.wikipedia.org/wiki/JavaScript">Wikipedia</a></blockquote>
A maioria dos scripts que fazem maravilhas <strike>com leite moça</strike>, são do tipo JQuery<br />
<blockquote>
jQuery é um <a href="http://pt.wikipedia.org/wiki/Framework">framework</a> para ajudar os desenvolvedores a se concentrarem na lógica dos sistemas da <a href="http://pt.wikipedia.org/wiki/Web">web</a> e não nos problemas de incompatibilidade dos <a href="http://pt.wikipedia.org/wiki/Navegador">navegadores</a> atuais. Seu lema é: "Escrever menos e fazer mais".Uma função escrita em <a href="http://pt.wikipedia.org/wiki/Javascript">Javascript</a> puro tem uma diminuição notável quando reescrita com este framework <strong>Fonte:</strong> <a href="http://pt.wikipedia.org/wiki/JQuery">Wikipedia</a></blockquote>
Apesar de eu ter dito neste post - <a href="http://www.dicasblogger.com.br/2010/10/slide-show-no-blogger.html">Slideshow no Blogger</a> – que não seria preciso hospedar nada, confesso que me enganei. Os scripts realmente já estão hospedados, mas no host de quem os criou/publicou/divulgou. Se a url (endereço do link) parar de funcionar, podemos dizer adeus àquela linda apresentação de slides.<br />
A url do script estava bem escondidinha dentro do código:<br />
<blockquote>
<script src=' <strong><span style="color: red;">http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js</span></strong> ' type='text/javascript'/></blockquote>
A parte assinalada em vermelho, corresponde à url. Neste caso, o script está hospedado no Google Sites, se não me engano. Se o dono apagar o arquivo ou mudar a url, ficamos na mão, ou seja, o slide irá parar de funcionar.<br />
A boa notícia é que temos duas formas de resolver isso:<br />
<strong>1. hospedar o arquivo em nosso próprio host</strong><br />
Ótimo, eu pago um host, outros blogueiros também pagam, mas a maioria nem sabe o que é isso.  Explicando a grosso modo, host é o mesmo que servidor. Blogs que usam o Wordpress.org, por exemplo, precisam de um host para funcionar. Nós usamos os servidores do Google, mas, como nem tudo é perfeito, não temos onde fazer o armazenamento de arquivos, tais como documentos, scripts e etc.<br />
<strong>2. hospedar o arquivo dentro do template</strong><br />
Como assim? Pois é, eu também não sabia que isso era possível, mas graças à mestra <strong>Ariane </strong>que fez isso no <a href="http://templatesparanovoblogger.blogspot.com/2010/10/template-mundo-verde.html">Template Mundo Verde</a>, descobri uma forma super prática de hospedar arquivos em javascript no Blogger.<br />
Agora vamos ao que interessa. Para hospedar um script no Blogger, é preciso fazer uma pequena alteração no código original. Mas é bom lembrar que dependendo do tamanho do arquivo, seu blog pode ficar mais lento. <br />
Vamos pegar como exemplo um pedacinho do código usado nos slides:<br />
<blockquote>
<script src='<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js">http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js'</a> type='text/javascript'/><br />
<script type='text/javascript'><![CDATA[//><!--      <br />/**       <br />* hoverIntent r5 // 2007.03.27 // jQuery 1.1.2+       <br />* <<a href="http://cherne.net/brian/resources/jquery.hoverIntent.html">http://cherne.net/brian/resources/jquery.hoverIntent.html</a>>       </blockquote>
Observem que o primeiro link termina com a extensão <strong>.js.</strong> O que temos aí? Acertou quem pensou “javascript”! Clique sobre o link . Irá abrir um arquivo em texto enorme. Deixe-o aberto, pois daqui a pouco será necessário copiar todo o conteúdo.<br />
Agora, substitua a primeira linha do código acima por:<br />
<blockquote>
<script type='text/javascript'>      <br />//<![CDATA[ <br />
<strong><span style="color: red;">COLE AQUI O SCRIPT</span></strong> <br />
//]]><br />
</script></blockquote>
Cole todo o conteúdo do arquivo .js no local que assinalei de vermelho.<br />
O local onde o arquivo .js vai estar, irá variar. Então, faça uma busca usando o comando <strong>Ctrl+F</strong> do teclado.<br />
<img alt="crtlF" border="0" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIhC48oTdr1MZtdY9niqUx8Ib7eAGoXIlVc_RO19KrYrZYn7Hqx69g5z6erdYP2S7rleipjPMTaFWD4ZxPvc_ov5U8RsBkw8OD4IVk3DKcMt055r-LmrkFgmhUTgMs1bfC2tD33oWs8O9c/?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="Crtl+F" width="532" /><br />
Agora, sempre que você se deparar por aí com um recurso fantástico usando Javascript, mas não possui um serviço para hospedar o arquivo, utilize essa tática ;)<br />
Fiz testes em vários templates e com vários scripts diferentes e em todos funcionou.

Como hospedar javascript no Blogger

Depois de ter publicado dois posts com modelos para apresentação de slides, usando JQuery, resolvi pesquisar uma forma eficaz de hospedar os...

Continue Lendo >>

19:21

CSS3 - efeito gradiente/degradê

<div align="left">
<em>Artigo de Marco Damaceno –<a href="http://www.dicasbrowser.com/">Dicas Browser</a> – @<a href="http://twitter.com/dicasbrowser">dicasbrowser</a></em></div>
Algo que todo blogueiro deve se preocupar é se seu blog está bem estruturado. Isso é muito importante! Depois de ter este blog estruturado, ou seja, organizado, é hora de partir para os enfeites para dar maior beleza à obra.<br />
Vou falar sobre como usar o <strong>efeito gradiente</strong> em seu layout de uma forma bem fácil que você vai passar a usar em seu blog.<br />
Primeiramente, é preciso saber o que significa o efeito gradiente ou degradê:<br />
<blockquote>
"Degradê ou dégradé é uma sequencia de tons contínuos, podendo ser limitado ou ilimitado. Significa o mesmo que gradiente"</blockquote>
Fonte: <a href="http://pt.wikipedia.org/wiki/Degrad%C3%AA" target="_blank">Wikipedia</a><br />
Veja um exemplo de degradê na imagem abaixo:<br />
<div style="height: 0.01%; width: 574px;">
<img src="http://lh3.ggpht.com/_0lCpg_jMUQs/TMLfn0J9pAI/AAAAAAAABn8/PqWEdFoLbig/degrade.jpg" style="display: inline;" /></div>
Repare que a transição do vermelho para o azul é feita de forma suave sem um limite definido para ambas as cores. Isso é um efeito gradiente ou degradê.<br />
Hoje, com o suporte ao CSS3 fornecido pelos navegadores mais atuais, esse tipo de efeito se torna cada vez mais comum na internet. Vejamos os principais navegadores que suportam o efeito gradiente:<br />
<strong>Firefox 3.6</strong> em diante<br /><strong>Google Chrome<br />Safari<br />Internet Explorer 7</strong> em diante<br />
Cada um desses navegadores utilizam códigos diferentes para mostrar o efeito gradiente. Há três formas de se obter o efeito: vertical, horizontal e radial. Vejamos a estrutura básica de cada um em seus respectivos navegadores:<br />
<strong>Firefox</strong><br />
<blockquote>
background: -moz-[<strong><span style="color: red;">linear ou radial</span></strong>]-gradient([<strong><span style="color: red;">posição</span></strong>], [<span style="color: red;"><strong>cor inicial</strong></span>], [<strong><span style="color: red;">cor final</span></strong>])<br />
background: -moz-linear-gradient (<span style="color: #333333;">top</span>, <strong><span style="color: red;">#CF0000</span></strong> , <strong><span style="color: red;">#0000FF</span></strong>) /*-- efeito vertical --*/<br />background: -moz-linear-gradient (<span style="color: #333333;">left</span>, <strong><span style="color: red;">#CF0000</span></strong> , <strong><span style="color: red;">#0000FF</span></strong>) /*-- efeito horizontal --*/<br />background: -moz-radial-gradient (<strong><span style="color: red;">70%</span></strong> <strong><span style="color: red;">50%</span></strong>, circle <strong><span style="color: red;">[atributo de tamanho]</span></strong>, <span style="color: red;"><strong>#CF0000</strong><span style="color: #333333;">,</span><strong> #0000FF</strong></span>) /*-- efeito radial ou central --*/</blockquote>
Se não for determinada uma posição para o efeito, será usado o padrão como de cima para baixo para o vertical, da esquerda para a direita para o horizontal e central para o radial.<br />
No efeito gradiente radial para o Firefox, é possível determinar onde estará o foco. Para isso, basta inserir dois valores em % no lugar da posição. O primeiro servirá para a posição horizontal e o segundo para a vertical. Veja o exemplo:<br />
<blockquote>
background: -moz-radial-gradient(<strong><span style="color: red;">50% 50%</span></strong>, circle <strong><span style="color: red;">closest-side</span></strong> <strong><span style="color: red;">#CF0000</span></strong>, <strong><span style="color: red;">#0000FF</span></strong>) /*-- aparece no centro --*/</blockquote>
Todos os atributos para se utilizar efeito gradiente no Firefox se encontram no <a href="https://developer.mozilla.org/en/CSS/-moz-radial-gradient" target="_blank">Mozilla Developer Center</a><br />
<strong>Google Chrome e Safari</strong><br />
<blockquote>
background: -webkit-gradient ([<strong><span style="color: red;">linear ou radial</span></strong>], [<strong><span style="color: red;">posição inicial</span></strong>], [<strong><span style="color: red;">posição final</span></strong>], color-stop([<strong><span style="color: red;">espaço em %</span></strong>], [<strong><span style="color: red;">cor inicial</span></strong>]), color-stop([<strong><span style="color: red;">espaço em %</span></strong>], [<strong><span style="color: red;">cor final</span></strong>]))<br />
background: -webkit-gradient (<span style="color: #333333;">left top</span>, <span style="color: #333333;">left bottom</span>, color-stop(<strong><span style="color: red;">80%</span></strong>, <strong><span style="color: red;">#CF0000</span></strong>), color-stop(20%, <strong><span style="color: red;">#0000FF</span></strong>)) /*-- efeito vertical --*/<br />background: -webkit-gradient (<span style="color: #333333;">left top</span>, <span style="color: #333333;">right top</span>, color-stop(<strong><span style="color: red;">80%</span></strong>, <strong><span style="color: red;">#CF0000</span></strong>), color-stop(<strong><span style="color: red;">20%</span></strong>, <strong><span style="color: red;">#0000FF</span></strong>)) /*-- efeito horizontal --*/</blockquote>
O degradê de navegadores webkit nos faz usar um pouco de matemática para a sua aplicação. Como pode ver, nesse nosso exemplo a cor <span style="color: red;">#CF0000</span> (vermelho) possui <span style="color: red;">80%</span> de espaço dentro do elemento em que está. O <span style="color: blue;">#0000FF</span> tem <span style="color: blue;">20%</span>. O espaço da transição entre uma cor e outra, ou seja, do degradê, será a diferença entre <span style="color: red;">80%</span> e <span style="color: blue;">20%</span> que é <strong>60%</strong>. Logo, o tamanho do espaço do degradê será de <strong>60%</strong>.<br />
Pegamos um outro exemplo, observe o código abaixo:<br />
<blockquote>
background: -webkit-gradient(linear, left top, left bottom, color-stop(<span style="color: red;">50%</span>,<span style="color: red;">#cf0000</span>), color-stop(<span style="color: blue;">90%</span>,<span style="color: blue;">#0000ff</span>))</blockquote>
Nesse exemplo, a cor <span style="color: red;">#CF0000</span> (vermelho) ocupa <span style="color: red;">50%</span> do espaço. Já a <span style="color: blue;">#0000FF</span> (azul) terá 100% (tamanho total do elemento) - <span style="color: blue;">90%</span> de espaço que dá um total de <strong>10%</strong>. Os <strong>40%</strong> restantes ficam para o espaço de transição entre as cores.  <br />
Para o efeito radial do degradê para navegadores webkit, o código é um pouco mais complicado. Vejamos a estrutura básica:<br />
<blockquote>
background: -webkit-gradient(radial, [<strong><span style="color: red;">posição x cor1</span></strong>] [<strong><span style="color: red;">posição y cor1</span></strong>], [<strong><span style="color: red;">intensidade cor1</span></strong>], [<strong><span style="color: red;">posição x cor2</span></strong>] [<strong><span style="color: red;">posição y cor2</span></strong>], [<strong><span style="color: red;">intensidade cor2</span></strong>], from([<strong><span style="color: red;">cor1</span></strong>]), to([<strong><span style="color: red;">cor2</span></strong>]))</blockquote>
Para se formar um círculo perfeito é preciso que x de cor1 seja igual ao x de cor2 e y de cor1 seja igual ao y de cor2. Esses valores devem ser dados em %. Sendo assim, x determina a posição horizontal do foco e y determina a posição vertical.<br />
O terceiro valor se refere a intensidade do degradê. Quanto mais alto for o valor, maior será o campo de transição entre uma cor e outra.<br />
Veja como ficaria o código do efeito no exemplo abaixo:<br />
<blockquote>
background: -webkit-gradient(radial, <strong><span style="color: red;">70% 50%</span></strong>, <span style="color: red;"><strong>90</strong></span>, <span style="color: red;"><strong>70% 50%</strong></span>, <span style="color: red;"><strong>10</strong></span>, from(<strong><span style="color: red;">#CF0000</span></strong>), to(<strong><span style="color: red;">#0000FF</span></strong>));</blockquote>
<strong>Internet Explorer</strong><br />
O Internet Explorer sempre foi limitado em efeitos do CSS3, mas, mesmo assim, existe código para degradê destinado a ele. Vejamos a estrutura básica:<br />
<blockquote>
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='[<strong><span style="color: red;">cor inicial</span></strong>]', endColorstr='[<strong><span style="color: red;">cor final</span></strong>]', GradientType=<span style="color: #333333;">0</span>) para efeito vertical<br />filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='[<span style="color: red;"><strong>cor inicial</strong></span>]', endColorstr='[<strong><span style="color: red;">cor final</span></strong>]', GradientType=<span style="color: #333333;">1</span>) para efeito horizontal</blockquote>
Então, para o nosso exemplo, o código ficaria assim:<br />
<blockquote>
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='<strong><span style="color: red;">#CF0000</span></strong>', endColorstr='<strong><span style="color: red;">#0000FF</span></strong>', GradientType=0) /*-- degradê vertical --*/<br />filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='<strong><span style="color: red;">#CF0000</span></strong>', endColorstr='<strong><span style="color: red;">#0000FF</span></strong>', GradientType=1) /*-- degradê horizontal --*/</blockquote>
Infelizmente, o Intenet Explorer não enxerga gradiente radial como o Firefox e Google Chrome. Pode ser que o IE 9 acrescente mais código para obter este tipo de efeito em sua versão final.<br />
<strong>O efeito</strong><br />
Agora, veja todos os exemplos que foram dados. Somente o gradiente radial não poderá ser visto no Internet Explorer. Quem usa o Opera e outros navegadores sem suporte verá um fundo vermelho:<br />
Vertical<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVgecngZH2ZP1-cRnL5_xw3-o2ICahth7rHxLoyNH9IEUPZewcuhQ7NwaBW0tvXQgrKxgZTO2SSVtCmQtVHA6BbT7TfVzS_UeLZDIN4xl1EbWVJxW2DhXlwyKGinSZENFGknbBQeWaTgZc/s1600-h/vertical%5B4%5D.png"><img alt="vertical" border="0" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXI7KeSsBAwPpoNLlNHkaBSQF0LcqfUQq2CMJXwBSZKnaTmSdKxaEhmBLyxP32jUtFN8thdWuaMzgKW_nHGknXmP9DSnXytjqOTCXaMUAVCkDssm6mLHP69ynkc0n_DCCEkzbZAS3tkX3k/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="vertical" width="422" /></a><br />
<div id="box-vertical">
</div>
Horizontal<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf03yEhile0xyTqSMXSYA7VXrAqEddAW8fChyphenhyphenQldvmu9lbp2bHI-M3xysZteg4ialWdG2BbjztxvVH2PaPPXq7YdVp6vpM5tLgJoazafnyOeOLlON5phSx5IYnolMVHaurtvthaxFRr-qK/s1600-h/horizontal%5B4%5D.png"><img alt="horizontal" border="0" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvE2u8KIHc9Vc_stIwEt37OpjP2EXyUUmqtqOVacrJ06C_3gg0Z_-MpUlSaQt5lQsOfxN9EIG9tN1PvcsUs9V6Te1KsNK1xXHejhJCoFmMVywk5Ej-qq64o59pXjyWEcg9w7FWT0ZHiS_P/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="horizontal" width="417" /></a><br />
<div id="box-horizontal">
</div>
Radial<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZozM8ju4aTpFlGej7GarbetIBA0DcEJF2LEOPZA5elNt43ZzEitEdmb8n5DLRC0faCGpf6X7Py5hneZQkj79EYg_j00-8XIQfvQH6cfLhvuiLjj1Qo38v5rZ7LeveJ4emgq_dFbWE7pyZ/s1600-h/radial%5B4%5D.png"><img alt="radial" border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglNirFCKE_bt8QvHNhps9ZpWAyBP-5F3IXhRq138juv_tovbFqNNH-zY4t5FzWJgNbZOLar81kn6x2Iw6Fiqrqc3KYE0o420aqVPxdo3PBeYIf4RVUMfarF3rtMOhmq61D1P-PAsH-ZZRv/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="radial" width="414" /></a><br />
<div id="box-radial">
</div>
<strong>Como aplicar o efeito gradiente no blog</strong><br />
Para aplicar o efeito, é preciso entender que existem navegadores que ainda não tem suporte para esse efeito como, por exemplo, o Opera. Para contornar esse problema, usamos dois tipos de códigos para o background. Um servirá para os que suportam degradê e o outro não. Fica, então, assim:<br />
<blockquote>
background: #CF0000;<br />background: -moz-linear-gradient(top, <strong><span style="color: red;">#CF0000</span></strong> , <strong><span style="color: red;">#0000FF</span></strong>);<br />background: -webkit-gradient (left top, left bottom, color-stop(<strong><span style="color: red;">80%</span></strong>, <strong><span style="color: red;">#CF0000</span></strong>), color-stop(<strong><span style="color: red;">20%</span></strong>, <strong><span style="color: red;">#0000FF</span></strong>));<br />filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='<strong><span style="color: red;">#CF0000</span></strong>', endColorstr='<strong><span style="color: red;">#0000FF</span></strong>', GradientType=0);</blockquote>
Observe que há o código destinado ao Google Chrome, Safari, Firefox, Internet Explorer. Caso o navegador não suporte o efeito, ele vai usar o background da primeira linha.<br />
Para aplicar em seu blog, faça backup do layout antes de qualquer modificação. Depois, vá em Design > Designer do modelo > Avançado. No campo em branco cole o código abaixo mudando as cores que deseja para o seu blog:<br />
<blockquote>
#header-wrapper<br />    background: <strong><span style="color: red;">#CF0000</span></strong>;<br />    background: -moz-linear-gradient(top, <strong><span style="color: red;">#CF0000</span></strong> , <strong><span style="color: red;">#0000FF</span></strong>);<br />    background: -webkit-gradient (left top, left bottom, color-stop(<strong><span style="color: red;">80%</span></strong>, <strong><span style="color: red;">#CF0000</span></strong>), color-stop(<strong><span style="color: red;">20%</span></strong>, <strong><span style="color: red;">#0000FF</span></strong>));<br />    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='<strong><span style="color: red;">#CF0000</span></strong>', endColorstr='<strong><span style="color: red;">#0000FF</span></strong>', GradientType=0);<br />}</blockquote>
Clique em Aplicar ao blog.<br />
Recomendo que aplique este efeito em um blog de testes para se habituar. Depois que entender e dominar o código, a sua aplicação se torna bem mais fácil.<br />
Para aqueles que não souberem onde escolher as cores, existe uma <a href="http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm" target="_blank">tabela de cores da web</a> com várias opções. Com certeza, irá te ajudar na hora de aplicar o efeito.<br />
Espero que tenham gostado desse tutorial de gradiente em CSS3 e também espero que muitos de vocês usem esse recurso que pode dar aquele toque a mais no seu blog.<br />
Abraço a todos<br />
<strong>Sobre o autor:</strong> <a href="http://twitter.com/dicasbrowser">Marco Damaceno</a> é editor do excelente <a href="http://www.dicasbrowser.com/">Dicas Browser</a> – blog especializado em dicas, novidades e tutoriais sobre os principais navegadores web.

CSS3 - efeito gradiente/degradê

Artigo de Marco Damaceno – Dicas Browser – @ dicasbrowser Algo que todo blogueiro deve se preocupar é se seu blog está bem estruturado. I...

Continue Lendo >>

09:14

Text-shadow - colocando sombreado em textos

<p>A propriedade <strong>text-shadow</strong> do CSS 3, permite colocar um sombreado em textos, dando assim mais profundidade e realçando títulos, listas e parágrafos.</p>  <p>Essa propriedade requer quatro informações: deslocamento horizontal, deslocamento vertical, desfoque da sombra e cor do sombreado.</p>  <p><strong>Exemplo:</strong> text-shadow: –4px 4px 3px #999999</p>  <p>O primeiro valor coloca o sombreado 4 pixels à esquerda do texto. O segundo valor, coloca o sombreado 4 pixel abaixo do texto. O valor de 3 px define o desfoque e #999999 se refere à cor do sombreado.</p>  <p>Vejam um exemplo no meu blog <a href="http://www.templates.dicasblogger.com.br/">DB Templates</a>. Notem que o título do post possui um sombreado em cinza escuro, contrastando com a cor original que é azul:</p>  <p><a href="http://www.templates.dicasblogger.com.br/2010/09/template-style.html"><img alt="text-shadow" border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnJocN7dEAGaj1MmmO04ZpP6KbFc1lkxQtjivytzy-nY3jC7foWZCp4XFZZ8MLUkMflMNpdWL-K4u4-F7Sn6xidvx_MOYuOhcEKKIJklFKQ5WYbTiyZROEZDG4rF36bUxojEQsuoyAt8-l/?imgmax=800" style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="text-shadow" width="452" /></a></p>  <p>Podemos usar a propriedade text-shadow em diversos locais do template, especialmente em títulos. Para encontrar a área referente  ao título de cada elemento de página, procure no HTML do template por h1, h2, h3. Exemplos:</p>  <p>Código dos títulos da barra lateral (sidebar):</p>  <blockquote>   <p>#sidebar1 h2,#sidebar2 h2,#sidebar3 h2,#sidebar4 h2 {</p> </blockquote>  <p>Código dos títulos dos posts:</p>  <blockquote>   <p>.post h3 {</p> </blockquote>  <p>Código do título do rodapé:</p>  <blockquote>   <p>#footer h2 {</p> </blockquote>  <p>Para colocar o sombreado, basta adicionar a popriedade <strong>text-shadow</strong> dentro do CSS do título que você deseja alterar. Vamos usar como exemplo, o título dos posts:</p>  <blockquote>   <p>.post h3 {  <br />color:$postTitleColor;      <br />font:$postTitleFont;      <br />text-decoration:none;      <br /><font color="#ff0000">text-shadow: –4px 4px 3px #999999</font>      <br />text-align:left;      <br />line-height:1.4em;      <br />border-bottom:2px solid $posttitleBorderColor;      <br />margin:0 0 20px;      <br />padding:0 0 2px;      <br />}</p> </blockquote>  <p>É possível trabalhar com várias sombras; basta separar os valores com uma vírgula:</p>  <p><img alt="" border="0" height="41" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRMRkF1qbgZXrFCI2SzoWmzTnYx9by_xAkAmN5CdvN2OT3AdJUycpi6nwyMM2MSlEWdgcfehpnrll5YkplJMQnhx8s6KlcUXYqCYVIn3hyhC-sRQippI8sKjnd1xqEGSeKIN5abFJBfyCn/?imgmax=800" style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="" width="250" /></p>  <blockquote>   <p>text-shadow: 1px 1px 3px #666, -1px -1px 3px #fff, 1px 1px #666, -1px -1px #fff;</p> </blockquote>  <p><img alt="" border="0" height="44" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxVjPEO8Ylo2KIa3kEFkDkWZxFpKFOLHGmnw_I2Hh3ghy1-BT9Nwr3fgfZnrS7YR2HFAsUk_FN-I8nrWjqxF-7COogF-WC4OCzn0ycjO71y1av4ZudBTrUEYBCz2sedRGE0nzdYJ7KfnLl/?imgmax=800" style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="" width="245" /></p>  <blockquote>   <p>text-shadow: 0 6px 4px #33F, -3px -5px 4px #f00, 3px -5px 4px #0F0</p> </blockquote>  <p>É importante escolher a cor base do título, para combinar com o sombreado:</p>  <blockquote>   <p>.post h3 {  <—título dos posts-->     <br />color:#ffffff; <—cor do título dos posts-->      <br />font:$postTitleFont;      <br />text-decoration:none;      <br />text-shadow: 1px 1px 3px #666, -1px -1px 3px #fff, 1px 1px #666, -1px -1px #fff;  <—text-shadow --></p> </blockquote>  <p>Achou complicado? Experimente usar um gerador de código CSS! </p>  <p>Entre em <a href="http://css3generator.com/">http://css3generator.com/</a> e procure por text-shadow no menu. Depois, é só criar e ir visualizando o efeito sombreado ;)</p>  <table border="0" cellspacing="4" cellpadding="2" width="555"><tbody>     <tr>       <td valign="top" width="277"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT2QRbzxCx3-x_8KV6vk5TWeCh9dA7zjwJ7ntz8c5oWOxJk3lYZeTC1Vl-mkufBSKV0ZKQYhPKWe45NznbCpoVUoPjp8RZ5OJsnVf1b3rUfKEyzng490z_TvgNapth9rekTZXa3cgivYbE/s1600-h/image%5B10%5D.png"><img alt="css3-generator" border="0" height="169" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Zkzd6ci9E9gNEU4wx0MmRi-iPQkfvJ1jz_yHMMv7jBaOHiWCND8hRt_ltgbapznSnCxGHgwbZ0CnJZ-5L_Q1b8JneZcl1z9-IFIzkhwguuUKGtzX1KAGCaDOWoAKm7FUpWXI_AucY-k8/?imgmax=800" style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="CSS3 generator" width="273" /></a></td>        <td valign="top" width="277"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdVOwpNicGdioH8jneyVVtQKyCjsdNEysltksLKsKrUe2oBiuCNhHPUHzI5cOgupP_OaUD7v_9YBxWrQ89Q2jQO2WgGzd-Q3mYE02Tu8WDqx9kHKJRomBcIcr_d8AXuk_tdxcjkh2KjgHV/s1600-h/image%5B11%5D.png"><img alt="text-shadow-generator" border="0" height="169" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsTAnf8I0yJpTDmxkxFQFQRdU0JK5P2OqD6nGTwEh_aJLNOSN8MNa2gzCqoxcCRAhSTsy-YYiCs0VKiUi5HPJzrXXFtZ9IMPyLcht49ZQUVmFs6dApQZubEdpfOhyphenhyphendCaUV4Eli6pcfIHjV/?imgmax=800" style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="Gerador de sombrado" width="269" /></a></td>     </tr>   </tbody></table>  <p>Uma outra opção: http://www.westciv.com/tools/shadows/</p>  <p><strong>Atenção!</strong> Como a maioria das propriedades do CSS 3, o text-shadow ainda não é compatível com o navegador Internet Explorer.</p>

Text-shadow - colocando sombreado em textos

A propriedade text-shadow do CSS 3, permite colocar um sombreado em textos, dando assim mais profundidade e realçando títulos, listas e par...

Continue Lendo >>

23:09

Caixa de texto com barra de rolagem

Vocês já devem ter visto em diversos blogs, principalmente nos que publicam códigos, uma caixinha onde o código fica dentro dela e na qual aparece uma barra de rolagem (scroll). Esse efeito, em HTML, se chama <strong>textarea</strong>.<br />
A textarea é muito útil, já que economiza espaço dentro do post.<br />
<strong>Como colocar uma caixa de texto com barra de rolagem</strong><br />
Para colocar uma caixinha com scroll em seus posts, entre no <strong>editor do Blogger</strong>, clique na aba <strong>editar HTML</strong> e use as tags <strong><textarea></textarea></strong> no texto que deverá ficar dentro da caixa. Nas imagens abaixo, coloquei um exemplo usando o antigo editor de posts do Blogger, mas o método funciona também no editor atualizado e no Windows Live Writer. (clique sobre as imagens para ampliá-las)<br />
<ul>
<li><a href="http://www.dicasblogger.com.br/2010/05/os-editores-de-posts-do-blogger.html">Conhecendo os editores de posts do Blogger</a>  </li>
<li><a href="http://www.dicasblogger.com.br/2010/10/como-usar-o-windows-live-writer.html">Como usar o Windows Live Writer 2011</a></li>
</ul>
Na primeira imagem, vemos a aba “editar html” contendo as tags “textarea”; já na segunda, vemos a aba “escrever”, com a caixinha já pronta:<br />
<table border="0" cellpadding="2" cellspacing="4" style="width: 555px;"> <tbody>
<tr> <td valign="top" width="277"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKkM24rFbAYdkx5npERCTFtwc4XZO67fpmL_tn-jug4v8p1fqrMKVJjeXTxdhot0x0I8QGkRdrP48CtZErUScvY2c2CpHe_Af-49EbMI54dlOY01TfrOTQy021pP1bPtqLTzHGVKiBvnF2/s1600-h/textarea%5B8%5D.png"><img alt="textarea" border="0" height="144" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiugyZFYZCDaMka0mV7wPK68yYK9Lkq4bz19T3Gt2wi5RKwfjZ12Uou4hF1VH_gVhDOuo3yYXxphv31p0QgI0-FrPrM34TWVhvaMFTv1cw7tLI4Acb2xkkpUSLci0RWV4EIWeeeIibdIoUF/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="textarea" width="277" /></a></td> <td valign="top" width="277"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc0P0iqoLQe9bTKrP-_VU_onYtKa2BrfZn5NS3njLolVB96-FKT59Li_llmYkljclWkX1U-hYwfQOPbj6kEChCMec2cbdLHaQkgs6rS0CIX6o1mdXr9Caq5uxZ3LUCXIrCFRtDJbbrvsJx/s1600-h/caixa%5B7%5D.png"><img alt="caixa" border="0" height="144" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ebsw02cAOXsYPO2u1IjVVdN-_n3Ymoul2SamOaT1gwMcNhgL_TkO-o2kLU1CHnG0oCExnvCts0JR45o_lDkr7owfZEu7KmOQxBAa6y8reEjVeo5NBnuSQ1J_WIAji4rkzexuGCTEmpx2/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="caixa" width="267" /></a></td></tr>
</tbody></table>
<strong>Estilizando a caixa de texto com CSS</strong><br />
Como vocês podem notar, a caixinha não é lá muito bonita, mas um pouco de CSS podemos mudar completamente seu visual ;)<br />
Entre no painel do Blogger, clique em <strong>design</strong> e depois em <strong>editar HTML</strong>. Usando o Ctrl+F do teclado, procure por <strong>]]></b:skin></strong> dentro do HTML do template. Agora, cole o seguinte código logo acima dessa tag e salve.<br />
<blockquote>
/** textarea */ <br />textarea { <br />border: 3px double #ccc; <br />background: #efefef; <br />width: 80%; <br />height: 100px; <br />}</blockquote>
Vamos para um exemplo prático? Abaixo, segue o código do <a href="http://www.dicasblogger.com.br/2009/04/translator-widget-tradutor-para-blogs.html">Translator Widget</a>:<br />
<textarea> <div style="border:1px solid #ccc;padding:10px 4px 3px 4px;text-align:center;background-color:#efefef;"> <div align="center"><a  target="_blank" rel="nofollow"  onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Czh-CN&hl=pt&ie=UTF8'); return false;"  title="Google-Translate-Chinese (Simplified) BETA"><img style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Chinese" src="http://lh5.ggpht.com/_mcq01yDJ2uY/Sdke4C8za2I/AAAAAAAAAkU/Mpfn_ntCweU/China.png" title="Google-Translate-Chinese"></a><a  target="_blank" rel="nofollow"  onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cfr&hl=pt&ie=UTF8'); return false;"  title="Google-Translate-Portuguese to French "><img style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Portuguese to French" src="http://lh4.ggpht.com/_mcq01yDJ2uY/SdkfGSkRgfI/AAAAAAAAAkc/X4E87SASLtA/France.png" title="Google-Translate-Portuguese to French"></a><a  target="_blank" rel="nofollow"  onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cde&hl=pt&ie=UTF8'); return false;"  title="Google-Translate-Portuguese to German"><img style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Portuguese to German" src="http://lh3.ggpht.com/_mcq01yDJ2uY/Sdke3rFjMUI/AAAAAAAAAkE/o0kR0MfngXA/Germany.png" title="Google-Translate-Portuguese to German"></a><a  target="_blank" rel="nofollow"  onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cit&hl=pt&ie=UTF8'); return false;"  title="Google-Translate-Portuguese to Italian"><img alt="Google-Translate-Portuguese to Italian" style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" src="http://lh3.ggpht.com/_mcq01yDJ2uY/Sdke2xCmrPI/AAAAAAAAAj0/Jv14yyDo1i4/Italy.png" title="Google-Translate-Portuguese to Italian"></a><a  target="_blank" rel="nofollow"  onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cja&hl=pt&ie=UTF8'); return false;"  title="Google-Translate-Portuguese to Japanese BETA"><img style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Portuguese to Japanese" src="http://lh5.ggpht.com/_mcq01yDJ2uY/Sdke3f2KbNI/AAAAAAAAAj8/xyGLFdUZbVY/Japan.png" title="Google-Translate-Portuguese to Japanese"></a><a  target="_blank" rel="nofollow"  onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cen&en=pt&en=UTF8'); return false;"  title="Google-Translate-Portuguese to English "><img style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Portuguese to English" src="http://lh4.ggpht.com/_mcq01yDJ2uY/SdkhG4bjxqI/AAAAAAAAAks/Ws6AzZdnZTw/United%20States%20of%20America%20%28USA%29.png" title="Google-Translate-Portuguese to English"></a><a  target="_blank" rel="nofollow"  onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cru&hl=pt&ie=UTF8'); return false;"  title="Google-Translate-Portuguese to Russian BETA "><img style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Portuguese to Russian" src="http://lh5.ggpht.com/_mcq01yDJ2uY/SdkfGVESWsI/AAAAAAAAAkk/-ruu99vFElQ/Russian%20Federation.png" title="Google-Translate-Portuguese to Russian"></a><a  target="_blank" rel="nofollow"  onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Ces&hl=pt&ie=UTF8'); return false;"  title="Google-Translate-Portuguese to Spanish "><img style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Portuguese to Spanish" src="http://lh3.ggpht.com/_mcq01yDJ2uY/Sdke312ethI/AAAAAAAAAkM/KeACgltRc38/Spain.png" title="Google-Translate-Portuguese to Spanish"> <center><a href="http://www.dicasblogger.com.br/2009/04/translator-widget-tradutor-para-blogs.html" target="_blank"><small>Translator Widget by Dicas Blogger</small></a></center>

Podemos alterar a cor da borda e do plano de fundo, bem como largura e altura:

/** textarea */
textarea {
border: 3px double #ccc; (espessura e cor da borda)background: #efefef; (plano de fundo da caixa)
width: 80%; (largura)
height: 100px; (altura)
}

Veja uma tabelas de cores neste link – Tabela de cores web e boa diversão.

Caixa de texto com barra de rolagem

Vocês já devem ter visto em diversos blogs, principalmente nos que publicam códigos, uma caixinha onde o código fica dentro dela e na qual a...

Continue Lendo >>

14:34

Como retirar ou colocar sublinhado nos links

Muitas pessoas me perguntam o que fazer para retirar aquele sublinhado dos links, principalmente quando passamos o mouse sobre eles.<br />
Os links de um blog ou site que usa CSS se dividem em:<br />
<ul>
<li><strong>a</strong>:  é o link em si </li>
<li><strong>a:visited</strong> é o link que foi visitado </li>
<li><strong>a:hover</strong> é o estado do link quando passamos o mouse sobre ele </li>
<li><strong>a:active</strong> é o estado do link quando clicamos nele </li>
</ul>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFt_Y3P242xu9lla0xD9pXKdurjBaYFDrMSQQbCNJwCkpxGOgh4fO3hyia3-N3FFNYVG_kYs7JsGDPXBChV__-9CSTYA1u28d1THOxZBHkd8MMk6GJpHwNOtwhMJ-V1QqYVYzRmijRDT3m/s1600-h/links%5B6%5D.jpg"><img alt="links" border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiedjaS_r6ghNTZ6a4LNpVBfMu-xmRrBCRTF0RIrXByhPwtJH3qJcU8yIQxL0uiPY6uIeL-GMv-IlKhUKov6IWKCfIb_KYuOlb0YdF8wzzPf01nD3oNO8ZQLdDSzW0sgjXCkFBslQLcp93C/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="links" width="502" /></a><br />
Vamos para um exemplo prático, usando o código-fonte do Template Mínima:<br />
<blockquote>
<br />a:link {       <br />  color:$linkcolor;       <br />  text-decoration:none;       <br />  }       <br />a:visited {       <br />  color:$visitedlinkcolor;       <br />  text-decoration:none;       <br />  }       <br />a:hover {       <br />  color:$titlecolor;       <br />  text-decoration:<strong><span style="color: red;">underline</span></strong>;       <br />}</blockquote>
Para retirar o sublinhado dos links, basta mudar a palavra “underline” para “none”<br />
<blockquote>
a:link {      <br />  color:$linkcolor;       <br />  text-decoration:none;       <br />  }       <br />a:visited {       <br />  color:$visitedlinkcolor;       <br />  text-decoration:none;       <br />  }       <br />a:hover {       <br />  color:$titlecolor;       <br />  text-decoration:<strong><span style="color: red;">none</span></strong>;       <br />}</blockquote>
Agora, se você gosta do sublinhado, mas os links do seu blog estão sem underline, basta procurar a parte do template e fazer a mudança. <br />
Como exemplo, vou pegar o código de um template meu e mudar os links da sidebar:<br />
<blockquote>
#sidebar1 a,#sidebar2 a,#sidebar3 a,#sidebar4 a {      <br />color:#4c4c4c;       <br />text-decoration:none;       <br />}<br />
#sidebar1 a:visited,#sidebar2 a:visited,#sidebar3 a:visited,#sidebar4 a:visited {      <br />text-decoration:none;       <br />color:#4c4c4c;       <br />}       <br />#sidebar1 a:hover,#sidebar2 a:hover,#sidebar3 a:hover,#sidebar4 a:hover {       <br />text-decoration:<strong><span style="color: red;">underline</span></strong>;       <br />color:#c33f00;       <br />}</blockquote>
Para acessar estes códigos, entre no painel do Blogger> design>editar html.<br />
<strong>Dica:</strong> use o Crtl+F do teclado para encontrar a parte que você está buscando.

Como retirar ou colocar sublinhado nos links

Muitas pessoas me perguntam o que fazer para retirar aquele sublinhado dos links, principalmente quando passamos o mouse sobre eles. Os lin...

Continue Lendo >>

18:13

Como mudar o template do Blogger

Como agora existem várias opções de templates para o Blogger, também existem várias formas de trocarmos esses templates. Antes de prosseguir, leia atentamente o artigo anterior, onde expliquei cada um dos modelos disponíveis atualmente: <br />
<span id="fullpost">   </span><br />
<ul><span id="fullpost">
<li><a href="http://www.dicasblogger.com.br/2010/09/opcoes-de-templates-para-blogger.html">Opções de templates para Blogger</a> </li>
</span></ul>
<span id="fullpost">    <strong>Designer do modelo</strong><br />
    <ol>
<li>entre no painel do Blogger e clique no link <strong>design</strong>; </li>
<li>dentro de design, clique em <strong>designer do modelo</strong>; </li>
<li>escolha um dos modelos disponíveis; </li>
<li>acesse as colunas plano de fundo e layout e configure; </li>
</ol>
Neste post você encontrará todos os detalhes:<br />
    <ul>
<li><a href="http://www.dicasblogger.com.br/2010/03/como-criar-um-template-para-blogger.html">Como criar um template para Blogger / Blogspot</a> </li>
</ul>
<strong>Modelos de layout lançados em 2006</strong><br />
    <ol>
<li>entre no painel do Blogger e clique no link <strong>design;</strong> </li>
<li>dentro de design, clique na aba <strong>editar HTML</strong>; </li>
<li>no final da página, clique em <strong>Selecionar modelo de layout</strong>; </li>
<li>Escolha um dos modelos disponíveis. </li>
</ol>
Para maiores detalhes, acesse este post:<br />
    <ul>
<li><a href="http://www.dicasblogger.com.br/2010/06/voltar-usar-antigos-templates-blogger.html">Como voltar a usar os antigos templates do Blogger</a> </li>
</ul>
<strong>Modelos Clássicos</strong><br />
    <ol>
<li>entre no painel do Blogger e clique no link <strong>design</strong>; </li>
<li>dentro de design, clique na aba <strong>editar HTML</strong>; </li>
<li>Lá no final da página, clique em <strong>Voltar ao modelo clássico</strong>. </li>
</ol>
<strong>Templates criados pelos usuários</strong><br />
    A maioria dos blogs que disponibilizam templates gratuitos para download, costumam colocar um link para exibição de uma versão de demonstração. Clique neste link - demonstração, demo ou live demo - para visualizar o template.<br />
    Depois, faça  o <strong>download</strong> do arquivo e salve em seu computador.<br />
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYBdKMA0Zn2Sl2crlftvdQQ5A57bDf_N7ckLlMAjg80fvCPTitHbOFQvCg5xZZ3MBCWUlPxYtmqQ0XfuCbKVLw3is6dSMhXEpWwoe762IoG1DNuvYvgEvo4q9swFJ13kIydfLJrpOA-Gil/s1600-h/download%5B6%5D.jpg"><img alt="download do template" border="0" height="255" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7mO6y1Ol5oXvcBnW30lUdv31Dnudv-qCvNx_-kSaBIBH2Y5a6jcr9yh2eUyH8wb7ctLhgya-yMqUoL7zUZMgrw1lc3Fc5o1fw8L1yC0SMWXfUBrBOwXkAOsK7XF9qiyhfg-nNDOEmjAwX/?imgmax=800" style="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;" title="download do template" width="452" /></a><br />
    O arquivo pode estar nos formatos .XML, .ZIP ou .RAR. O .XML já está pronto para a instalação. Os outros dois vão precisar ser descompactados:<br />
    <ul>
<li>.ZIP – clique com o botão direito do mouse e escolha a opção <strong>abrir </strong></li>
<li>.RAR – instale um aplicativo (minha sugestão: <a href="http://www.jzip.com/" target="_blank">JZip</a>), clique com o botão direito  do mouse e escolha <strong>extract here</strong> </li>
</ul>
Procure pelo arquivo .XML dentro da pasta que você acabou de descompactar.<br />
    Entre no painel do Blogger, clique em <strong>design</strong> e depois em <strong>editar HTML.</strong><br />
    Por precaução, salve seu antigo template clicando em <strong>baixar modelo completo</strong>.<br />
    Os gadgets são salvos pelo Blogger, mas como o <em>seguro morreu de velho</em>, abra um por um e copie cada código, salvando–os no bloco de notas ou no WordPad.<br />
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT5l2M-enP8xPgtYk37oNRLnH5j43drD-FEr_w3YWeCY4ZI9DKgvMQ9ZEwvMkwuW2Et5VE5Q_j6L6dVln4AoGAV8Mqk-4wdMgeqI4LEa72vdlzYATDfVT8rxriLz76fGLKjPi9UDhedzrJ/s1600-h/gadgets%5B7%5D.png"><img alt="Salvando os gadgets" border="0" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLAO1wRnhu0F5QqkNM9UFTA2KWdrk9QKVJcP3Uu2fg73MuL1suUVH3iQtB_Rw9wPp5qIoCkdz7m1weomlcIzsSOYC8pw6HxDrkvUpUZwoJaET_3VcdfZuDPxnBSvKbOBUhA12YAF1RCcW9/?imgmax=800" style="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;" title="Salvando os gadgets" width="502" /></a><br />
    Clique agora em <strong>selecionar arquivo</strong> (1) e procure pelo arquivo .XML (2)<br />
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpLZD5iS64o-jSbIV5ylb7VGFju3ueNP0Ntg71boIXLpo6k17-WhgwOiM9D0cKBcB8UT0A-FoBQDv09CIorvq07xxnrbEPrvUDMRmgQkJw7MtUw__h1hJtzGhnnQOAnL_Xu4DlStnjLdFg/s1600-h/layout%5B6%5D.png"><img alt="upload do novo template" border="0" height="269" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfOuRb1-pdAQtqRP29ktRC3O68PBboOwY89sj279Pf03oxE0G3MJNz5TG3sxTExl-DooamPkPUWXP88dxxlqbY14yj2Nd2vjL3pyXYV4V2HGFCnj2c58bdEJ4pibkVY8vQH1HGQ8c8Uzeg/?imgmax=800" style="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;" title="upload do novo template" width="502" /></a> <br />
    Clique em <strong>abrir</strong> para selecionar o template (3) e, depois, clique em<strong> fazer upload</strong> (4)<br />
    Se no seu blog existiam vários gadgets, será perguntado se você deseja mantê-los ou excluí-los. Faça sua escolha e o novo template será instalado.<br />
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9TBMafzWmNXk_rXXpHRnnG9p2RfCWI1lxAWrS2Pm34fLbP_NrYQM7WM3Xuks_LXxrb6ossFRpsgl4LLe34AzGs9cHSlAvWOdPW4Xyh1uLFlcyvl_rUfGtSytiTLwVzwkZCLT1hVo7uOap/s1600-h/image%5B24%5D.png"><img alt="Manter ou excluir widgets" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT77Sg-7ybjmh6fBhrAusj6k33dSYjNA7ebFYulzS72Qmw3xoCWQUz0rkxUgwK-Lyzceag6Gji4kdfwLo6tyzJWfrmDXZCztF5LCC7-i3x_IHQo9jyT0vY8nBR0uWXqH4xfsZkZCgjnVIF/?imgmax=800" style="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;" title="Manter ou excluir widgets" width="512" /></a><br />
    Caso fique faltando algum gadget, abra o arquivo que você salvou no bloco de notas e vá colando cada código em seus respectivos compartimentos.<br />
    <strong>Detalhes importantes:</strong> <br />
    No Blogger, gadget e widget são sinônimos.<br />
    Se você está usando um template do <strong>designer do modelo</strong> e pretende trocar por um personalizado, saiba que o <strong>gadget atribuition</strong> será tranferido para o novo template e não será possível excluí-lo. Para resolver tal problema, antes de trocar o template, coloque o Mínima, vá nos elementos de página e exclua o gadget atribuition.<br />
 </span>

Como mudar o template do Blogger

Como agora existem várias opções de templates para o Blogger, também existem várias formas de trocarmos esses templates. Antes de prosseguir...

Continue Lendo >>

11:19

Opções de templates para Blogger

O template é uma das partes mais importantes de um blog. Eu já escrevi sobre isso em outros posts, mas repetir nunca é demais. <br />
O template – para quem não sabe – é o desenho do blog, também chamado de tema ou modelo. É onde iremos escrever e colocar novos recursos.<br />
<span id="fullpost">   </span><br />
<blockquote>
<span id="fullpost"><strong>Template </strong>(ou "modelo de documento") é um documento sem conteúdo, com apenas a apresentação visual (apenas cabeçalhos por exemplo) e instruções sobre onde e qual tipo de conteúdo deve entrar a cada parcela da apresentação — por exemplo conteúdos que podem aparecer no início e conteúdos que só podem aparecer no final.</span><br />
<span id="fullpost"><strong>Web templates</strong> (ou "modelos de página") são instrumentos utilizados para separar a apresentação do conteúdo em <a href="http://pt.wikipedia.org/wiki/Web_design">web design</a>, e para a produção massiva de documentos web. Os templates são interpretados por um "sistema de template". <strong>Fonte:</strong> <a href="http://pt.wikipedia.org/wiki/Template" target="_blank">Wikipedia</a></span></blockquote>
<span id="fullpost">    Além da questão estética, um template otimizado pode influenciar positivamente na indexação pelos mecanismos de busca e fazer com que as páginas de um blog abram com maior velocidade e estabilidade. Possuindo boa navegabilidade, auxilia na fidelização dos leitores e no número de exibições de páginas, entre outras coisas.<br />
    <ul>
<li><a href="http://www.dicasblogger.com.br/2010/03/cuidados-com-o-layout-do-seu-blog.html">Cuidados com o layout do seu blog</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/02/auto-paginacao-no-blogger.html">auto-paginação do Blogger</a> </li>
<li><a href="http://www.google.com/support/webmasters/bin/answer.py?hl=br&answer=158541">Desempenho do site - Ajuda do Ferramentas do Google para webmasters</a> </li>
<li><a href="http://thenextweb.com/google/2010/04/09/google-site-speed-search-ranking-factor/">Google Now Using Site Speed As A Search Ranking Factor</a> </li>
</ul>
Hoje em dia temos 4 opções de templates para o Blogger:<br />
    <ol>
<li>Designer do Modelo </li>
<li>Modelos de layout (lançados em 2006) </li>
<li>Modelos clássicos </li>
<li>Templates criados pelos usuários </li>
</ol>
Todas estas opções usam em seu código-fonte HTML e CSS:<br />
    <blockquote>
<strong>HTML</strong> (acrônimo para a <a href="http://pt.wikipedia.org/wiki/L%C3%ADngua_inglesa">expressão inglesa</a> HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma <a href="http://pt.wikipedia.org/wiki/Linguagem_de_marca%C3%A7%C3%A3o">linguagem de marcação</a> utilizada para produzir <a href="http://pt.wikipedia.org/wiki/P%C3%A1gina_web">páginas na Web</a>.Fonte: <a href="http://pt.wikipedia.org/wiki/HTML" target="_blank">Wikipedia</a><br />
<strong>Cascading Style Sheets</strong> (ou simplesmente CSS) é uma <a href="http://pt.wikipedia.org/w/index.php?title=Linguagem_de_estilo&action=edit&redlink=1">linguagem de estilo</a> utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como <a href="http://pt.wikipedia.org/wiki/HTML">HTML</a> ou <a href="http://pt.wikipedia.org/wiki/XML">XML</a>. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.<strong>Fonte:</strong> <a href="http://pt.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank">Wikipedia</a></blockquote>
<strong>Designer do Modelo</strong><br />
    Lançados em março deste ano, estes são os novos modelos fornecidos pelo Blogger. São mais modernos, com várias opções  de plano de fundo e de colunas (sidebar) e são relativamente fáceis de usar, mas são pouco personalizáveis quanto às cores, fontes e instalação de hacks e de novos recursos via HTML - visto que o código é muito diferente dos modelos mais antigos.<br />
    <ul>
<li><a href="http://www.dicasblogger.com.br/2010/03/novas-funcionalidades-de-layout-no.html">Novas funcionalidades de layout no Blogger</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/03/designer-do-modelo-tutorial-em-video.html">Designer do modelo – tutorial em vídeo</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/04/designer-de-modelo-correcoes-e-novos.html">Designer de Modelo – correções e novos temas</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/03/como-criar-um-template-para-blogger.html">Como criar um template para Blogger / Blogspot</a> </li>
</ul>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgevpj4nKWXKJ3XLpZCLcRLx22WPS-DiETFc_ZbCVmk5dS3u97EDArA9p6K1FKfjlsi4BOY0lPy7_PsJjqO9ogvm1roF-qpUS3R8Akwl7l0ZjaBdIwB5eLJoYu4l_Z9Ao7r45jAlVsKve5f/s1600-h/image%5B8%5D.png"><img alt="Designer do Modelo" border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtGKxsaynrnN74fRc9pv5HfvvJatVnEkRncojmfTMFoOXY6wtfO4H_DzvLSsL5sW9Y7JM9l7VLnm8vqHb4R4ZxIn-hg0mULmur8uOqQXXcGNKDcTLK7AfWj385S7PXBfn2_O81zgHPerqg/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin-left: 0px; margin-right: 0px;" title="Designer do Modelo" width="526" /></a><br />
    <strong>Modelos de layout lançados em 2006</strong><br />
    Quando o Google adquiriu o Blogger, a plataforma passou a se chamar <strong>Novo Blogger</strong> e seus templates passaram a ser em formato .XML. O mais famoso desta época é o <strong>Mínima</strong> – de onde partiu muitos dos modelos criados pelos usuários<br />
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipckiKCne40vZwdivczylre1DLQ3zCM7in09pya5BRVAOlv_g-2nma0Jr7iyUn33dKYsgHN3yMBZ3vp9ddzbbxHMXbWu-mCYAA557sM3K-0zo8y2S80IJ_MFR5XmE63t2rHoIUWV6ESIHW/s1600-h/image%5B30%5D.png"><img alt="Layouts de 2006" border="0" height="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5mkPyt0C-0poELOV8zwG-2q4g0ozQzsxvacxYCo1uBkVi0g4pycKFCx42qMcW71JeSqaeVsjGjRso4bBNSnMkiNagqOQlGOsgL0AtkQKLH45NlTBYBOwAscUhQxOlM7qxop3IZVcxfDxT/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="Layouts de 2006" width="518" /></a><br />
    <strong>Modelos Clássicos</strong><br />
    Estes eu não cheguei a usar, mas pelo que eu vi só existe um modelo e é o usuário que deve customizá-lo através de HTML e CSS.<br />
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfEkUDFuk66LO7Kfdvpa0k3ELaFZp35FAqGFS6QJwgGz14oC5QqUHw83M1WWOEwyFf3zPNQssTRKH7c3Ln3pS-pVjcbs5KqBr0922C28zb-RiDnlYxxpqXzo6ww2h4Jb1hIJ0v7qOsEZfE/s1600-h/image%5B31%5D.png"><img alt="Modelos clássicos" border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisA7aBgS7TJCa6aL5k9F_h8wkWh7Ru9J27_4T_r2IvEyERc89orRfVBLJrHQMVs_qWND4-BSZ7TE3eBRks19nam86dvx-IZ19Knlrc9Es-EtYHd1tdrJVfXn7QVRA0g2cCY_m2a-zI3740/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="Modelos clássicos" width="518" /></a><br />
    <strong>Templates criados pelos usuários</strong><br />
    Estes são templates, geralmente baseados no Mínima, customizados e disponibilizados para download pelos próprios usuários do Blogger.<br />
    Existem algumas modelos mais fáceis de usar - com fontes e cores personalizáveis - e outros que já vem “prontos” e que para alterá-los é preciso ter conhecimento em HTML e CSS. Os primeiros são os mais indicados para os novatos.<br />
    <ul>
<li><a href="http://www.templates.dicasblogger.com.br/" target="_blank">DB templates</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/02/templates-para-blogger-blogspot.html">Templates para Blogger Blogspot</a> </li>
</ul>
<a href="http://www.templates.dicasblogger.com.br/" target="_blank"><img alt="DB templates" border="0" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG4zixBH5Ux7StZfkdUXcnOFiswTBGv6sBAuW0C8Mihndc1E9LEqhjbB4N-DF6jIWwHEvx6SAwrPQ7h6Oh-EjMaGVy4zjYpMf4AEaUAhnuu43tsCUc_s3sXcZOjqzpQD9tx6UaWqU4sOvI/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="DB templates" width="518" /></a><br />
    Se você, caro leitor, tem ambições maiores com o seu blog, é essencial entender CSS, HTML e SEO para  poder otimizar o template do seu blog e posicioná-lo melhor frente aos mecanismos de busca. Ou então, contratar alguém que possa fazer isso para você, pois já vi casos de blogs muito bons em matéria de conteúdo, com um número grande de posts no ar e mal indexados porquê os códigos e a apresentação visual do template não estavam organizados adequadamente.<br />
    <ul>
<li><a href="http://www.pt-br.html.net/tutorials/html/" target="_blank">Curso básico de HTML</a> – HTML.net </li>
<li><a href="http://www.pt-br.html.net/tutorials/css/" target="_blank">Curso básico de CSS</a> – HTML.net </li>
<li><a href="http://www.icebreaker.com.br/search/label/Blogger%20SEO?max-results=60" target="_blank">Blogger SEO</a> – Icebreaker </li>
<li><a href="http://www.dicasblogger.com.br/search/label/SEO" target="_blank">DB SEO</a> – Dicas Blogger </li>
<li><a href="http://www.ferramentasblog.com/search/label/SEO?max-results=10" target="_blank">FB SEO</a> – Ferramentas Blog</li>
<li><a href="http://www.dicasblogger.com.br/2009/08/produtos-e-servicos.html" target="_blank">DB – produtos e serviços</a> </li>
</ul>
No próximo post vou explicar, detalhadamente, como trocar os templates do Blogger.<br />
 </span>

Opções de templates para Blogger

O template é uma das partes mais importantes de um blog. Eu já escrevi sobre isso em outros posts, mas repetir nunca é demais. O template –...

Continue Lendo >>

10:09