Botão de +1 do Google para Webmasters

"Ao fazer recomendações usando o botão +1, você pode ajudar amigos, contatos e outras pessoas na web a encontrar o que há de melhor durante suas pesquisas."

O Google anúnciou a poucos dias uma nova maneira de partilhar suas indicações, uma forma muito simples e que tem total envolvimento com o próprio Google.com, sim, o site de pesquisas.

O sistema oferece basicamente, que o usuário do "botão +1" se relacione com o sistema de pesquisa do Google, quando algum amigo for fazer uma pesquisa por exemplo, faz com que o que você compartilhe e o conteúdo se torne mais importante e relevante para um amigo que pesquise sobre algo em comum entre vocês.

Com o botão na Web podemos obter os melhores resultados de pesquisas, um bom motivo disto é de entrar em várias páginas na web e encontrar o que procura em apenas uma.

Veja agora onde fica localizado o botão neste blog:

Botão de +1 no Blog

Repare que ao clicar aparece a janela de compartilhamento, dá para reparar também que provavelmente o Google está puxando a sardinha novamente pra ele, temos de ter uma conta cadastrada no google (não importa o serviço) para podermos compartilhar. Mas só de deixar a internet mais limpa, já ajuda.

Se reparar consigo colocar o botão in-line ou seja em qualquer local da página como por exemplo aqui.
Onde encontramos o botão?
Clique neste link
Veja um dos vídeos disponibilizados pelo Google sobre o botão: Comente ou simplesmente +1:

Novo Gadget: Siga por E-mail

Foi lançado pela equipe do Blogger um novo recurso, chamado Follow by Email, Siga por Email em bom português.
Para quem conhece, o recurso é uma cópia do FeedBurner por e-mail (que também é do google), e que tem as mesmas características.
O Follow by Email encaminha diariamente uma cópia de suas postagens para o e-mail da pessoa que segue seu blog pelo Gadget (ou pelo RSS Feedburner).

Para inserir o Gadget é necessário ter uma conta no FeedBurner, com a conta criada entre no blogger (normal / draft) > clique em "Design" > "Editar Layout" > "Adicionar um Gadget" e selecione o Follow by Email (seguir por e-mail):


Agora insira as duas informações que o Gadget pede por padrão.
-Título
-URL do seu FeedBurner



Após a inserção dessas informações clique em Salvar, clique em visualizar e veja o resultado obtido.




O conteúdo do e-mail pode ser configurado no Feedburner (Login > Selecione a conta > aba "Optimizar" > seção "Content Options" > Selecione uma das 3 alternativas disponíveis.)

Resumo de conteudo antes, depois ou alterar objeto pela propriedade innerHTML do JavaScript

Este tutorial vai ensinar como inserir um pequeno quadro com o resumo ou descrição da postagem ativa (visitante dentro da postagem).
Eu troquei uma parte do conteúdo (Acima do post) por um conteúdo de texto para saber exatamente o que irá conseguir quando concluir este tutorial, claro que esta modificação não se prende apenas àquela parte do template, podendo ser inserida onde bem entender.
É necessário um leve entendimento de HTML para localizar os campos.

A partir de agora, estarei implementando JAVASCRIPT em minhas explicações, alguns já viram algumas de minhas postagens incluindo cálculos internos de tamanho de texto, elementos dinâmicos entre outros.
Antes de mais nada, gostaria de salientar que não tenho todas as competências no JAVASCRIPT e, que tudo que eu postar envolvendo javascript foi testado.

Iniciaremos com um breve trecho de um livro chamado: "Curso de programação em Javascript e HTML dinâmico" - de Rafael Feitosa, que fala sobre a propriedade innerHTML que iremos usar como base:

"Outra propriedade muito útil para o DHTML é o innerHTML. Esta propriedade só existe em elementos que têm conteúdo (<div>, <span>, <td>, <p> são exemplos disto). Elementos como <img> ou <br> não tem conteúdo, deste modo, os objetos que os representam não possuem propriedade innerHTML.

O valor desta propriedade é o código HTML que está dentro do elemento representado pelo objeto. Se lermos o seu valor ficamos sabendo o conteúdo HTML do elemento, e se o modificarmos estaremos alterando o conteúdo do elemento."

Com esta definição temos como intuito a solicitação do conteúdo de um determinado elemento, neste exemplo que eu apliquei em meu próprio blog, percebe-se que eu utilizei como alvo um objeto do tipo <div> que nada mais é que uma divisão de área.

