» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Como Colocar uma Imagem no Cabeçalho dos Comentários




Quando você vai comentar em algum post de vários blogs já deve ter visto uma imagem como esta
no cabeçalho dos comentários:
Veja:
Comentários

Para que você coloque uma imagem como esta no cabeçalho dos seus comentários você deve:
Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.
1º Clique em Layout ► Editar HTML ► Clique em Expandir modelos de widgets.
2º Encontre o código abaixo:
Obs: Você não precisa procurar todas as linhas do código, basta usar o Ctrl+F copiar uma linha e procurar, depois compare se o bloco de códigos se assemelha a este.

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'> 1 Comentário:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

<dl id='comments-block'>
Acrescente a linha em vermelho com o endereço da sua imagem onde está indicado abaixo:

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<img src='URL da sua Imagem'/>
<b:if cond='data:post.numComments == 1'> 1 Comentário:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

<dl id='comments-block'>
Complementando...
3º Para que a expressão 5 COMENTÁRIOS fique da forma como está na imagem. Você deve encontrar no CSS do seu blog a linha #comments h4 e editá-la da forma que preferir.
#comments h4{
font-weight:bold; /*Fonte em negrito*/
font-size:125%; /*Tamanho da Fonte*/
line-height:1.4em; /*Altura da Linha*/
text-transform:uppercase; /*Texto todo em caixa alta*/
letter-spacing:.2em; /*Espaço entre as letras*/
color:#2B8FB7; /*Cor da Fonte*/
margin:1em 0;
}

Para que você aprenda mais clique em:

Corrigindo o Link de Comentários
Como Realçar os Comentários do Autor do Blog

Qualquer dúvida sobre a edição do CSS consulte: CSS PARA WEBDESIGN

Blockquote e Caixinha de Codigos




CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO
Sempre que coloquei hacks com códigos para o blogger usava a função blockquote que são as "aspas" que aparecem quando você vai postar algo que deseja DESTACAR em seu post.
Porém, quando escrevia algo que queria destacar nos posts o destaque ficava igual aos hacks.
Então resolvi diferenciar as citações dos códigos de hacks usando um recurso muito simples que pode ser incorporado ao seu post durante sua criação → <pre><code>Código do Hack</code></pre> que é esta caixinha de códigos que você vê quando publico os códigos.

Aqui vamos aprender um pouco sobre a função BLOCKQUOTE e Como fazer a CAIXINHA DE CÓDIGOS
Blockquote
Block=Bloco - Quote=Citação ► Citação em Bloco



Para configurar/personalizar a função Blockquote em seu blog você deve ir em Modelo » Editar HTML e procurar o código CSS →.post blockquote (utilize o Ctrl+F)

Você pode personalizar o Blockquote do seu blog de várias maneiras.
Para isso substitua o código blockquote original pelo correspondente ao que você deseja.

Aqui vão algumas sugestões de códigos blockquote com suas representações acima:
Não se esqueça dos recursos CSS3, veja este post: Geradores de CSS e CSS3

1º - Com duas bordas uma superior e outra inferior.


.post blockquote{
background:#EAF3FB ; /*Altere a cor como preferir*/
border-top:2px solid #1C527A; /*Altere a cor como preferir*/
border-bottom:2px solid #1C527A;
margin:5px 20px;
padding:5px; }

2º - Apenas com a borda à esquerda.

