Mais Gadget no Footer


Se seu blog está faltando espaço para adicionar Gadgets, adicione mais espaço no rodapé e deixe seu blog com mais Gadgets e mais bonito :-)


Advertências:


Apague todos os Gadgets do rodapé "Footer" "Layout"->"Elementos da página"
  • É indicado salvar antes os Gadgets do rodapé do blog para que não ocorra perdas.
Salve os Gadgets antes de começar! Não só estou pedindo ;-)
1.Acesse o painel do Blogger
2.Vá em "Layout"->"Editar HTML" não marque a "Caixa Expandir Modelos de Widgets"
3.Procure pelo código abaixo "Ctrl e F" :
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

4.Substitua o código em laranja por este abaixo:
<div id='footer-columna-contenedor'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text20' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>

5. Agora vamos adicionar a CSS ao blog para que ela controle o espaço entre as colunas, procure pelo código abaixo:
]]></b:skin>
6. Acima do código anterior adicione o código seguinte:
#footer-columna-contenedor {
clear:both;
}
.footer-columna {
padding: 10px;
}

7. Salve as alterações e vizualize.
A area de adição de Gadgets ("Layout"->"Elementos da página") deve ficar como esta imagem abaixo:
três colunas no footer


Leia mais...



A principal mudança é a interface, limpa e com mais interação. O novo Orkut terá mais possibilidades de personalização da tela principal, incluindo a capacidade de escolher a cor da página inicial.

"Uma interface limpa e simples: reorganizamos as atividades mais importantes do orkut para que elas fiquem mais fáceis de usar. Veja como as fotos estão maiores e as notificações e novidades ficaram fáceis de acessar. Além disso, as sugestões de novos amigos e as atualizações mais importantes estão mais próximas do topo da página."  Referência: Blog do Orkut


Outra mudança feita no Orkut foi o compartilhamento de fotos. Diz o Google que essa funcionalidade, baseada em pesquisas com usuários, é uma das mais populares, usada por 67% dos usuários.


Os usuários do Orkut irão migrar para a nova versão apenas por meio de convites, mas quem for para a interface remodelada não sofrerá nenhum impacto em experiência ou dados. A previsão do Google é que até o final do primeiro semestre de 2010 todos os usuários terão migrado para a nova plataforma.


A distribuição de convites será feita aos poucos e em "ondas", de acordo com a empresa. Nem todo usuário com nova conta terá convites para distribuir no começo, pelo menos.

Veja como conseguir seu convite:





1. Acompanhe o blog do Danilo Miedi, o usuário símbolo da campanha pelo novo orkut, e participe das várias atividades oficiais que aparecerão por lá.

2. Encontre um amigo que já esteja usando a nova versão do orkut e peça um convite. Se você encontrar este ícone  no perfil de um amigo, ao lado do nome dele, provavelmente seu amigo tem um convite disponível - aproveite e peça para ele!



Pegue seu convite agora, participe já da promoção

Referência:Terra,Blog do Orkut
Leia mais...



O fundo é uma parte importante do layout pois ele tem que combinar com a aparência do blog, para deixa-lo mais bonito, para fazer isso é muito simples. O site Dryicons conta com muitos fundos para você escolher e abaixo vou ensinar a utilizar:


