Menu Horizontal com CSS e Jquery

Em um dos meus blogs de teste eu instalei este menu criado por Soh  do site SohTanaka e que tem um efeito bastante interessante. Você pode conferir o demo aqui.
Me pediram para explicar como colocar este menu no Blogger, então lá vai:

Primeiro você deve criar uma imagem com 80px de altura onde metade de cima dela (40px) aparecerá quando o menu estiver em estado normal e a metade de baixo no estado hover (quando passa o mouse por cima), como neste exemplo:

Hospede a imagem (pode ser no próprio Blogger) e guarde o link. Agora vá em Editar HTML  e cole no código do seu template, abaixo de ]]></b:skin>

<style type='text/css'>

.container {
    width: 520px;
    height: 100px;
    position: absolute;
    top: 10%; left: 60%;
    margin: 0px 0 0 -80px;
    overflow: hidden;
}
img {border: none;}
ul#topnav {
    margin: 10px 0 20px;
    padding: 0;
    list-style: none;  
    font-size: 1.1em;
    clear: both;
    float: left;
    width: 520px;
}
ul#topnav li{
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
    height:40px;
}
ul#topnav a, ul#topnav span {
    padding: 10px 10px;
    float: left;
    text-decoration: none;
    color: #fff;
    clear: both;
    height: 20px;
    line-height: 20px;
    background: #1d1d1d;
}
ul#topnav a {    color: #7bc441; }
ul#topnav span {
    display: none;
}

ul#topnav.v2 span{
    background: url(coloque aqui a url da imagem) repeat-x left top;
}
ul#topnav.v2 a{
    color: #555;
    background: url(coloque aqui a url da imagem) repeat-x left bottom;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
           $(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag
  
    $(&quot;#topnav li&quot;).each(function() { //For each list item...
        var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag
        $(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag
    });
  
    $(&quot;#topnav li&quot;).hover(function() {    //On hover...
        $(this).find(&quot;span&quot;).stop().animate({
            marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels
        }, 250);
    } , function() { //On hover out...
        $(this).find(&quot;span&quot;).stop().animate({
            marginTop: &quot;0&quot; //Move the span back to its original state (0px)
        }, 250);
    });
     
});
</script>

depois, no HTML ( após a tag <body> ) coloque o seguinte trecho, antes ou depois de <div id='header-wrapper'>....</div> :


<div class='container'>

<ul class='v2' id='topnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>

</div>

No meu exemplo, os códigos foram colocados abaixo de header, assim:

 em container, determinamos as dimensões ocupadas pelo menu, bem como sua posição na página:

.container {
    width: 520px;
    height: 100px;
    position: absolute;
    top: 10%; left: 60%;
    margin:  0px 0 0 -80px;
    overflow: hidden;
}


width: largura total ocupada pela div que contém o menu.
note que em ul#topnav o valor se repete (width: 520px)
top: 10% - distância do menu para o topo da página
left: 60% - distância do menu para o lado esquerdo da página
com margin  você também controla a posição do menu. Veja que o menu está a 60% da esquerda da página menos 80px. Vá alterando os valores para que melhor se encaixe no seu layout. 
Coloque a url da sua imagem hospedada (no Blogger ou em outro site) onde está indicado no código CSS em negrito. Substitua os # no HTML do menu pelos links que desejar.

resultado

Fonte: Templete Novo Blog

Read More

Conhecendo o painel de postagem do Blogspot

Assim que você cria um blog no Blogger, a página de Postagem se abre. Para criar seus textos e/ou exibição de imagens, o Blogger te dá duas opções: o modo escrever, onde o painel de edição de postagem é muito semelhante à qualquer outro editor, como o World, por exemplo, e o modo Editar HTML, onde ficam visíveis os códigos e você também pode editá-los. Para quem não tem nenhuma experiência com códigos HTML, o ideal é começar usando o modo Escrever mesmo.
O modo Escrever e todas as funções dos ícones no painel:

