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).

Template Feminina



Template com menu horizontal, slide, postagens resumidas e posts relacionados.
Apesar de usar o modelo 'antigo' para criar este template, alguns detalhes podem ser modificados em Designer de Modelo (como algumas fontes).

Sobre o template: Ano passado eu conheci o blog SimplexDesign e tomei conhecimento do uso de um script que possibilitava mostrar na página inicial, não os últimos posts publicados, mas sim os últimos posts publicados por categoria (marcadores) escolhidas. A ideia de mostrar na página inicial somente os posts de determinados marcadores me pareceu muito interessante e comecei a trabalhar no sentido de entender e aplicar o script. Porém, ele demostrava problemas de exibição no navegador Internet Explore e sem conseguir obter suporte do criador/distribuidor do script, procurei a ajuda de amigos blogueiros. Pude, então, mais uma vez contar com a incrível colaboração do meu amigo JMiur do blog Vagabundia, que novamente me 'salvou' e fez suas magias, me entregando um script limpo e enxuto, pronto para uso. JMiur, mais uma vez, obrigada :)

Enfim, como expliquei acima, neste template o que será exibido na página inicial serão os posts relacionados a determinados marcadores que você selecionará dentro do script. Para tanto, procure dentro do código do template o seguinte trecho (clique em Expandir Modelo de Widget e use Ctrl+F para encontrar com facilidade):

imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
aBold = true;
summaryPost = 60; // numero de caracteres do resumo
summaryTitle = 25; //numero de caracteres do titulo
numposts = 3; // numero de resumos por categoria

var contarlabels = 0;
labelname = new Array("Desfiles","Gastronomia","Moda","Beleza");
labeltitle = new Array("Desfiles","Gastronomia","Moda","Beleza");

Em vermelho está a url da imagem que aparecerá quando não houver imagens no post. Você pode colocar aqui a url de qualquer outra imagem que preferir.
Onde está em negrito (Desfiles, Gastronomia, etc) substitua pelo nome dos marcadores que você deseja exibir na página inicial. Cuidado para não remover nenhuma aspa ou vírgula!!

Também procure por:

salida += '<div class="featured">';
salida += '<h3>' + labeltitle[contarlabels] + '</h3>';
salida += salidainner;
salida += '<b><a href="http://templatefeminina.blogspot.com/search/label/' + labelname[contarlabels] + '?max-results=10">More '+ labelname[contarlabels] +'</a></b>';
salida += '</div>';
document.write(salida);
contarlabels ++;
}

Onde está em negrito, substitua pela url do seu blog. Mais abaixo encontre os trechos:

<script src='http://templatefeminina.blogspot.com/feeds/posts/default/-/Desfiles?max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'/>

<script src='http://templatefeminina.blogspot.com/feeds/posts/default/-/Gastronomia?max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'/>

<script src='http://templatefeminina.blogspot.com/feeds/posts/default/-/Moda?max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'/>

<script src='http://templatefeminina.blogspot.com/feeds/posts/default/-/Beleza?max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'/>

Aqui você vai substituir o link do templatefeminina pela url do seu blog e em seguida colocará o nome dos marcadores (substituindo Desfiles,Gastronomia, Moda, Beleza). Note que aqui os marcadores devem aparacer na mesma ordem que você colocou no trecho lá em cima, entre parênteses, como no meu exemplo.

Para aumentar o número de posts a serem exibidos em cada categoria, mude a numeração aqui:
numposts = 3; // numero de resumos por categoria
e aqui:
<script src='http://templatefeminina.blogspot.com/feeds/posts/default/-/Beleza?max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'/>

Obs: Se o número de postagens de um marcador for menor que o número determinado no script, nada aparecerá. Por exemplo, se estiver determinado que apareça 3 posts por marcador e você só tiver um post publicado com aquele marcador, não aparecerá nenhum. O número de posts deve ser igual ou maior.

Slide: no código está destacado o trecho relacionado ao slide de maneira bastante explicativa:

<!--INICIO DO SLIDE-->

<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage'>
<a href='COLOQUE AQUI O LINK DO POST'><img src='COLOQUE AQUI O LINK DA IMAGEM'/></a>
<span>COLOQUE AQUI A LEGENDA<br/>
</span>
</li>