1.Faça Login no blogger
2.Vá para "Layout"->"Editar HTML"
3.Utilize as tecla Ctrl e F para procurar o código abaixo:
body {
4.Abaixo do código que define o estilo de fundo adicione:
background: url(http://url-da-imagem) center;
Em verde substitua pela url da imagem desejada.
5.Se quiser que a imagem seja unica e não repita ao longo da página adicione:
background: url(http://url-da-imagem)no-repeat center;
Em verde a url da imagem.
6.Se já tiver no seu template um  código semelhante apague background: até ; e adicione normalmente o código acima
7.Para usar uma cor como fundo utilize este código:
background: #FFFFFF;
Substitua o código em laranja pela cor desejada se não souber outras cores veja:
Códigos de cores

Leia mais...
eBook erros e acertos

Já está disponível para baixar, gratuitamente, o eBook Web 2.0 - Erros e Acertos - Um guia prático para o seu projeto, de Paulo Siqueira. Criar um projeto na Web não é apenas criar uma página, mas também temos que pensar no objetivo desta página, qual o conteúdo que será publicado, qual o publico alvo, e muitas outras coisas por isso o blog Mobilidade criou este ebook, para quem tem ou está pensando em ter um projeto na web.


A divulgação é parte de um processo colaborativo envolvendo mais de 80 blogs e o Twitter.  A licença é Creative Commons.
No eBook Web 2.0 – Erros e Acertos – Um Guia prático para o seu projeto, Paulo Siqueira explica, em linguagem clara e didática, como concebeu, desenvolveu e colocou em prática um projeto para a Web, passando pelo planejamento, programação, publicidade online e finalmente a execução.
É um relato prático e real, interessante para estudantes, professores, programadores, analistas, desenvolvedores, gerentes de projeto, executivos de Tecnologia da Informação, blogueiros, jornalistas de tecnologia, enfim, serve para qualquer pessoa que tenha curiosidade, interesse e quer saber mais sobre como fazer ou como funciona um projeto para a Web.
Paulo Siqueira, 53 anos, tem mestrado em Engenharia de Software pelo IPT. É professor universitário. Trabalha para a UNICEF, no Paquistão, como Gerente de TI. Trabalhou para Seven Networks International, UN-ICTY, Banco Mundial, IFES-USAID, UNDP-PAPP, UNV-PNUD e ICS-UNIDO, e Banespa-Santander, em diferentes lugares do mundo.
As ilustrações são de Orlando Pedroso, artista gráfico, colaborador da Folha de São Paulo, revistas da imprensa e livros infanto-juvenis.
O prefácio é de Gilson Schwartz, economista, sociólogo e jornalista, professor de Iconomia no Curso Superior do Audiovisual e coordenador do grupo de pesquisa Cidade do Conhecimento da USP (www.cidade.usp.br).
Mais informações
Estão participando do lançamento do Web 2.0 - Erros e Acertos - Um guia prático para o seu projeto, os seguintes blogs:
Irradiando Luz, Dossiê Alex Primo, Não Zero, UsuárioCompulsivo, Nerds Somos NozesZerotrack, Blog de Seo e Webstandards, iceBreaker, Luz de Luma, yes party!, Vivo Verde, Cova do Urso, Grãos de Areia pelo Infinito, atblog, DE Consulting, Nota Zer0!, TecnoCT, Leitura na Tela, Antes da HORA, Tecnologias digitais e Educação, Tecnologias, Educação e algo mais…, Virtual Z1, Uhu, galera!…, Blog do Carlos Fran, Blog do Locoselli, Blog de Renato Salles, Lua internauta, Mundo Desbravador, Fonte de Alegria, Lar da Veterinária, Origine Italiana, Arthur Araujo, Luana Giampietro, Blog do Zemarcos, blog EJM, Notícia e blog, Mídia Boom, [In]Commun Séries, Blogando com Vc!, Grupo NGJ, Voxtopia, pribi.com.br, Blog da Mari Rocha, Unidade Avançada, Blog Windows Brasil, Preparando a Redação, Usuário Nokia, Léo.Lopes – Portfólio, Blog do Netmind, Sylvester Stallone Brasil, Códigos Blog, Brasil Critical, Security Total, Ricardo Campos: Reflexione, Actividade, Açaí Grosso, Muleque Doido, Ernandes Rodrigues, cajuinas, Educação a Distância, WebGringos, Fruição e Escrita, Informática Desvendada, Midlife, Popzei!, Berdades da Boca P’ra Fora, My Percepções, Liso-Sapiens, Blogger Pessoal, Neurônio 2.0, Vondeep, The worst kind of thief, Thiago Antonio, Marcus Monteiro, Franquia Empresa, Blog Mídias Sociais, Abre Aspas, Chronus Blog, Sedentarismo Intelectual, PopNutri.
Leia mais...
Foto do novo sistema de busca que inclui resultados de blogs e redes sociais
O serviço ainda em teste


A ferramenta – que foi anunciada na semana passada na Conferência Web 2.0 em São Francisco – vai ajudar os usuários do Google a encontrarem conteúdo público de suas redes online.


A ferramenta de busca social do Google (em inglês, Google Social Search) vai sugerir conexões às listas de amigos de cada rede social e obter informações a partir dos contatos do Gmail de cada usuário.

Assim que os detalhes forem rastreados, os resultados das redes sociais vão aparecer sempre no rodapé da página de resultados da busca, com uma indicação de que rede a informação foi retirada.


Os usuário poderá habilitar a busca de redes sociais por meio da seção do Google Labs do site. Para isso só vai precisar estar conectado ao seu Perfil no Google, uma ferramenta de gerenciamento de reputação online.


Os resultados vão incluir sites, blogs, atualizações de status e outros tipos de conteúdo que sejam públicos. Se você estiver indo para o Cairo, e um amigo seu já tiver listado lugares para ficar lá no website dele, a ferramenta de busca social do Google vai facilitar a descoberta desse tipo de conteúdo.


A busca social só funciona com dados de redes sociais e sites que sejam públicos. O Google admite que a ferramenta não vai conseguir rastrear redes como o Facebook, em que a maioria das informações é preservada por políticas de privacidade.


O lançamento do Google Social Search acontece poucos dias depois de o Google ter assinado um contrato com o Twitter para integrar as “twittadas” aos resultados das buscas. O microblog também fechou um acordo parecido com a feramenta de buscas Bing, da Microsoft.


Faltou apenas incluir os resultados do Orkut mas isso ainda vai demorar, pois um tempo atrás precisava de convite, imagine agora incluir em uma busca.Para ter em sua pesquisa à busca social acesse o Google Labs e ative este serviço.


Abaixo um vídeo de lançamento do novo serviço:

vídeo demostrando a busca social


Fonte: R7dissertação por Notícia e blog
Leia mais...
Iphone 3G
Iphone 3g um sonho de consumo:-)

A internet está disponível em todos os lugares por isso seus leitores também estarão acessando seu blog de vários lugares por isso é interessante ter uma versão móvel do seu blog/site pois assim o leitor que acessar não vai esperar carregar imagens enormes no seu celular verá apenas os textos, economizando assim tempo e dinheiro, pois as conexões de internet no celular são muito caras e são contadas por tempo por isso é bom uma versão móvel.


A versão móvel do Notícia e blog é wap.noticiaeblog.com se acessar de um Desktop verá apenas uma previa de como é no celular e se você tem iphone pode ver uma prévia neste endereço. E se quiser criar uma versão mobile para seu blog/site é só acessar o MoFuse. Ele cria a versão móvel do seu site/blog sem precisar de cadastro mas se cadastrando você tem direito de personaliza o domínio e colocar sua logo marca personalizada. Abaixo uma prévia do painel de controle:



O MoFuse ainda conta com uma versão profissional, tem um custo de $3/mês.Clique aqui para saber os beneficios
Leia mais...


Na internet há vários textos e códigos, publicar um código no meio de um texto pode ser muito estranho pois um texto é uma fala, um código não pode ser lido por isso o melhor a fazer é publicar códigos em uma caixa especifica o que facilita o leitor entender que aquilo é um código e não faz parte do texto, para publicar utilizaremos uma textarea ou caixa de texto em JavaScript veja abaixo:


Se for usar no Blogger é fácil veja:
1.Acesse o painel do Blogger
2.Vá para "Layout"->"Elementos da página"->"Adicionar um Gadget"->HTML/JavaScript
3.Insira o código abaixo:
<form>
<textarea name="myForm" rows="4" cols="40" wrap="virtual">Seu texto ou código</textarea>

<input value="Selecionar" onclick="javascript:this.form.myForm.focus();this.form.myForm.select();" type="button">

</form>

Nota: Mude a parte em amarelo pelo texto ou código desejado.

Se for em um HTM veja:
Insira o mesmo código acima depois de <body>.
Leia mais...

Não é está fonte não! :-)


Alguns blogs a fonte pode ficar um pouco pequena, para alguns leitores, pois o tamanho da letra do seu blog é menor devido ao Layout que não permite fonte maior ou você não quer estragar o template com uma fonte de tamanho absurdo, para corrigir isso encontrei este Widget que permite o leitor escolher a fonte e o tamanho da Letra.Veja abaixo como fazer:


1.Faça login no Blogger


2.Acesse o "Layout"->"Elementos da página"->"Adicionar um Gadget"->"HTML/JavaScript"


3.Adicione este código no espaço do widget:
<script>
function go1(){if (document.selecter2.select2.options[document.selecter2.select2.selectedIndex].value != "none"){document.getElementById('main').style.fontSize=document.selecter2.select2.options[document.selecter2.select2.selectedIndex].value}}

function go2(){if (document.selecter2.select3.options[document.selecter2.select3.selectedIndex].value != "none"){document.getElementById('main').style.fontFamily=document.selecter2.select3.options[document.selecter2.select3.selectedIndex].value}}
</script>

<form id="forma" name="selecter2" method="POST">
<select onchange="go2()" style="font-family:Arial;font-size:10pt" name="select3" size="1">
<option value="Times New Roman"/>Times New Roman
<option value="Arial"/>Arial
<option value="Book Antiqua"/>Book Antiqua
<option value="Bookman Old Style"/>Bookman Old Style
<option value="Century Gothic"/>Century Gothic
<option value="Comic Sans Ms"/>Comic Sans Ms
<option value="Tahoma"/>Tahoma
<option value="Trebuchet Ms"/>Trebuchet Ms
<option selected value="Verdana"/>Verdana
</select>

<select onchange="go1()" style="font-family:Arial;font-size:10pt" name="select2" size="1">
<option value="8px"/>8
<option value="9px"/>9
<option value="10px"/>10
<option value="11px"/>11
<option selected value="12px"/>12
<option value="14px"/>14
<option value="16px"/>16
<option value="18px"/>18
</select>
</form>

4.Salve e visualize


Referência:Web UPD8
Leia mais...
chevereto
Hospedagem fácil :)
Que tal ter sua própria hospedagem de imagem para disponibilizar para seu leitor ou público, com o Chevereto você pode ter isso sem ter que mecher em código algum bastar baixar os arquivos PHP e  enviar para seu servidor, não exige mysql ("banco de dados"), ele já está pronto para o uso, você pode colocar seu próprio slogan e ele ainda tem uma api do Tinyurl que fornece junto ao link da imagem que foi hospedada o link encurtado.
Sua licença é GNU código aberto você pode editar modificar distribuir desde que deixe os créditos do autor.
Se ficou com vontade de ter sua hospedagem pode baixar os arquivos aqui e pode ver o demo funcionando.O idioma disponibilizado é em Português do Brasil.
Leia mais...
busca,buscador
Buscadores uma forma de ganhar visitas :)


