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

12 março 2010

Template Oggi

Às vezes, passeando pela net, um detalhe que me chama a atenção pode ser fonte de inspiração para criar um novo template. Foi o caso deste post no Gem@ Blog, onde a Gema nos ensina a colocar este belo slide criado por Soh Tanaka. 


Slide

O slide é automático e o script necessário para fazê-lo funcionar já se encontra dentro do código html, não havendo necessidade de hospedagem. Tudo que é preciso fazer é criar banners de 790px x 286px, hospedar a imagem, copiar a url fornecida e colocar neste trecho do código html, onde está indicado em vermelho:

<div class='window'>
<div class='image_reel'>
<a href='url do post 1'><img alt='titulo' src='url da imagem do banner 1'/></a>

<a href='url do post 2'><img alt='titulo' src='url da imagem do banner 2'/></a>

<a href='url do post 3'><img alt='titulo' src='url da imagem do banner 3'/></a>

<a href='url do post 4'><img alt='titulo' src='url da imagem do banner 4'/></a>
</div>
</div>

Onde está em verde, coloque a url do post para onde o banner deve apontar e onde está titulo, dê um titulo para a imagem.

Imagens

As imagens que compõem o template devem ser hospedadas por você, no seu servidor de preferência (pode ser ImageShack, Photobucket, TinyPic, etc) e a url  gerada (Direct Link) deve ser colocada onde está indicado no código. Por exemplo, a imagem crosscol.png - busque dentro do código do template (use Ctrl+F para facilitar a busca) este nome, que deve aparecer entre parênteses. Coloque dentro dos parênteses a url da imagem crosccol.png hospedada.

Ex:
Está assim no código do template:

#crosscol{
margin: 3px auto 0px;
height:auto;
background:url(crosscol.png)  repeat-x;
border: 1px solid #e0e0e0;
}

Deve ficar assim depois de hospedar a imagem e copiar a url gerada (Direct Link):

#crosscol{
margin: 3px auto 0px;
height:auto;
background:url(http://i43.tinypic.com/depklu.png)  repeat-x;
border: 1px solid #e0e0e0;
}

Os locais onde as imagens devem ser colocadas são (pela ordem que aparecem no código):

.post li, body, #crosscol, .sidebar a, .sidebar a:visited, .footer a, .footer a:visited e .paging, #showlink

Obs: O banner que segue junto com as outras imagens não deve ser hospedado, serve apenas como exemplo das medidas que devem ser utilizadas.

Na página inicial os posts apresentam-se resumidos automaticamente, bem como nas páginas dos marcadores e arquivos:

Página dos Marcadores

O menu horizontal é apropriado para receber o gadget Páginas. Crie as páginas que deseja exibir e arraste o gadget para o local indicado:


Acima do cabeçalho há um  pequeno menu à esquerda que também deve ser editado no código do template:

<!-- Menu Esquerda -->

<ul class='left'>
<li><a href='url aqui'>Home</a></li>
<li><a href='url aqui'>Sobre</a></li>
<li><a href='url aqui'>Templates</a></li>
<li><a href='url aqui'>Contato</a></li>
</ul>

<!-- Menu Direita -->

<ul class='right'>
<li><a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts</a></li>
<li><a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments</a></li>
<li><a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Feeds</a></li>
</ul>

<!-- Fim dos Menus -->
</div>

Note que o menu à direita é automático; não altere nenhum código dele.

Os créditos do ícone usado nos itens da sidebar são do Blog Perfume

Para fazer o Download do Template Oggi em pasta zipada clique aqui

E antes que me perguntem:

*Não é possível alterar as dimensões do slide
*Para alterar o texto do link Ler Mais, expanda os códigos do template e use o Ctrl+F para fazer a busca, como mostra a imagem abaixo:


Escreva Ler Mais na caixinha que se abre e clique em Próximo e automaticamente o trecho a ser modificado aparecerá destacado.

Para alterar as dimensões das imagens nos resumos, procure por:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 320;
summary_img = 170;
img_thumb_height = 110;
img_thumb_width = 98;
</script>

