Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

Customizando o gadget slide II

Expliquei anteriormente como aumentar o tamanho do slide do Blogger usando CSS e apesar de ter funcionado para mim, parece que algumas pessoas não conseguiram obter o mesmo resultado. Continuei pesquisando sobre o assunto e encontrei uma outra maneira de redimensionar e dar algum estilo para o gadget. O resultado pode ser visto aqui (é o primeiro slide, com borda rosa). O Google AJAX Feed API forneceu o código completo que carrega do slide no blog e com isso é possível fazer algumas modificações:

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
 type="text/javascript"></script>
    <style type="text/css">
      #picasaSlideshow {
        width:  250px;
        height: 200px;
        margin-bottom: 5px;
        padding: 5px;
        border: 5px solid #000;
      }
    </style>
    <script type="text/javascript">
    google.load("feeds", "1");
    function OnLoad() {
      var feed  = "Coloque aqui a URL do FEED";
      var options = {
        displayTime:2000,
        transistionTime:600,
        numResults : 8,
        scaleImages:true,
        maintainAspectRatio : false,   
        fullControlPanel : true,
      };
      var ss = new GFslideShow(feed, "picasaSlideshow", options);
    }
    google.setOnLoadCallback(OnLoad);
    </script>
<div id="picasaSlideshow" class="gslideshow"><div class="feed-loading">Loading...</div></div>
<a href="http://templatesparanovoblogger.blogspot.com/2009/07/customizando-o-gadget-slide-ii.html">Custom Slideshows.</a>

Copie este código, vá em Layout e clique em Adicionar Elemento de Página. Escolha entre as opções o gadget HTML/JavaScript e cole o código, salvando-o e arrastando para a sidebar ou para qualquer outra parte em que desejar mostrar o slide no blog (sobre os posts, em crosccol, abaixo dos posts, footer, etc).

O que deve ser modificado no código:

O primeiro a fazer é obter a url do feed do album que pretende exibir. Se for um album do Picasa, a url deve se apresentar desta maneira:

http://picasaweb.google.fr/data/feed/base/user/NAME/
albumid/NUMBER?kind=photo&alt=rss&authkey=KEY&hl=en

como obter a url do feed do album do Picasa

Você poderá exibir albuns do Flickr, Photobucket, Tinypic, ImageShack...bastando copiar e colar a url do feed no local indicado no código.

O que está em destaque na cor verde é o que você pode alterar em relação ao tamanho, bordas e espaçamento do slide.

Para alterar o número de imagens a serem exibidas, modifique o número neste trecho:

numResults : 8

Para controlar o tempo de transição das imagens :


displayTime:2000,

Para que haja um link na imagem que leve ao album original, acrescente (justo após displayTime:2000, nos códigos em azul):

linkTarget : google.feeds.LINK_TARGET_BLANK,

Por padrão, a transição das imagens faz uma pausa quando se coloca o cursor do mouse sobre uma imagem. Você pode modificar isso acrescentando a seguinte linha:

pauseOnHover : false

Para mostrar miniaturas das imagens em tamanho médio, acrescente:

thumbnailSize : GFslideShow.THUMBNAILS_MEDIUM

Para mostrar miniaturas em tamanho pequeno:

thumbnailSize : GFslideShow.THUMBNAILS_SMALL

Para mostrar o Painel de Controle com ícones pequenos (o painel aparece quando se passa o cursor do mouse sobre o slide), acrescente estas linhas, nesta ordem:

fullControlPanel : true,
fullControlPanelSmallIcons : true,

Para saber mais, visite a página do Google AJAX Feed API
Leia Mais

Sobre moderação nos comentários

Quando você comenta em um blog, está deixando o seu cartão de visitas, está causando sua primeira impressão. As pessoas irão te procurar ou não, levar à sério ou não, dependendo do que exibe o seu cartão. Quando um leitor usa o formulário de comentários aqui no TNB para choramingar, eu não dou mais atenção. Por que gente que choraminga não tenta, não batalha, não se esforça.

Ultimamente é tão raro ler um comentário interessante, que eu acabo publicando todos, muitas vezes sem ler mais do que as tres primeiras palavras. Estou deixando para que um leitor ajude o outro e fico assistindo.

Eu vou explicar novamente para vocês: eu sou uma dona de casa de 36 anos que um belo dia descobriu o que eram os blogs (e poucos dias antes nem sabia ligar um computador) e passou a criar dezenas deles, só para ver como funcionavam, só para entender como se consegue alterar uma fonte, uma cor, uma imagem. Sem fazer uma única pergunta, a quem quer que seja, li (e continuo lendo) dezenas de tutoriais, mensagens em fóruns, apostilas e afins. Quando quero saber algo, pergunto ao Todo Poderoso e ele nunca, mas nunca mesmo, me deixa na mão.

Eu não fiz nenhum curso nesta vida que possa ser de alguma utilidade na hora de customizar um template. Nem inglês eu falo! Se quero aprender algo uso tradutor, a lógica, a tentativa e erro. E quando descubro algo, por mais simples que seja, venho aqui contar para vocês. Às vezes me empolgo, ensino algo e depois vejo que existe maneira mais fácil, volto aqui, edito o texto, tiro ele do ar, o que for. Mas eu não guardo para mim informação nenhuma e não tenho medo de admitir que errei, me equivoquei, o que seja. Eu não tenho 'uma imagem a zelar', eu não quero alcançar nada, eu não desejo nada além de dividir informação. Repito: sou apenas uma dona de casa, mãe de uma garotinha de 3 anos, que adora passar horas na internet e fuçar códigos. Só. Mais nada.