Os buscadores são à forma mais rápida de adquirir visitas para seu blog ou site, mais cadastrar em vários é muito chato e cansativo, que tal cadastrar em todos de uma vez só?. São 35 Brasileiros e 285 Internacionais, tudo isso em um único formulários, para se cadastrar em 321 sites de busca é só acessar o Divulgador e começar a ver sua audiência.

Leia mais...

Servidores de hospedagem ;-)
A internet hoje em dia conta com vários serviços gratuitos de hospedagem, o que permite até a gente escolher qual é melhor serviço gratuito. A maioria dos serviços de Blog conta com hospedagem de imagem mas todos eles impõem algum limite entre eles o formato da imagem, o do Blogger então nem se fala é uma verdadeira imposição.
O jeito é optarmos pelas hospedagens externas que além de não ter muitas limitações ainda aceitam vários formatos para ajudar na escolha da hospedagem resolvi pesquisar na internet serviços de hospedagem de imagem, testei vários e vou mostrar alguns dos melhores para vocês.


Vamos aos serviços de hospedagem :-):
  1. Nome: Picasa
  2. Descrição: O Picasa é o serviço de hospedagem e compartilhamento de imagens do Google.
  3. Características: Oferece mais de 1GB de espaço, exige conta do Google para utilizar
  4. Formatos aceitos: PNG,GIF,BMP,JPG
  1. Nome:ImageShack
  2. Descrição: Serviço de hospedagem de imagem
  3. Características: Aceita até 1,5 MB o excedente será redimensionado
  4. Formatos aceitos:  .jpg, .jpeg, .gif, .bmp, .tif, .tiff, . swf, e .png
  1. Nome: Tinypic
  2. Descrição: Serviço de hospedagem de imagem da Photobucket
  3. Características: Reduz a qualidade para que a imagem seja aceita
  4. Formatos aceitos: jpg, bmp, gif, pcx, png, psd e tif
  1. Nome: Imgur
  2. Descrição: Simples serviço de Hospedagem
  3. Características: Maximo 10MB excedente é redimensionado
  4. Formatos aceitos: JPEG, GIF, PNG, APNG, TIFF, BMP, PDF, XFC (GIMP)