altere o valor (110) onde está em vermelho para a altura e o valor (98) em verde para alterar a largura da miniatura da imagem. O valor na linha azul refere-se ao número de caracteres mostrados no resumo quando não há imagem a ser exibida e o número na linha roxa refere-se ao número de caracteres mostrados quando há imagem no resumo.

Não é possível retirar o slide ou os resumos sem quebrar completamente a estrutura do template original. Qualquer alteração  é por sua conta e risco :)

EDIT 25/03/10 : Havia um erro no código do template que já foi corrigido. Para os que fizeram o download do código antes desta data, por favor, procurem o seguinte trecho no código do template:

#main-wrapper{
float:left;
margin-left 6px;
width: 796px;}
#Blog1{float:left;margin:0px;padding: 0px;width:796px; clear:both;}

e troquem por:

#main-wrapper{
float:right;
margin-right: 6px;
width: 796px;}
#Blog1{float:left;margin:0px;padding: 0px;width:796px; clear:both;}

Para os que baixarem desta data em diante, o código já está ok.
Edit 31/03/10 - Correções no código para o navegador Internet Explore foram feitas.


Edit 10/04/10 - Respondendo a diversos comentários: a imagem do link Leia Mais é a mesma do Menu e deverá ser colocada em #showlink

A distribuição deste template só está autorizada ao site BTemplates e os créditos não devem ser removidos.

Artigos Relacionados

78 comentários:

Rafael Silveira disse...

FODÁSTICO!

Quando crescer quero ser que nem você!

:D

Shirley disse...

Ariane, perfeito esse template, me A-APAI-XO-NEI e já tô baixando. Mas do jeito que ando prguiçosa pra essas coisas de css e htmls, nem sei quando vou conseguir instalá-lo no meu bloguito - parece tão complicado!!! :-( mas vou respirar fundo e tentar - de repente até consigo, né? rs
Bjo, querida, parabéns!

2MR Artes & Cia disse...

Otimo template, sem duvida estarei testando ele se for cabivel ao meu progeto, serei mais um utilizador desse melo template.
parabens...

Canal Gospel disse...

Este Arrebentou, nota 10!

Yêu sức khỏe disse...

Thanks ! Very nice.

@sjodiel disse...

OLHA EU AQUI DE NOVO, AMEI ESSE TEMPLATE, ACHOU QUE VOU TROCAR O TEMPLATE CLINIC (QUE ESTOU USANDO NO MEU BLOG) POR ESTE!!!!

Ajasta Gayatri disse...

Lindo Template Ariane ! Vou testar...

Mary disse...

Nossa que template lindo! Ameeeiiii coloquei ele no meu blog de testes e to adorando, em breve vou passar a usa-lo em um outro blog :)
bjos Ariane

Admin disse...

Hay Ariane, your template looks so great. I use it for my online shop. But i have the problem with this template.
How to add a link to navigation bar at the red navigation?
You can visit www.fiarcollection.co.cc to see my problem.
Thanks for your Attention.

Sorry if you missunderstanding my language because i come from indonesia that english language is not primary language.

La Dueña disse...

Hermoso template!
Besos

Poker e Cia disse...

Como faço pra mudar meu Leia Mais, está em branco ,

muitooo bom o template,ja estou usando...

abraços.

Ariane disse...

Poker e Cia, faltou colocar a imagem crosscol.png também em #showlink

Gilberto Silva disse...

Boa tarde Ariane, gostaria de primeiro parabeniza-la pela iniciativa em nos ajudar com sua experiência e conhecimento.
Eu baixei o arquivo deste template mas ao clicar do documento XML abre uma aba ou guia do explore e fica carregando e não abre. O que pode estar acontecendo?
Faço uso do template clinic (www.mirantedaluz.blogspot.com e o www.gcmcotiags.blogspot.com) e gostaria de saber como faço para aparecer mais postagens na página inicial, tendo em vista que no recurso de configuração eu já fiz mas não altera.

Mais uma vez MUITO OBRIGADO.

Gilberto.

Ariane disse...

