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

31 agosto 2011

Template Super Clean


Ver Demo| Download


página interna
O Template Super Clean contém:

Menu Horizontal
para editar os links do menu, porcure por:

<div id='menu'>
<ul>
<li class='selected'>
<a href='Link 01'>Home</a></li>
<li><a href='Link 02'>Tutoriais</a></li>
<li><a href='Link 03'>Portfolio</a></li>
<li><a href='Link 04'>Contato</a></li>
</ul>
 </div>


Slide
este modelo de slide encontrei no blog Mundo Blogger , onde vocês encontrarão um detalhado tutorial sobre como editá-lo. Para editar os links e imagens, procure por:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='galeria'>

<div class='main_view'>
<div class='window'>
<div class='image_reel'>

<a href='url do post' rel='1'><img alt='' src='url da imagem 01'/></a>

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

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

</div></div>
<div class='paging'>
<a href='' rel='1'>1</a>
<a href='' rel='2'>2</a>
<a href='' rel='3'>3</a>
</div></div>
</div>
</b:if>

se não desejarem exibir o slide, basta apagar todo o código acima.

Resumo de postagens automática na Home e páginas de Marcadores e Arquivos. Quando não houver imagem no post, uma imagem substituta aparecerá.

Efeito Lightbox nas imagens. (prettyPhoto)
Para utilizar o efeito, siga as explicações do post do template Diary.

Ao final de cada postagem é exibida uma caixa com o avatar e informações sobre o autor. Para editá-la, clique em Expandir Modelo de Widget e procure pelo trecho abaixo:

<!-- Post-Autor -->

<div class='post-autor'>
<span class='autor-avatar'><img src='url do avatar'/></span>
<span class='autor-descrição'>

<h4>Título</h4>

<p>Descrição do autor.......................</p>

</span>
</div>

Os scripts para o funcionamento do efeito Lightbox-prettyPhoto (que acompanham o arquivo xml) devem ser hospedados e suas url's colocadas, substituindo o que está em negrito:

<script src='http://jquery-1.4.2.min.js' type='text/javascript'/>
<script src='http://jquery.prettyPhoto.js' type='text/javascript'/>
<script src='https/prettyphoto/custom.js' type='text/javascript'/>

Eu hospedei meus scripts no google sites e funcionam perfeitamente, mas, ao que parece, não funcionam para quem tem domínio próprio, por isso recomendo que busquem a melhor alternativa para cada caso.

De maneira nenhuma o link do Templates Novo Blogger (TNB) deve ser alterado ou retirado do rodapé do template.

Espero que apreciem :)

Artigos Relacionados

64 comentários:

-Moi- disse...

Realmente, Muito bom este templete. Parabéns pelo seu trabalho.

Allan Fixnet Uster disse...

Ariane
La vem eu dinovo!
Amiga linda poderia por favor me dizer se nesse template tem como eu colocar paginas estaticas sem ter que usar apenas as 10 ofericdas pelo blogger?
E de forma que o mesmo aceite outras paginas estaticas?
Muito grata!
Se a resposta for positiva,irei usar esse template com muito prazer.
Pois agora tenho um bom publico!
Um dia ainda faremos uma parceria com certeza.
Beijao!

Max disse...

This is an amazing template, I would like to use it, but how do you do the Sub-Menus?

Vitta Care disse...

O template é lindo e perfeito para o meu site, mas nao estou conseguindo editar algumas coisas.Estou tentando usar esse template, mas nao consigo editar as imagens do slide.Tbm nao consegui editar as paginas do menu...Poderia me ajudar?

www.vittac.blogspot.com

sheila@vittacare.com

obrigada!

mnserrat disse...

Es preciosa ;D Gracias!"

Claudio Sanches disse...

Ficou muito bom.

Tom Rodrigues disse...

Gostei do efeito hover que há nas imagens dos posts inclinando para o lado. Poderia me indicar o tutorial?