Se eu consigo mudar a cor de uma fonte, qualquer um consegue. De olhos fechados, se bobear. Então, quando alguém vem aqui aos berros gritando pelo amor de deus me salva, eu não vejo com bons olhos. Por que eu também não sabia mas descobri...estudando.
Se houvesse uma escassez de informação sobre html e css na internet, eu compreenderia o desespero. Mas com a quantidade absurda de informação que existe, como posso ficar solidária com este desespero infundado?
Tudo é para ontem, é desesperado, é pelo amor de deus.  Se fulano não consegue descobrir, com tanto tutorial que existe, como mudar a imagem do cabeçalho ou como alterar um link, melhor não ter blog. É sério. Por que para ter um blog - com um template personalizado, como todo mundo quer - sem colocar a mão no bolso, é necessário ter no mínimo vontade de aprender. Tem que estudar. Aqui eu já coloco tanta informação mastigada, ilustrada, com flechinha apontando: é aqui ó! Mas se a pessoa não tem nem a pachorra de usar o formulário de busca, eu é que tenho que ir lá no blog dela, fazer por ela?
Não, claro que não. Se eu fosse atender todos os pedidos que chegam diariamente, eu nem dormia mais! Quer dizer que além de fazer os tutoriais, além de disponibilizar os templates gratuitamente, tenho também que ver o blog de cada um que comenta aqui e apontar (ou fazer pela pessoa que é o que a maioria dos 'desesperados' querem) onde deve modificar, apagar, incluir? Não tem nem cabimento...

Coisas do tipo 'me ajuda, por favor, não sei mais o que fazer!' já cansaram. Todas às vezes que fui conferir o problemão do sujeito era alguma coisa muito simples que o próprio tutorial respondia. A pessoa não lê o texto, passa os olhos por cima e pensa 'putz, que trabalheira!' e aí deixa um comentário pedinte esperando que eu faça por ela. Se fosse minha intenção fazer consertos pra todo mundo, nem criava os tutoriais.

Outra coisa que não respondo mais: a pessoa baixa aqui um template gratuito e depois quer que eu ensine ela a modificar ele ao seu gosto. Se eu fizer isso com cada um que baixa o template, no fim das contas eu terei feito uns 3000 templates gratuitos, não? Por que um adorou mas quer mudar a imagem, outro achou lindo, mas quer o menu mais pro lado...assim não dá, né? Quer mudar o template, pode mudar! Leia aqui e nos blogs que recomendo os tutoriais que ensinam passo-a-passo como modificar seu template e seja feliz!

Por isso, à partir de hoje a moderação vai ser séria. Não publicarei mais comentários sobre questões específicas de cada blog (como eu mudo a fonte do meu template? como altero a cor do meu menu?). Para isso leiam os tutoriais. Só publicarei questões mais abrangentes, que podem interessar vários usuários (por exemplo: como posso modificar o gadget de lista de blog? como posso aumentar o slide do Blogger? etc). Também não publicarei mais pedidos de alteração em templates nem perguntas inúteis, que já estão respondidas no tutorial. Comentários completamente vazios  idem, como 'num entendi', 'naum consegui'. Como alguém pode realmente pensar que um comentário assim é útil para alguma coisa?

Óbvio que comentários que visam fazer propagandas de blogs e pedidos de parceria, correntes e besteiras do tipo, jamais serão publicados.

Ajudar, eu sempre continuarei ajudando: com os tutoriais detalhados, os templates customizados, as indicações de links úteis e interessantes. Com todas as horas que dedico por dia  testando, fuçando, lendo, errando e acertando, para vir aqui dividir a informação com vocês. Mais que isso, sinceramente não dá. 

E se você quer mesmo um template customizado com 'a sua cara' mas não quer mexer com códigos, simples: contrate alguém para lhe ajudar. Pelo que sei, a Mamanunes, o Paulo, a Elke , o Compulsivo e outros, aceitam pedidos de encomendas. Só não vale por preço no trabalho alheio: cada qual sabe quanto vale seu tempo e seus esforços.

É isso.
Leia Mais

Links para o final de semana VII

Leia Mais

Retirar os ícones de edição rápida

A Juliana do Dicas Blogger tocou no assunto e então percebi que havia algo errado quando recebi emails do Blogger, como se eu tivesse solicitado uma nova senha. Imediatamente fiz algumas mudanças para me proteger e depois de ler o post da Juliana decidi retirar todos os ícones de edição rápida dos meus blogs. O que está acontecendo é que o ícone da ferramenta que aparece junto a cada widget que se coloca no blog, e que deve ser visível apenas para o administrador, algumas vezes está aparecendo para os leitores também. Nem todos os blogs estão sendo afetados com o problema e ainda o Blogger não tomou providências para sanar o problema.

De qualquer maneira, muitas pessoas não gostam da ferramenta e me perguntam se há um meio de retirá-las do template e aqui vai a dica de como fazer:


Clique em Expandir Modelo de Widget, procure pelo seguinte trecho de código e o apague:

<b:include name='quickedit'/>

Este código deve se repetir tantos forem os widgets que você tenha na página. Use o Ctrl+F para encontrar com maior facilidade.


Recomendo que leiam o post da Juliana sobre o assunto

Este post foi editado em 03/08/09. A recomendação que havia de esconder os ícones com CSS foi retirada, pois interferia com outros ícones necessários. Se você aplicou o código no CSS para esconder os ícones, por favor apague e aplique o procedimento acima.
Leia Mais

Customizar o gadget Slide

Quando vi a primeira vez o gadget de slide do Blogger, fiquei toda animada achando que exibiria alguns dos meus albuns de maneira decente mas o que acabou aparecendo na minha sidebar foi isso:


Isso é um slide. Minúsculo. Decepcionante. Tirei do blog.

Mas como sou teimosa, tornei a colocar e comecei a tentar maneiras de transformar aquilo que o Blogger me apresentava, nestes slides que estão em meu blog de testes.

O primeiro é gigante e foi inserido dentro da div crosscol. O segundo tem a largura de main-wrapper e foi inserido acima desta coluna. O terceiro está na sidebar, muito maior que o padrão do Blogger.