<li class='s3sliderImage'>
<a href='COLOQUE AQUI O LINK DO POST'><img src='COLOQUE AQUI O LINK DA IMAGEM'/></a>
<span>COLOQUE AQUI A LEGENDA<br/>
</span>
</li>

<li class='s3sliderImage'>
<a href='COLOQUE AQUI O LINK DO POST'><img src='COLOQUE AQUI O LINK DA IMAGEM'/></a>
<span>COLOQUE AQUI A LEGENDA<br/>
</span>
</li>

<li class='s3sliderImage'>
<a href='COLOQUE AQUI O LINK DO POST'><img src='COLOQUE AQUI O LINK DA IMAGEM'/></a>
<span>COLOQUE AQUI A LEGENDA<br/>
</span>
</li>

 <!--FIM DO SLIDE-->

O tamanho das imagens devem ser de  610px (largura) e 310px (altura).


Antes de baixar o template, por favor, leia as explicações e atente para o fato de que neste modelo, na página inicial, só aparecerão os posts relacionados aos marcadores que você determinar no script.

Para colocar os links no menu, crie uma lista de links e arraste para o espaço abaixo do cabeçalho.

Quero aproveitar e deixar um obrigado ao Fernando do Blogueiros na Web. Apesar de não estar usando o script como ele modificou, não posso deixar de agradecer o tempo que dedicou tentando me ajudar.



EDIT 14/03/2011 : um novo link para download está disponível com os scripts para o slide dentro do código do template.

EDIT 21/03/2001: um novo link para download está disponível com uma correção para o problema de duplicidade de texto nas páginas estáticas. Meu agradecimento ao Raphael Viper que me alertou sobre o problema :)
Leia Mais

Estilo para os titulos da sidebar

Antes de tudo, preciso avisar que este tutorial serve para os modelos de layout (não testei os novos modelos) e foi usado um template Mínima.

A classe a que pertencem os títulos da sidebar é h2 e no template Mínima existe um trecho do código para h2, que engloba os títulos da sidebar e a data dos posts:

/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;}

Mas você pode dar outros estilos para os títulos da sidebar, inclusive usando imagens e cores diferentes para cada um, bastando acrescentar um pouquinho mais de css.

Sidebar sem estilo:


Primeiro, localize no código CSS, o trecho:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;}

Logo depois, acrescente:

.sidebar h2{   }

é entre as chaves que você irá acrescentar o estilo que pretende dar aos títulos da sidebar. Por exemplo:

.sidebar h2{
font-size: 22px;
color: red;}

resultado:



Você pode acrescentar aqui estilos para a fonte e cores do plano de fundo (ou até mesmo uma imagem para o background). Pode, por exemplo, determinar que a primeira letra de cada titulo seja diferente do restante:

.sidebar h2{
font-size: 17px;
color: #777e95;
font-family: Tahoma;}

.sidebar h2:first-letter {
font-family:Tangerine;
color:#8262ae;
font-size:38px;
font-weight: bold}

resultado:

Posso criar e acrescentar uma imagem de fundo (aqui criei uma imagem 320 x 50):