Agora é só escolher a que mais lhe agrada e usar, e se quiser mais tenho este link e este mais ainda não testei muitas vezes mais parece ser confiavel.
Leia mais...



No Blogger quando descemos a página o fundo também desse, se for um fundo de cor nem percebemos mais se for um fundo de imagem a imagem ficará cortado prejudicando um pouco o Layout. Podemos fazer com que o fundo das postagens e da sidebar seja fixo ou seja o texto,imagens,fotos é que vão descer ao subir a página. Se for uma imagem o fundo o efeito é muito bonito.Para fazer o fundo fixo é necessário apenas algumas alterações no CSS, que veremos abaixo:


1.Acesse o painel do Blogger
2.Clique na aba "Layout"->"Editar HTML"
3.1 Procure por esse trecho no seu blog, você não encontra exatamente o código abaixo apenas parecido:
body{background:$bgcolor;
Se estiver como esse acima apague o trecho em vermelho e coloque o código abaixo:
background: url(url-da-imagem) center;
background-attachment: fixed;

Nota: Substitua o que está em laranja pela url da imagem desejada. Em roxo se a imagem ficar retida substitua por "no-repeat" sem as aspas.
3.2 Se encontrar o código em vermelho que foi pedido substitua todo os "background: até o ;" que estiverem dentro de "body:{ até }" pelo código abaixo:
background: url(url-da-imagem) center;
background-attachment: fixed;

Nota: Em laranja é a url da imagem desejada, em roxo se a imagem ficar retida substitua por "no-repeat" sem as aspas.


4.Visualize e Salve as alterações.
Leia mais...

Todo mundo sabe que a Navbar no Blogger não é mais obrigatória, além de prejudicar o layout deixa o Blogger com uma cara de spam. Mais a Navbar também é muito útil pois oferece uma caixa de busca, meios de compartilhar o blog, seguir, entre outros acessorios, mais há uma maneira de unir o "útil ao agradável" podemos fazer com que ela aparece somente ao passar o mouse sobre o topo do Blog para fazer isso basta apenas fazer uma alteração no CSS, veja como fazer no seu Blog:


1.Vá ao painel do Blogger
2.Acesse "Layout"->"Editar HTML"
3.Procure pelo código abaixo no seu template "Utilize Ctrl e F":
]]></b:skin>
5.Antes do código anterior adicione o código abaixo:
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