Gilberto, testei agora o link e está tudo correto com o arquivo. Você não deve clicar no arquivo xml, mas enviá-lo para o blogger. Clique em Layout, Editar HTML, depois em Enviar Arquivo. Vai abrir uma janela com os documentos do seu pc, então clique no arquivo xml e depois em Fazer Upload.

RuH Santos disse...
Este comentário foi removido pelo autor.
RLY player disse...

Oi as imagens estão incompletas :S ? pq aqi naum veio a:visited, .footer a, .footer a:visited essa imagens naum vieram

Ariane disse...

RLY, o que aparece dentro dos parenteses em .footer a, .footer a:visited?

Jefferson Monteiro disse...

Olá,Ariane,tudo bem?
Muito show este template!
Breve estarei usando ele em algum blog meu
Ei...não dá para adicionar uma quinta imagem neste template?
Ou ele é programado só pra quatro mesmo?
Bjs

Adriano de Paula disse...

Bom dia Ariane! Seu trabalho é muito bom, você está de parabéns! mas ao clicar no link do 4shared não está baixando o arquivo. Ele está com algum problema?

Obrigado e mais uma vez parabéns!

Anderson Batata disse...

Bom template, mas é aquilo sempre tem alguem p falar, como eu, rsrs.

nos slides seria possivel ter um texto com a descriçao da foto ou chamada de um post.

Mogi disse...

ola, muito bom o seu blog, parabéns!
Vc poderia dar maiores detalhes e uma explicação se possivel de como funciona esse gadget paginas,e como coloca-lo nesse template, sinceramente nao consegui utiliza-lo, desculpe a minha ignorancia!
Abraços

Mogi disse...

Ola, parabens pelo blog, muito bacana
poderia dar maiores detalhes de como funciona o gadget paginas do blogger e como faze-lo funcionar nesse template, me desculpa a ignorancia mas nao estou conseguindo.
Valeu

Mogi disse...

Ola, por favor desconsidere a mensagem acima, ja consegui fazer a pagina funcionar, mas agora estou com outro problema, no meu blog não está aparecendo a imagem "Ler Mais ", se puder me ajudar,por gentileza. o meu blog é o seguinte
http://guacuonline.blogspot.com
Obrigado

-=|Boutique|=- »♥«Senhorita»♥« disse...

olá Ariane, pode até ficar meio repetitivo. mais não tenho como deixar de parabeniza-la pelo seu trabalho.
Estou aqui tem um mes mais ou menos e ao longo deste venho testando muitos templedes e sem duvidada os seus templedes tem um diferencial a mais. depois deste tempo testanto o que coube melhor no meu projeto foi o oggi. mais estou com um probleminha q alguns acima tbm estão enfrentando
1º não consigo editar o slide, n dá certo quando mudo no html dá erro. o que pode estar acontecendo?
a cor da pagina tambem não consigo alterar ele fica branco depois de salvar assim como o link do leia mais.
aguardo a resposta. mais uma vez obrigada

Tânia Regina disse...

Olá Ariane.

Gostaria de parabeniza-la pelo seu bloguer é muito, muito bom, mesmo.
Eu amei esse template, alías me apaixonei.
estou testando Porém:
por favor quando coloco as fpotos no slide, elas nunca ficam no mesmo tamanho sempre diminuem, eu hospedo elas no picasa, e não consigo de maneira alguma que elas fiquem no tamanho que indicou, outra coisa, sempre que postar uma materia nova terei que ir no html e colocar tudo de novo o end; das imagens?
Desculpe minha ignorância, me ajude,por favor.
Obrigada e Deus te abençoe.

Tania

Ariane disse...

Tânia não use o Picasa para hospedar as imagens, use o ImageShack ou Tinypic. As imagens levam para os posts, se quiser mudar as 'chamadas' terá que alterar novamente.

Veja só remansense disse...

Obrigado eu já havia baixado este template para o blog que estou tentando criar porem eu não conseguia configurara muito obrigado

Tânia Regina disse...

Obaaa.