.post blockquote {
margin: 10px 10px 10px 20px; 
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #333; /*Cor do Texto*/
background:#EEEEEE; /*Cor do Fundo*/
border-left: 20px solid #4F879F;}
Para alterar as cores veja » Como identificar cores

3º - Efeito Botão.

.post blockquote {
background:#FDFDFD;
border-top:1px solid #B6B6B6;
border-right:2px solid #B6B6B6;
border-bottom:2px solid #B6B6B6;
border-left:1px solid #B6B6B6;
padding: 5px;
margin:10px 20px 10px 20px;}

4º - Simples com bordas contíunas e background.

.post blockquote {
background: #FFE1E1;
border: 1px solid #C60000;
padding: 5px;
margin:10px 20px 10px 20px;}
♦ Observe que a cor de fundo (background) é #FFE1E1 e a cor da borda é #C60000 e podem ser alteradas ao seu gosto. Veja: Como identificar cores
♦ Você também pode alterar o tipo de borda.Veja: Lição11: Bordas

5º - Blockquote com 1 imagem.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam augue tortor, feugiat non, molestie et, auctor vel, nisi. Nulla mauris elit, volutpat eu, hendrerit at, volutpat et, enim. Donec enim nisi, scelerisque eget, gravida id, tincidunt vel, tellus. Fusce nec pede a erat tristique aliquet. Nullam accumsan, tellus vitae lacinia euismod, nunc nibh aliquam felis, at sollicitudin nunc ligula non mauris.

.post blockquote {
background: url(URL da Imagem) top left no-repeat 5px 10px;
background-color: /*código da cor que quiser*/;
border: 2px dashed #C60000;
padding: 5px 5px 5px 110px;
margin:10px 20px 10px 20px;}
OBS: A linha padding tem a distância do lado esquerdo adaptadas à figura do exemplo.(100 por 83px).
Para entender melhor. Veja: Lição 10: Margin e padding

aspas.jpg
Como aplicar:
1) Você irá substituir o bloco do .post blockquote por estes dois blocos de código.
.post blockquote {
background: transparent url(URL da Imagem Superior) no-repeat 5px 10px;
border: 1px solid #C60000;
padding: 5px 5px 5px 60px;
margin:10px;}
.post blockquote div {
background: transparent url(URL da Imagem Inferior) bottom right no-repeat;
padding: 5px 60px 5px 5px;
margin:10px;}
OBS: As linhas padding tem as distâncias à figura do exemplo.(50px por 50px)
2) Para utilizar este recurso acrescente as tags <div></div> dentro das tags <blockquote></blockquote> na opção Editar Html do seu post ficando assim:

<blockquote><div>Citação</div></blockquote>


Caixinha de Códigos
Pronto. Agora que vocês já aprenderam um pouco sobre Blockquote vamos ao código para postar hacks:

Vou ensinar 2 formas de criar a caixinha de códigos em seu post:
A primeira já usei muito aqui no TPV, mas depois substitui pela segunda que é mais fácil na hora de digitar o post.

1ª Colocando a tag <div style> toda vez for fazer um post:

Você vai precisar ter este código abaixo salvo em seu computador num bloco de notas e vai ter que colocá-lo sempre:
<div style="border: 1px solid #555; background: #FAFAFA url(http://i33.tinypic.com/il8w0i.jpg) repeat-y left top; padding-left: 15px; margin:20px;">CÓDIGO</div>



Onde está escrito CÓDIGO insira o código do Hack que você vai postar.

A cor da imagem pode ser alterada da forma que você quiser em um editor de imagens aí altere também as bordas e background para ficar mais apresentável.

Sugiro que você salve as imagens deste post no próprio blogger para que elas sempre apareçam em seu blog.

OBS►A única vantagem que vejo em relação a segunda opção é que dessa forma a imagem da caixinha do código vai ficar da mesma altura de quantas linhas você usar.

2ª- Existe a opção de usar o recurso das tags <pre> + <code>

Onde você coloca no CSS do código HTML do seu blog as definições para estas tags e as utiliza quando for publicar códigos, não se esquecendo de usar os recursos &lt; e &gt; para < e > dentro das chaves:

<pre><code>&lt;CÓDIGO&gt;</code></pre>
Como Fazer?
1º - Em Modelo → Editar HTML → Coloque os códigos abaixo acima da linha ]]></b:skin>
pre {
background:transparent url(Endereço da Imagem do Código) no-repeat 0 0;
padding-left:12px;
}
pre code {
overflow:auto;
background-color:#F9F9F9;
border:1px solid silver;
color:#333;
font:normal normal 110% Arial, sans-serif;
display:block;
white-space:pre;
text-align:left;
min-height:63px;
word-wrap:break-word;
padding:5px;
}
2º - Feito isso, quando você for publicar algum post que contenha códigos utilize as tags <pre><code>CÓDIGO</code></pre> na parte Editar Html durante a edição do seu post. Desta forma ficará igual ao quadro acima.

3º - Salve esta imagem codigo em seu computador, hospede-a em um site de sua preferência e substitua o endereço da imagem no código acima:


Para complementar o conteúdo e Fontes:
Usando Bloco de Texto

6 Maneiras de Publicar Codigos HTML nos Posts




CLASSIFICAÇÃO DO TUTORIAL
FÁCIL
Você já deve ter visto que quando vamos publicar códigos em HTML precisamos de um de outro código para que as tags que ficam entre as chaves < > possam aparecer corretamente no post.

Eu vou listar abaixo 6 maneiras de como publicar os posts que contenham códigos HTML:
1- Para representar as chaves [ < ] e [ > ]
Devemos usar os recursos:
» &lt; para <
» &gt; para >


2- Você também pode usar o site Blogcrowds
Onde podemos colocar o código HTML no quadro clicar em PARSE que ele já dá o código pronto com os recursos &lt; e &gt; já aplicados.


3- Você pode usar o editor de posts Zoundry
Facilita demais a edição de códigos HTML, além da criação de posts e organização dos mesmos e dos blogs.
É possível criar os posts nele e depois corrijir aqui no blogger para diminuir espaços entre linhas e outras coisas, mas para publicar códigos é excelente.
Cheguei até este editor pelo Blosque.

4 - Tem o Windows Live Writer
Este editor é muito bom e utilizado por muitos blogueiros experientes.
Já utilizei-o mas ainda não largei do blogger.
Preciso mudar pois estou vendo que publicar tudo aqui pelo editor do blogger me atrasa muito e precisamos de mais agilidade para produzir melhor.
Você pode aprender melhor sobre ele neste post do Adelson do Gerenciando Blog:
Utilizando o Live Writer para escrever em seu blog

5- Existe a opção de usar o recurso das tags <pre> + <code>
Onde você coloca no CSS do código HTML do seu blog as definições para estas tags e as utiliza quando for publicar códigos, não se esquecendo de usar os recursos &lt; e &gt; para < e > dentro das chaves:

<pre><code>&lt;CÓDIGO&gt;</code></pre>

Como Fazer?

1º - Em Modelo → Editar HTML → Coloque os códigos abaixo acima da linha ]]></b:skin>
pre {
background:transparent url(Endereço da Imagem do Código) no-repeat 0 0;
padding-left:12px;
}
pre code {
overflow:auto;
background-color:#F9F9F9;
border:1px solid silver;
color:#333;
font:normal normal 110% Arial, sans-serif;
display:block;
white-space:pre;
text-align:left;
min-height:63px;
word-wrap:break-word;
padding:5px;
}
2º - Feito isso, quando você for publicar algum post que contenha códigos utilize as tags <pre><code>CÓDIGO</code></pre> na parte Editar Html durante a edição do seu post. Desta forma ficará igual ao quadro acima.

3º - Salve esta imagem codigo em seu computador, hospede-a em um site de sua preferência e substitua o endereço da imagem no código acima:

6 - Temos outra opção, a de usar o recurso <textarea>.
Quando usamos este recurso não é preciso usar &lt; e &gt;para as tags < e >
Ficando assim:


Para isso, utilize em Editar Html quando estiver criando seu post as tags:

<textarea rows="6" cols="65" onfocus="this.select()" onmouseover="this.focus()" name="textarea">Código HTML</textarea>
Onde:
rows="6" significa quantas linhas seu quadro vai ter → Altura
cols="65" significa quantas colunas seu quadro vai ter → Largura
Você pode editá-los como preferir no Html do seu post.
No post Blockquote e Caixinha de Códigos já ensinei outra maneira de publicar códigos no posts dentro de uma caixinha que os destaca.

Ícones de Natal




O Natal está chegando e se você está procurando algo para alegrar o seu blog/site este ano, você vai ficar feliz em saber que existem muitos ícones deste tema para você escolher.]

É uma ótima maneira para dizer Feliz Natal para seus leitores.


Para Baixar as Imagens:
» Clique em cima do título ou da imagem e vá até a página que a contém e muito mais.

13 Links para Ícones Sociais de Natal

20 Links para Ícones de Natal


Edição Jumbo do 1º aniversário da Revista Blogosfera




Se você ainda não conhece a Revista Blogosfera idealizada pelo blogueiro e professor Gustavo Freitas.
Já está na hora de conhecer e não perder o download da Edição de Aniversário.
Esta edição é uma compilação de todas as 6 Revistas lançadas até agora com uma nova capa.
Clique na imagem e faça o download desta Edição Jumbo.



Personalizando a Data do seu Post




Eu já havia feito um post/tutorial sobre como personalizar a data do seu post e colocar na forma de calendário, mas estive lendo este post e achei que estava um pouco difícil.

Então resolvi trazer esta dica novamente para o Templates para Você de uma forma bem mais fácil com a ajuda da Elke do Templates e Acessórios! Foi lá que vi este tutorial e os créditos são todos dela!

Para a data do seu post ficar como está aqui no Templates para Você, siga os passos descritos neste post.
Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

1º- Passo:

Clique em Configurações » Idioma e formatação » Altere o formato da data

► Em Formato da Data escolha o formato:06 Novembro 2012

Veja as imagens:

►Clique em Salvar configuração

2º- Passo:

Vá em Modelo » Editar HTML

► Encontre a linha:

</head>

Cole ABAIXO desta linha o código:
<!-- JavaScript Personalizando a Data do Post-->
<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<div class='fecha_dia'>"+da[0]+"</div>";
mes = "<div class='fecha_mes'>"+da[1].slice(0,3)+"</div>";
anio = "<div class='fecha_anio'>"+da[2]+"</div>";
document.write(dia+mes+anio);
}
</script>
<!-- Fim JavaScript Personalizando a Data do Post-->
Salve seu template clicando em Salvar modelo

3º- Passo:

» Configurando a data para o formato vertical.

Encontre estas linhas abaixo:(Selecione as primeiras que aparecerem)
 <b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
Substitua a linha:
<h2 class='date-header'><data:post.dateHeader/></h2>
Obs » Se código acima estiver desta forma:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2> você pode substituí-lo sem problema.
Pelo código abaixo ▼:
<div id='fecha'>
<script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='fecha'>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>
<script>remplaza_fecha(ultimaFecha);</script>
</div>
OBS: As datas vão se repetir em todos os posts com este código.

O bloco de códigos irá ficar assim:
<b:if cond='data:post.dateHeader'>
<div id='fecha'>
<script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='fecha'>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>
<script>remplaza_fecha(ultimaFecha);</script>
</div>
</b:if>

Veja como ficou no Demoplate 2010-3

4º Passo:

Para configurar a imagem ou bloco da data copie este código CSS abaixo e cole acima da tag: ]]></b:skin>
#fecha {
color: #464646; /*Edite a cor da data*/
padding: 0px 0px 0px 0px; /*Altere as margens internas da data*/
margin-right:5px; /*Margem externa direita*/
float:left;/*Localizado à esquerda do Título- Se quiser do outro lado (direito) mude left para right*/
text-align:center;
border: 1px none #dedede; /*Coloque borda se quiser*/
list-style:none;
display: block;
background: url('AQUI O ENDEREÇO DE SUA IMAGEM') no-repeat;
}
.fecha_dia {
display:block;
font-size:18px; /*Tamanho da fonte*/
line-height:16px; /*Altura da Linha*/
font-family:'Arial';
letter-spacing:-1px
}
.fecha_mes {
font-size:10px; /*Tamanho da fonte*/
line-height:9px; /*Altura da Linha*/
text-transform:uppercase;
display:block;
}
.fecha_anio {
font-size:9px; /*Tamanho da fonte*/
line-height:8px; /*Altura da Linha*/
display:block;
}

Configurando o CSS da Data:

  1. Onde está AQUI O ENDEREÇO DA SUA IMAGEM você pode colocar a imagem de uma folha de calendário, por exemplo.
  2. Aqui são alguns links de onde encontrar as imagens de folhas de calendário:
    Ícones de Calendários
    Folhas de Calendário
  3. Se você precisar colocar cores diferentes para o dia, mês ou ano acrescente a linha:color: código hexadecimal; /*Edite a cor da data*/ nos blocos de códigos correspondentes para o dia, mês e ano e apague do #fecha.
    Veja: Como identificar cores
  4. Preste atenção para os blocos de códigos [.post h3{] e [.post h3 a, .post h3 a:visited, .post h3 strong { ] caso o título do seu post fique acima da data configure os comandos margin e padding destes blocos de códigos para que tudo fique alinhado.

    ♦Mas como fazer isso? Altere e vá visualizando os resultados.

    Dica: Experimente em .post h3{ inserir a linha: margin-left:35px;


Observação Importante:

» Este hack tinha o problema da data não aparecer em post feitos no mesmo dia, que foi resolvido em outro post que fiz aqui no TPV.
Para evitar que você tenha que procurar a correção deste problema em outro post o código daqui já está atualizado para que as datas apareçam em todos os posts.


Créditos:
Elke - Templates e Acessórios
Blog and Web

Post Atualizado e Corrigido em: 06/12/2012

Aproveite e Acesse Também:
Como Repetir a Data do Post

Geradores de CSS e CSS3




Estava fazendo uma faxina nos Favoritos do meu Chrome e encontrei uns sites geradores de códigos CSS que podem ajudar você a incrementar o seu blog/site.

Para quem não sabe o que é CSS, segundo a Wikpédia:
Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.
Em vez de colocar a formatação dentro do documento, o desenvolvedor cria um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar apenas um arquivo.
Os templates do blogger utilizam esta linguagem de estilo.

Atualmente tem se utilizado uma nova versão de CSS que é o CSS3:
CSS3 é a mais nova versão das famosas Cascading Style Sheets (ou simplesmente CSS), onde se define estilos para páginas web com efeitos de transição, imagem, e outros, que dão um estilo novo às páginas Web 2.0 em todos os aspectos de design do layout.
A principal função do CSS3 é abolir as imagens de plano de fundo, bordas arredondadas, apresentar transições e efeitos para criar animações de vários tipos, como um simples relógio de ponteiros.
Isso se deve aos novos browsers que estão chegando, com suporte à essa linguagem, como o Google Chrome, Opera, Internet Explorer 9, Safari e Mozilla Firefox. Assim, o CSS3 facilitará o trabalho dos que trabalham com web e também dos usuários, pela variedade de transformações na apresentação de um website. Fonte:Wikipédia
Porém os recursos do CSS3 ainda não se apresentam uniformemente em todos os navegadores havendo a necessidade de adaptações.

Sempre que preciso recorro a estes sites e acho que eles podem ser muito úteis para você.

Aqui vai a lista de Geradores de CSS e CSS3 e também alguns sites que ensinam sobre CSS. → Buttons, Tables, Gradient, Box Shadow, Border.


1- CSS3 Maker

2- CSS3 Generator

3- CSS3 Playground

Fácil e intuitivo- Gostei muito

4- CSS Border Radius

Simples e Fácil

5- CSS Box Shadow

6- CSS Generators


7- CSS3 Generator

8- HTML Tabble Style Generator


9- CSSTableGenerator

10- CSS3 Button Generator


11- CSS Button Maker

12- CSS3 Button Generator

13- Best CSS Button Generator


14- CSS Button Generator


15- CSS3 Gradiente Generator

Fácil

16- Ultimate CSS Gradient Generator

17- CSS Menu Builder

18- CSS Menu Maker

19- Creative CSS3 Animation Menus

20- CSS3 Generator-Webtutorials

CSS3 Generator
Fácil

21- CSS3 Transforms

Médio

22- CSS Button Generator

CSS Button Generator
Sugestão do Leitor veetubes

Com certeza ainda devem ter muitos sites que podem nos ajudar gerando códigos CSS ou nos ensinando sobre este assunto.
Sempre que eu encontrar algum que ainda não tenha relacionado neste post, trarei para enriquecê-lo com mais informação para você.

Menu em Abas com JQuery







Vou ensinar como colocar em seu blog um menu muito bonito, simples e fácil de instalar.


Para visualizar este menu clique neste link:

Site de Demonstração


Clique em Modelo ► Editar HTML


1º Passo:

» Instalar o CSS no seu template.

Cole o código abaixo acima da tag ]]></b:skin>

/*---- Tabbed Sidebar Widgets ---- */
.widget-wrapper2 { border: 1px solid #494e52;
                   background-color: #636d76;
                   padding: 8px; }
.widget-tab { -webkit-border-bottom-right-radius: 5px;
              -webkit-border-bottom-left-radius: 5px;
              -moz-border-radius-bottomright: 5px;
              -moz-border-radius-bottomleft: 5px;
              border-bottom-right-radius: 5px;
              border-bottom-left-radius: 5px;
              background: #FFFFFF url(http://i37.tinypic.com/28iq9fm.gif) repeat-x scroll left bottom !important; /*img-tabcontentbg*/
              border: 1px solid #CFCFCF;
              font-family: Arial,Helvetica,sans-serif;
              padding: 15px !important; }
.widget-tab  ul { margin: 0px;
                  padding: 0px 20px 0px 20px; }
.widget-tab  ul li { list-style: none;
                     border-bottom: 1px solid #d6dde0;
                     padding-top: 10px;
                     padding-bottom: 10px;
                     font-size: 13px; }
.widget-tab  ul li:last-child { border-bottom: none }
.widget-tab  ul li a { text-decoration: none;
                       color: #3e4346; }
.widget-tab  ul li a small { color: #8b959c;
                             font-size: 9px;
                             text-transform: uppercase;
                             font-family: Verdana, Arial, Helvetica, sans-serif;
                             position: relative;
                             left: 4px;
                             top: 0px; }
.tab-content  ul li a:hover { color: #a59c83 }
.tab-content  ul li a:hover small { color: #baae8e }
.active-tab { background: #FFFFFF url(http://i38.tinypic.com/2urpe01.gif) repeat-x scroll left top !important; /*img-tabtopbg*/
              border-color: #CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
              border-style: solid !important;
              border-width: 1px 1px 2px !important;
              color: #282E32 !important; }
ul.tab-wrapper { margin: 0px;
                 padding: 0px;
                 margin-top: 5px;
                 margin-bottom: 6px; }
ul.tab-wrapper li { -webkit-border-top-left-radius: 5px;
                    -webkit-border-top-right-radius: 5px;
                    -moz-border-radius-topleft: 5px;
                    -moz-border-radius-topright: 5px;
                    border-top-left-radius: 5px;
                    border-top-right-radius: 5px;
                    background: #191919 url(http://i34.tinypic.com/sf83a1.gif) repeat-x scroll left top; /*img-tabinactivebg*/
                    border: 1px solid #464C54;
                    color: #FFFFFF;
                    cursor: pointer;
                    display: inline;
                    font-family: Verdana,Arial,Helvetica,sans-serif;
                    font-size: 9px;
                    font-weight: bold;
                    line-height: 2em;
                    list-style-image: none !important;
                    list-style-position: outside !important;
                    list-style-type: none !important;
                    margin-right: 1px;
                    padding: 8px 14px;
                    text-align: center;
                    text-decoration: none;
                    text-transform: uppercase; }
ul.tab-wrapper li:hover { background: #FFFFFF url(http://i38.tinypic.com/2urpe01.gif) repeat-x scroll left top !important; /*img-tabtopbg*/
                          border-color: #CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
                          border-style: solid !important;
                          border-width: 1px 1px 2px !important;
                          color: #282E32 !important; }

Imagens:

Tabcontentbg -   Tabtopbg -   Tabinactivebg -   Tabinactivebg - (Sugestão)

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

2º Passo

» Instalar o JQuery e o Script em seu blog.

Cole abaixo da tag </head> o código ▼:
<!-- JavaScript Menu em Abas JQuery--> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

<script type="text/javascript"> 
var starttab=0; 
var endtab=2; 
var sidebarname="sidebar"; 
</script> 
<script type="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/bloggertabv1.0-min.js"></script>
<!-- Fim JavaScript Menu em Abas JQuery-->

Observações Importantes

1ª - Você  pode também baixar o arquivo JavaScript: Bloggertabv  » Salvá-lo em seu computador » Hospedar num site de sua preferência e substituir o endereço http://scriptabufarhan.googlecode.com/svn/trunk/bloggertabv1.0-min.js acima pelo seu endereço hospedado.
Veja como hospedar no Google Code» How to host javascript files in Google Code Hosting ?

2ª - Ou pode hospedar o javascript no seu blog.
Aí ao invés de você colar o código anterior você vai colar este aqui ▼abaixo da tag </head>:
<!-- JavaScript Menu em Abas JQuery--> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script type="text/javascript"> 
var starttab=0; 
var endtab=2; 
var sidebarname="sidebar"; 
</script> 
<script type='text/javascript'>
//<![CDATA[
var home_page_tab=location.href;if(home_page_tab.indexOf("blogger.com")!=-1){var starttab=-1;var endtab=-1}var $jtab1=jQuery.noConflict();$jtab1(document).ready(function(){var a="<div class='widget-wrapper'><ul class='tab-wrapper'></ul>";for(i=starttab;i<=endtab;i++){$jtab1("#"+sidebarname+" .widget h2").eq(i).hide();$jtab1("#"+sidebarname+" .widget").eq(i).hide();$jtab1("#"+sidebarname+" .widget .widget-item-control").eq(i).hide()}$jtab1("#"+sidebarname+" .widget").eq(starttab).before(a);i=0;j=0;$jtab1("#"+sidebarname+" .widget > h2").each(function(){if(i>=starttab&&i<=endtab){var b=$jtab1(this).text();$jtab1("#"+sidebarname+" .tab-wrapper").append("<li class='tab' id='tabid"+sidebarname+j+"'>"+b+"</li>");j++}i++});i=0;j=0;$jtab1("#"+sidebarname+"  .widget").each(function(){if(i>=starttab&&i<=endtab){$jtab1(this).attr({id:"widgtabid"+sidebarname+j});$jtab1(this).addClass("widget-tab");j++}i++});$jtab1("#"+sidebarname+" .tab").click(function(){$jtab1("#"+sidebarname+" .widget-tab").slideUp();$jtab1("#widg"+$jtab1(this).attr("id")).slideDown();$jtab1("#"+sidebarname+" .tab").removeClass("active-tab");$jtab1(this).addClass("active-tab")});$jtab1("#"+sidebarname+" .tab:first").click()});
//]]>
</script>
<!-- Fim JavaScript Menu em Abas JQuery-->

♦ Clique em Salvar modelo.

♦Clique em Visualizar→ Se o seu menu não aparecer não se preocupe. Aprenda como configurar para que ele apareça corretamente.

Configure o seu menu em abas para que apareça corretamente.

Para isso entenda alguns pontos importantes
Veja as variáveis:
var starttab=0;
var endtab=2;
var sidebarname="sidebar";

» starttab e endtab → São as variáveis que indicam a quantidade de abas do seu menu.
Por exemplo:
  • starttab=0 e endtab=2 Significa que seu menu vai de 0 a 2 ► Terá 3 abas a nº 0, nº 1 e nº 2.
  • Se você quiser que o seu menu tenha 4 abas mude o endtab=2 para endtab=3
» sidebarname="sidebar" → Esta variável indica onde o seu menu vai ficar.
Por exemplo:
  • Se você quer que ele fique na sidebar do seu blog coloque o nome da id='sidebar'.
  • Se você quer que ele fique na outra sidebar do seu blog coloque o nome da id='newsidebar'.(Este exemplo se refere ao template de demonstração, cuja outra sidebar tem o nome 'newsidebar')
Se você manteve o nº2 para a variável endtab. Observe que os 3 primeiros gadjets da sua sidebar ficarão contidos no menu em abas automaticamente, o próximo ficará abaixo do menu.
No site de Demonstração coloquei apenas os 2 primeiros gadgets nas abas » Veja: Demonstração do Menu em Abas JQuery

Saiba onde colocar seu menu:

Veja o HTML abaixo, ele indica a disposição da 1ª Coluna (sidebar-wrapper), 2ªColuna (main-wrapper) e 3ªColuna (newsidebar-wrapper).

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Recentes' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Arquivo' type='BlogArchive'/>
<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Comentários Recentes' type='HTML'/>
<b:widget id='Label1' locked='false' title='Marcadores' type='Label'/>
</b:section>
</div>

» Para que o seu menu fique nas colunas laterais apenas coloque var sidebarname="nome da id da sidebar"; .
• Que neste caso será da id='sidebar' ou id='newsidebar'.
• Para o seu blog: encontre o nome da id da coluna do seu blog e substitua.
Exemplo do Demoplate:
var sidebarname="sidebar" (1ªColuna) ou var sidebarname="newsidebar" (3ªColuna).

» Mas, se você quiser colocar o menu em cima dos posts como eu coloquei aqui. Crie uma nova section em cima da 2ªColuna:

Como?

Muito simples.
1º  Você vai acrescentar a linha verde no local indicado abaixo ficando desta forma:
<div id='main-wrapper'>
<b:section class='main' id='main1' showaddelement='yes'/>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>

2º Em var sidebarname="sidebar"; você irá substituir a palavra sidebar por main1assim: var sidebarname="main1";

3º Coloque as gadgets que desejar na section main1 criada que seu menu em abas aparecerá automaticamente.

♦ Se você clicar em Visualizarseu menu NÃO irá aparecer.

♦ Para que você visualize-o precisará clicar em Salvar modelo.

E aí sim clicar em Visualizar

Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

Fonte: Tradução e Adaptação do Tutorial: Easiest Way to Make Tabbed Sidebar for Blogger

Post Atualizado em 04/11/2012
NÃO Retire os Créditos!
NÃO é Permitido redistribuir os templates ou os tutoriais/hacks do TPV sem a prévia autorização de sua Autora.
Observação: Este hack se aplica aos templates da plataforma Blogger 2006. Ainda não testei nos templates do Blogger a partir de 2010. Assim que testar e conseguir fazer funcionar prometo postar aqui no TPV.

 
Copyright ©2007-2014. Templates para VOCÊ - Todos os Direitos Reservados
Licença Creative Commons
Baseado no Tema Johny Classicsite | Tecnologia do Blogger