6.Salve as alterações e visualize.
Leia mais...



Inserir um layout de impressão abaixo das postagens é muito bom, pois permite ao leitor imprimir apenas o artigo e os comentários, eliminando a sidebar(Gadgets,links,fotos,etc...) que é um grande consumidor de tinta   e permitindo que o leitor não tenha que ficar copiando para o Office, BRoffice... entre outros. A impressão já está ali pronta para o uso sem precisar de nenhuma edição.Vamos as alterações:


1.Faça login no painel do Blogger
2.Vá para "Layout"->"Editar HTML"->Marque a caixa "Expandir Modelos de Widgets"
3.Procure pelo código abaixo no seu template "Utilize as teclas Ctrl e F para procurar":
</head>
4.Acima do código anterior adicione o código abaixo:
<style media='print' type='text/css'>
#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}
#main-wrapper {width: 95%}
</style>

5.O código anterior deve ficar como esse abaixo "Exemplo":
<style media='print' type='text/css'>
#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}
#main-wrapper {width: 95%}
</style>
</head>

6.Procure pelo código abaixo no seu template:
<div class='post-footer-line post-footer-line-1'>
ou
<div class='post-footer-line post-footer-line-2'>
7.Abaixo dele adicione o código seguinte:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a title='Texto e Comentários' href='javascript:window.print()'>Imprimir postagem</a>
</b:if>