De acordo com o texto a solicitação visa a leitura e a alteração do objeto(no nosso caso <div>), neste tutorial é possível implementar a forma mais adequada, seja ela uma ou outra, vejamos:

Iniciaremos criando um gadget de html vazio, anotar o id no código HTML do gadget que foi criado no template e criar uma postagem para testes no teu próprio blog, para chegar ao meu exemplo neste blog;

Criar um gadget de html vazio:

Vá em Painel > Design > Elementos da página e selecione "Adicionar um Gadget"

e selecione HTML/JavaScript na tela que aparecer

Copie e cole em 'Conteúdo':

<span style='display:none;'></span>

Clique em "Salvar".

Posicione o mouse em cima do link de Editar do gadget que acabou de ser criado("HTML/JavaScript")
Em seguida anote o ID do elemento como na imagem (...&widgetId=Header1&...)

Se fosse como demostrado na imagem acima nossa id será Header1, mas no nosso caso pode variar.

Limite o objeto Header1 criado(Clique aqui para saber como, opção #1 de "Determinar Limitar"), para que Mostre apenas nas páginas de postagens;

Inserir o bloco de código Javascript em uma postagem:

Vá em Postagem > Nova postagem

Em seu código de postagem, ou seja, quando estiver escrevendo uma postagem, mude para o modo de edição html, insira o código JavaScript em qualquer parte da postagem:

<script type='text/javascript'>
<!--

-->
</script>

Entendendo o código:
A primeira linha mostra o inicio de um pequeno trecho de script, sendo texto e javascript como base;
A segunda linha delimita navegadores antigos a mostrarem seu conteúdo;
A terceira linha em branco, o código que utilizaremos será inserido;
A quarta linha fecha a delimitação;
A quinta linha finaliza o bloco de script.

Escolha o método de modificação e insira a propriedade innerHTML na 3ª linha:

Modificação completa do conteúdo:

document.getElementById("Header1").innerHTML = "<br/>Insira seu resumo, seu indice ou detalhes da postagem aqui<br/>";

Inserção antes do conteúdo:

var temp1 = document.getElementById("Header1").innerHTML;
document.getElementById("Header1").innerHTML = "<br/>Insira seu resumo, seu indice ou detalhes da postagem aqui<br/>";
document.getElementById("Header1").innerHTML += temp1;

Inserção após o conteúdo:

document.getElementById("Header1").innerHTML += "<br/>Insira seu resumo, seu indice ou detalhes da postagem aqui<br/>";

No meu caso foi utilizado o método de inserção (nº 1) que altera todo o conteúdo.
O HTML6 do código abaixo é o ID de um dos meus objetos ( o objeto que está acima do post ) desta página que neste caso é a [...]id="Header1">[...]
No meu caso o código final é este:

<script type='text/javascript'>
<!--
document.getElementById("HTML6").innerHTML = "<br/>Este texto é um exemplo de inserção da propriedade innerHTML do Javascript<br/> e este recurso pode ser <a href='http://indiceblogger.blogspot.com/2010/09/resumo-de-conteudo-antes-depois-ou.html'>conferido aqui</a>";
-->
</script>

Agora crie um resumo onde quiser, quando quiser, basta pegar o id do objeto e utilizar um dos métodos.
Toda vez que for criar uma postagem e querer que apareça o resumo ou indice utilize o mesmo código, apenas altere o que desejar.
Não esqueça de compartilhar este tutorial com seus amigos.

Caso encontre algum erro, queira fazer críticas ou elogios ou até contribuir com uma dica, deixe um comentário.

Caso queira mais notícias, novidades, tutoriais para personalizar seu blog, assine nosso RSS: http://feeds.feedburner.com/indiceblogger
Aguarde que você receberá todas as atualizações.

Link de enviar ao Orkut - Promova entre seus amigos do Orkut

Imagem: [Ferramentas Blog]

Como sempre trago algumas modificações uteis para seu blog, como o "link que envia diretamente do seu blog para o Twitter", este link enviará o conteúdo da postagem para o Orkut, de maneira fácil e rápida, peço que tenha alguma prática para continuar e dar uma funcionalidade a mais para o blog.
Após a alteração das mudanças sugeridas neste passo a passo, abaixo de sua postagem, irá aparecer o seguinte:

Envie para seus amigos no Orkut:

Após clicado no link aparecerá a forma com que o visitante deseja compartilhar no orkut:

Vá em Painel > Layout > Editar HTML > marque a opção Expandir modelos de widgets.
Vamos começar inserindo a div e o estilo css e os códigos:

Localize:

post-footer-line post-footer-line-1

ou apenas

post-footer-line-1

ou

post-footer-line-2

ou

post-footer-line-3

Tente localizar do primeiro para o ultimo, apenas um.

Após localizado a linha perceba que ela está em uma div, tal como:

<div class='post-footer-line post-footer-line-1'> Daqui em diante coloque o código >>

Após a abertura da TAG vamos começar a inserir o código.

Insira o inicio do código que limita a exibição para "somente em postagens", da divisão que iremos inserir:
<b:if cond='data:blog.pageType == &quot;item&quot;'>Leia mais sobre o controle de exibição de determinados elementos nas páginas do Blogger »
Insira o resto contendo todo o código:

<div style='clear: both;'/>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<style>
#orkut-button {
margin-top: .15em;
padding: .5em;
background-color: #d2e4fc;
border: solid 1px #4a7fae;
}
#orkut-button img {
border: none;
float:none;
}
</style>
<script type='text/javascript'>
google.load(&#39;orkut.share&#39;, &#39;1&#39;);
google.setOnLoadCallback(function() {
new google.orkut.share.Button({
style: google.orkut.share.Button.STYLE_REGULAR,
/*title: 'Link de enviar ao Orkut',summary: ('Este script cria um link para enviar automaticamente para o Orkut.'),thumbnail: ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD6pRGnK67RUEJ_WrB0yvmFmGvMtEDHY1SU3mlitwYnzDQYxVECdg97k0HL1YkzI6rYAByeYJEdmZZX3uDdoqldXZMiH87DRYjP72Srly9497FMzUC70t7Ozg1oIVOI08I5i4p1Abt7RE/s1600/indiceblogger22.PNG'),destination: 'http://indiceblogger.blogspot.com'*/
}).draw('orkut-button','orkut-button2');
});
</script>
<center>
<div id='orkut-button'>Envie para seus amigos no Orkut:<br/>
</div>
</center>
<div style='display:block; float:right;'><a href='http://indiceblogger.blogspot.com/2010/01/link-de-enviar-ao-orkut.html'><small>Widget by IndiceBlogger »</small></a></div>
<div style='clear: both;'/>
</b:if>

Texto em vermelho bloqueado, pois fica melhor visualizado: O código dos recursos utilizados podem ser conferidos no site da API do Google, clicando aqui.
Altere da forma que acha melhor o texto exibido, em azul.
Não retire os créditos.

Salve e visualize uma postagem. (tem que ser dentro de um post).

Enquanto a página carrega:

Envie para seus amigos no Orkut:

Após o carregamento:

Envie para seus amigos no Orkut:

Ao carregar sua página perceba que a imagem carrega apenas ao finalizar o carregamento da página inteira, com isso devemos nos preocupar com a paciência (e também internet lenta) do usuário que está louco para clicar no link que não está presente, e, então criei este script que implementa o Link para o Orkut inserindo uma imagem que avisa ao usuário que está havendo um carregamento e logo aparecerá algo (para ele clicar), acompanhe:

Nas linhas que foram inseridas acima, modifique:

<div id='orkut-button'>Envie para seus amigos no Orkut:<br/>
</div>

altere para:

<div id='orkut-button'>Envie para seus amigos no Orkut:<br/>
<span id='aquiork'/>
<script>loading()</script>
</div>

Localize a Tag:

<head>

e logo após insira:

<script type='text/javascript'>
function loading()
{
ork = document.getElementById(&quot;aquiork&quot;)
ork.innerHTML = &quot;<img alt='Carregando...' class='imagork' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyDmYd_8Zgg5OYIOlnOOCG_NZZWGU9p-VKTTIMXVMBnUkILfzHlV-ud1UEuM2kWSI-acB1D-cRd_Hy661EjPvdHhOq8jmtPYAgphRJHqG7SYXPgJrA_YOSB-q4c67w67SFGWC5J_bTswg/s1600/ajax-loader.png' title='Aguarde o carregamento...'/>&quot;
}
window.onload = function(){
ork.style.display = &quot;none&quot;
}
</script>

Em azul: Link da imagem que será utilizada durante o carregamento. (clique aqui para obter mais imagens de pré-carregamento [via Ajax Load])

Salve e teste!
Verifique, a sua página, com esta modificação carregará da seguinte forma:

Envie para seus amigos no Orkut:

E, então após a finalização do carregamento da página inteira:

Envie para seus amigos no Orkut:

Quer testar? Clica ai em baixo, aproveita e compartilha você também!
Comenta, e assine nosso feed.
Confira também a postagem "Link de enviar para o Twitter"
Outras opções para o mesmo recurso:
Promova os seus posts no Orkut: botões de compartilhamento
via @crazyseawolf | Crazyseawolf

Compartilhar seu blog no Orkut – Recurso Promova
via @hordones | [ Ferramentas Blog ]
Esta postagem ainda será alterada...

Alterar o title dos links de navegação (older e newer link)

Postagem redigida em 27 de Dezembro de 2009

Alguns links no blogger dão até medo de passar o mouse, tal como os links de navegação para postagens anterior e próxima.

Pensando nisto criei um script para retirar a monotonia dos links de navagação, um script simples de se implantar, quase tudo gerado automaticamente e com apenas uma modificação no HTML principal.

Vantagem:
A vantagem é a de o visitante "ler" para qual postagem ele vai se clicar no link, veja abaixo uma imagem com os links em ação:

Para o script funcionar corretamente você deverá de agora em diante dar nome às postagens (no titulo, em edição) corretamente, já que o script lê o endereço do blog para gerar o título (title em HTML), sempre pensando no script e claro, no visitante!

Vamos lá!

Insira seu URL como demostrado:

http://indiceblogger.blogspot.com

Apenas, sem barras, sem ano, sem mês, enfim apenas o endereço principal.

---

 

Copie o que está dentro da Box acima ^
Vá em editar HTML >
Cole dentro da TAG <header> e antes do fechamento </header>
Salve

MARQUE a caixa de "Expandir modelos de widgets" >
Localize as linhas de old-link e newer-link:

old:

<a class='blog-pager-older-link'

newer:

<a class='blog-pager-newer-link'

Insira este trecho nas linhas old e newer:

onmouseover='javascript:mostratitulo()'

resultado:

<a class='blog-pager-newer-link' onmouseover='javascript:mostratitulo()'

e

<a class='blog-pager-newer-link' onmouseover='javascript:mostratitulo()'

Visualize e salve

Log de correção e implantação:

• Corrigido os erros de implantação;
• Correção de código 'extra-source';
• Bug-Fix de páginas de pesquisa e iniciais (imagem).
1. Bug corrigido onde aparece apenas o texto principal do link em páginas de pesquisa no blogger.
2. Texto que aparecia antes da correção do bug.

Novo editor do Blogger in Draft: 1 - Barra de Ferramentas

Vamos conhecer um pouco do novo editor do blogger, com uma série de postagens, integrando os novos usuários aos recursos oferecidos pelo Blogger in Draft, de uma a uma descritivamente.
Como foi prometido pelo Blogger, alguns recursos seriam implantados após alguns meses da alteração do novo editor do Blogger in Draft:

"Today we’re releasing the first iteration of a completely new version of the Blogger post editor. This editor is more stable, compatible, predictable, and will help us bring more functionality to posts on Blogger over the coming months and years."
Traduzindo>Google>
"Hoje estamos lançando a primeira iteração de uma versão totalmente nova do editor de postagens do Blogger. Este editor é mais estável, compatível, previsível, e vai nos ajudar a trazer mais funcionalidade para posts no Blogger, nos próximos meses e anos."

Vou lhes mostrar que não só implementaram como melhoraram, e muito!

Vamos começar ativando o novo Editor (se ainda não foi feito), terá de estar no Blogger in Draft para isto.
 Vá em Configurações > Básico > Localize a linha Selecionar Editor de Postagem e selecione o Editor atualizado.

 Pronto agora as novidades e recursos de uma-a-uma:
Começaremos pela "barra de ferramentas":

Da esquerda para a direita:

• Botão de Desfazer - Desfaz uma ou mais alterações feitas.
• Botão de Refazer - Ao contrário de Desfazer ele refaz o Desfeito com o Botão anterior.
• Botão de Seleção de Fontes - Seletor de estilo de fontes, com 7 fontes possíveis. Para utilizá-lo selecione o texto e aplique a mudança com este botão.
• Botão Tamanho de Fonte - Seletor de tamanho de fontes, com 5 tamanhos possíveis: Menor; Pequeno; Normal; Grande e Maior. Para utilizá-lo selecione o texto e aplique a mudança com este botão.
• Botão de Negrito (B de Bold, Negrito em inglês). Para utilizá-lo selecione o texto e aplique a mudança com este botão.
• Botão de Itálico (I de Italic, Itálico em inglês). Para utilizá-lo selecione o texto e aplique a mudança com este botão.
• Botão de Tachado - Cria um risco no texto. Para utilizá-lo selecione o texto e aplique a mudança com este botão.
• Seletor de cor de Texto - Altera a cor do texto selecionado.
• Seletor de cor do plano de Fundo do texto - Altera a cor do fundo do texto selecionado.
• Inserção de links - Cria links para outras páginas, imagens etc...
• Botão de inserção de imagens - Faz upload e insere a imagem na postagem.
• Botões de dispozição de texto(4) - Altera o Layout do texto selecionado para: Alinhar à esquerda, Alinhar ao centro, Alinhar à direita e Justificado.
• Botões de listagem(2) - O primeiro, Lista Numerada, lista em ordem numeral, enquanto o segundo, Lista com marcadores, introduz um marcador na listagem.
• Botão de Citação - Introduz um recuo no texto
• Remover Formatação - Remove as alterações feitas no texto selecionado
• Inserir Jump Break - Insere o recurso de Leia Mais na postagem em questão. Saiba mais »
• Definir/Traduzir -  Define (Dicionário) e Traduz (Tradutor) integrados

Todas estas alterações no editor do blogger, ficaram sendo como ferramentas obrigatórias para um bom post.
Logo tem mais.
Deixe seu comentário.

Recurso de "Read More" (leia mais) sem ter de gastar a unha.

Alguns meses atrás, foi lançado o recurso de "read-more" (leia mais) pelo blogger, recurso que antes não estava integrado no blogger, desta forma tendo, muitos, que apelar para a programação "na unha" para obter tal recurso.

O Blogger chama-o de  Jump Break. Com o Junp Break pode-se dizer que teremos a página inicial "cortada" em pedaços, servindo como "aperitivo" para o visitante, isso evita de que seja necessária a rolagem de página, fazendo com que o visitante leia apenas o necessário para saber de que assunto e conteúdo o post trata, mas claro isso depende muito do editor, tendo o trabalho de colocar uma descrição antes de tudo, para poder atrair o leitor ao post.

Como utilizar esta ferramenta no novo editor do Draft Blogger?

Apenas coloque o cursor aonde se deseja que seja cortado o texto e clique no ícone de "Inserir Junp Break" e, então uma imagem irá referenciar o "local que está cortado", como na imagem abaixo:

E no código HTML também aparecerá o código que indica onde foi cortado:

Como utilizar esta ferramenta no novo editor do Blogger?
Entre em Nova postagem > Editar HTML e localize a linha onde deseja cortar, referencie com algum texto que está no modo Escrever, e insira o código <!-- more -->  onde deseja cortar o texto.

Para alterar o texto do Junp Break que aparece onde é cortado, apenas entre em Layout > Postagens do Blog (editar) e em Texto do link da página de postagem: como mostrado, altere o texto, simples assim.

Alguns templates podem não suportar tal recurso, por serem modificados e não terem as linhas de código que são necessários para o funcionamento do mesmo, caso o seu seja, envie-o para testes e solução.

Fonte : Blogger Buzz

Menu de links sociais no blogger

Peço que, para quem já usa o menu e teve problemas com a imagem, ou com o próprio menu, colocar o novo link de imagem (em vermelho logo Abaixo como demostrado no passo 2, poderá clicar para ver onde deverá colar o link:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPNhtmhaEjJS1xB7HtQjiQ74V9yfRVEDp4-osaEtBky-M1atW7jWzb6kIjp5reTceUalYZpP8pcCpxA01nFAqSWd6lwNQavRG3OxYUSN6E1_DPWpmNUGu4D_Rnjd2MUtSYvIAvVcoEruA/s1600/sexysprite.PNG

Clique aqui para ser direcionado para o local de inserção do código!

Acho que os que me acompanham no blog viram uma implementação no layout anterior, que continha alguns links de redes sociais...

Quando havia feito as implementações, fiz com o efeito onMouseOver de tecnologia CSS, onde alguns navegadores (morte ao IE), não aceitavam tais formatações, Estava eu visitando um site muito querido por mim, onde o dono auxilia os blogueiros com muitos templates de qualidade superior, em scripts e design, estou falando do bietemplates. Baixei e instalei o template que uso agora pelas configurações que ele trazia, inclusive o menu social, que trato de trazer à vocês neste tutorial, mas já vou perguntando:
Você sabe ler inglês?

Se sim leia o artigo original/fonte, no qual especifica todos os procedimentos que aqui estão.

SexyBookmarks v2 For Blogger | Css Reflex - Design Blog | Web Design | Inspiration and Resources for Designers - Original

Via Ipietoon - Mod 1

Vamos lá, caso queira ficar por aqui mesmo...

Entre em Painel > Layout > Editar HTML e habilite a opção "Expandir Modelos de Widgets"

Localize a tag de estilos (ou coloque em um arquivo externo e referencie-o no head)

<style>

e após esta Tag cole as seguintes poucas linhas de código:

div.sexy-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
padding-top:20px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
position:absolute;
right:-17px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float: left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPNhtmhaEjJS1xB7HtQjiQ74V9yfRVEDp4-osaEtBky-M1atW7jWzb6kIjp5reTceUalYZpP8pcCpxA01nFAqSWd6lwNQavRG3OxYUSN6E1_DPWpmNUGu4D_Rnjd2MUtSYvIAvVcoEruA/s1600/sexysprite.PNG') no-repeat !important;
}

.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position: left top !important;
}
.sexy-delicious:hover {
background-position: left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}