Não é possível fazer muita coisa para customizar o slide, além de redimensioná-lo e colocar uma borda para destacá-lo. Pelo menos até agora, não descobri o que mais é possível fazer.

Para redimensionar o slide, acrescente este código no CSS (clique em Editar HTML e acrescente o código em qualquer local antes da tag ]]></b:skin> ):

#Slideshow1 .slideshow-container {
width: 980px;
height:480px;
margin: 10px auto 10px;
padding:0 0 0;
border: 10px solid #000;background: #000}

.slideshow-container a img{position:absolute;top:0;left:0;width:100%; height:100%}

Em width você deve determinar a largura do seu slide, em height a altura. Margin como se apresenta aqui, centraliza o widget  e dá uma distância de 10px para cima e para baixo. Em border você determina a largura e cor da borda. Em .slideshow-container a img width e height devem ser 100% ou a imagem não ocupará toda a largura e altura que você determinou para o slide.

Se você pretende acrescentar mais de um slide, repita o código, mudando apenas #Slideshow1 para #Slideshow2.

Mas Ariane, eu não quero um slide enorme em todas as páginas do meu blog, só na home, comofas?

Depois de inserir o slide e fazer as modificações, clique em Expandir Modelo de Widget e encontre este trecho, acrescentando o que está em vermelho:

<b:widget id='Slideshow1' locked='false' title='Apresentação de slides' type='Slideshow'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div class='slideshow-container' expr:id='data:widget.instanceId +   &quot;_slideshow&quot;'>
<span class='slideshow-status'>Loading...</span>
</div>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Pronto, o slide vai aparecer apenas na primeira página.

Há novidades sobre este assunto! Por favor, leia também: Customizar gadget slide II
Leia Mais

Personalizando o gadget Perfil

Nos templates do Blogger o gadget  Perfil se apresenta da seguinte maneira:

 Se clicarmos na imagem escolhida ou no link Visualizar meu perfil completo, somos levados à página padrão do Blogger para o perfil do usuário:


Podemos alterar o gadget do Perfil não só em sua aparência, mudando fontes, cores e colocando uma imagem diferente da que está gravada no perfil, como podemos ainda criar uma nova direção para ele, por exemplo, para uma página do próprio blog, onde podemos apresentar um perfil mais completo.

Perfil único autor - trocando a imagem

É possível exibir no blog uma imagem diferente da imagem escolhida para a página Perfil e isto se torna bastante interessante quando se tem vários blogs e se deseja empregar uma imagem diferente para cada um deles.
Hospede a imagem escolhida no site de sua preferência (eu uso o TinyPic) copie a url fornecida (Direct Link for Layouts), depois vá em Editar HTML e clique em Expandir Modelo de Widget. Óbviamente você já deve ter acrescentado em sua página o gadget Perfil. Procure por este trecho do código (tecle Ctrl + F para encontrar com maior facilidade):

<b:if cond='data:photo.url != &quot;&quot;'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
</b:if>

Apague o que está em vermelho e no lugar de data:photo.url  cole a url da imagem que você hospedou. Visualize e se estiver aparecendo a nova imagem, salve.

Para alterar o destino do link e imagem do gadget Perfil

A página do perfil do Blogger não é lá muito charmosa, por isso, você pode criar um post bem caprichado falando de você, seu trabalho, o que for, e fazer com que o gadget Perfil leve o leitor até este post. Primeiro crie o texto falando sobre você e antes de publicar, clique no link Opções de Postagens e programe uma data no passado, para que o post não apareça na primeira página do blog, como mostra a imagem abaixo:


Publique seu post, vá até a página Editar Postagens e você verá uma lista com todos os seus posts publicados. Ao lado de cada post existem dois links: Editar e Visualizar. Clique com o botão direito do mouse sobre Visualizar ao lado do post que corresponde ao seu perfil e copie a url do mesmo (isto seve inclusive para colocar o link de um post no menu horizontal - muita gente me pergunta isso!), como mostra a imagem abaixo:


Volta a página Editar HTML, clique em Expandir Modelo de Widget e torne a encontrar aquele trecho do código:

<b:if cond='data:photo.url != &quot;&quot;'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
</b:if>

Apague o que está em vermelho e no lugar de data:userUrl cole o link do seu post, que você copiou na página Editar Postagens. Isso fará com que a imagem leve ao texto.

Para que o link Visualizar meu Perfil Completo leve ao post que você criou, procure mais abaixo o trecho:

<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if>

Novamente apague o que está em vermelho e no lugar de data:userUrl coloque o link do seu post. Para mudar a mensagem Visualizar meu perfil completo por qualquer outra chamada, apague o que está em verde e coloque no lugar outra frase/palavra.

Para alterar o estilo do gadget Perfil

Agora que alteramos a imagem e a direção do link  do Perfil, podemos alterar também o estilo que ele apresenta. Para isso, procure no código o seguinte trecho do CSS:

/* Profile
----------------------------------------------- */
.profile-img {
  float: $startSide;
  margin-top: 0;
  margin-$endSide: 5px;
  margin-bottom: 5px;
  margin-$startSide: 0;
  padding: 4px;
  border: 1px solid $bordercolor;
}

.profile-data {
  margin:0;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  color: $sidebarcolor;
  font-weight: bold;
  line-height: 1.6em;
}

.profile-datablock {
  margin:.5em 0 .5em;
}

.profile-textblock {
  margin: 0.5em 0;
  line-height: 1.6em;
}

.profile-link {
  font: $postfooterfont;
  text-transform: uppercase;
  letter-spacing: .1em;
}

