O Dicas e Templates Mamanunes nasceu da minha necessidade de registrar as descobertas que faço enquanto aprendo a desenhar templates para a plataforma Blogger. Compartilho aqui alguns truques, templates e informações que considero úteis para blogueiros e curiosos. Entre e fique a vontade. 
Quer uma faixa diagonal com avisos, link para uma matéria específica, anunciar novidades, etc? Pois bem, encontrei no Brogui o endereço desses geradores online onde podemos criar vários modelos. Aqui vou ensinar como fazer para criar e inserir no template rapidamente. Muito fácil!30.9.09
Quer uma faixa diagonal com avisos, link para uma matéria específica, anunciar novidades, etc? Pois bem, encontrei no Brogui o endereço desses geradores online onde podemos criar vários modelos. Aqui vou ensinar como fazer para criar e inserir no template rapidamente. Muito fácil!28.9.09
É o caso do Dicas e Templates Mamanunes. Se alguém ainda não sabe ou não percebeu eu sou uma velhota curiosa, mais uma dessas pessoas "xeretas" que se encantou com a possibilidade de fazer arte dentro de uma “caixinha mágica” ou geringonça cibernética que acende nas casas, escritórios, escolas, nos quatro cantos do mundo e ajuda a melhorar a vida das pessoas. Não tenho outra motivação senão compartilhar o que aprendo e colaborar com a blogosfera no que for possível.
Mas afinal porque esse layout é “sem vergonha”? Simples, meus conhecimentos limitados ainda não me permitiram criar um blog mais claro, rápido, de navegação fácil e funcionalidade. Portanto, peço paciência aos meus leitores.
24.9.09
Veja como instalar um botão para compartilhar suas postagens no Facebook . Sem dúvida uma versão melhorada do “Shere Partners“, porque tem um contador que mostra número de vezes que enviaram seu link ao Facebook. O fbshare.me, não é um site ligado ao Facebook. Seu botão é bem parecido com os do Tweetmeme e Buzz Volume (que estou usando) para compartilhar postagens no Twitter e é muito simples de instalar no Blogger
22.9.09
Na primeira parte dessa matéria, vimos como personalizar o #main-wrapper, área de postagens, data, título dos posts, margens, padding etc.. Agora vamos entender como personalizar o rodapé das postagens (footer), as imagens exibidas e blockquote (texto em destaque no post). Lembrando que os códigos de referencia são do modelo Mínima do Blogger.
Não se esqueça de fazer um backup do seu template antes de fazer qualquer alteração. Aconselho experimentar em um blog de testes..post-footer { margin: .75em 0; color:$sidebarcolor; text-transform:uppercase; letter-spacing:.1em; font: $postfooterfont; line-height: 1.4em; } .comment-link { margin-$startSide:.6em; } .post img { padding:4px; border:1px solid $bordercolor; } .post blockquote { margin:1em 20px; } .post blockquote p { margin:.75em 0;}
.post-footer{ Aquí é possível adicionar bordas e cores no background para destacar toda a área e adicionar padding para distanciar os elementos.Veja exemplo:
Abaixo o código do exemplo. Altere as cores e estilo de bordas como preferir.
.post-footer {
margin: .75em 0;
padding: 10px; /*—Distancia entre elementos ---*/
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.8em;
border: 1px dotted #000000; /*---Espessura, estilo e cor da borda----*/
background-color: #cccccc; */---Cor do background----*/
}
.comment-link {
Define a posição e margem com link para comentários.
.post-img {
Nesta sessão podemos personalizar as bordas e background das imagens exibidas. Com criatividade e conhecendo modelos de bordas, pode-se conseguir efeitos bem interessantes.
Código do modelo acima onde usei estilo “dashed” (pontilhado) para bordas. Também pode ser “solid” (linha reta) ou ridge (com efeito) . Há vários tipos de bordas, mas “abordaremos” esse assunto em outro post (hehe)
.post img {
background: #000000;
padding:4px;
border:2px dashed #cccccc;
}
.post-blockquote {
Essa é a área para personalizar o texto que queira destacar nos posts. Leia o artigo:
Blockquote – Texto em destaque para aprender como dar estilo a esse espaço.
Tenho recebido comentários e emails de leitores interessados em personalizar sua área de postagens, como mudar a posição dos títulos dos posts, formato de data, footer, etc. Então vamos lá:
Em primeiro, lugar para sua melhor compreensão, veja este artigo que mostra a estrutura básica de um template.
19.9.09
Atendendo a pedidos, especialmente da Isadora Fraga vou “revelar” o truque para ter esse efeito realmente simpático para o seu blog.
Neste tutorial ensino a aplicar o efeito Page Flip para promover a assinatura do Feed/Rss, mas use sua criatividade e desenvolva…Você poderá deixar recados importantes ou um link especial.
Veja como fazer:
Copie o código abaixo e cole em um bloco de notas.
<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://www.wallheaven.com/subscribe.png) no-repeat right top;
}
</style>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
</script>
Observe o endereço da imagem grifado em vermelho dentro do script A imagem utilizada neste tutorial é essa abaixo.
Você pode criar outra imagem em formato PNG e customizar, como a imagem abaixo utilizada no Template Page Flip Blue
Agora siga os passos:
- Faça login no Blogger
- Clic na opção “Layout”
- “Clic em “Editar HTML”
Procure pelo seguinte (use Ctr + F):
</head>
Cole todo o código do Flip, ABAIXO dele.
Agora procure pela tag <body> e DEPOIS dela, cole o código abaixo:<div id='pageflip'>Substitua meu endereço (em vermelho) pelo seu endereço Feed, ou o endereço do link que desejar.
<a href='http://feeds2.feedburner.com/mamanunes'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
Cli em “Visualizar” e se estiver tudo bem, clic em “Salvar Modelo”
Viu? Não é tão complicado! Se tiver dúvidas, é só perguntar.
Grita que eu acudo!!!
18.9.09
Esse template tem um efeito interessante com script jQuery e CSS, o “Page Flip” instalado no canto superior direito da página, que dá um charme todo especial ao desenho além de chamar a atenção para a assinatura do Feed Newesletter.
Confira no Blog Demo.
Ainda como parte dos “presentes de aniversário” do Blogger o Blogger Buzz anunciou que agora é possível mostrar avatares nos comentários
Leia mais...
16.9.09
O Google lançou o Google Web Elements com vários wdgets interessantes. 15.9.09
O Twitter não é só uma ferramenta para receber e enviar mensagens ou bater um papo com amigos, mas é uma forma de compartilhar notícias e todo tipo de informação tanto pessoais quanto profissionais. O problema é separar noticias de interesse comum, das de interesse pessoal. Para isso o TweetMixx é uma “mão na roda”. TweetMixx é um aplicativo de grande ajuda que nos oferece a possibilidade filtrar textos e links. Adicionamos um tema de nosso interesse e ele faz o trabalho de buscar assuntos relativos.
11.9.09
Template Cute para meninas que gostam de gatos, gatinhos e gatões =) Propriedades:
- Barra de links no topo do template
- Gadget fixo HTML/Javascript para textos, ícones, fotos ou vídeos.
- Hack “Leia mais…” Script custumizável. Tutorial aqui
- Sidebar dividida em 3 colunas
- Footer (rodapé) com 2 colunas
10.9.09
Blogger in draft ou Blogger em rascunho foi criado para testar novos recursos antes de serem implementados oficialmente e oferece mais opções para postagenss. Veremos aqui quais são as diferenças entre um e outro. Eu particularmente não uso nenhum dos dois, prefiro o Windows Live Writer, mas esse é assunto para outro post. Se tiver interesse em conhecer e usa-lo, veja o tutorial da Juliana Sardinha no Dicas Blogger ou o Vídeo tutorial do Acemprol.
Até agora implementar, o "Leia mais" só era possível 
editando manualmente seu HTML ou através de scripts num processo complicado e sujeito a erros. Nas comemorações de aniversário de10 anos o Blogger tem lançado novos recursos para facilitar a vida dos blogueiros e designers, o Jump Breaks é mais um desses presentinhos que ganhamos.O Blogger permite inserir um "Leia mais" com link para o post completo.
Leia mais...
editando manualmente seu HTML ou através de scripts num processo complicado e sujeito a erros. Nas comemorações de aniversário de10 anos o Blogger tem lançado novos recursos para facilitar a vida dos blogueiros e designers, o Jump Breaks é mais um desses presentinhos que ganhamos.O Blogger permite inserir um "Leia mais" com link para o post completo.7.9.09
No TwitterMySite você pode gerar botões para aumentar sua lista de seguidores do Twitter. O site oferece o mais comum “Follow me” em 18 modelos diferentes, com a possibilidade de adicionar um texto.
É muito fácil! Você apenas indica seu ID do Twitter, escreve a mensagem (opcional) que deseja adicionar ao botão, escolhe a cor da do texto e clic “Generate my buttom”.
Depois de enviar os dados teremos o código gerado abaixo dos modelos. E só copiar e colar no lugar que desejar em seu blog ou site.
Para inserir no Blogspot:
- Faça Login
- No painel clic em “Layout”
- Clic em “Elemento de Página”
- Adicionar um elemento “HTML/JavaScript”
- Cole o código na janela e clic “Salvar”
- Clic sobre o elemento e arraste para a posição que quiser.
5.9.09
O tutorial original sobre essa matéria, foi publicado site OurBloggerTtemplates. Fiz resumo para compartilhar com vocês e recomendo que visitem o site, que oferece tradução automática clicando na bandeira no topo da página.
Conhecendo a estrutura básica, você pode facilmente obter idéias de como adaptar aos modelos existentes, um modelo de design, e como transformá-lo em uma estrutura diferente. Veja um exemplo de modelo muito comum:
Leia mais...
Conhecendo a estrutura básica, você pode facilmente obter idéias de como adaptar aos modelos existentes, um modelo de design, e como transformá-lo em uma estrutura diferente. Veja um exemplo de modelo muito comum:
2.9.09
Twitted.me é uma excelente ferramenta para denunciar e bloquear automaticamente usuários suspeitos. Ótimo para quem (como eu) gosta de “twittar'” livre dessa raça.
Leia a bula a “bula”
Assinar:
Postagens (Atom)