Para utilizar as funções representadas por cada ícone no painel, primeiro selecione a palavra ou parágrafo onde pretende empregar o efeito (para selecionar, clique sobre a primeira letra e sem soltar o botão do mouse, arraste até o final da palavra ou parágrafo; a parte selecionada ficará com fundo azul marinho).
Da esquerda para a direita, õs ícones se apresentam desta maneira:
possibilita a mudança do tipo de letra no trecho selecionado.
possibilita a mudança do tamanho da letra (ou fonte) no texto selecionado.
deixa o trecho selecionado em negrito.
deixa o trecho selecionado em itálico.
permite a mudança de cor do trecho selecionado.
permite transformar uma palavra ou trecho em um link.
permite alinhar o texto ou imagem à esquerda.
permite alinhar o texto ou imagem ao centro.
permite alinhar o texto ou imagem à direita.
permite justificar o texto, ou seja, deixar todas as linhas com o mesmo comprimento.
insere numeração à uma lista
insere marcadores à uma lista
permite um destaque ao trecho selecionado
corretor ortográfico
permite a inserção de imagem na postagem
permite a inserção de um vídeo na postagem
desfaz toda a formatação anterior de um texto selecionado.

Tanto no modo Escrever quanto no modo Editar HTML aparecerá no rodápé as seguintes opções:
Opções de postagens:

Clicando neste link você poderá escolher se permitirá ou não comentários dos seus leitores nesta postagem e escolherá a data e hora que aparecerá em sua postagem. Este recurso de mudança de data permite um controle sobre a ordem em que suas postagens são apresentadas, ou seja, você pode programar uma postagem para ser sempre a primeira a ser vista no seu blog (colocando uma data futura, como 12/12/2030) ou ainda fazer com que uma postagem que acabou de ser escrita, aparecer entre outras mais antigas (colocando uma data passada).
Marcadores

Marcadores são as categorias em que sua postagem se encaixa. Você pode criar quantas categorias desejar (por ex:música, filmes, opinião, culinária, etc). Uma lista com todas as categorias criadas por você podem ser exibidas em seu blog para facilitar a busca do leitor. Em uma mesma postagem você também pode inserir mais de uma categoria, devendo apenas separá-las por vírgulas. Ao criar categorias, elas ficam registradas e em futuras postagens, você poderá ver todos os marcadores já criados, clicando no link Mostrar Tudo (que aparecerá ao lado dos Marcadores somente quando você já tiver criado algum). A criação dos Marcadores se dá somente através deste campo do Painel de Postagens (imagem acima)
Sob o campo para inserir os Marcadores aparecem ainda algumas opções de formatação de texto que não se incluem no painel, mas que podem ser inseridas manualmente no modo Editar HTML.
Publicar , visualizar ou salvar
Por fim, você terá tres opções: publicar, salvar ou visualizar seu texto.
Clicando em visualizar o Blogger lhe mostrará uma prévia das edições feitas em seu texto. Se estiver contente com o resultado, clique em Publicar ou continue editando, clicando em Ocultar Visualização.

Você pode publicar seu texto ou salvá-lo para continuar editando-o em outro momento. Clicando na opção Salvar Agora, seu texto será guardado na lista de postagens como rascunho e você poderá posteriormente fazer novas modificações, até publicá-lo definitivamente.

Fonte: Como ter um blog

Read More

Transformar uma imagem na Sidebar em Link

Se você deseja colocar uma imagem na sua sidebar (coluna lateral) que sirva de link para outra página (blog, site, fórum, etc), basta clicar em Adicionar Gadget (ou Widget) e escolher a opção Imagem.

Clique em Arquivo para buscar no seu computador uma imagem, ou digite a url da página onde se encontra a imagem, no campo abaixo:

Ao escolher uma imagem do seu computador ou da internet, uma  prévia da mesma será mostrada. No campo Link, coloque  a url da página que a imagem irá linkar e clique em salvar.