Width = Largura de 540px alterável

Obs.: Código alterado, por motivo de: imagem do servidor não estava mais disponível.

Agora localize o seguinte código:

<data: post.body/>

e cole antes:

<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/indiceblogger' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
<span class='sexy-rightside'/></div>

indiceblogger = Seu ID no feedburner

Visualize seu modelo, caso não tenha funcionado veja abaixo as notas, caso tenha salve.

Notas:

Caso não funcione corretamente implemente o 3° passo depois de:
<div class='post-footer-line post-footer-line-1'>

Caso seu template possui o mecanismo de resumo de posts automático, tal como este, implemente o 3° passo após:
<b:if cond='data:blog.pageType == &quot;item&quot;'><data: post.body/>

o endereço da imagem pode ser trocado com o atriburo de URL alterando o que está em vermelho:
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;

Quer mais? assine o rss feed ou contribua com suas idéias no formulário de comentário abaixo.

Passe adiante!

Mostrar, ocultar ou exibir a NavBar do blogger com o mouse sobre ele.

Há ainda muitos templates na internet que não vem com estas modificações, e muitos dos blogueiros não gostam de exibir a NavBar do blogger, ou também para aqueles que querem voltar a exibi-la já que o blogger fez modificações na navegação da NavBar:

• Link para "Seguir Blog" que é o mesmo do Google Friends Connect.
  