Obrigada pela dica.
Espero que agora eu consiga :)
Vou continuar no teste, pois é mesmo lindo esse template.
Obrigada e Deus te abençoe.

Tânia

Veja só remansense disse...

uma pergunta por favor só ficou faltando os ícones do menu você pode explicar por favor, muito obrigado

WebMaster disse...

Gostaria de saber como posso adicionar posts relacionados neste template. Parabens pela otima postagem.

DJ DEDECO disse...

Ariane, MARAVILHA este lay out, tudo que eu procurava, rsrsr deu um pouquinho de trabalho no "Ler Mais" kkkkk, mas foi só ler os colegas que já deu tudo certo, obrigado pelo lay out, abs.

Nauan disse...

Que Template Legal!

C. Rosal disse...
Este comentário foi removido pelo autor.
Ariane disse...

C.Rosal, você retirou o crédito do template e ainda quer que eu te ajude?

C. Rosal disse...
Este comentário foi removido pelo autor.
C. Rosal disse...
Este comentário foi removido pelo autor.
C. Rosal disse...
Este comentário foi removido pelo autor.
Wesley Vicente disse...

Ariane, eu rodo o Btemplates dos pés a cabeça de nunca encontro um template que eu goste. E o único template seu que já vi lá foi o TEMPLATE FÉRIAS. Procuro por horas lá, mas quando chego aqui sempre encontro o que quero e com extrema facilidade. Irei usar este template !!! Obrigado Ariane
Ass; Wesley Vicente

Entertainment disse...

EMERSON, COMO ADICIONAR PÁGINAS NO BLOG?

Mizake disse...

honestamente, eu admiti que o estilo revista de todo o modelo apresentado aqui são bons. Eu apenas à procura de informações que explicou que o novo Código do Blogger, que contém códigos como "exterior-pos" pós-data ", que veio no novo Código Blogger

Jucileide disse...

Ariane,

parabéns pelo seu blog, o adicionei aos meus favoritos. Este template é sensacional e eu já o baixei com o objetivo de usá-lo em meu blog. Mas uma dúvida, como faço para colocar nele aqueles símbolos de compartilhamento nas redes sociais (twitter, RSS, Orkut e etc).

Sucesso! ♥ Juci ♥

Larissa disse...

irado!!

Paulorima disse...

A imagem vermelha na frase ''ler mais'' esta em branco.....como poço deixa-lá vermelha?

Paulorima disse...

Ariane..não precisa responder minha pergunta ...consegui..muito bom o templates...parabénsss

мιηєιяιηнO disse...

Muito bom! eu fiz conforme o tutorial e deu tudo certo, muito bonito o template. to usando no meu blogger.
Ariane
quero acrescentar mais fotos no slide, mudei umas coisas no codigo pra acrescentar imagem, aparece mais numero, porem as imagens nao quer aparecer, como faço pra aparecer mais imagens¿
www.SouMaisQueVencedor.tk

RuH Santos disse...

Esse temple não vem com o nome do autor das postagens, e o ver mais hospedei e em varios sites e não aparece


Teria como me ajudar?


(colokei certinho dentro do (crosscol.png) eu ate usei o link da demonstração)

Lucas palmeirense da oposição disse...

tem a ver com o #showlink2{

esqueci de dizer q o blog eh www.palmeirasaovivo.com.br e n o outro

Lucas palmeirense da oposição disse...

acabei de perceber q qd o post tem imagem, o botao aparece. qd n tem, o botao some. na verdade ele fica no mesmo lugar, mas como o post diminui qd ta sem foto, o botao ara pra acompanhar a altura, mas n acompanha. ai ele acaba ficando atras do post debaixo e impossivel de clicar. o erro ta ai. sabe consertar esse problema, fazendo com q o botao "leia mais" do primeiro post acompanhe a altura?

Ariane disse...

Lucas confirma para mim: este problema está acontecendo no Template Oggi ou no Template Manchete?

Tânia Regina disse...

Olá Ariane, tudo na Paz?