.sidebar h2{
width: 320px;
height: 50px;
font-size: 17px;
color: #777e95;
font-family: Tahoma;
background: url(http://3.bp.blogspot.com/_YGpl3rQPSzI/TPPq5PUdiBI/AAAAAAAAQ-I/hrx4kFtnQG4/s1600/side.png)  no-repeat;
}

resultado:


Note como os títulos não ficaram centrados (estão muito 'para cima'). Então, não basta colocar a medida da imagem, é preciso usar um pouco de padding:

.sidebar h2{
width: 320px;
height: 35px;
font-size: 17px;
color: #777e95;
font-family: Tahoma;
background: url(http://3.bp.blogspot.com/_YGpl3rQPSzI/TPPq5PUdiBI/AAAAAAAAQ-I/hrx4kFtnQG4/s1600/side.png)  no-repeat;
padding-top: 15px;}

resultado:

 Veja que eu subtrai de height o valor que coloquei em padding-top.

Mas o titulo ainda está 'grudado' no limite à esquerda da imagem. Preciso usar padding aqui? Não. Basta acrescentar text-indent:

.sidebar h2{
width: 320px;
height: 35px;
font-size: 17px;
color: #777e95;
font-family: Tahoma;
background: url(http://3.bp.blogspot.com/_YGpl3rQPSzI/TPPq5PUdiBI/AAAAAAAAQ-I/hrx4kFtnQG4/s1600/side.png)  no-repeat;
padding-top: 15px;
text-indent: 10px;}

resultado:

Agora eu quero usar um ícone diferente para cada título da sidebar. Como expliquei aqui, procure o id de cada widget que acrescentou na sidebar. No meu caso, são:


Anote as ID's e acrescente lá no CSS:

#CustomSearch1 h2{
background: #ccc url(http://2.bp.blogspot.com/_YGpl3rQPSzI/TPPjWZXr1wI/AAAAAAAAQ9g/5Qkq22EfRUQ/s1600/Find+Search_32.png)  no-repeat 280px 10px;
-moz-border-radius: 5px;
border-radius: 5px;
}

Veja que já não vale mais o background que coloquei em .sidebar h2. O que fiz aqui foi colocar uma cor de fundo e o ícone posicionado, 10px de distância do topo do espaço ocupado pelo título e 280px de distância da esquerda, além de uma borda arredondada de 5px (código em vermelho):



Faça o mesmo para cada widget da sidebar e em cada um coloque uma imagem e cor  diferente:
#CustomSearch1 h2{
background: #DAF2FE url(http://2.bp.blogspot.com/_YGpl3rQPSzI/TPPjWZXr1wI/AAAAAAAAQ9g/5Qkq22EfRUQ/s1600/Find+Search_32.png)  no-repeat 280px 10px;
-moz-border-radius: 5px;
border-radius: 5px; }

#Profile1 h2{
background: #E3FDB3 url(http://1.bp.blogspot.com/_YGpl3rQPSzI/TPPjxoHvnII/AAAAAAAAQ9k/7oDcQSHmh4A/s1600/Buddy+Chat_32.png)  no-repeat 280px 10px;
-moz-border-radius: 5px;
border-radius: 5px;}

#Label1 h2{background: #FCF1B4 url(http://2.bp.blogspot.com/_YGpl3rQPSzI/TPPj1QzXk3I/AAAAAAAAQ9w/kgBQ1cSLbeo/s1600/Tag_32.png)  no-repeat 280px 10px;
-moz-border-radius: 5px;
border-radius: 5px;}

resultado:
Invertendo a posição do ícone:

#CustomSearch1 h2{
background: #DAF2FE url(http://2.bp.blogspot.com/_YGpl3rQPSzI/TPPjWZXr1wI/AAAAAAAAQ9g/5Qkq22EfRUQ/s1600/Find+Search_32.png)  no-repeat 4px 10px;
text-indent: 36px;
-moz-border-radius: 5px;
border-radius: 5px; }
Para completar, veja este tutorial no blog Vagabundia, que ensina como usar span para dar estilos diferentes para um mesmo título.
Leia Mais

Template Knitting

Duas colunas, espaço para menu horizontal no topo (crie uma lista de links e arraste para o local indicado).

 Demo  |  Download
Leia Mais

Como ocultar a sidebar na home do blogger

Não é de hoje (não mesmo) que tento encontrar uma maneira de esconder a sidebar da home no Blogger. Minhas tentativas se iniciaram meses atrás, buscando por tutoriais, scripts e macetes. A única coisa que encontrei sobre o assunto era como esconder determinados widgets da home (ou de qualquer outra página), como explicam os tutoriais dos seguintes blogs (dentre muitos outros):

Templates e Acessórios
IceBreaker
UsuarioCompulsivo
MundoBlogger
Bloggersphera

Mas não era isso que eu queria. O que eu queria era que toda a sidebar ficasse oculta apenas na home, aparecendo nas páginas internas normalmente, ao lado da postagem. Deixei de converter muitos temas do wordpress para o blogger por não encontrar maneira de fazer isso. Hoje, enfim, descobri como.