• Link para "Sinalizar" onde o usuário faz denúncias de plágio (principalmente) ou de direitos autorais...
  
• Link para "Compartilhar" onde se faz um compartilhamento do blog. (é o que mais gostei).

Prosseguindo com o tutorial:

Estas modificações para fazer a barra do blogger desaparecer.

Em Painel > Layout > Editar HTML >
Cole este código abaixo da tag de estilo

<b:skin><![CDATA[
Obs.: Neste código acima poderá vir um código de comentários ex.: <![CDATA[/*Comentários aqui e fechamento dos comentários=*/ a partir daqui pode se implementar.

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

Estas modificações para fazer a barra do blogger aparecer.

Em Painel > Layout > Editar HTML >
localize este código:

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

Apague ou coloque tags de comentários:

/*#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}*/

NavBar com OnmouseOver
Ao passar o ponteiro do mouse sobre a Navbar que está oculta, ela aparecerá.

Esta implementação pode ser vista neste blog.

Em Painel > Layout > Editar HTML >
localize este código em vermelho, caso não encontre pule para o passo2 e cole o código apenas:

#navbar-iframe {
...código até o fechamento...
}

Altere para:

#navbar-iframe{
opacity:0.0;
filter:alpha(Opacity=0)
background-color:#ffffff;
}

#navbar-iframe:hover{
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100)
}