Desculpe incomodar de novo, obrigada plea ajuda,acho que tá ficando bom, porfavor se puder da uma olhadinha no meu blog, e me diz o que achou(tecnicamente falando).
Dei uma mudada na cor dos menus, coloquei um vermelho mais escuro,mais gostaria que me dissesse como coloco a mesma cor naquela lateral esquerda onde está os marcadores,que continua o vermelho original,mais claro.
Também eu coloquei mais fotos no slider,,copiei o end: que tinha no html e repeti, mais como a foto é para anunciar a postagem nova, acho que vou ter que tirar, pois pensei que essas fotos seriam fixas como banner das postagens(se é que posso chamar assim).
Se estou começando a entender, cada vez que colocar postagem nova terei que colocar essa foto no slide?
e como colocarei o link na foto antes de postar a matéria?
Se fiz alguma mudança que não aprova, por favor é só me falar, que volto, sem problema algum,não retirei os créditos, mais me perdoe por qualquer coisa
Mais uma vez desculpe minha ignorância.
Já te agradeço, e que Deus continua e te abençoar, sempre.


Tânia

obs:se não quiser publicar não tem problema,já estou perguntando muito,rsr(mais quero aprender né!)
mais aguardo sua resposta.

Tânia Regina disse...

Ops.
Antes que esqueça!
Aquela setinha que tem no seu slide no alto à esquerda, porque no meu não tem? :(

Obrigada

Equipe BBC. disse...

Ariane... Este slide funciona com dominios comprados, sem ter o Blogspot??? Somente com .COM???

Equipe JLS disse...

Ariane, você poderia me ajudar?
A imagem (vermelha) que está abaixo da frase "Ler mais" não aparece. O que eu devo fazer?

Equipe JLS disse...

Ariane, axei o template ótimo. Só estou em dúvida de uma coisa. A imagem vermelha que fica abaixo da frase "Ler Mais" não aparece. O que eu devo fazer?

Fernando J.C disse...

Estou com um pequeno problema no slide, ta aparecendo imagens simultâneas, não cosnigo comfigurar.

Me de uma ajuda por favor!
o blog é http://meganewsnet.blogspot.com/

peguei os banner para testar, mas mesmo assim to com problemas, o que sera que é?

мιηєιяιηнO disse...

Ariane responde minha pergunta por favor.
como adicionar mais imagens no slide, tentei colocar mas nao esta dando certo :/ me diz como alterar os codigo no template para mim colocar mais umas fotos no slide.
o template esta no blog: www.SouMaisQueVencedor.tk
se puder me passar por Email o tutorial explicando maycon_ader_@hotmail.com

ou entao mim explicar por aqui mesmo.Obrigado

atenciosamente.

Equipe BBC. disse...

Ariane, este slide funciona em endereços comprados? www.????.com ou só se for blogspot?

Blog da Família Lima Rocha disse...

Olá Ariane. Parabéns pelo seu belo Template Oggi.
Tenho a satisfação de informá-la que consegui adaptar o
Template as minhas necessidades. E consegui alterar as cores
das imagens "CROSSCOL.PNG e PAGING.PNG".
O template ficou excelente, para a sua verificação e dos
seus leitores devem acessar a página que está ainda em fase de
reformulação:
www.turismo-contabilidade.blogspot.com

Aguarde que mandarei as dicas de mudanças das cores das imagens
e de criação de SLIDES sem necessidade de criação de Slides através da Internet.

Artesanato Bahia disse...

Boa tarde, e Parabéns pelo blog! ;) Ariane, me diga uma coisa, tem como mudar as cores do blog? eh q antes usava esse background: http://img169.imageshack.us/img169/7730/b2a.jpg e demais itens utilizava tons de rosa. Porém com esse template não consegui.
Desde já agradeço! ^^

Ajasta Gayatri disse...

Ariane,

Oi, ao colocar a url do post e títulos no html, no slide, a imagem continua em sem o título do post, ou seja não muda nada no slide, só aparecem as imagens "limpas". Fiz tudo certinho aqui, até tenho o template Setembro no meu outro blog que funciona direitinho.

Não entendo nada de html perto de você, mas será que falta alguma "chamada" para aparecer esse link na imagem ??