Em .profile-img podemos fazer todas as alterações na imagem do gadget, inclusive alterar o tamanho e a largura do mesmo. Antes de alterar o tamanho da imagem, certifique-se da largura da sua sidebar e de qualquer alteração em .sidebar .widget (se o seu template conter esta especificação). Como estou usando um template Mínima para meu exemplo, o que fiz foi alterar a largura de #outer-wrapper para 960px e a largura da sidebar para 280px, possibilitando os valores para a imagem, que coloquei como segue abaixo:

.profile-img {
  float: $startSide;
  margin: 13px;
  padding: 2px;
  width: 240px;
  height: 220px;
  border: 5px solid #9EAF65}


Em .profile-data eu posso fazer alterações no estilo para o meu nome e a localização informada no gadget (São Paulo, Brazil). Aqui você pode altarar o estilo e cor da fonte.

Em .profile-datablock está contida a imagem e o texto que a acompanha. Você pode determinar aqui uma cor ou imagem para o background, ou borda, por exemplo.

Em .profile-textblock acrescente os estilos para o texto que se apresenta, alterando a cor da fonte, tamanho, etc.

Em .profile-link você acrescenta os estilos para o link Visualizar meu perfil completo. Para ter mais liberdade de modificar os estilos para este link (como posicionar ao centro ou dentro de .profile-textblock, volte ao trecho que modificamos anteriormente:

<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if>

substitua todo este trecho por:

<div class="profile-link">
<a href="url do post com o perfil">Meu Perfil Completo</a></div>

Para colocar o link dentro da área de .profile block (pois se você acrescentar um background o link ficará fora dele), recorte este trecho e cole onde se apresenta:

<b:if cond='data:aboutme != &quot;&quot;'><dd class='profile-textblock'> <data:aboutme/></dd></b:if>

<div class='profile-link'><a href='http://templatebasic.blogspot.com/2009/06/quem-sou.html'>Meu Perfil Completo</a></div>

</dl>    
</b:if>

No meu exemplo eu alterei todo o código desta maneira:

/* Profile
----------------------------------------------- */
.profile-img {
  float: $startSide;
  margin: 13px;
  padding: 2px;
  width: 240px;
  height: 220px;
  border: 5px solid #DEDCC5}

.profile-data {
  margin:0;
  text-transform:capitalize;
  letter-spacing:0;
  font-size:13px;
  color: #262B15;
  font-weight: bold;
  line-height: 1.6em;
  text-align:center;
}

.profile-datablock {
  margin:10px auto 10px;
  background: #84875a;
  border: 5px solid #DEDCC5

}

.profile-textblock {
  margin: 0 0 0;
  padding: 6px 10px;
  line-height: 1.4em;
  color: #F4F3EC
}

.profile-link {
  font-size: 13px;
  text-transform: capitalize;
  text-align:center;
  padding: 4px 0px;
  letter-spacing: 0;
  color: #fff;
}

.profile link a:link, .profile-link a:visited{color: #fff}
.profile link a:hover{color: #820000; text-decoration:none}

E o resultado foi este :


Uma outra idéia, usando um background fixo:


Agora é com a criatividade de cada um :)

No próximo tutorial explicarei como dar estilo ao gadget quando há mais de um autor no blog.
Leia Mais

Links para o final de semana VI

Leia Mais

Como criar uma pagina de abertura para o Blogger

Muitas pessoas me perguntam como dar um estilo diferente para  a primeira página do blog ou mesmo para fazer com que uma determinada postagem seja sempre a primeira a ser vista, como um texto fixo de apresentação e boas-vindas. Para fazer com que um texto fique fixo na primeira página do blog, publique-o normalmente, depois entre na página de edição do texto e programe uma data para o futuro, como mostra a a imagem abaixo:


Jogue a data para 2019  por exemplo e este sempre será o primeiro post visível em seu blog, encabeçando todos os outros que publicar. Para que apareça apenas este post na primeira página, vá em Configurações ->Formatação e programe para aparecer apenas uma postagem:



Para dar a primeira página um estilo diferente das páginas internas do blog, acrescente após a tag ]]></b:skin>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>

aqui os estilos para a primeira página

</style>
</b:if>

O que faço aqui é o uso de uma condicional (em negrito) que determina que o estilo se aplique apenas à Home do blog.

Vamos tomar por exemplo um Template Mínima do Blogger (faça sempre experiências com um blog de testes, nada de ir direto modificando seu blog oficial, ok?) que está neste blog de testes; note que a primeira página está com as cores modificadas, a largura de outer-wrapper é maior e eu inverti o posicionamento das colunas: passei a sidebar para a esquerda e a coluna do post para a direita. Clique no título do post para ver a página interna, onde aparece o template Mínima sem modificações.

Para isso eu acrescentei os seguintes códigos:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>

body{background: #111;}
#header-wrapper{width: 100%;height:120px; background: #303030; border:none;}
#header{border:none}
#outer-wrapper{width: 900px}
#main-wrapper{float: right; width: 600px;background: #f5f5f5}
#sidebar-wrapper{float: left; width: 280px; background: #303030}

body#layout #header-wrapper, body#layout #sidebar-wrapper, body#layout #main-wrapper{background: none}

</style>
</b:if>

o que está em negrito é o estilo para o painel Layout, pois se não especificarmos que não há background, as cores ou imagens escolhidas para a primeira página aparecerão alí também.

Este é apenas um exemplo bastante simples para que entendam como diferenciar a home das outras páginas do blog. Existem muitas possibilidades e aí é que entra a criatividade de cada um :)

É possível criar outros estilos para as  diferentes  páginas do seu blog  e eu recomendo que leiam este post do Bloggersphera, onde tenho aprendido muito sobre o assunto.
Leia Mais

15 sites com fontes gratuitas












13- Fontica

14- Fontex


Outras 45 indicações de sites para baixar fontes gratuitas você encontra em Dottony
Leia Mais

Patterns Photoshop

O Twitter me serve muito bem para encontrar rapidamente links sobre assuntos que me interessam e foi através dele que cheguei ao site Web Design Ledge que mostra uma coletânea de  patterns muito bonitas garimpadas no Deviantart

Retro Grunge (10 patterns)


ETC Grunge Stripes (12 patterns)


Grungy Floral Patterns (10 patterns)


Para ver mais, visite 100 New and Beautiful Seamless Patterns

Abaixo outras  patterns que encontrei no Deviantart e que podem interessar:

Cutie Patterns



Metal Mesh Patterns - Pack 1 


Ultimate Carbon Patterns Pack

















Wood-01 Patterns 



















Floral Scrapbooking Patterns
Leia Mais

Template Pet Shop



  • Menu horizontal: Para editar os links do menu basta clicar em editar no widget correspondente abaixo do cabeçalho, em Layout.
  • Colunas: Post e sidebar
  • Sidebar: dividida em 4 colunas: topo largo, colunas paralelas estreitas e coluna de base, também larga,  mais destaques.
  • Destaques são widgets de imagens fixas que podem ser usadas para adicionar anúncios, chamadas para posts anteriores, etc. Basta clicar em editar no widget correspondente, trocar a imagem, legenda e título. As cores podem ser customizadas através do painel Fontes e Cores do Blogger.
  • Resumo automático de postagens com miniaturas das imagens utilizadas.
Obs: Novo link para download em 21/10/10
Leia Mais

Template Beauty Blog

template beauty blogger
Contém:

  • Menu Horizontal
  • Posts automaticamente resumidos na página inicial com miniaturas das imagens utilizadas.
  • Coluna 'destaques' com widgets de imagens fixas: para editar, basta clicar em Editar no widget correspondente na página Layout, substituir a imagem, legenda e título, acrescentando a url de destino. No caso do meu exemplo, utilizei os destaques para chamadas de posts que não aparecem na primeira página.
  • Sidebar dividida em 4: coluna do topo larga, duas colunas paralelas estreitas e coluna de base larga.
OBS: Novo link para download em 21/10/10
    Leia Mais

    Template Isabela




    Segue junto com o código xml as imagens utilizadas no template, que devem ser hospedadas e os links colocados onde indicado no código.Por exemplo:

    body{
    background: url(bodybg.png)}

    substitua bodybg.png pela url da imagem com o mesmo nome que você hospedou.
    Para facilitar a busca, use Ctrl+F para encontrar os locais corretos pelo título das imagens.
    Leia Mais

    Menu com imagens e efeito hover



    Procurando uma maneira de criar um menu com imagens individuais (um ícone para cada item da lista) com efeito hover, lembrei de um menu vertical que vi no blog Vagabundia que apresenta este bonito efeito. O que fiz foi estudar o código fonte, entender seu funcionamento e pedir ao JMiur (muito obrigada, de novo!) permissão para publicar este tutorial, que me foi solicitado tantas vezes.

    Para que vocês entendem do que se trata, antes de continuar lendo, visitem este blog de testes e passem o cursor do mouse sobre cada item do menu (vertical e horizontal). Quebrei muito a cabeça tentando encontrar uma maneira limpa e eficaz de criar este efeito (e tudo o que conseguia era uma gambiarra feia e confusa) até me deparar com algo tão simples e, por que não dizer, óbvio! A idéia é criar uma imagem só, com o ícone para o estado inicial do link e outro para o estado hover e usar a propriedade background-position para definir quando um e outro deve aparecer.

    As medidas a seguir se baseiam no exemplo em meu blog de testes:

    1-Crie imagens .gif com fundo transparent de tamanho 64px x 106px e posicione os ícones da maneira que se segue:

    2-Faça uma imagem neste modelo para cada item do menu;
    3-Hospede as imagens, copie a url de cada um e no CSS do código do template (acima de ]]></b:skin>) coloque este código que corresponde à cada link do menu:

    a#m1, a#m1:link, a#m1:visited, a#m1:active {
    background: transparent url(url da primeira imagem) no-repeat left top;
    display: block;
    height: 54px;
    width: 64px;
    }
    a#m1:hover {background-position: left bottom;}

    a#m2, a#m2:link, a#m2:visited, a#m2:active {
    background: transparent url(url da segunda imagem) no-repeat left top;
    display: block;
    height: 54px;
    width: 64px;
    }
    a#m2:hover {background-position: left bottom;}

    a#m3, a#m3:link, a#m3:visited, a#m3:active {
    background: transparent url(url da terceira imagem) no-repeat left top;
    display: block;
    height: 54px;
    width: 64px;
    }
    a#m3:hover {background-position: left bottom;}

    a#m4, a#m4:link, a#m4:visited, a#m4:active {
    background: transparent url(url da quarta imagem) no-repeat left top;
    display: block;
    height: 54px;
    width: 64px;
    }
    a#m4:hover {background-position: left bottom;}

    a#m5, a#m5:link, a#m5:visited, a#m5:active {
    background: transparent url(url da quinta imagem) no-repeat left top;
    display: block;
    height: 54px;
    width: 64px;
    }
    a#m5:hover {background-position: left bottom;}

    a#m6, a#m6:link, a#m6:visited, a#m6:active {
    background: transparent url(url da sexta imagem) no-repeat left top;
    display: block;
    height: 54px;
    width: 64px;
    }
    a#m6:hover {background-position: left bottom;}
    Para tantos forem os itens do menu, acrescente o trecho:

    a#m6, a#m6:link, a#m6:visited, a#m6:active {
    background: transparent url(link da sexta imagem) no-repeat left top;
    display: block;
    height: 54px;
    width: 64px;
    }
    a#m6:hover {background-position: left bottom;}

    Note que atribuímos uma ID para os links que compõem o menu e que, nas palavras do mestre Maujor: id deve ser única, isto é, um e somente um elemento ou seletor deve estar identificado com determinada id. Por isso, ao acrescentar novos links à sua lista, você deve criar uma nova ID (nome), ou seja, à partir de #m6 deve se seguir #m7 ou qualquer outro nome que seja único e exclusivo.

    Para que você entenda o que está fazendo (e não simplesmente copie e cole sem conseguir criar variações ao seu gosto), vejamos:

    a#m1, a#m1:link, a#m1:visited, a#m1:active {
    background: transparent url(link da primeira imagem) no-repeat left top;
    display: block;
    height: 54px;
    width: 64px;
    }
    a#m1:hover {background-position: left bottom;}

    em vermelho atribuimos um identificador ID para o elemento a (link), no caso #m1;
    em background definimos que nos estados a:link, a:visited e a:active a imagem apareça no topo à esquerda. Como definimos uma altura e largura para a área 'clicável' (com height e width) impedimos que o restante da imagem apareça (lembre que a imagem original tem height:106px). Ou seja, o que excede a altura de 54px não aparecerá. Veja na imagem abaixo:


    Para o estado hover a posição do background muda para left bottom (em laranja) e agora o que fica escondido é a parte superior da imagem, novamente limitada pela altura estabelecida para a área do link. Veja:


    Um truque simples e genial que não sofre incompatibilidade de navegadores e não causa nenhuma dor de cabeça. Enfim, algo que não fui capaz de pensar :)

    Agora, para criar um menu horizontal onde os links aparecerão, acrescente também no CSS:
    #navigation{
    height:50px; /*altura do menu*/
    width: 600px; /*área total ocupada pelo menu*/
    margin:0px auto; /*margin que centraliza o menu na tela*/
    background: url(http://i41.tinypic.com/690sux.jpg) no-repeat top left; /*imagem de fundo do menu*/
    }

    #navigation ul{
    width: 400px; /*largura da área ocupada pelos ícones*/
    margin: 0px auto 0; /*centralizando os ícones*/
    padding: 0 0 0;
    }

    #navigation li{
    float:left;/*flutuação à esquerda garante que os ícones fiquem na horizontal*/
    margin-top:4px; /*margens dos ícones*/
    list-style-type:none;
    }

    Salve as modificações. Agora no HTML do código, e aqui você escolhe onde aparecerá seu menu, acrescente:
    <div id='navigation'>
    <ul>
    <li><a href='Link do Blog/' id='m1' title='Home'> </a></li>

    <li><a href='Link 01/' id='m2' target='_blank' title='Download'> </a></li>

    <li><a href='Link 02/' id='m3' target='_blank' title='Vídeos'> </a></li>

    <li><a href='Link 03/' id='m4' target='_blank' title='MP3'>
    </a></li>

    <li><a href='Link 04/' id='m5' target='_blank' title='Feed'>
    </a></li>

    <li><a href='Link 05/' id='m6' rel='nofollow' target='_blank' title='Contato'> </a></li>

    </ul>
    </div>
    No caso do meu exemplo eu acrescentei o código dentro do cabeçalho, assim:
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Menu Hover (Cabeçalho)' type='Header'/>
    </b:section>

    Aqui o código do menu

    </div>

    Mas você pode colocar acima ou abaixo de header,como queira. Para colocar verticalmente na sidebar, basta copiar o HTML à partir de <ul> até </ul> ,abrir um elemento de página HTML/JavaScript e colar o código.

    Recapitulando:
    • crie uma ID para cada link da lista;
    • crie uma imagem com o dobro da altura determinada para a área de cada link, contendo as imagens para o estador inicial e hover do link.
    • acrescente os links em um menu
    Espero que gostem e principalmente, que tenham compreendido o procedimento. Sei que muitas pessoas que entendem de CSS e HTML podem achar que me estendo demais nas explicações - pois para eles basta bater os olhos no código para perceber o funcionamento - mas este blog foi criado para ajudar o usuário comum do blogger que deseja apenas dar uma incrementada no visual de sua página, não sendo portanto, profundo conhecedor de CSS e HTML. Minha intenção também não é apenas distribuir códigos que podem facilmente ser copiados e colados. Quero mesmo que entendam o que estão fazendo para que possam criar livremente. E como também não sou profunda conhecedora de nada e me defino sempre apenas como alguém muito xereta :) agradeceria muito qualquer correção que possa ser feita à minha explicação.



    Evite punições do Google criando conteúdo duplicado: não copiei este tutorial, indique!
    Leia Mais

    Usando o Widget de Imagem para destaques no blog


    Vou ensinar como manipular os códigos do widget de imagem para transformá-lo em um campo de destaque para posts anteriores. Como acredito que uma imagem vale mais que mil palavras, vejam do que trata este tutorial em meu blog de testes. Notem abaixo do cabeçalho os quadrados com imagens acompanhadas de um título e legenda. Onde quer que se clique alí, seja na imagem, no título ou na legenda, você será levado ao post em questão. As vantagens de se usar o widget de imagem alterado desta maneira é a possibilidade de colocar em destaque posts antigos que não apareceriam em um widget de posts recentes por exemplo, atraindo o leitor para assuntos do seu blog que você não quer que 'desapareçam' com as novas publicações.

    Como em todos os outros tutoriais, estou usando o Template Mínima do Blogger para a modificação.
    Antes de iniciar a explicação:
    1- A colocação dos destaques é 100% manual, ou seja, não implica no uso de nenhum script que faça uma troca automática dos assuntos apresentados. Você deverá escolher qual post destacar e qual imagem e legenda usará no destaque;
    2-Apesar do uso deste widget ser muito simples, as alterações que vou explicar exigem atenção. Por isso, por favor, tentem primeiro em um blog de testes até que tudo saia perfeito, ok?

    A primeira coisa que faremos é decidir onde os widgets aparecerão e no meu exemplo eu escolhi a div crosscol que existe no template Mínima mas não é visível (o que acho algo meio bizarro). Para que fique visível, procure por este trecho:
    <div id='crosscol-wrapper'>
    <b:section class='crosscol' id='crosscol' showaddelement='no'/>
    </div>

    Substitua o no (em negrito) por yes e salve. Note que no modo Layout e o retangulo correspondente a esta div (abaixo do cabeçalho) aparecerá.

    Para que as medidas que passarei a seguir fiquem corretas no template, altere o width de #outer-wrapper para 900px;

    Agora no CSS do código do template (antes de ]]></b:skin>), acrescente o seguinte código (meus comentários estão em vermelho):

    #crosscol-wrapper{
    margin: 0 auto;
    padding: 15px;
    float:left;
    border:1px solid #2e2e2e; /* escolha aqui a cor e largura da borda */
    background: #111} /* escolha aqui a cor do background */

    .crosscol h2{
    margin: 0px;
    padding: 0px 0px 0px;
    text-align:left; /* escolha aqui o alinhamento do título */
    height: 25px; /*altura do espaço para o título */
    color: #ccc; /* cor da fonte do título */
    font-size: 18px; /*tamanho da fonte do título */
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:-1px;}

    .crosscol .widget{
    margin: 0px 2px 0px; /*espaçamento entre os widgets*/
    padding: 5px;
    width: 200px; /*largura de cada widget */
    height:260px; /* altura de cada widget */
    float:left; /* importante que a flutuação seja à esquerda */
    border: 1px solid #2e2e2e; /*cor da borda de cada widget*/
    background: #212121 /*cor do background de cada widget */
    }

    .crosscol .widget img {
    margin: 0px;
    padding: 0px;
    width: 200px; /* tamanho de cada imagem */
    height:160px; /* altura de cada imagem */
    float:left;
    border:1px solid #2e2e2e; /* cor da borda de cada imagem */
    }

    .crosscol .widget img:hover{
    border:1px solid #fa01e6; /* cor da borda de cada imagem no estado hover */
    }

    .crosscol .caption{
    margin: 0px;
    padding:3px 0 0; /* distância da legenda para a imagem */
    color:#ccc; /* cor da fonte da legenda */
    font-size: 97%; /* tamanho da fonte da legenda */
    text-align:justify; /* alinhamento da legenda */
    }

    acrescente também o código abaixo para alinhar os widgets no modo layout:
    body#layout #crosscol{
    margin: 0 auto;
    padding: 0 0 0;
    width: 900px;
    float:left;}

    Salve a modificação, vá em Layout e no espaço correspondente a div crosscol (abaixo do cabeçalho) , insira 4 widgets de imagens:



    Conforme a imagem, coloque o título (sendo interessante colocar o mesmo do post), em legenda uma breve descrição do assunto, em link a url do post (que se obtém clicando com o botão direito do mouse sobre o título -> copiar link) e suba uma imagem que ilustre o post (no caso usei a mesma que ilustra meu post fictício). Insira os quatro widgets linkando para 4 posts diferentes e salve.

    Por padrão apenas a imagem torna-se um link para a url escolhida; o que vamos fazer agora é uma alteração para que todo o conteúdo do widget (título e legenda) se tornem um link também.

    1- Em editar HTML, clique em Expandir Modelo de Widget e procure pelo seguinte trecho:

    <div id='crosscol-wrapper'>
    <b:section class='crosscol' id='crosscol' showaddelement='yes'>

    <b:widget id='Image4' locked='true' title='Mauris Vitae' type='Image'>
    <b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <b:if cond='data:link != &quot;&quot;'>
    <a expr:href='data:link'>
    <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
    </a>
    <b:else/>
    <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
    </b:if>
    <br/>
    <b:if cond='data:caption != &quot;&quot;'>
    <span class='caption'><data:caption/></span>
    </b:if>
    </div>
    <b:include name='quickedit'/>
    </b:includable>
    </b:widget>

    O que está em vermelho é o código de um widget que foi acrescentado. Este código deve se repetir, um após o outro, por quatro vezes (já que você adicionou 4 widgets) . Você deve alterar cada um deles para que fiquem como a seguir (as alterações estão em negrito):

    <b:widget id='Image4' locked='true' title='Mauris Vitae' type='Image'>
    <b:includable id='main'>
    <a expr:href='data:link'>
    <h2><data:title/></h2>
    </a>
    <div class='widget-content'>
    <b:if cond='data:link != &quot;&quot;'>
    <a expr:href='data:link'>
    <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
    </a>
    <b:else/>
    <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
    </b:if>
    <br/>
    <a expr:href='data:link'>
    <span class='caption'><data:caption/></span>
    </a>
    </div>
    </b:includable>
    </b:widget>

    o trecho <b:include name='quickedit'/> é suprimido e com isto excluímos o ícone da ferramenta que aparece em cada widget quando estamos logados (pois com estas modificações ele toma as proporções que determinamos para cada imagem e ficam enormes, atrapalhando a visualização do template).

    Procure fazer a modificação em todos os widgets e salve.
    É isso. Quando quiser mudar o destaque, basta trocar a imagem escolhida e substituir as informações título, link e legenda.




    Leia Mais

    Efeito hover no cabeçalho, post e sidebar

    efeito hover com css

    Mamanunes perguntava no Twitter dia desses, como dar um efeito hover no cabeçalho da página, utilizando imagens. Para que você possa compreender logo de cara do que trata este tutorial, acesse este link do meu blog de testes e passe o cursor do mouse sobre o cabeçalho, post e títulos da sidebar. Mas adianto que se você insiste em usar o IE6, não verá nada acontecer, isto por que o IE6 suporta a pseudo-class :hover apenas para links, o que não é o caso deste tutorial.
    Aliás, li por aí que o IE6 não suporta a Internet e achei a definição excelente. Eu realmente não entendo por que uma pessoa insiste em usar um navegador tão ultrapassado. O navegador é apenas uma ferramenta e quando uma ferramenta se torna antiquada tratamos de substituí-la. Não é por que o IE6 veio instalado em seu computador que você é obrigado a usar. Procure fazer o download de qualquer outro navegador: Internet Explore 7, Internet Explore 8, Firefox, Opera, Chrome...o que for. Eu já não me preocupo em fazer nada parecer bem no IE6 e me parece um contra-senso gritar 'Morte ao IE6' e continuar perdendo horas e horas (e muitas vezes dias) para que este navegador possa interpretar o que naturalmente não compreende. Por que se continuarmos a fazer tudo parecer 'normal' no IE6 como vamos convencer as pessoas a abandoná-lo?
    Mas, voltando...
    Para dar este efeito no cabeçalho, primeiro vou ensinar como colocar uma imagem no topo que atravesse todo o layout, de ponta a ponta, em qualquer resolução. Crie sua imagem (eu usei esta), coloque-a em um post do Blogger (depois salve como rascunho), copie o link da imagem clicando na aba Editar HTML (no editor de postagens) e coloque no seguinte trecho do código, como se apresenta em negrito:

    body{
    background: #212121 url(aqui o link da sua imagem) repeat-x top left;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }

    O valor #212121 representa a cor que se estende por toda a página, repeat-x faz com que a imagem se repita indefinidamente na horizontal e situar com top left garante que ela se repetirá a partir do topo à esquerda. Visualize a modificação e salve.
    No exemplo que dou em meu blog de testes, eu retirei o cabeçalho para dar lugar a uma imagem onde se lê Título do Blog. Para retirar o cabeçalho, procure por este trecho (não precisa Expandir Modelo de Widget):

    <b:widget id='Header1' locked='true' title='Efeito Hover (Cabeçalho)' type='Header'/>

    substitua true por false e salve. Feita esta simples modificação você poderá mover o cabeçalho pela página, para a sidebar por exemplo, ou mesmo excluí-lo da página.
    Depois de retirar o cabeçalho da página, crie uma imagem que deve aparecer no topo no estado 'normal', hospede como a anterior, copie o link e coloque neste trecho, como se apresenta:

    #header-wrapper {
    width:660px;
    height:170px;
    margin:0 auto 10px;
    background: url(url da imagem aqui) no-repeat top center;
    }
    *Observe que a minha imagem para título tem a mesma altura da imagem usada em background e eu estipulei esta altura em height:170px; Para que sua imagem não fique afastada do topo do layout, retire todas as margens e paddings que possam distanciá-las. No caso do template Mínima (que foi usado neste teste), retirei o padding:10px de #Outer-wrapper, coloquei margin: 0px para #header e retirei a navbar.

    Agora crie a imagem que deve aparecer no cabeçalho no estado hover (quando passa o cursor sobre ele), hospede, copie o link e acrescente este trecho logo abaixo do anterior:

    #header-wrapper:hover{
    background: url(url da imagem hover) no-repeat top center;}

    perceba que eu posicionei da mesma maneira as duas imagens, no estado normal e hover: no-repeat top center.
    É apenas isto. O efeito será interpretado por todos os navegadores, menos o IE6 como já expliquei.
    Para dar este efeito no post, fiz o seguinte:

    .post {
    margin:.5em 0 1.5em;
    background: #000a09;
    padding:2.0em 0 1.5em;
    text-align:justify;
    color: #ccc
    }

    .post:hover{
    background: #000a09 url(url da imagem) no-repeat top center;}

    Basta acrescentar tudo o que está em negrito. No estado normal eu coloquei uma cor de fundo e no estado hover coloquei a cor mais a imagem que criei (com o fundo de mesma cor) e estipulei que ela não se repita e apareça no topo centralizada.

    Para os títulos da sidebar.
    No template Mínima não há especificações para o título da sidebar, por isso é preciso primeiro criá-las, desta maneira:

    .sidebar h2{
    margin: 0px;
    padding: 15px 0px 10px;
    text-align:center;
    width: 260px;
    height: 35px;
    font-size: 18px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:-1px;
    border-bottom:1px dotted $bordercolor;}

    Todas as especificações descritas podem e devem ser mudadas ao gosto de cada um, estou apenas mostrando o que usei no meu exemplo. Para o estado hover usei:

    .sidebar h2:hover{
    background: url(url da imagem) no-repeat top left;color: #000;}

    Observe que neste caso em particular eu não estabeleci nenhum background para os títulos no estado normal, aproveitei apenas a cor da página (que coloquei antes do link da imagem usada em body, lembra?). Neste caso a propriedade background aparece apenas no estado hover.
    Leia Mais

    Template Green


    Template com uma sidebar e menu horizontal. Para editar os links do menu, basta clicar em Editar no retangulo Lista de Links.

    Para editar as imagens do Anuncie Aqui basta clicar em editar no quadradinho correspondente (são 4 quadrados no total), adiconar a imagem  (tamanho 125x125) e o link que desejar:

     

     

    Se você não deseja usar esta configuração dos banners na sidebar, procure pelo trecho abaixo no código do template e retire-o:
    <div id='patrocinio'>
    <b:section class='patrocinio' id='patrocinio' preferred='yes'>
    <b:widget id='Image6' locked='true' title='' type='Image'/>
    <b:widget id='Image5' locked='true' title='' type='Image'/>
    <b:widget id='Image4' locked='true' title='' type='Image'/>
    <b:widget id='Image3' locked='true' title='' type='Image'/>
    </b:section>
    </div>
    Para configurar o Feed no rodapé da postagem, procure o seguinte trecho do código (clique em Expandir Modelo de Widget e use o Ctrl+F):

    Assine o <a href='coloque aqui a url do seu FEED' title='RSS Feed'>Feed</a>

    Obs: novo link para download em 21/10/10 - as imagens foram arrumadas
    Leia Mais
    Assinar: Postagens (Atom)