GUI-GUI Brinquedos disse...

Olá gostei muito mais por que ?
no meu blog ele não aparece as imagem no resumo principal ?

Summer disse...

Adoro seu site,seus templates ,seu Trabalho em Fim sua total dedicasao Espero que atenda um pedido meu entre em contado no meu msn bigou_juan@hotmail.com...qeria que voce montasse um template para um blogger meu, para conversar seria melhor que voce me adicionase,Obrigado

Pamelahc.123 disse...

me ajuda deu um erro no xml '-'
nao entendi ele disse Não foi possivel ...
XML ...
me ajuda ;(

Jonhson Rafael disse...

Oi!

Show de bola este template. Como eu coloco as fotos no resumo do post?

Jean Oliveira disse...

como eu coloco o meu banner no template?

Jaqueline Tompson disse...

Olá, amei o template, já está no meu blog =D
Mas estou com um problema! Não consigo colocar o "Poderia gostar também de:" somente na página da postagem completa, o widget fica aparecendo na página inicial também, nos resumos das postagens. Aí fica uma bagunça. =/
Poderia me ajudar?
Agradeço desde já. =D

Admin disse...

Gostei muito deste template, estou utilizando no meu futuro blog, só que tenho uma dúvida, na pagina inicial não aparece a coluna da direita, tem como arrumar?

Angelo Scatena disse...

Como que eu diminuo o tamanho do slide, tipo para 600x300 ?

Renata Matarazzo disse...

"Angelo", procura no código HTML
*--Estilos do containert das imagens--*/
.window {
height:260px; /*-- as imagens devem ter a mesma altura ou mais-- */
width: 750px; /*-- as imagens devem ter a mesma largura ou mais-- */

e muda os valores de height e width.



Alguém sabe se tem como retirar o resumo das postagens da página principal? Obrigada!

Anônimo disse...

Eu peguei esse tema, mais eu gostaria de colocar uma imagem no fundo, te como? se tiver me ajudem #PF

Paula Macena disse...

Oi, flor.
Como eu aumento o tamanho dos quadrinhos com as fotos e o resumo do post na página principal?
Obg.
Deus abençoe.
Ficou Lindo!

Anônimo disse...

Oie..
Gostei muuuuito do seu trabalho não só no template, mas em seu blog!
Dou parabéns pela sua dedicação a Web!

Poderia me dizer como faço para retirar os resumos dos artigos na home?

João Vítor Dias
joaodias@jvdesign.co.cc

Jaqueline Tompson disse...
Este comentário foi removido pelo autor.
obat perkasa disse...

Tanks you...! i like it

Tiago disse...

Eu queria saber se tem como ajustar a largura do template pelos códigos HTML já que pelo próprio Google não é possível...

Dualys F. Souza disse...

Achei incrivel este template... mas estou com um pequeno problema! O link que se encontra abaixo da postagem para postar novo comentario, fica meio escondido, gostaria de saber como deixa-lo mais visivel! (para melhor compreensao: http://timelline.blogspot.com/2011/09/o-primeiro-filme-em-3d.html) Espero sua resposta, desde já agradeço. Abraços!

Administrador disse...

Oi, e ai rainha do blog, rsrsrs...
me diz ai lembra do projeto do template de notícias, que você estava fazendo? Está perto de lançar no seu blog?

Holtz disse...

Como troca aquela imagem do "No Image"
Abraços.. Obrigado

MarCk.•º♥5-Mk♥º•. disse...

muito show este template (;

Aprendendo a mexer...

Develop For Web disse...

O layout é otimo, gostaria de saber se há como alterar a cor da borda da postagem quando aberta? la ta como rosa ou algo do tipo... tentei encontrar a imagem mas não localizei!

Jeferson Bleichuvehl disse...

Upei os js no google sites e não consegui fazer funcionar, alguém pode me dizer se fiz algo de errado.

procedimentos.

Criei uma página do google sites, upei os arquivos, substitui, retirei a parte final, ficando apenas o .js no final.

Esqueci de algo?

Entulho Cósmico disse...

Sensacional esse template e parabens pelo site!

preciso de uma ajudinha se for possivel:

Ariane, eu modifiquei todos os menus e agora quero colocar nesses menus os submenus em formato vestical (aquele que fossa passa o cursor do mouse e aparece as opções) há como?

adsaocristovaodosul disse...

Só que o efeito, não funciona com o dynamics view!

Blog do Math disse...

ola! boa tarde!! me apaixonei por esse tema, e gostaria de usa-lo em meu blog, mas nao entendo quase nada de css, vc poderia me ajudar??? estou bem perdido!!!
twitter: @matheus_fsantos

Jeferson Bleichuvehl disse...

Estou com o mesmo problema do guigui, não aparece no resumo da postagem a imagem da postagem, seja ela copiada ou posta como url. Só funciona se tiver no picasa?

Jeferson Bleichuvehl disse...

Bem, eu fiz um teste e com as fotos do picasa funcionou. Mas, apenas abrindo ela em uma aba e arrastando para a postagem.

adsaocristovaodosul disse...

Se alguém estiver com problemas na moderação de comentários, onde aparece o código para digitar mas não o botão de postar, pq fica encoberto, basta alterar o código da seguinte forma.

#comment-form, .comment-form{
height: 415px;

Imagine Belieber disse...

Só estou com um probleminha
Nos Slides eu não consigo deixar uma noticia no 1 slide no 1 slide fika 3 e eu gostaria que fikasse só 1

me respondam essa duvida em beliebers.sempre@hotmail.com

Medical Facts 101 disse...

thanks! very nice professional looking template. Ive been using this with my mom's fashion blog.

Cela disse...

Olá, eu adorei o template e já coloquei no meu blog, mas estou com alguns problemas com as imagens do slide, pois elas 'grudaram' umas nas outras e nunca aparecem juntas.
Também não consigo colocar o pretty photo.

Obrigada, beijo

Cela disse...

Também não estou conseguindo colocar imagens nos posts que ficam na pág inicial. Como faço?

Antares disse...

hola muchas gracias por la plantilla, la estoy usando pero mi problema es con los thumbnails de las entradas, pues los quiero desactivados cuando den click sobre la miniatura como los tiene usted, pero me están enlazando a otro thumbnail, como puedo solucionar el problema de antemano gracias este es mi blog http://bisuteriaprincess.blogspot.com/

Lívia disse...
Este comentário foi removido pelo autor.
Bruno disse...

Olá, eu adorei o template e já coloquei no meu blog, mas estou com alguns problemas com as imagens do slide, pois elas 'grudaram' umas nas outras e nunca aparecem sozinhas uma por uma, taum coladas uma atraz da outra.O que eu faço ? Tem alguma coisa errada né?[2]
Aguardo resposta urgentimente ;/
Obrigado!

Rafael Ribeiro disse...

AMEY por completo, mais a unica coisa que esta sendo osso mesmo de resolver er isso aqui ...

Ao final de cada postagem é exibida uma caixa com o avatar e informações sobre o autor. Para editá-la, clique em Expandir Modelo de Widget e procure pelo trecho abaixo:





JA FIZ TUDO COMO MANDA AQUI, E NAO TO NEM SE QUER AXANDO PRA PODER MUDAR =/
O QUE FAREI? AIN ME DA UMA LUZ, FICAREI MUITO GRATO MESMO, JA TA TUDO CERTO, SO FALTA ESSA PARTE, ESSE PEQUENO DETALHE QUE CONTA MT PRA MIM, ME AJUDA POR FAVOR... MT OBRIGADO *-*

Ariane disse...

Taillard vi no Vagabundia um post sobre este assunto.

Badtom eu vi aqui gemablog-.blogspot.com/2011/08/girar-imagenes.html

Gui-Gui as imagens do post devem estar hospedadas no próprio Blogger/Picasa

Jonhson Rafael as miniaturas são geradas automaticamente, basta que as imagens do post sejam hospedadas no próprio Blogger.

Jacky é preciso usar uma condicional para isso, veja aqui: http://www.bloggersphera.com.br/2009/03/bif-belse-blogger-condicionais.html

Admin isto não é um erro, é parte do modelo.

angelo procure por:

.window {
height:289px; /*-- as imagens devem ter a mesma altura ou mais-- */
width: 800px; /*-- as imagens devem ter a mesma largura ou mais-- */

Paula Macena o resumo está dentro de uma imagem fixa, você teria que retirar ou aumentar a imagem. O trecho é este:

.post {
position: relative;
width: 320px;
height:250px;
float:left;
margin: 0px 3px 10px 5px;
padding: 5px 6px 5px;
background:url(http://4.bp.blogspot.com/-eF9cAO78QEU/TlZQlreyU2I/AAAAAAAAaSQ/xHWT3l3Pyzw/s1600/template-clean-post.png) no-repeat center;

João Vitor retirar os resumos demandaria muitos ajustes nos códigos do template e não tenho como explicar isso aqui

Tiago a largura está determinada em :

#content-wrapper{
margin: 0 auto;
width: 1000px;
padding: 10px 10px 0px 10px;}

Dualys F. Souza eu fiz alterações nos comentários para o uso do formulário abaixo do post, por isso o link fica escondido. Vou dar uma olhada nos código e fazer testes e em seguida coloco aqui a resposta, ok?

Clebersom por enquanto estou ocupada com outros trabalhos, mas não esqueci não :)

Holtz clique em expandir modelo de widget e procure por:

< div class='Image-home' >
< img border='0' height='95' src='http://1.bp.blogspot.com/-LURPGoux60I/TlZ1QtKs5RI/AAAAAAAAaSY/wtdCWh3uyLw/s1600/no-image.png' width='95'/ >
< /div >

Jeferson eu precisaria ver o código no blog onde está

Entulho é possível sim, só é preciso substituir os códigos do menu atual por um com submenus

Beliebers 4Ever , Cela a imagem deve ter 289px de altura e 800px de largura

Ariane disse...

Livia: a)isto não é um site, é um blog, onde, entre outras coisas, posto os templates que eu faço para uso gratuíto, ou seja, ninguém paga nada pelo meu trabalho, muito menos por 'suporte'. b) neste meu blog eu dou espaço para as pessoas comentarem, fazerem perguntas, etc, mas isso não significa que eu esteja à disposição 24hs por dia para responder questões que, geralmente, já estão respondidas nos próprios posts, que poucos realmente lêem. c) se você realmente acredita que deva deixar os créditos apenas se for atendida imediatamente, ou ainda, que haja um 'suporte' eficiente para um template distribuido gratuitamente, só posso concluir que você não tem à menor idéia do que manter os créditos significa.

Rafael usa o Ctrl+F para encontrar com facilidade. Tem que clicar em Expandir Modelo de Widget

Caio Vinicius disse...

Olá ariane, no meu blog http://worldpop12.blogspot.com/ o leia mais ( ou seja: Read more do seu template ) fica normal, mais ao lado fica o nome ler artigo completo como fazer para remove-lo agradeço!

Ariane disse...

Celeblo provavelmente você utilizava o 'More' do Blogger em suas postagens. Com este template os resumos são automáticos. Ou você retira o 'more' dos seus posts, ou acrescenta este trecho no css do template:

.jump-link{display:none}

com isso você esconde o texto gerado pelo 'more'.

Caio Vinicius disse...

Obrigado

Cela disse...

Ari, não consigo fazer as imagens aparecerem no 'no image', como faz?

Ariane disse...

Cela as miniaturas são geradas por um script do próprio Blogger e captam as imagens usadas nos posts. Pelo que vi no seu blog, seus posts não tem nenhuma imagem, assim, quando há nenhuma, a 'no image' aparece automaticamente.

Ramzi disse...
Este comentário foi removido pelo autor.
Bruno Massato disse...

Olá Ariane adorei seu Template, parabéns.
Preciso de sua ajuda para criar ou configurar as paginas que não aparece no meu menu ( Ex. Clicar em Tutorial,Portfólio e Conatos ele direciona para uma pagina não existente do Blogger), como posso fazer para cair numa pagina certa. Meu Blog é http://bruno-massato.blogspot.com , se precisar ver.

Obrigado

aqiqah murah disse...

Bueno, me gusta probar. Gracias :)

Resisa disse...

Olá Ariane. parabéns pelo seu blog muito bom.
Instalei o template porém estou com um problema na parte dos links, se você puder dar uma olhada no erro que dá agradeço.
http://balancamanumcai.blogspot.com/
ps: ainda nao alterei os slides

Obrigada.


Abs.

Lívia disse...

Primeiro, gostaria de deixar meu pedido de desculpas público. Te enviarei e-mail para esclarecimento. Desculpe mais uma vez pelo comentário que foi feito anteriormente.

Cris Mrqsi disse...

Excelente Template. parabéns.

felipe disse...

queria ajuda nessa template que puder me ajudar manda e-mail

felipemartins210@gmail.com

Unknown disse...

Hey, para quem as imagens do slide estão ficando grudadas:

Aconteceu comigo de primeira, então eu deixei as imagens com a largura do slide (800) e elas ficaram perfeitas, como no demo ^^

Equipe Sherlock Brasil disse...

Olá! Estamos com um probleminha com este template (que é ótimo): não conseguimos colocar negrito nem itálico; quando o post é publicado, simplesmente é como se não existisse. O que podemos fazer?

Obrigada,

SB.

Unknown disse...

Ariane, poderia me ajudar em uma questão? Estou desenhando um layout para meu blog e fiz uma barra que será a barra de menu, como esta que está nesse layout (que é o que eu uso atualmente, muito lindo!).

Mas como eu devo fazer o código para que os links fiquem dentro do retângulo que eu desenhei? Eu entendi essa div "menu" mas aonde eu coloco a largura, altura, distâncias e etc? Na internet só encontrei tutoriais super complicados e que não explicavam como personalizar de verdade...

Poderia me ajudar, por favor?

Ps.: desculpe se postei a pergunta no lugar errado, não sabia aonde escrever!

Ariane disse...

Ana Paula, dá uma olhada neste post: http://templatesparanovoblogger.blogspot.com.br/2007/12/muitas-pessoas-me-perguntam-sobre.html

Unknown disse...

ahh muito obrigada :D

♔ Eike Fofa ♔ disse...

Olá Ariane, comecei a utilizar este template ontem .. amei porém estou com o mesmo problema que o Rafael Ribeiro em relação ao avatar com as informações do autor.. utilizei o ctrl+f para a busca ainda sim não foi encontrada a parte:

...

Citada no início, o que posso fazer? pois na verdade este é o meu único probleminha com o template, de resto está tudo perfeito..
Desde já Agradeço!!
Beijos!

Unknown disse...

Amei o Template. Mas não consigo baixar :( Ja enviei uma mensagem pelo blog aqui. Espero a resposta. 2 Beijo *-*

Anônimo disse...

Ariane, este é o Template mais lindo que eu já vi.
Usei ele mas tirei só que todos que eu personalizei OU paguei para personaliar eu achei feio.
Sempre venho aqui dar uma olhadinha,retirar os créditos jamais,temos que dar valor e respeitar os trabalhos das pessoas.
Parabéns,sucesso para você!


Postar um comentário

Os comentários são moderados.