Para que vocês entendam a dificuldade, se eu optava em colocar toda a sidebar dentro de uma condicional que determinasse que ela não deveria aparecer na home, ela realmente não aparecia, porém, também não aparecia na página 'Elementos de Página' e ai não havia como incluir, excluir, movimentar widgets. Não me adiantava nada lançar um template que impedisse os usuários de colocarem widgets na sidebar.



Hoje, conversando no twitter sobre o assunto, a Iara (@iarana)  me apontou um template que tem esta caracteristica: a sidebar aparece apenas nas páginas internas. Instalei o template e constatei que o problema também se apresentava: a sidebar havia sumido da página 'Elementos de Página', inutilizando, de certa forma, a coluna.

Bom, resumindo a novela, continuei insistindo no assunto hoje, por que estou trabalhando para converter este template do Wordpress para o Blogger (note que toda a home é ocupada por resumos de postagens e quando se clica em Style no menu, tendo acesso ao post completo, a sidebar aparece.), e finamente encontrei uma solução bastante simples:

Como retirar a sidebar da home do blog

Primeiro é preciso usar uma condicional. Após a tag ]]></b:skin> coloque o seguinte trecho:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<style>
#sidebar-wrapper{display:none}
</style>
</b:if>

Traduzindo em miúdos, determinei que a sidebar não apareça (display:none) se a condição for a página principal do blog (homepage).

Visualize e note que a sidebar realmente desaparece da home do blogger. Agora vá a página 'Elementos de Página' e veja que a sidebar não aparece ali.
Volte ao código do seu template e antes de body{ (logo no começo dos códigos CSS)  acrescente o trecho:

body#layout  #sidebar-wrapper{display:block;margin:0px;float:right;}

Salve e torne a visitar a página 'Elementos de Página'. Veja que a sidebar reapareceu e ainda assim, não aparece na home do blogger, apenas nas páginas internas. 
body#layout é o código para modificar a estrutura da página 'elementos de página', como já publiquei aqui.



Testei no Firefox, Chrome e IE8.

Meus agradecimentos aos meus amigos do Twitter que tentaram hoje me ajudar :)
Leia Mais

Importante: Sobre as imagens dos Templates

Estou recebendo mensagens de pessoas que usam os templates que modifiquei com a queixa de que hoje perceberam que as imagens dos mesmos não aparecem no blog; no lugar delas uma mensagem do TinyPic, serviço de hospedagem que eu sempre recomendei e confiei:



No final de setembro, sem mais nem menos, o TinyPic resolveu fechar as portas para os usuários estrangeiros, assim, deixando todo mundo na mão, conforme este post da Mamanunes: Tinypic - Fechando para Estrangeiros. Depois o Tinypic voltou atrás e liberou os links das imagens novamente. Pelo menos no meu caso. E eu fiquei tranquila, tudo voltou ao normal, não me abalei.
Eis que fui acessar minha conta hoje para ver qual era a novidade e me deparo com uma mensagem que diz que minha conta foi banida! Sem motivo, sem explicações, sem avisos, nada. Baniram e pronto. O Tinypic fez de conta que reabriu para estrangeiros para logo depois banir a conta de vez. Muito bonito. Tomem cuidado.



Ok, muita calma agora. O jeito é hospedar tudo no Blogger (o que eu já devia ter feito antes) e alertar vocês para que façam o mesmo. Quando você faz o download de um template, junto com o código, na pasta zipada, estão todas as imagens usadas no template. Hospede as imagens no Blogger (como a Mamanunes ensina no post que mencionei) e coloque os links nos locais correspondentes no template (geralmente o título da imagem já dá uma pista de onde deve ser colocada, por exemplo post li, outer-top, etc). 

Peço desculpas a vocês, principalmente por ter continuado a confiar em um serviço que já vinha dando sinais de que iria me aprontar uma.
Leia Mais

Estilo para o link Leia Mais

Se você costuma usar o resumo nativo do Blogger através do botão Inserir Jump Break, saiba que você pode personalizar a apresentação do link, não só do texto, que pode ser modificado em Elementos de Página (clicando em Editar no quadrado que corresponde a coluna do post):


Você pode também alterar a localização do link, bem como adicionar background, borda e imagens. Para isso, acrescente o seguinte trecho ao código do seu template:

.jump-link{
float:right; // aqui estabeleço que o link aparecerá à direita
margin: 0px 15px 10px 0px; // distância do link para o topo, direita, esquerda e base
font-size:13px; // tamanho da fonte do link
text-indent: 19px; // o quanto o link se afasta ou recua da esquerda
font-weight:normal; // tipo de fonte
padding: 0px 0px; // espaçamento
background: url(link da imagem)  no-repeat center left; // imagem/ícone que aparece à esquerda do link
}

.jump-link a, .jump-link a:visited{color:#0066CC; text-decoration: none; //cor do link em estado normal}

.jump-link a:hover{color:#0066CC; text-decoration: none; // cor do link em estado hover}

Retirei este exemplo do Template Mundo Verde e o resultado pode ser visto aqui.
Você pode optar por não usar um ícone mas criar um botão com bordas arredondadas com uma imagem de fundo, como uso aqui no TNB. Para isso, basta:

.jump-link{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 4px 6px;
float:right;
background: url(link da imagem do bg)  repeat-x;}

O site CSS3 Generator vai te ajudar muito a  gerar os códigos para bordas arredondadas, textos com sombras, sombras em botões entre outros.

Mas Ariane, eu uso nos meus templates aquele resumo automático de postagens. Como faço para personalizar o link?


Bem, o código que eu usei em diversos templates para gerar resumo automático ( e creio que seja o mesmo que a maioria usa ) tem a class #showlink (ou .showlink ) . Então basta dar estilo a esta class e tudo certo. Porém, o interessante é fixar este link no post resumido e não apenas dar um espaço entre o final do resumo e o link. Por exemplo, note o botão comprar neste template em que estou trabalhando:


Aqui usei o resumo automático e o botão comprar nada mais é que o #showlink personalizado. Para fixar ele no canto inferior direito, independente do conteúdo do resumo, é preciso primeiro determinar uma altura fixa para os resumos em .post (estilo para a página inicial apenas, usando a condicional &lt;b:if cond=&#039;data:blog.pageType != &amp;quot;item&amp;quot;&#039;&gt; &lt;/b:if&gt;), e acrescentar position: relative, assim:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post {
position: relative;
height: 250px;
outros estilos....
}
</style>
</b:if>

em #showlink, position:absolute e determine as distâncias para o topo e para a esquerda, em relação ao post:

#showlink{
position: absolute;
top: 210px;
left: 200px;}

Isto vale para posicionar qualquer elemento. Determine position:relative na div principal (div1: post, header-wrapper, etc) e position:absolute no elemento que se pretende posicionar em relação a div1 (div2: #showlink, logo, etc).

É isso :)
Leia Mais

Template Mundo Verde


O template contém duas colunas e menu superior:

Menu: é o mesmo menu que foi mostrado neste post. Para editar os links do menu, procure no código do template por:

<!-- inicio do menu -->
<div class='container'>
<ul class='v2' id='topnav'>
<li><a href='http://templatesparanovoblogger.blogspot.com'>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>
<!-- fim do menu -->

Onde está o link do Templates Novo Blogger, apague e coloque o link do seu blog. Apague todos os # e coloque os links que desejar.

Resumo dos textos
: o resumo utilizado é o resumo nativo do Blogger, o More (ou Jump-link);

Posts relacionados com imagem na página inicial (home) e também nas páginas internas:


OBS: se você estiver mexendo no código do seu template e clicar em Visualizar, não verá os posts relacionados, porém eles estarão funcionando normalmente (veja na home do blog).

Abaixo dos posts relacionados, links de redes sociais ('Sharing is Sexy'). Basta apenas editar o link do seu feed; para tanto clique em Expandir Modelo de Widget e procure por esta linha:

<li class='sexy-syndicate'><a href='Url_FeedBurner' title='Subscribe to RSS'/></li>

coloque a Url do Feed onde indicado.
Leia Mais

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
Leia Mais

Template Televisão



  • Template com cabeçalho dividido para inserção de banner à direita, menu horizontal para lista de links, marcadores ou páginas.
  • Sidebar dividida em três colunas: uma com largura total no topo e duas paralelas abaixo.
  • Footer dividido em 3 colunas.