8.Salve as alterações e visualize.


Dúvidas pergunte nos comentários
Leia mais...



Hoje um dos problemas do Blogger é a não otimização para os buscadores, o Wordpress por exemplo oferece plugins que fazem esse trabalho de otimizar para os buscadores o blogger por sua vez exige alterações e até mudanças nos textos para que eles sejam entendidos como relevantes.

Os títulos do blogger são exibidos após o nome do Blog o que gera menos cliques pois o buscador verá o seu Blog com títulos repetidos o que faz a diminuição do seu pagerank, para resolver o problema do título a uma pequena alteração que faz com que seja exibido primeiro o título da postagem, veja o exemplo abaixo:

Título não otimizado
Notícia e blog : Como achar "TUDO" no GOOGLE, MP3, FILME, CLIPES

Título otimizado
Como achar "TUDO" no GOOGLE, MP3, FILME, CLIPES

Veja como fazer as alterações para ter seu título otimizado:

1.Acesse o painel do Blogger

2.Vá para Layout->Editar HTML

3.Procure pelo código abaixo no seu template "uma dia utilize as tecla Ctrl e F para pesquisar rapidamente":
<title><data:blog.pageTitle/></title>
Substitua o código acima pelo código abaixo:
<b:if cond='data:blog.pageType == &quot;index&quot;'> 
<title><data:blog.title/></title> 
<b:else/> 
<title><data:blog.pageName/></title> 
</b:if>

4.Visualize e salve as alterações
Agora é só aguardar os resultados
Leia mais...

Seus comentários totalmente integrado ;-)


Hoje implementei aqui no Blog um script do diHitt que exibe os comentários que foram postados lá aqui no Blog fiquei satisfeito com o resultado.Este script foi feito pelo Lenon do TechLive, os comentários feitos lá aceitam as CSS(s) do próprio Blogger não exigindo ajustes para adapta-lo ao template, vamos então a implementação:


1.Faça login no Blogger
2.Vá para "Layout"->"Editar HTML"->Marque a caixa "Expandir Modelos de Widgets"
3.Procure agora pelo código abaixo no seu template utilizando as teclas Ctrl e F:
<dl id='comments-block'> ou <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
4.Abaixo do código encontrado insirá o código abaixo:
<script expr:src='&quot;http://techlive.dihitt.com.br/dihitt.php?url=&quot; +
data:post.url' type='text/javascript'/>

5.Salve e visualize.

Nota: Os comentários só são exibidos se a postagem tiver sido enviada para o diHitt


Parabéns você adicionou com sucesso os comentários do diHitt



Crédito pelo script: TechLive

Créditos pelo reprodução do script que está fora do ar no blog original: Blog Windows Brasil
Leia mais...

Hoje vou ensinar como personalizar o rodapé das postagens como este que tem aqui no Notícia e blog, este rodapé permite o leitor enviar a postagem para as principais redes sociais e também exibe os artigos relacionados vamos então ao primeiro passo da personalização, lembrando que este hack foi produzido pelo Usuário Compulsivo todos os créditos a ele:

Veja abaixo as alterações que iremos fazer:

  1. Adicionando os Artigos Relacionados no rodapé
  2. Adicionar CSS
  3. Incluir layout de impressão
  4. Substituir link de enviar postagem por e-mail
  5. Substituir o rodapé 
1.Adicionando os Artigos Relacionados no rodapé*:
Para adicionar veja está postagem: Exibindo artigos relacionados (Blogger/Blogspot)
Atenção para a adição deste hack é imprescindível a adição do hack acima. 


2.Adicionar a CSS
1.Faça login no Blogger

2.Vá para "Layout"->"Editar HTML"->Marque a caixa "Expandir Modelos de Widgets"