Obrigada, bjs

Ariane disse...

Ajasta não deve aparecer o título nas imagens e pelo que vi em seu blog os links nas imagens do slide estão funcionando corretamente.

Ajasta Gayatri disse...

Ah.... Ariane, pensei que aparecessem os títulos sim, então está bem. Muuuuito obrigada mesmo pela atenção, beijão !

AD Serraria disse...

Estou usando esse template em meu blog e achei o máximo, era o que eu precisava, parabens!!!

por Guilherme Rodrigues disse...

Parabens pelo belo template! Muito bom!

Porem estou com um problema, na GadGet "Paginas" o fundo esta cinza, da mesma cor do background e nao consigo alterar. Esquecei de alguma parte ? O que posso fazer?

Link do blog: http://blogfutebolpe.blogspot.com/

Obrigado

Thiago Amorim disse...

http://fisiouneb2009.blogspot.com/

Qual será o problema com o layout ?

Ariane disse...

Thiago os códigos do resumo foram removidos e no lugar aparece 'align justify'. este template não está como o original

Thiago Amorim disse...

Eu até percebi isso antes de ler seu comentário. Agradeço de qualquer maneira. Sei que vc não responde perguntas de código mas sse puder me dizer como que muda a cor do titulo da postagem que está em vermelho ? Eu agradeço. De qualquer maneira eu até acho que estou me dando muito bem com esse treco de HTML. Fiz umas modificações básicas, mas pretendo fazer umas maiores. Principalmente na barra de navegação.

Tv Sem Nexo disse...

Como faço pra mudar meu Leia Mais, está em branco ,

muitooo bom o template,ja estou usando...

abraços.
16 Março, 2010
Ariane disse...

Poker e Cia, faltou colocar a imagem crosscol.png também em #showlink

Leia mais: http://templatesparanovoblogger.blogspot.com/2010/03/template-oggi.html#ixzz0kST868zF

AINDA NÁO INTENDI ISSO, ALGUEM PODERIA EXPLICAR MELHOR?
VALEWS

por Guilherme Rodrigues disse...

Olá Ariane, parabéns pelo belo template!

Estou com um problema no Gadget "Páginas", ela não está ficando com o fundo vermelho e sim cinza, da cor do plano de fundo.
O que será que está acontecendo ?

http://blogfutebolpe.blogspot.com/

kpllo disse...

Oi Ariane. Gostei muito do template, parabéns, usei no meu blog e ficou ótimo!

Meu único problema é que não aparece a assinatura do post ("postado por kpllo...") nem qualquer outra alteração que se faça no layout do mesmo através da tela Layout > Elementos de Página.

Isso tem como ser alterado? Estava pensando em chamar um amigo para escrever comigo no blog e seria interessante que as postagens fossem assinadas.

Parabéns mais uma vez pelo template!
Abs

W.Grupo disse...

Caracaaaa, adorei, merece minhas humildes visitas diárias...
continuem melhorando que estaremos e indicaremos sempre por aqui, nunca tinha visto antes um blog tão funcional quanto o de vocês!
Tudo de Bom.

Romenig Pereira disse...

Super essa template, parabens!

Hospitaar Santa Celina disse...
Este comentário foi removido pelo autor.
Romenig Pereira disse...

Ja add no meu blog, super essa template, ate hoje nao vi template melhor, otimo layout, leve e muito simples.
Obrigado!
http://efeitophotoshop.blogspot.com/

Daniele Organista disse...

Olá Ariane, já coloquei no meu blog, só tenho uma dúvida.
Fui colocar o LinkWithin e não funcionou muito bem. Dentro da postagem ele funciona, mas quando vamos para a pagina inicial do blog, fica todo desconfigurado, as postagens meios misturadas.
Você tem alguma solução pra isso? Ou me recomenda algum outro Widget para assuntos relacionados?

Abraços

Ingrid disse...

Oi eu não estou conseguindo o slide, ele fica todo branco, você pode me ajudar?

Leez disse...

Bello, bello, bello!!!

Mogi disse...
Este comentário foi removido pelo autor.