Com este recurso é possível colocar rapidamente banners de blogs amigos, feed com imagem ou mesmo imagens que levam à determinadas seções do seu blog (um About Me por exemplo).

Fonte:  Como ter um blog

Read More

Colocar imagem nos títulos da sidebar - Novos Modelos

Este tutorial se aplica aos novos modelos de templates (Designer de Modelo).

Colocar uma imagem junto aos títulos dos widgets da sidebar nos novos modelos do Blogger é bastante simples e isso pode ser feito através do painel Designer de Modelo.

1- Clique no link Design e depois em Designer de Modelo;
2- Já no painel escuro que se abre, clique em Avançado (última opção do menu à esquerda);
3- Clique em 'Adicionar CSS' (também última opção da lista);
4- Na caixa em branco que se abre, acrescente o seguinte código:

.sidebar .widget h2{background: url(aqui a url da imagem) no-repeat center right; padding: 10px 0px;}

center right determina que a imagem apareça à direita do título na sidebar, como na imagem abaixo (estrela):

Imagem da estrela à direita do título 'Lista 01'

Note que ao inserir o código CSS a visualização do resultado é imediata. Para salvar, basta clicar em Aplicar ao Blog

Você pode salvar sua imagem no próprio Blogger (Picasa) seguindo estes passos:

1- Clique em Nova Postagem  e hospede a imagem já salva em seu computador, dentro da área do post;

 2- Clique em Editar HTML, copie a url da imagem e transfira para o código acima (no lugar de 'aqui a url da imagem');

 
3- salve o post como Rascunho. Você poderá também excluir esta postagem posteriormente (sem clicar na opção de excluir a imagem).

Neste exemplo, além de acrescentar a imagem, coloquei uma borda dupla abaixo do título:

E o código acrescentado foi:

.sidebar .widget h2{background: url(http://4.bp.blogspot.com/-BMkR1jw_tVo/TbVcNgzWq1I/AAAAAAAATRw/__D2bm8Vf8w/s1600/star.png) no-repeat 99% 0%; padding: 8px 0px 2px;border-bottom: 3px double #fff; margin: 3px 0px; }

Se você quiser acrescentar imagens diferentes para cada widget, é preciso primeiro saber o nome que cada um recebe. Para isso, clique em Editar HTML e procure no código do template
trechos semelhantes a:

<b:widget id='CustomSearch1' locked='false' title='Pesquisar' type='CustomSearch'/>

o modelo será sempre assim, iniciando por <b:widget id= e o que vier logo depois, entre aspas, é a id do elemento que foi acrescentado na sidebar; neste caso, CustomSearch1, que é o widget de Pesquisa. Agora que já sei a id correta, volto para Designer de Modelo e em Avançado -> Adicionar CSS, coloco o seguinte código:

#CustomSearch1 h2{background: url(url da imagem) no-repeat 99% 0%;padding: 18px 0px 5px;}

Resultado:

Uma imagem para cada widget

Note que no primeiro caso que expliquei lá no começo do tutorial, determinamos estilo para todos os títulos da sidebar, com .sidebar .widget h2 e neste último caso estamos especificando um widget em particular.O que foi determinado no primeiro caso prevalecerá sobre todos os outros e por isso a borda branca aparece abaixo do título. Caso não queira que a borda apareça em um determinado widget, basta acrescentar border:none;

Fonte: Template Novo Blog

Read More

Como trocar de template

Templates são documentos sem conteúdo, apenas com uma apresentação visual, que podem ser incoporados ao seu blog, determinando a aparência que ele terá. No sistema Blogger (ou Novo Blogger) este documento se apresenta no formato XML e deve ser salvo em seu computador (download) e depois colocado em seu blog (upload). Existem centenas de modelos à disposição em diversos sites, para uso gratuito, com a única e justa condição de que não se retirem os créditos dos mesmos. No final deste artigo indicarei sites onde se pode fazer o download de temas/templates para Blogger.

Para trocar de template você deve primeiro fazer o download de um arquivo XML onde se encontra os códigos que determinarão a aparência de seu blog. Geralmente os templates são distribuídos em pastas zipadas que devem ser descompactadas após o download. Normalmente estas pastas contém, além do arquivo XML, as imagens utilizadas na criação do template, bem como qualquer instrução de uso que o autor considere necessária. Apenas o arquivo XML deve ser 'colocado' em seu blog; as imagens servem apenas para serem guardadas e futuramente hospedadas em outros locais, se assim for necessário.

Para 'subir' um template para seu blog:

1-Guarde todas as suas widgets: widgets são todos os códigos e listas que você incorporou ao seu blog através do painel Adicionar Elemento de Página. Quando você troca seu template, você automaticamente perde todas as suas widgets, por isso, torna-se necessário fazer uma cópia de todos os códigos que complementam seu blog: contador, banners, links, códigos de imagens, códigos de programas de afiliados, etc. Para isso, basta clicar em Editar no retângulo correspondente à widget e copiar o código que aparece, colando-o no Bloco de Notas, por exemplo. Faça isso com todas as suas widgets (com exceção de Arquivos, Perfil e Marcadores).

2- Tendo copiado todos os códigos das widgets, clique em Editar HTML

Esta deve ser a página que você irá visualizar, e que contém todos os códigos do seu template atual:

3- Clique em Arquivo e procure em seu computador o arquivo XML que você baixou. Clique em Abrir e em Fazer Upload. Uma mensagem aparecerá avisando que suas widgets serão excluídas (e aparecerá uma lista com todas as widgets que você possui) e uma confirmação será pedida. Ao confirmar, suas widgets serão excluídas e o novo template será instalado.

Algumas vezes ocorrem erros que impedem a instalação de um template. Algumas medidas simples podem evitar dor de cabeça na hora de trocar um template:

• Deixe marcada a opção Expandir Modelo de Widget;
• Certifique-se de que está fazendo o upload do arquivo XML e não de uma imagem (GIF, JPG)
• Se uma mensagem de erro persistir, troque de navegador. Algumas vezes ocorrem alguns bugs no Firefox e no Internet Explore vai tudo bem e vice-versa.
• Se você fez muitas modificações em seu blog em um curto espaço de tempo (em uma hora, por exemplo), espere mais algumas horas para trocar o template. 
• Se estas medidas não resolverem o problema, veja se é possível consultar o autor do template para obter informações ou procure testar outros modelos. 

Depois de instalar o novo template, recoloque suas widgets no blog.

Sites que oferecem templates gratuitos para o Blogger:

Templates e Acessórios
Templates para Você
Templates Novo Blogger
Blogger Templates
eblog templates
Blogger Tricks
Blogger Templates
Zona Cerebral
BlogTemplates

Fonte: Como ter um blog

Read More

Mostre suas atualizações do Twitter no Blogspot e Facebook

Widgets permitem que você mostre suas atualizações do Twitter em seu site ou em páginas de redes sociais. As widgets do Twitter são compatíveis com qualquer website e com a maioria das redes sociais. Basta escolher um que seja compatível ao local que você gostaria de incluí-lo.

Entre as Widgts para site você as seguintes opções:

Widget de Perfil

Exibir as suas atualizações mais recentes do Twitter em qualquer página web.

Widget de Busca

Exibir resultados de busca em tempo real! Ideal para eventos ao vivo, transmissões, conferências, programas de TV, ou apenas para manter-se atualizado com notícias.

Widget de Favoritos

Mostre seus tweets favoritos! Também em tempo real, este widget pegará os tweets que você marcou como favoritos. É ótimo para moderação.

Widget de Lista

Coloque seus tweets favoritos em uma lista! Então mostre-os em um widget. Ótimo também para moderação.

Aplicativo do Facebook

Permite que você compartilhe as suas atualizações mais recentes do Twitter com seus amigos do Facebook.

Read More