Uma breve explicação do css:

#navbar-iframe
localiza a <div (#) com a id='navbar-iframe'
<div id='navbar-iframe'>
e
#navbar-iframe:hover
Possui as mesmas caracteristicas do #navbar-iframe só que é ativado apenas com o mouse sobre o elemento em questão.

{ ... }
inicio e fim do bloco de modificação: Tudo dentro deste bloco irá modificar a div que contenha o id especificado.

height: 0px;
Especifica a autura(height) em pixels (px)

visibility: hidden;
Estiliza a visibilidade para "escondido" (hidden)

display:none;
Estiliza o display (mostrar/exibir) para none (não mostrar)

opacity:0.0;
Determina a Opacidade em 0 (não mostrar)

filter:alpha(Opacity=0)
Determina a Opacidade em 0 (não mostrar) (Internet Explorer, falescido)

background-color:#ffffff;
Determina uma cor de fundo em Hexadecimal (padrão #RRGGBB)

opacity:1.0;
Determina a Opacidade em 100 (mostrar)

filter:alpha(Opacity=100, FinishedOpacity=100)
Determina a Opacidade em 100 (mostrar) (Internet Explorer, falescido)

Hack de caixa de pesquisa

O que muitos pensam a respeito de caixas de pesquisa, é o de que sempre terão de apagar os dados, tais como textos ou as imagens inseridas dentro delas, para poder fazer a pesquisa, veja um exemplo:

Apague os dados e clique em enviar >.

 

O código desta caixa de pesquisa seria:

<form action='#' method='get'>
<input id='caixa1' maxlength='100' size='25' type='text' value='Pesquisar'/>
<input type='submit' onclick="/search" value='Enviar &gt;'/>
</form>

Conforme a situação pediu, resolvi colocar este método para implementar nosso blog(e para não torrar a paciência do visitante), podendo também ser implementado em sites, teste o resultado final:

 

O código desta caixa de pesquisa seria:

<form action='/search' method='get'>
<input id='s' maxlength='100' name='q' onblur='if (this.value == "") {this.value = "Pesquisar";}' onfocus='if (this.value = "Pesquisar") {this.value = "";}' size='25' type='text' value='Pesquisar'/>
<input type='submit' onclick="/search" value='Enviar &gt;'/>
</form>

Este é o hack para implementarmos nosso site:

onblur='if (this.value == "") {this.value = "Pesquisar";}' onfocus='if (this.value = "Pesquisar") {this.value = "";}'

Passo-a-Passo: Localize sua caixa de pesquisa e implemente o código acima.

Procure por um destes trechos no seu Painel > Layout > Editar HTML:

Texto que aparece no botão de pesquisa, geralmente é "pesquisar"

Texto que aparece dentro da caixa de pesquisa, geralmente é "pesquisar"

Id do elemento.

Localizado o trecho no Editar HTML, visualize a parte do código da caixa de pesquisa, iniciado em <input , contendo o atributo: type='text'

Implemente o código abaixo após o <input :

Para sites:

onblur='if (this.value == "") {this.value = "Pesquisar";}' onfocus='if (this.value = "Pesquisar") {this.value = "";}'

Para Blogger (no Editar HTML):

onblur='if (this.value == &quot;&quot;) {this.value = &quot;Pesquisar&quot;;}' onfocus='if (this.value = &quot;Pesquisar&quot;) {this.value = &quot;&quot;}'

Ficando da seguinte maneira:

Para sites.

<input onblur='if (this.value == "") {this.value = "Pesquisar";}' onfocus='if (this.value = "Pesquisar") {this.value = "";}' [... continuação do código ...]/>

 

Para Blogger

<input onblur='if (this.value == &quot;&quot;) {this.value = &quot;Pesquisar&quot;;}' onfocus='if (this.value = &quot;Pesquisar&quot;) {this.value = &quot;&quot;}' [... continuação do código ...]/>

Teve algum problema de implementação? Comente abaixo com o nosso formulário e ajude quem teve o mesmo problema que o teu!

Não se esqueça:
[...continuação do código...]/> significa que o código continua, não é necessário colar junto, servindo apenas de orientação
Visualize primeiro antes de salvar, provavelmente o hack não funciona mas, assim que clicado em visualizar e a página carregar podera ser feito o processo de gravação (salvar)