Neste template o resumo automático não foi utilizado e sim o resumo do Blogger (jump-link). Para utilizá-lo basta clicar no botão assinalado na imagem abaixo:


Uma faixa cinza aparecerá demarcando até que ponto o texto será mostrado na página inicial. Continue a escrever o restante do texto após a faixa. O uso do resumo é opcional e você tem total controle sobre a quantidade de texto a ser mostrado na página inicial. Note no Demo que os primeiros posts estão resumidos mas o último não.

Para alinhar corretamente uma imagem no topo do texto, como mostra o exemplo abaixo, deixe o código da imagem entre as tags <div id='imagem-top'> e </div>,:

imagem dentro do div 'imagem-top'
Como deve ficar o código da imagem

Note que você deve inserir o código clicando em Editar Html. A medida da imagem deve ter largura de 596px e altura de 120px. Se você colocar uma imagem com estas medidas sem utilizar as tags, ela não ficará alinhada como no exemplo. Você pode inserir imagens de qualquer tamanho em seu texto sem o uso da div 'imagem-top', ela serve apenas para alinhar as imagens com as dimensões citadas, para dar um visual interessante aos textos resumidos.

Imagem sem o uso da div 'imagem-top', desalinhada.
 Já no topo da sidebar é possível apresentar imagens como no exemplo abaixo, onde a legenda se sobrepõe a imagem num fundo com opacidade:


Isso nada mais é do que um widget de imagem (use as medidas width: 338px; height:120px; para a imagem), onde você coloca o link para um post e uma legenda (não coloque título no gadget)


Este hack funciona apenas para o topo da sidebar (a primeira divisão) e se você não tem interesse em exibir imagens com a legenda sobreposta, basta arrastar o widget para a seção de baixo. O topo da sidebar pode ser utilizado para exibir qualquer widget normalmente, apenas as legendas aparecerão acima da imagem.


Qualquer modificação que pretenda fazer no layout, será por sua conta e risco.

O  ícone da Tv Plasma  utilizado no layout é de autoria de  Roberto Abril Hidalgo, que gentilmente autorizou a utilização e distribuição do seu trabalho neste template.
Leia Mais

Template Boa Forma


  • Template com resumos automáticos de postagens com miniatura da imagem utilizada no post;
  • Menu horizontal para lista de links ou gadget Páginas;
  • Widgets fixas de imagens abaixo do cabeçalho que se revezam nas páginas internas;
  • Artigos Relacionados abaixo dos posts;
  • Possibilidade de alterar todas as cores do template através do Painel Fontes e Cores. Você pode criar  uma combinação única de cores para seu layout.
    Para utilizar os widgets de imagens abaixo do cabeçalho, vá no painel Layout, que deve se apresentar desta maneira:


    templates novo blogger


    Note que há um total de 8 widgets de imagem fixas no layout. Os quatro primeiros aparecerão na página inicial do blog e os 4 últimos nas páginas internas. Basta clicar em editar em cada widget, mudar o título, a imagem, a legenda (que deve ser curta) e o link, que deverá apontar para o post que se deseja promover. Feitas as modificações, clique em salvar.



    templates novo blogger


    *******************************************************************

    A ilustração utilizada neste template é do meu querido amigo Fernando Buson, que conheci através do Twitter. Com apenas 18 anos, Fernando revela multi talentos: é desenhista, escritor, domina técnicas de Photoshop (ele mesmo criou o template do seu blog Dinastia Croft e cria histórias em quadrinhos, entre outras coisas.
    "Bom, eu desenho desde pequeno. Nunca tive aulas,  foi tudo "na raça" mesmo. Comecei a aprender mangá através daquelas revistas de "Curso Prático" que eram vendidas em bancas de jornais. Hoje eu faço curso de comunicação visual na Escola Panamericana de Arte e Design e faço ilustrações para a Editora 2D. Sou usuário do blogger há alguns anos quando criei o blog "Dinastia Croft" em parceria com uma amiga." F.Buson

    Para conhecer mais do trabalho de Fernando Buson acesse: F.Buson
    Para segui-lo no Twitter: @fgouldfell
    Leia Mais