3.Adicione o código abaixo no seu template observe a nota:
.post-footer a:link, a:visited {color: #333;}
.post-footer a:hover {color: #c60; text-decoration: underline;}
.post-footer ul {font-size: 120%; list-style: none; padding: 0; margin: .2em 0 0 0;}
.post-footer ul li {margin: 0; padding: 0;}
#subscribe {width: 100%; font-size: 120%; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 1em 0 1em; background: #eee;  padding: 5px;}
#post-footer-container {width: 100%; clear: both; min-height:140px;}
#relacionados {width: 250px; float: left;}
#mais-opcoes {width: 140px; float: right; padding-left: 5px; border-left: 1px solid #ccc;}

/* Comments
----------------------------------------------- */




Nota: O código em vermelho é apenas uma referência de onde deve ser colocado o código se não encontrar o código em vermelho coloque antes de ]]</b:skin> , o código em azul é as cores personalize de acordo com seu template.


3.Incluir o layout de impressão


O layout de impressão define no template que quando for imprimir imprima apenas a postagem e os comentários, e não imprima a sidebar e os gadgets insira o código abaixo antes de </head> do seu template:
<style media='print' type='text/css'>
#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}
#main-wrapper {width: 95%}
</style>

</head>




Nota: O código em vermelho é apenas uma referência de como deve ser posicionado o código.


4.Substituindo o link de encaminhar postagem por e-mail


Para não haver duplicidade de links para encaminhar por e-mail será necessário eliminar um desses links para fazermos isso procure pelo código abaixo e apague no seu template:
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>
</a>
</span>
</b:if>


5.Substituindo o rodapé original pelo personalizado
Agora vamos alterar o rodapé que é a parte principal deste hack,como foi dito no começo deste hack é necessário ter o hack Exibindo artigos relacionados (Blogger/Blogspot) para que funcione.Procure agora pelo código abaixo no seu template:

<div class='post-footer-line post-footer-line-4'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<h3>Artigos relacionados: </h3> <script type='text/javascript'> 
removeRelatedDuplicates(); 
printRelatedLabels(); 
</script> 
</b:if> 
</div>

Substitua o código acima por este código abaixo:
<div class='post-footer-line post-footer-line-3'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- Exibir apenas nos permalinks -->
<div id='subscribe'> <!-- Personalizar Mensagem no rodapé dos posts -->
Gostou deste artigo? Então <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='faça seu comentário'>deixe um comentário</a> e assine nosso <a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='RSS Feed'>RSS Feed</a>.
</div> <!-- fim subscribe -->
<div id='post-footer-container'> <!-- Container: Relacionados + Opcoes -->
<div id='relacionados'> <!-- Artigos Relacionados -->
<h3>Artigos Relacionados</h3>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div> <!-- fim relacionados -->
<div id='mais-opcoes'> <!-- Personalizar Mais Opções -->
<h3>Outras Opções</h3>
<b:if cond='data:post.emailPostUrl'><span class='item-action'><a expr:href='data:post.emailPostUrl' target='_blank' title='Enviar por email'>Encaminhar por email</a><br/></span></b:if>
<a href='javascript:;' onclick='window.print();return false' title='Imprimir esta página (texto e comentários)'>Imprimir esta página</a>
<p><a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Enviar para o seu Twitter'>Enviar para o Twitter</a><br/>
<a expr:href='&quot;http://ueba.com.br/NovoLink?url=&quot; + data:post.url + &quot;&amp;titulo=&quot; + data:post.title' target='_blank' title='Enviar para o Uêba'>Enviar para o Uêba</a><br/>
<a expr:href='&quot;http://dihitt.com.br?botao=enviar&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='Recomendar este artigo no diHITT'>Recomendar no diHITT</a><br/>
<a expr:href='&quot;http://rec6.via6.com/link.php?url=&quot; + data:post.url + &quot;&amp;titulo=&quot; + data:post.title' target='_blank' title='Recomendar este artigo no Rec6'>Recomendar no Rec6</a></p>
<a expr:href='data:blog.homepageUrl + &quot;feeds/&quot; + data:post.id + &quot;/comments/default&quot;' title='Feed dos comentários deste artigo'>Feed dos comentários</a>
</div><!-- fim Mais Opções -->
</div><!-- fim Container: Relacionados + Opcoes -->
</b:if><!-- fim Exibir apenas nos permalinks -->




6.Visualize e salve as alterações.
Leia mais...