Dicas e Templates Mamanunes

Dias melhores virão....

noreply@blogger.com (MamaNunes) — Tue, 02 Nov 2010 13:38:00 +0000

Queridos, a boa noticia é que minha filha, Lyra está bem, e a quimioterapia está funcionando, ela vai se curar, apesar de no momento estar passando pelas dificuldades inerentes a enfermidade e ao tratamento. Isso é o que tem me dado coragem para enfrentar muitas outras "tranqueiras"dessa vida. Gostaria muito de ter ainda mais boas notícias para compartilhar, mas infelizmente estou num momento muito difícil, com problemas em todos os sentidos e por isso, peço que me desculpem a falta de respostas aos comentários e formulário de contato. Espero em breve estar mais equilibrada, medicada e com disposição para o trabalho. Por enquanto, meu barquinho está atracado aguardando a tão desejada calmaria de que os navegadores tanto precisam.
Costumo dizer e acredito: Deus está no controle.

Amo vocês!
Até breve.
Beijo da Mama ♥

Template “Lembranças” – Blogger Templates

noreply@blogger.com (MamaNunes) — Wed, 27 Oct 2010 19:26:00 +0000

Ainda na “onda” dos slide shows charmosos, criei este template pensando em quem gostaria de registrar e compartilhar imagens e fotos de momentos inesquecíveis. Claro que o título “Lembranças” e o tema sugerido é só uma idéia porque, com criatividade, você poderá usar esse modelo para o que quiser. Veja que graça o template instalado.

DEMO

DOWNLOAD DO TEMPLATE

DOWNLOAD DA PASTA ZIPADA COM IMAGENS (RECOMENDO)

Descrição do modelo:

Menu com ícones para redes sociais no topo
Slide show deslizante com imagens auto-ajustáveis e link de direcionamento
Resumo automático de postagens
Caixa de pesquisa personalizada
Botão “Voltar ao Topo” que acompanha toda a página
Área de comentários personalizada
Ícones nos marcadores do rodapé das postagens
Ícone (bullets) nos marcadores da sidebar
Fonte do cabeçalho, “Philosopher” do Google Directory

Área de comentários

Como editar o menu do topo do template:

Faça o login e escolha a opção Design, depois “Editar HTML”

Procure pelo seguinte trecho

<ul class='left'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Fotos</a></li>
<li><a href='#'>Vídeos</a></li>
<li><a href='#'>Roteiros</a></li>
<li><a href='#'>Editar link</a></li>
<li><a href='#'>Editar link</a></li>
</ul>

Escreva nos espaços com o sinal “#” a URL da página para onde quer direcionar o link. Edite a área em negrito escrevendo o nome que queira dar aos seus links.

Como editar o slide show

Procure pelo trecho abaixo:

<li>
<div class='mytext'>
<a href='ENDEREÇO-DO-LINK'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggdnR_5HAvwINuDX8smuWfp-YEj00aRIzkUfqG5x8CUH8mtizwWHlwxexekjwQ5zTsirFKCy5O3SuwTSBaDfgZkwqco9eZm4iuz2ER9b0Zi_eNeDs2cRRSJGcI9bc4BwrYRWSNzVa1Iv1V/s1600/viagens-baratas.jpg'/>
</a>
<div class='inpost'>
<p>NOME DA FOTO OU TEXTO </p>
</div>
</div>
</li>



<li>
<div class='mytext'>
<a href='ENDEREÇO-DO-LINK'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN1ppE_x8F9AnTohDt6Xg05sHhxv31-sUx6CcDDsX3zcwJEClcAMQClYcjuoc1crI8q3GbD4w9EZsPeThCbLRD28W9l_tuz4idGDy6Wexegb5QHysjhF7esFfgMgjAKuEj_C8ZLcq4t5b2/s1600/lua-de-mel-480x309.jpg'/>
</a>
<div class='inpost'>
<p>NOME DA FOTO OU TEXTO</p>
</div>
</div>
</li>



<li>
<div class='mytext'>
<a href='ENDEREÇO-DO-LINK'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAOaT0wqXfUUdKjhYKwoRG3Wsy8rUo8ivIJh6zgeh3Rk5hSGN1FQPlojIoTcb77KVVlu-QZ3Vm3Ie-0ndcsefqoXZ4z_HR07kkv08SWCiq4i7ds94U3EqojNWRZ49mtKg1LUUW5PyrTpEG/s1600/lua-de-mel.jpg'/>
</a>
<div class='inpost'>
<p>NOME DA FOTO OU TEXTO</p>
</div>
</div>
</li>



<li>
<div class='mytext'>
<a href='ENDEREÇO-DO-LINK'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3lO0dpPvtxHkeKDWdtNYkjEG3tGMCHLoZzD6SUPcPCwTf3UTky58z0x9yM0K66aSX5i-QNSF6SUcPmbXO5ONCpkk7V7tkKwSXoffjcweiZd1P6ow9bOcvBxE5rRtD-z3qBc59swI1GvB6/s1600/viagens-tailandia.jpg'/>
</a>
<div class='inpost'>
<p>NOME DA FOTO OU TEXTO</p>
</div>
</div>
</li>



<li>
<div class='mytext'>
<a href='ENDEREÇO-DO-LINK'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZhc90ceF7RzjXvQr2OXCj-TkCpxfg1H8wDPtOgCSCJiw32JecqiR9C975U73-jCIDJ6uC9e3b4bfieDWP7QtlMn5Dn3vEIXOFkJ7W9OprrkeG56O20aVGPBSFTSHytVEqobg53WHWkSO2/s1600/familia.jpg'/>
</a>
<div class='inpost'>
<p>NOME DA FOTO OU TEXTO</p>
</div>
</div>
</li>



<li>
<div class='mytext'>
<a href='ENDEREÇO-DO-LINK'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZN0qYkW70p700YOFJcaSM8n5ExWAbNc06BawvkRDArh70EzhekuPSz51SQsZuco3riSUhTKIPxJBbdjGTvdaMJ3FHy8fgY0-ZyvEMuQsDlVdOGzIURQC6WuYrG71S4KhDqt1IWbEIxG3s/s1600/104729.jpg'/>
</a>
<div class='inpost'>
<p>NOME DA FOTO OU TEXTO</p>
</div>
</div>
</li>

Edite colocando o endereço de direcionamento do link, na área grifada em verde.

O que está grifado em vermelho, é o endereço da imagem que deseja exibir. Apenas certifique-se de que elas não tenham menos de 400px de largura.

Em negrito, a descrição, texto ou título da imagem

Caixa de pesquisa

Para instalar a caixa de busca, vá em sua oção “Design” e clic em “Adicionar um Gadget”. Escolha um elemento “HTML/JavaScript” e cole dentro dele o seguinte código:

<form action='/search' class='right' id='searchthis' method='get'>

<input class="input-text" id="searchBox" name="q" onblur="if(this.value=="")this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value="";" type="text" value="Pesquisar..." vinput="" />
<input class="searchbutton" id="submit-button" type="submit" value=" ►" /></form>

Prontinho!

Espero que gostem. Qualquer problema na instalação, grita que eu acudo.

Beijo da Mama ♥

Bolo de Caneca– Essa é Boa!

noreply@blogger.com (MamaNunes) — Tue, 26 Oct 2010 19:36:00 +0000

Nesse tutorial (rss) você vai aprender a criar uma guloseima que é sempre bem-vinda no intervalo da blogação. Recebi por email e achei o máximo, por isso, decidi compartilhar. Veja que legal!

A brincadeira é que você bate os ingredientes na própria caneca com um garfo e põe no microondas por 3 minutos. A massa crua é mais mole que a de um bolo normal mas é assim mesmo.

Não aumente a farinha ou terá um bolo duro.

Bolo de caneca

Você prepara na própria caneca que irá consumir e em apenas 3 minutos no microondas.

Ingredientes:

- 1 ovo pequeno

- 4 colheres (sopa) de leite

- 3 colheres (sopa) de óleo

- 2 colheres (sopa) rasas de chocolate em pó

- 4 colheres (sopa) rasas de açúcar

- 4 colheres (sopa) rasas de farinha de trigo

- 1 colher (café) rasa de fermento em pó

Modo de Preparo:

- Coloque o ovo na caneca e bata bem com um garfo.

- Acrescente o óleo, o açúcar, o leite, o chocolate e bata mais.

- Acrescente a farinha e o fermento e mexa delicadamente até encorporar.

- Leve por 3 minutos no microondas na potência máxima.

Dicas

- A caneca deve ter capacidade de 300ml.

- A medida de colher é sempre rasa.

- Você pode servir este bolo com coberturas, caldas, castanhas e sorvete. E pode comer quente.

BOLO DE FUBÁ COM GOIABADA NA CANECA

1 ovo

3 colheres (sopa) de óleo

4 colheres (sopa) rasas de açúcar

4 colheres (sopa) de leite

2 colheres (sopa) rasas de fubá

4 colheres (sopa) rasas de farinha de trigo

1 colher (café) de fermento em pó

Cobertura

2 colheres (sopa) de goiabada

1 colher (sopa) de água

Derrame o ovo na caneca e bata com o garfo. Acrescente o óleo, o açúcar, o leite e o fubá e misture. Coloque a farinha de trigo e o fermento e mexa até dar o ponto. Leve por três minutos no microondas em potência máxima.

Cobertura

Pique a goiabada, junte a água e ponha no microondas por um minuto. Espalhe sobre o bolo.

Dica: Em vez de goiabada, cubra o doce com geleias de sabores diferentes.

Hummmmmmm!!!! Voou correr pra testar essas gostosuras (rsss)

Tenho mais dessas receitas para postar, mas vou deixar para outro dia.

Tá vendo? Nem só de CSS e HTML vive a Mama ♥

beijos crianças…

Template “Animal” – Blogger Templates

noreply@blogger.com (MamaNunes) — Tue, 26 Oct 2010 13:23:00 +0000

A beleza desse template está principalmente no modelo de slide show em formato acordeom, que desliza ao passar o mouse e revela o título e texto em efeito opacity. O nome, Animal, foi somente uma inspiração mas o modelo poderá ser usado para qualquer tema que inclua imagens, fotos, exposição de arte, etc. Os detalhes foram cuidadosamente caprichados como você poderá conferir no template instalado.

►Detalhes do modelo:

Menu com ícones para redes sociais no topo da página
Slideshow em estilo “Acordeom”
Resumo de postagens automático com imagens
* Posts relacionados com imagens
* Botão “Back to top” deslizante com JQuery
Área de comentários personalizada
Marcadores com bullets

DEMO

LINK PARA DOWNLOAD DO DOCUMENTO XML

LINK PARA DOWNLOAD DE PASTA ZIPADA COM IMAGENS (RECOMENDO)

*Posts relacionados com imagens:

Configurado para exibir 6 posts.

*Botão “Back to top”

Esse botão criado com script JQuery, acompanha a página inteira e quando clicado, volta ao topo com movimento suave.

INSTRUÇÕES PARA INSTALAÇÃO

Como editar o menu do topo do template

Faça login e clic na opção “Design”, depois clique em “Editar HTML”

Procure pelo seguinte trecho:

<ul class='left'>
<li><a href='http://demo-animal.blogspot.com'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Serviços</a></li>
<li><a href='#'>Contato</a></li>
<li><a href='#'>Edit Link</a></li>
</ul>


<ul class='right'>
<li><a href='SEU-ENDEREÇO-FEED'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg43ahB6gsd7cVVoI25oWoe17Gg8bOhv45pa5Fys-skKbhaqv3zcxnRefI8ydMk855EGAqoO7wA0rN0JEXTLzUAdDPMu-7sD5LSuna6foazW7TBT1qcoxqAxihIn1SCLZ6xPwpjB41zAEc/s1600/feed.png'/>
</a></li>
<li><a href='SEU-ENDEREÇO-TWITTER'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjboorCjiBzLXoHEMzEySsOit5B2ud6ui3G822FtJfSxndyllHpNKBZWLWK13hkxTIRGK2lQ7_apF8vUEf7Tbwe0ksspqixxDXk6aMHmKcEfDRz3KFEneJXAFib63hewnTatJdlavqckNo/s1600/twitter.png'/>
</a></li>
<li><a href='SEU-ENDEREÇO-FACEBOOK'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP0SWGGPynAc35caRPAvcQIkU-sAT7RnItdEJW_lO7lerRulCuXus5ZMBY53kGqt6BonyRoVvvZHifSaqGfG4AL75DeqgRgWNE9R2FaYMTSQk-efTZRZaKkyMBoL_17Zpe-TZVcqp091s/s1600/facebook.png'/>
</a></li>
<li><a href='mailto:SEU-EMAIL'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsLDPl5fZ9zmQNNbooowx2kISVhUr6sLY6DobKGLW2Ub4RjvOubqIdIzsE6js1ZoN1N-3qaPgYzyDPyRd45ylGkh-ltpjlX_RuzCKSYhz9eJfPtSyVhvBtr9up4VfqNn4JrzVy28TVwS0/s1600/email.png'/>
</a></li>
</ul>
</div>
<div id='clear-both'> </div>

Edite os links, por exemplo:

Onde há o sinal # escreva o endereço para onde deseja direcionar o link.

Como instalar e configurar o Slide Show:

Código HTML do slide

<div id='slidearea'>

<ul class='kwicks'>
<li class='kwik'>

        <a href='URL-LINK-IMAGEM’>
                <img alt="" class="slidimg" src="ENDEREÇO-DA-SUA-IMAGEM" style="width: 750px; height: 250px;" />
        </a>

<div class='kwikmet rounded'>
        <h2><a href='URL-LINK-TEXTO' rel='bookmark' title='texto'>Título da Imagem ou Post</a></h2>

        <p>Texto, nome da foto ou resumo do post desejado.</p>

</div>
</li>
    <li class='kwik'>

     <a href='URL-LINK-IMAGEM’>
                <img alt="" class="slidimg" src="ENDEREÇO-DA-SUA-IMAGEM " style="width: 750px; height: 250px;" />

        </a>
<div class='kwikmet rounded'>
        <h2><a href='URL-LINK-TEXTO' rel='bookmark' title='texto'>Titulo da imagem ou post</a></h2>
        <p>Texto, nome da foto ou resumo do post desejado.</p>

</div>
</li>
    <li class='kwik'>

      <a href='URL-LINK-IMAGEM’>

                <img alt="" class="slidimg" src="ENDEREÇO-DA-SUA-IMAGEM " style="width: 750px; height: 250px;" />
        </a>
<div class='kwikmet rounded'>
        <h2><a href='URL-LINK-TEXTO' rel='bookmark' title='texto'>Test with enclosures</a></h2>
        <p>Texto, nome da foto ou resumo do post desejado.</p>

</div>
</li>
    <li class='kwik'>

          <a href='URL-LINK-IMAGEM’>
                <img alt="" class="slidimg" src="ENDEREÇO-DA-SUA-IMAGEM " style="width: 750px; height: 250px;" />
        </a>
<div class='kwikmet rounded'>
        <h2><a href='URL-LINK-TEXTO' rel='bookmark' title='texto'>Título da imagem ou post</a></h2>
       <p>Texto, nome da foto ou resumo do post desejado.</p>

</div>

</li>
    <li class='kwik'>

     <a href='URL-LINK-IMAGEM’>
                <img alt="" class="slidimg" src="ENDEREÇO-DA-SUA-IMAGEM " style="width: 750px; height: 250px;" />
        </a>
<div class='kwikmet rounded'>
        <h2><a href='URL-LINK-TEXTO' rel='bookmark' title='texto'>Título da imagem ou post</a></h2>
        <p>Texto, nome da foto ou resumo do post desejado.</p>

</div>
</li>
    </ul>

<div class='clear'/>
</div></div>

Copie o código acima, cole em um bloco de notas para fazer as alterações necessárias.

As imagens do slide deverão ter 750px de largura (widht) por 250px de altura (eight).

Depois que tiver configurados todos os links e imagens, vá em sua página “Design” clique em ”Adicionar um gadget”

Copie todo o código já editado e cole dentro de um elemento HTML/JAVASCRIPT e SALVE.

É isso crianças! Espero que gostem.

Beijo da Mama ♥

Random Posts Com Imagens – Lista de Postagens Aleatórias no Blogger

noreply@blogger.com (MamaNunes) — Wed, 20 Oct 2010 09:02:00 +0000

Esse gadget exibe exibe uma lista de posts aleatórios em sua sidebar (barra lateral) do Blogger. No painel de configuração há várias opções para customização de acordo com suas necessidades. Automaticamente ele reproduz os estilos do seu template, mas se você quiser, pode substituir as cores , adicionar bordas, mudar o tamanho e tipo da letra, tamanho e flutuação da imagem, texto para “Read more…” (leia mais…), enfim… Tudo muito prático.

Para instalar em seu blog é só acessar o BLOGGER PLUGINS , rolar a página e encontrar os botões para visualização (demo) e, se gostou, clique Add to Blogger. Configure como quiser posicione no espaço mais apropriado em sua sidebar. Prontinho!

Beijo da Mama♥

Fonte: Blogger Plugins

Geradores Online Para Criar Backgrounds Interessantes

noreply@blogger.com (MamaNunes) — Sat, 16 Oct 2010 16:49:00 +0000

Antes de apresentar os cindo geradores que eu mais gosto, vou fazer uma pequena introdução para que você entenda como se aplica uma imagem com repetição para um background.
Depois de gerar a imagem desejada, faça o download e hospede em um site de sua preferência ou no próprio Blogger (recomendo) através do box de postagens como já publiquei aqui, para pegar o endereço (URL) da imagem. É mais garantido.
Se você usa os modelos baseados no Mínima Blogger, procure em sua página “Editar HTML” o seguinte trecho (pode estar um pouco diferente em seu template, mas é na seção “body” - “background…”

body {
background-color: $bgcolor; }

Substitua a o trecho em vermelho, deixando assim:

background: url(ENDEREÇO-DA-IMAGEM) repeat;

Caso você esteja usando um template do “Novo Designer do Modelo”, leia ESTE tutorial.

Lembrando as definições CSS para repetição de imagens. É assim que funciona:
repeat; imagem repete por todo fundo
repeat-y; imagem repete na vertical
repeat-x; imagem repete na horizontal
no-repeat; imagem não repete

Pronto! Agora vamos conhecer os geradores online, gratuitos para você criar seu background exclusivo.

Stripe Generator 2.0
Stripe Generator 2.0 permite criar fundos de repetição de listras. Basta escolher o tamanho e o espaçamento, cores, direção das listras, sombra e estilo de fundo (sólido ou dois tipos de gradientes). Você pode visualizar o seu fundo em tela cheia antes de baixar. Depois é só fazer o download da imagem gerada.

Tartan Maker
Esse gerador permite criar fundo xadrez parecido com textura de tecido. Muito interessante mesmo! Basta escolher as cores e usar as barras deslizantes para determinar o tamanho, a direção e efeito do xadrez. A medida que você vai criando, pode ver o efeito em tela cheia clicando na opção “Go fulscreen” na área do “Preview”

PIXELKNETs
Este gerador permite que você crie fundos pontilhado, com variação de tamanhos e cores, em degradê ou não. Você pode brincar a vontade. Tudo que você tem a fazer é colocar as cores no ponto, escolher cores de fundo junto com a altura do padrão e ele faz o resto. Há também um botão de "random", que pode criar algumas combinações de cores.

Como salvar a imagem gerada por ele:

No Firefox: Clique com o botão direito do mouse sobre a imagem, depois clique na opção "Exibir imagem de fundo". Clique novamente com o botão direito do mouse sobre a imagem e salve.

No Internet Explorer: Clique com o botão direito do mouse sobre a imagem e depois clique na oção "Salvar imagem como...". Salve (rs)

No Chrome eu so aprendi de um jeito. Se alguem souber de outro, me avise.
Clique sobre a página com a imagem gerada e depois na opção "Exibir código fonte da página"
Ao abrir a página com todos os códigos, procure pelo trecho:

<div id="imagepreload">
<img src="dotted_bg.phpdc1=0339B0&dc2=0339B0&bc1=110472&bc2=110472&h=700" alt="" width="1" height="1"/>
</div>

Clique sobre o texto que estiver em destaque azul e abrirá a página com a imagem a ser salva.

Stripemania
Parecido com Stripe Generator 2.0 O Stripemania é um gerador de imagem de fundo listrado. Escolha a largura da faixa e espaçamento, direção das listras e as cores, e gerar um padrão de repetição de distribuição.

BgPatterns
BgPatterns é possivelmente o mais conhecido e poderoso (rs) criador de patterns online. Você pode escolher entre uma variedade de formas e personalizar o tamanho, rotação, posicionamento, cor, textura, e muito mais. Excelente!

Divirtam-se!
Beijo da Mama ♥

Emoções Compartilhadas – Smiles (Emoticons) Nos Comentários Blogger (CSS3/Jquery)

noreply@blogger.com (MamaNunes) — Thu, 14 Oct 2010 13:03:00 +0000

Olá gente querida ♥
Como estou bem alegrinha com a resposta a quimioterapia da Lyra, e agradecida a todos pelas orações e mensagens de conforto, vou ensinar aqui um truque muito simples, com Puro CSS3 e Jquery, para colocar “carinhas”, Smiles ou Emoticons, como queiram chamar (rss) nos comentários. Eu as acho muito simpáticas e, apesar de chamadas de “firulas infantis” por muitos, pra mim são carinhos ou expressões que “economizam” muitas palavras (e digitação kkk) quando queremos compartilhar nossas emoções. Só isso! Vou ensinar como eu coloquei aqui no meu bloguinho, que ficou assim:

…

Pode parecer muito comprido, mas é muito simples. Só copiar e colar.

Faça login ► Clique na opção “Design” depois em “Editar HTML”

Vamos instalar o CSS. Procure pela tal ]]></b:skin> e cole o seguinte código ANTES/ACIMA dela.

/*
* jQuery CSSEmoticons plugin 0.2.8
*
* Copyright (c) 2010 Steve Schwartz (JangoSteve)
*
* Dual licensed under the MIT and GPL licenses:
*   http://www.opensource.org/licenses/mit-license.php
*   http://www.gnu.org/licenses/gpl.html
*
* Date: Sun Sep 20 10:00:00 2010 -0500
*/
/* Basic styles for emoticons */
span.css-emoticon {
font-family: "Trebuchet MS"; /* seems to give the best and most consistent emoticon appearance */
font-size: 0.65em;
font-weight: bold;
color: #000000;
display: inline-block;
overflow: hidden;
vertical-align: middle;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
width: 1.54em; /* note that this is a multiple of this span's font-size, not containing text font-size */
height: 1.54em; /* so, relative to containing text, width and height are 0.9 x 1.6 = 1.44em */
text-align: center;
padding: 0;
line-height: 1.34em;
-moz-border-radius: 1.54em;
-webkit-border-radius: 1.54em;
border-radius: 1.54em;
-moz-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
border: 1px solid rgba(0,0,0,0.25);
background-color: #ffcc00;
background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.41, rgb(255,204,0)),
    color-stop(0.56, rgb(255,221,85)),
    color-stop(1, rgb(255,238,170))
);
background-image: -moz-linear-gradient(
    center right,
    rgb(255,204,0) 41%,
    rgb(255,221,85) 56%,
    rgb(255,238,170) 100%
);
-webkit-transition-property:color, background, transform;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-timing-function: linear, ease-in;
}
/* Styles for two-character emoticons that need more letter-spacing for proportionality */
span.css-emoticon.spaced-emoticon {
padding-left: 0.2em;
width: 1.34em;
letter-spacing: 0.2em;
}
/* This is a dirty dirty hack, because webkit doesn't properly do the padding+width=total-width as it should
   I think the width of the border may be throwing things off, because it's more noticable for small icons */
@media screen and (-webkit-min-device-pixel-ratio:0) {
span.css-emoticon.spaced-emoticon {
    width: 1.4em;
}
}
/* Styles for emoticons that need to have smaller characters to fit inside the circle */
span.css-emoticon.small-emoticon {
font-size: 0.55em;
width: 1.82em;
height: 1.82em;
line-height: 1.72em;
-moz-border-radius: 1.82em;
-webkit-border-radius: 1.82em;
border-radius: 1.82em;
}
span.css-emoticon.small-emoticon.spaced-emoticon {
padding-left: 0;
width: 1.82em;
letter-spacing: 0.1em;
}
/* Styles for additional colors */
span.css-emoticon.red-emoticon {
background-color: #eb0542;
background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.41, rgb(235,5,66)),
    color-stop(0.56, rgb(235,38,90)),
    color-stop(1, rgb(250,55,110))
);
background-image: -moz-linear-gradient(
    center right,
    rgb(235,5,66) 41%,
    rgb(235,38,90) 56%,
    rgb(250,55,110) 100%
);
}
span.css-emoticon.pink-emoticon {
background-color: #ff8fd4;
background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.41, rgb(255,143,212)),
    color-stop(0.56, rgb(255,153,216)),
    color-stop(1,    rgb(255,173,225))
);
background-image: -moz-linear-gradient(
    center right,
    rgb(255,143,212) 41%,
    rgb(255,153,216) 56%,
    rgb(255,173,225) 100%
);
}
/* styles for emoticons that need no rotation, like O_o */
span.css-emoticon.no-rotate {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
font-size: 0.45em;
width: 2.2em;
height: 2.2em;
line-height: 1.9em;
-moz-border-radius: 2.2em;
-webkit-border-radius: 2.2em;
border-radius: 2.2em;
background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.41, rgb(255,204,0)),
    color-stop(0.56, rgb(255,221,85)),
    color-stop(1, rgb(255,238,170))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(255,204,0) 41%,
    rgb(255,221,85) 56%,
    rgb(255,238,170) 100%
);
}
span.css-emoticon.no-rotate.red-emoticon {
background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.41, rgb(235,5,66)),
    color-stop(0.56, rgb(235,38,90)),
    color-stop(1, rgb(250,55,110))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(235,5,66) 41%,
    rgb(235,38,90) 56%,
    rgb(250,55,110) 100%
);
}
span.css-emoticon.no-rotate.pink-emoticon {
background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.41, rgb(255,143,212)),
    color-stop(0.56, rgb(255,153,216)),
    color-stop(1,    rgb(255,173,225))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(255,143,212) 41%,
    rgb(255,153,216) 56%,
    rgb(255,173,225) 100%
);
}
/* Styles for emoticons that need to be rotated counter-clockwise, like <3 */
span.css-emoticon.counter-rotated {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-moz-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.41, rgb(255,204,0)),
    color-stop(0.56, rgb(255,221,85)),
    color-stop(1, rgb(255,238,170))
);
background-image: -moz-linear-gradient(
    center left,
    rgb(255,204,0) 41%,
    rgb(255,221,85) 56%,
    rgb(255,238,170) 100%
);
}
span.css-emoticon.counter-rotated.red-emoticon {
background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.41, rgb(235,5,66)),
    color-stop(0.56, rgb(235,38,90)),
    color-stop(1, rgb(250,55,110))
);
background-image: -moz-linear-gradient(
    center left,
    rgb(235,5,66) 41%,
    rgb(235,38,90) 56%,
    rgb(250,55,110) 100%
);
}
span.css-emoticon.counter-rotated.pink-emoticon {
background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.41, rgb(255,143,212)),
    color-stop(0.56, rgb(255,153,216)),
    color-stop(1,    rgb(255,173,225))
);
background-image: -moz-linear-gradient(
    center left,
    rgb(255,143,212) 41%,
    rgb(255,153,216) 56%,
    rgb(255,173,225) 100%
);
}
/* Styles for animated states */
span.css-emoticon.un-transformed-emoticon, span.css-emoticon.animated-emoticon:hover {
    /* font-size: inherit;
    font-weight: inherit;
    vertical-align: inherit;
    line-height: inherit;
    font-family: inherit; */
    letter-spacing: inherit;
    color: inherit;
    overflow: visible;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    background: none;
    background-image: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-color: transparent;
}

Feito isso, procure pela tag </body> no final do documento XML .
Copie o código abaixo e cole ANTES / ACIMA de </body>

<script src='http://dl.dropbox.com/u/684300/jquery.cssemoticons.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$('.comment-body p').emoticonize({
//delay: 800,
//animate: false,
//exclude: 'pre, code, .no-emoticons'
});
})
</script>

Salve o template.
Copie o endereço abaixo, que são as imagens que eu editei para esse exemplo e cole em um bloco de notas.

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ut_aB1t7js2a2aquwpeh6-WNkIl1AgMDqWKZnYWGY0f1tm7VYYSx5qbSlyerYPb_TRcZvLzbMnrdtCOWvTZPw8RaK3pmaddL5W3KzT22l6dEvH-f31E_4W60xTfQiMUWED78Qyym3Aw/s1600/Emoticons.png'/></img>

Volte a página “Editar HTML” , clique na opção “Expandir modelos de widgets” e procure pelo seguinte trecho:

<data:blogCommentMessage/></p>

Cole EXATAMENTE ABAIXO dele, o endereço das imagens que você copiou em seu bloco de notas.
Visualize e se estiver tudo bem, salve o template.

Prontinho. Vai ficar igual ao meu!

…

Detalhes importantes:
1 - No Internet Explorer (o IEca) que ainda não lê CSS3 (tadinho) os emoticons aparecerão quadradinhos, mas não perdem (muito) a graça, veja:

…

2- Aconselho que você salve a imagem dos emoticons e hospede no seu próprio blog, através da caixa de postagens como já ensinei AQUI

…

3- O mesmo conselho se aplica ao JQuery (script), que você deve hospedar em seu site preferido (eu uso Dropbox) e pode baixar AQUI

Esse truque foi apresentado por Alfa Jango (em inglês) e tem uma excelente página com demonstrações de todos os tipos de Emoticons possíveis de inserir. VEJA DEMO
Eu li e apliquei através do PIZCOS BLOG (em espanhol) e daí adaptei para vocês.
Espero que gostem!
Beijo da Mama♥

Um Olá para Meus Leitores

noreply@blogger.com (MamaNunes) — Tue, 05 Oct 2010 22:45:00 +0000

Olá meus queridos amigos, irmãos, companheiros e leitores, alguns de vocês já sabem que estou atravessando um período bem complicado com o diagnóstico de câncer de minha filha Lyra, essa maravilha de mulher da foto. Tenho certeza de poder contar com a compreensão de todos, porque nesse momento, nada além da saúde dela ocupa minha cabeça. Peço perdão por não estar respondendo prontamente algumas dúvidas, emails e formulário de contato.
A boa notícia é que a enfermidade dela tem 90% de chance de cura absoluta e ainda assim, caso não haja cura total, a medicina e a ciência desenvolveram medicamentos que controlam perfeitamente a doença oferecendo a possibilidade de qualidade de vida quase normal. Tudo bem. Outra coisa muito importante, talvez a mais importante, é que temos fé absoluta nos propósitos de Deus e Nele confiamos. Estaremos bem guardados por Ele que é só amor.
Prometo dar noticias e retornar o mais breve possível, mesmo porque eu amo esse trabalho e através dele tenho realizado coisas muito positivas tanto para mim quanto para vocês.
Continuo contando com suas orações e fidelidade.
Deixo meu coração e todo meu carinho por vocês!
Beijo da Mama♥

Gadget Para Redes Socias Com caixa de Busca

noreply@blogger.com (MamaNunes) — Mon, 04 Oct 2010 01:36:00 +0000

O Blogger Templates & Tricks nos oferece um gadget muito interessante que inclui uma caixa de busca acoplada, além dos botões de subscrição do FeedBurner, inscrições via email, botões de redes sociais ( Digg, Twitter , Facebook, Delicious ) para partilhar os seus artigos, entre as redes sociais. Os botões de redes sociais são alimentados por www.addthis.com.
Você não precisa mudar nada no código da caixa de pesquisa .Para adicionar esse widget na barra lateral do Blogger , sem fazer qualquer modificação , a largura da barra lateral deve ter pelo menos 305 px de largura. Você pode adicionar este gadget de pesquisa em seu blog seu blog Blogger em poucos minutos, é muito fácil de configurar. Vejamos como:

Faça login, clique em "Design" depois em "Editar HTML"
Copie o código abaixo e cole ANTES da tag </head>

<style type="text/css">
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% "Tahoma",Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}
</style>

Salve o template e volte a sua página Design, clique em adicionar um gadget, escolha a opção "HTML/Javascript ", copie o código abaixo e cole dentro do box do gadget. Salve e pronto.

<div class="subbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = "";}" type="text" value="Search..." />
<input id="searchsubmit" type="submit" value="Search" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV-PO2cHf_tVVpb4icNaoEUaH78ap_49-ItS6S94wTxG0uA8Lro6a53ibN1jFL4Yp-5iFzbu0IdrjYMUMwa12qElLuTEjlMmLlbnIz5yCx3k8h3cNhf7kiQweQYJ1xtl-o23-_dpC1XgLA//" alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiseGAoCw-bv_3L4TJAtNpzRxRmh4jwcsLtzgyaPsb1VrcccL-tdiNvRUJ4BUu_YrgFQqQO9TTce011hECCDgDJ7GeAjdYjYpRoq6E7jErE8Gn6TnMDMuXvWsL_UidgPlKG4HMTYty-wjdM//" alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS4cNdKLjzJvGt4KKWlzzq11o2vcV4af635DoefRVmR1MfPNexog5u556HGaL1a5SMxP9B3i16lrZTa6Nd1x_qxZNvn8nriW26W5gxrzkRkCqnq57tJ5x0AwcbA6wqBvPKSTHVbYj5Oc-y//" alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8DQu4t227KXjNAj4MI35RpS_KKNnaH7a4ibo3S-kOCrPERyXzr22Yaz-lRcN_i8dCqMM7WULdrwIEDlOMFt2-lN5L3Gia5WTi6B0OBk5UUtmCKL4Rj02iaAawiusqE2yVEhj6kQp5Eng5//" alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="http://www.bloggertipandtrick.net/" target="_blank">Blogger Tips And Tricks</a></p>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgluz6ctxsBNskLauMaNqusdw5hBdjCcPntWRrY_-uY4a8XzJHZ2yDAtPl4UrKziH3HDjcjuDLFvGB-8suEkVtDDDv6wOQDLekLLssReU8Pr3vX83C2uVH4o6viwv-evayzCb76Q7pYy4g//' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBPglpa0Qa75799JeSMd_ot9ElEB9CN8PUYF8FzLMzoKS1QHm62v1VFUA23jDccmNi0ajTlBGxoh2c4u26ThU6zTDoayxDwg67LEIga9EbJEzT-PixaBDjVBzrdASjsulVQQjaMAE_vgg//' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyzNl0ds_nnxUwfam3R32F0_WaoSwzh_g0GqCRhqFfLlnnmJaouL44uHbpKMYArVywakKfpxyb7AHF84n0CjctJWJtvy2y2VrRWOi6GlfomGOeObaIpMF7mTbGiOR-eSox6cQ5hr4us5o//' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBa5KV40nb241sAxCpXUxA258r-y14b741WiUj86DrgC3QuInNB6Deh9ZQHmNiYGqIFt8PkzWyWoLT7s83RqK7R8w5nmrF_POXvKUX4hkC-5Xqt4ulQjMMwGl193Fv1Xh0jVMO4-Xy9Yw//' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjJk5H3VL7Gc-SoxLykX6v4i4LtyOt_PnnqL1daFn_8GiluJymhJ7TO6w22i2tSqgodat5xhyphenhyphennucMW0x6R1Pnp2Y75HKdbcyVdaIOts6Y-opJLlDEGqntfHWMqe16CQ1l3uc_Q651V_eg//' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQwF1uzs6emfpdHdA6wMFxlb4jOEIA3h_7dztXCRSOAiDhSPbSF_zAxebyDUPw4zeI7js-mcS8vhTOnqAQdyb6L3QmEUzFGydzfFBbXovtTX5r0o5qQ_HerDgv8ZD0beW5LjpYImq3bPQ//' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-VB54vz4PNmz1X5PxOJd_GrBpbMPQYFnQBl5MIGW2J-KtnXnuiTGAHGNFhfHjqg7_Ax5hk4z6SL0Il0uBbMKPTb3yO4fITlspFiqkxcoL3ahTT_N5fPdq_AjsKfFRyRiArSwezF5Z8is//' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div>

Configure as partes grifadas:

FEEDBURNER-ID ► Seu Feedburner ID.(4 vezes).
TWITTER-USERNAME ►Seu Twitter username.
FACEBOOK-USERNAME ►Seu Facebook username.

Caso você tenha algum conhecimento de html e CSS, poderá fazer algumas mudançs para adequar melhor ao seu layout.
É isso. Beijo da Mama♥

Share Sidebar – Botões Fixos Para Compartilhar Posts

noreply@blogger.com (MamaNunes) — Thu, 30 Sep 2010 17:14:00 +0000

ShareSidebar nos permite colocar uma barra lateral fixa com botões e contadores sociais para que os leitores possam compartilhar suas postagens em várias redes sociais de maneira muito simples e fácil. Veja um exemplo AQUI

Como você pode ver na imagem, você pode escolher de que lado deseja exibir a barra, esquerdo (left) ou direito (right). Pode escolher em qual site deseja seus posts compartilhados, Facebook, Twitter, Delicious, Digg, Google Buzz, StumbleUpon, Reddit y Yahoo Buzz.

Quando o leitor corre a página, a barra permanece sempre a vista para facilitar. Também tem um visual claro que não incomoda, é bem prático. Clique na imagem para ser direcionado ao ShareSidebar

Depois de ter configurado como quiser, você só precisa clicar em GET THE CODE. Na página seguinte, copie todo o código da janela.

Para colocar no Blogger é muito simples. Faça login, clique em Design e em “Adicionar um gadget”. Escolha a opção “HTML/Javascript” e cole o código dentro dele.

Prontinho! Vai estar lá sua barra de compartilhamento fixa!

Fácil né? Espero que seja útil.

Beijo da Mama ♥

Tinypic volta atrás e pede desculpas!

noreply@blogger.com (MamaNunes) — Sun, 26 Sep 2010 12:32:00 +0000

Depois do “furdunço” gerado pelo sumiço das imagens hospedadas no site, que em um momento anunciou que seria fechado para todos os usuários de fora do solo norte-americano, acho que eles se arrependeram, ainda bem. Ao entrar no site essa manhã, imaginem? Estava funcionando direitinho e tinha a seguinte mensagem no rodapé da página:

Traduzindo:

Tivemos notícias de muitos dos nossos usuários com relação a essas modificações e apreciamos o seu feedback. O Tinypic restaurou a vinculação às suas imagens e permitiu transferir. Por favor descanse assegurado nenhum conteúdo foi retirado do sítio. Tentamos notificar usuários em Tinypic e solicitamos que eles movam o seu conteúdo ao Photobucket. Infelizmente esta transmissão de mensagens foi insuficiente e surpreendeu muitos dos nossos usuários e pedimos desculpa. A nossa intenção foi começar a combinar algumas características melhores de Tinypic e Photobucket, oferecendo a usuários uma melhor experiência. Qualquer modificação no futuro será melhor comunicada. Mais uma vez, pedimos desculpa pela inconveniência.

Tudo bem, tudo bem, mas depois dessa eu prefiro ter sempre um back up de todo o material que eu publico e vou procurar outros sites de hospedagens que sejam mais seguros.
Indico:
O próprio Blogger veja AQUI como utilizar

Outro site muito bom que nunca me deixou na mão é o ImageShack . Clique na imagem para ser direcionado.

O PICASA, é o que parece mais seguro (acho) por ser só Google…
Você se registra e já poderá fazer ulpoad da imagem que queira e depois clique na imagem, ou álbum e será direcionado a outra página onde pegará os códigos para compartilhamento

Depois de escolher a imagem, observe a barra direita, onde eles oferecem as opções de compartilhamento. É só copiar o endereço e colar no seu layout, post, página… Onde quiser.
Fácil não é? Eu já estou tomando providencias e continuo aconselhando que vocês, ao salvarem qualquer template externo, tenham o cuidado de guardar suas imagens em uma pasta no seu computador, para se previni9tem contra essas situações desagradáveis.
é isso amores!

Beijo da Mama ♥

Tinypic - Fechando Para Estrangeiros e Retira os Links

noreply@blogger.com (MamaNunes) — Fri, 24 Sep 2010 14:35:00 +0000

Pois é, se você acessou seu blog e viu que todas as imagens estão fora do ar, fique sabendo que, sem mais nem menos, o site de hospedagens Tinypic que eu uso há 4 anos e considerava super seguro, vai fechar para estrangeiros e os links de todas as imagens estão sendo desativados. Imagine minha loucura, tenho milhares de imagens hospedadas lá, inclusive de layouts de templates, portanto, se você usa um template meu e teve problemas com imagens, muita calma nessa hora. Vamos resolver.

O que podemos podemos fazer?

Eles informam que os arquivos continuarão disponíveis para visualização internamente, ou seja, depois de logados. Mas não oferecem os códigos para enviar por e-mail ou postar em sites, blogs, etc.. A instrução é que os usuários baixem suas imagens e subam (hospedem) em outro site de hospedagem, indicam Photobucket, que é dono do Tinypic (hã hã)

Hoje quando eu acessei a conta estava tudo normal, mas para alguns usuários a página se apresenta assim:

…

Agora o jeito é ter calma, e seguir o conselho da Mama.

Você pode hospedar suas imagens no próprio Blogger através do box de postagens, da seguinte maneira:

…

Depois de subir a imagem, clique na aba EDITAR HTML para copiar a URL (endereço)

…

UMA BOA DICA!

Como sou xereta, descobri no site BLOGUEIROS DO BRASIL , um truque que ele afirma que funciona. Eu não testei mas será ótimo se funcionar mesmo, pelo menos enquanto as imagens não são transferidas.

Veja como é:

Exemplo de URL de imagem na Tinypic , e que não pode mais ser acessada ou visualizada :

http://i50.tinypic.com/10mq7sz.png

Para que a imagem seja acessada ou visualizada no seu blog, basta acrescentar a letra "o" :

http://oi50.tinypic.com/10mq7sz.png

PARA EVITAR MAIORES PROBLEMAS HOSPEDE SUAS IMAGENS NO PICASA!

Leia atentamente o post da Juliana Sardinha, no DICAS BLOGGER , com tudo muito bem explicado e não vai ter erro.

Agradeço a Mari BLOG DA MARI, ao Carlos Leão ALELUIA WEB NET e ao Pr JULIO SODER pelo alerta.

Menu Vertical Deslizante (Dropdown) Apenas com CSS/HTML

noreply@blogger.com (MamaNunes) — Wed, 22 Sep 2010 10:24:00 +0000

Vamos aprender a criar um belo menu deslizante, também chamado de “Acordeom” ou “Drop-down menu”. Publicado por SOHtanaka e por JMiur (Vagabundia). Muito simples de montar, sem usar nenhum script, apenas “truques” de CSS. Ideal para economizar espaço na sidebar.
Modelo criado por JMiur

Faça login ► Clique em “Design” e depois ► “Editar HTML”
O código CSS deve ser colado acima da tag </head>:

<style type="text/css">
ul.sidenav {
/* el rectángulo contenedor */
list-style: none;
margin: 0 auto;
padding: 0;
width: 250px;
/* propiedades optativas */
background-color: #CD853F;
border: 1px solid #300;
outline: 1px solid #FFF;
}
ul.sidenav li a {
/* el enlace de cada item */
display: block;
text-decoration: none;
/* propiedades optativas */
background: transparent url(URL_imagen_icono) no-repeat 5px 7px;
border-bottom: 1px solid #AD651F;
border-top: 1px solid #300;
color: #FFF;
font-size: 18px;
padding: 15px 10px 10px 45px;
width: 195px;
}
ul.sidenav li a:hover {
/* propiedades optativas */
background: #CD853F url(URL_imagen_icono) no-repeat 5px 7px;
border-top:1px solid #300;
}
ul.sidenav li span {
/* el contenido permanece oculto por defecto */
display: none;
}
ul.sidenav li a:hover span {
/* el contenido se muestra al pasar el cursor encima */
display: block;
/* propiedades optativas */
font-size: 12px;
padding: 10px 0;
margin: 0 0 0 -30px;
}
</style>

Você poderá alterar o tamanho e cor do box, cor das letras e os ícones.

Agora vamos ao HTML que pode ser colocado em um elemento de página (dentro da página Design)

<ul class.="sidenav">
<li>
<a ref.="URL_DO_O_LINK">Home <spam>
Blandit turpis patria euismod at iaceo appellatio, </spam> </a>
</li>
<li>
<a ref.="URL_DO_O_LINK">Blog <spam>
Blandit turpis patria euismod at iaceo appellatio,
</spam> </a>
</li>
<li>
<a ref.="URL_DO_O_LINK">Tutorial <spam>
Blandit turpis patria euismod at iaceo appellatio,.</spam> </a>
</li>
<li>
<a ref.="URL_DO_O_LINK">Arquivo<spam>
Blandit turpis patria euismod at iaceo appellatio, </spam> </a>
</li>
</ul>

Em azul o endereço para direcionamento
Em negrito o nome do link
Em vermelho, o texto que se desprende ao passar o mouse

Se quiser acrescentar mais abas, repita o trecho abaixo colando sempre ANTES de </ul>

<li> <a ref.="URL_DO_O_LINK">TÍTULO <span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Cátion utrum utrum abigo demoveo immitto aliquam sino aliquip. </spam> </a> </li>

Veja o modelo publicado por SOHTanaka

É isso ai! Beijo da Mama ♥

colocar Pequenos Ícones Ao Lado das Informações do Post

noreply@blogger.com (MamaNunes) — Mon, 20 Sep 2010 13:44:00 +0000

Para que seu template fique ainda mais bonito, rico em detalhes, não há muito mistério. Vamos aprender aqui a inserir pequenos ícones ao lado das informações sobre os posts. Por exemplo: autor, hora, link de comentários, marcadores,etc. Veja um exemplo na imagem.

Primeiro você deve procurar as imagens que deseja e hospedar em um site de sua preferencia como Tinypic, Photobucket ou no próprio Blogger. Sugiro os sites ICOJOY - INCON FINDER e FIND ICONS. Tem milhares de ícones.

Não se esqueça de salvar seu template antes de qualquer alteração para não ter problemas caso aconteça algum erro. Clique"Baixar Modelo Completo" e guarde.

Faça login e clique na opção "Design" e depois "Editar HTML" .

Vamos acrescentar alguns códigos CSS na área do .post-body . Lembrando que este exemplo é baseado no template Mínima Blogger e pode ser um pouco diferente no seu.

.post-body {
margin:0 0 .75em;
line-height:1.6em;
}

Para ter um ícone à esquerda do autor do post, acrescente o seguinte código:

.post-author {
background:url(http://ENDEREÇO-DA-SUA-IMAGEM) no-repeat left center;
padding-left:20px;
}

Para ter um ícone (reloginho) à esquerda da hora de postagem, acrescente o seguinte código:

.post-timestamp {
background:url(http://ENDEREÇO-DA-SUA-IMAGEM) no-repeat left center;
padding-left:20px;
}

Para ter um ícone (balão) à esquerda de comentários, acrescente o seguinte código:

.post-comment-link {
background:url(http://ENDEREÇO-DA-SUA-IMAGEM) no-repeat left center;
padding-left:20px;
}

Para ter um ícone (label) à esquerda dos marcadores, acrescente o seguinte código:

.post-labels {
background:url(http://ENDEREÇO-DA-SUA-IMAGEM) no-repeat left center;
padding-left:20px;
}

Visualize e se estiver tudo bem, salve o template.

Pronto gente, tudo “mastigadinho” (hehe)

Para ter uma verdadeira aula sobre o assunto e ainda conhecer outras maneiras de implementar esses detalhes, leia o post da Rô Zancheta do BLOGERSPHERA.

Beijo da Mama ♥

Balão Com Número de Comentários ao Lado do Título do Post

noreply@blogger.com (MamaNunes) — Sun, 19 Sep 2010 20:16:00 +0000

Vamos aprender a colocar um balão ao lado do título do post com o número de comentários recebidos. Exibir o número de comentários pode estimular o leitor a comentar também, então vamos lá. É muito simples e pode ser inserido em qualquer template Blogger, inclusive os do novo Designer.

Faça login no Blogger ► “Design” ►”Editar HTML”
Na pagina de edição deixe marcada a opção "Expandir modelos de widgets" e procure pelo seguinte trecho:

<b:includable id='post' var='post'>

Lobo ABAIXO dele, cole o seguinte código:

<span class='post-comment-link-arriba' style='font-size:24px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy3yFHZNvYRfhmCQQoO-26aFwlAhWtCg3p8LC7Cil96aHm16p1B5hyphenhyphen1Ps9Elcv_pCGqOWaGEVrxdGgFXCjZjJqozKx8gjbEcgWpRsqPV6SFnu-xeA_jCPtkjRYKIyEfqMCpW3necp3TTE/s400/bubble.png) no-repeat top right; width:48px; height:48px; text-align:center; float:right; margin:5px 0 0 0; padding:5px 7px 0 5px;'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a> </b:if> </span>

Visualize e se estiver tudo bem, salve o template.
Veja como ficou em meu blog de provas

Você poderá substituir o balão por outro modelo. Observe no código o trecho em vermelho. É o endereço da imagem. Mas é IMPORTANTE que você também altere as medidas de acordo com o tamanho do ícone que escolher assim como o posicionamento do número. Observe os detalhes dentro do código

width:48px; height:48px; text-align:center; float:right; margin:5px 0 0 0; padding:5px 7px 0 5px;

Vá ajustando padding até que fique bem centralizado.
O tamanho do número, está determinado no seguinte trecho:

style='font-size:24px;

24px é o tamanho do número dentro do balão. Altere a seu gosto.
Dica: No site Find Icons você pode encontrar uma infinidade de modelos de balões. Com certeza algum vai se encaixar no desenho do seu template.

Fonte: Vida México VID MRR (em espanhol)

Widget de Posts Aleatórios com Imagens - Blogger

noreply@blogger.com (MamaNunes) — Thu, 16 Sep 2010 16:49:00 +0000

BLOGGER PLUGINS criou um widget “Random Posts Gadgets”, relação de postagens aleatórias, com imagens (thumbs) para ser exibido na sidebar. O gadget tem um painel de opções e pode ser configurado para atender às suas necessidades. Os estilos seguem o modelo do seu blog mas você pode substituir as cores se quiser.

Clique na imagem abaixo para ir à pagina e configure o widget como quiser.

Veja os exemplos de configurações

Depois de configurar a seu gosto, no final da página clique no ícone

Prontinho ♥

Visto também em @pizcos PIZCOS BLOG (Espanhol)

Read It Later - Salvar links para ler mais tarde

noreply@blogger.com (MamaNunes) — Wed, 15 Sep 2010 22:58:00 +0000

Uma ótima ferramenta!!! Evita sobrecarregar os favoritos e ou bookmarks com sites que são de interesse para rápida consulta ou pesquisa. Read It Later é uma extensão para o navegador, disponível para o Google Chrome , Internet Explorer, Safari, Firefox e também versão para celular, que permite que você salve links para ler mais tarde .

Ao fazer o download, Read It Later adiciona um botão na barra de endereços . Clicando no ícone irá automaticamente adicionar a página que você estiver visitando à lista de leitura. Só um clique e pronto, o endereço estará salvo.

Outras funcionalidades:

* Permite que você leia o conteúdo offline , no avião ou trem. Você pode ler as páginas após o download.

* Sincronização , a lista vai aonde você vai , você pode acessar sua lista de vários computadores e navegadores.

* Se você usar o Google Reader para gerenciar seus feeds ( RSS) , você pode salvar diretamente em sua lista de leitura do Google Reader.

* Você pode converter qualquer página e otimizá-lo em texto puro.

* Às vezes, há muitas coisas para ler, depois de um tempo , sua lista pode ter uma organização , você pode facilmente editar qualquer entrada na lista , adicionar etiquetas (tags) para classificar os itens em grupos diferentes e navegar através de rótulos como pastas.

* Bookmark e compartilhar quando você terminar de ler a Delicious, Facebook ou Twitter.

Download ► READ IT LATER

Eu li essa informação do site BLOGTECNIA (em espanhol) e já estou usando o complemento. MUITO BOM!!!

beijo da Mama ♥

Gadget com Ícones Fixos Com Efeito JQuery

noreply@blogger.com (MamaNunes) — Mon, 06 Sep 2010 05:58:00 +0000

Como colocar um simpático conjunto de ícones, em gadget fixo na lateral do blog, com efeito JQuery (deslizante), desenhado em CSS.
Encontrei em um site Árabe Blogspacetech há alguns meses, esse truque muito bacana para atrair e estimular os leitores a assinarem os feeds, acompanhar o blog em redes sociais, fazer contato, etc. Peguei os códigos, fiz umas adaptações e vou ensinar como instalar.
Você pode ver em ação NESTA página.
Vamos lá:
Copie todo o código CSS abaixo. Observe que você poderá alterar as cores de fundo e bordas do botão, se quiser, assim como substituir os ícones por outros modelos. No site FIND ICONS você encontra uma enorme variedade de ícones para tudo o que imaginar.

ul#menusisi {
position:fixed;
margin:0;
padding:0;
top:50px;
left:0;
list-style:none;
z-index:9999;
}
ul#menusisi li {
width:100px;
}
ul#menusisi li a {
display:block;
margin-left:-50px;
width:100px;
height:55px;
background-color:#141414; /* Cor de fundo do botão */
background-repeat:no-repeat;
background-position:48px center;
border:1px solid #cfcfcf; /* Cor da borda do botão*/
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#menusisi .home a {
background-image:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);
}
ul#menusisi .twitter a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiXAAm5bieadJ7tTtS6olRFTCCxkTr2MBO7qDCeH4dTFZWUNyU4T_e7FrGmqQ8dKKrU-sEaHwDIYSfGMMy9bH-badE93cVVPi7X3C3CA_7YuIayvPupgNSp_Xs740yKduc-s-2C-zdQvY/s1600/1283728665_twitter_47.png);
}
ul#menusisi .comentários a {
background-image:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png);
}
ul#menusisi .rssfeed a {
background-image:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);
}
ul#menusisi .contato a {
background-image:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);
}

Dentro da página “Editar HTML” Cole o código CSS ANTES/ACIMA do seguinte código:

]]></b:skin>

Agora copie o Script abaixo:

<script src='http://www.google.com/jsapi'/>
<script>
google.load("jquery", "1.3.2");
</script>
<script type='text/javascript'>
$(function() {
$('#menusisi a').stop().animate({'marginLeft':'-50px'},1000);
$('#menusisi > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
});
</script>

Cole ANTES da tag </head>

Por último, copie o código HTML abaixo, coloque seu endereço nos locais sinalizados.

<ul id='menusisi'>
<li class='home'><a href='SEU-ENDEREÇO' title='Home'/></li>
<li class='twitter'><a href='twitter.com/USARNAME' title='Twitter'/></li>
<li class='rssfeed'><a href='http://SEU_BLOG.blogspot.com/feeds/posts/default' title='RSS Feed'/></li>
<li class='comentários'><a href='http://SEU_BLOG.blogspot.com/feeds/comments/full' title='Comentários'/></li>
<li class='contato'><a href='mailto: SEU_EMAIL' title='Contato'/></li>
</ul>

Cole ANTES da tag </body> (No final da página)
Prontinho!
Espero que gostem
Lembrando que com um pouco de paciência, você poderá mudar todo o desenho, alterar cores e deixar seu seu jeito, ou do jeito do seu blog.
Beijo da Mama ♥

Tradutor de Textos no Browser (Navegador) - “Im Translator”

noreply@blogger.com (MamaNunes) — Thu, 02 Sep 2010 15:45:00 +0000

Pesquisando complementos para o Firefox, encontrei um excelente tradutor de textos, fácil de instalar e prático demais. Para quem como eu, utiliza diariamente os tradutores de texto a fim de se comunicar, entender e trocar informações com gente do mundo todo, foi um achado de grande utilidade.

Baixando o plugin, automaticamente é criado um ícone no navegador. Ao clicar nele, abre-se uma janela com todas as opções para a tradução desejada.

…

Aí fica fácil conversar até com meus amigos indianos, indonésios e vietnamitas que dão um banho de conhecimento e criatividade na Internet. Para quem usa Firefox, é muito fácil!clique na imagem.

Direto no site IM TRANSLATOR há opções de widgets para blogs.

Se que há um plugin para o Internet Explorer, mas não testei.

Beijo da mama ♥

Template “Cartão de Visitas “

noreply@blogger.com (MamaNunes) — Wed, 01 Sep 2010 13:42:00 +0000

Demo / Download

Um modelo Wordpress adaptado por Rodney SANKINKA para o Blogger, perfeito para quem está ligado as redes sociais mas não se liga em “blogar”. O template apresenta três páginas, uma para apresentação de trabalhos, uma breve descrição e contato.

Eu achei interessante mas ainda não fiz testes com ele. Me pareceu ser bem simples e fácil de customizar caso queira, por exemplo, um background diferente e ícones de outros sites de relacionamentos.

Dá uma olhada na página do autor onde há instruções detalhadas para a instalação.

Aniversário do Blogger? E Eu Com Isso???

noreply@blogger.com (MamaNunes) — Tue, 31 Aug 2010 14:49:00 +0000

Não estou muito para festas, quem me conhece sabe que tenho motivos de sobra para estar preocupada, principalmente porque esse ano descobrimos que minha filha Lyra de 35 anos, casada, linda e mãe do Davi, está com linfoma “Não-Hodgkin”, muito grave. Ela terá que passar por quimioterapia, radioterapia e sei lá mais o que... Claro que temos uma fé inabalável em Deus e estamos confiantes, mas mãe do meu tipo, fica maluca até com resfriado de filho, que dirá um câncer.

Bom, é aniversário do Blogger??? E eu com isso???

Pois é!!!! No meio de tanta tranqueira dessa vida, eu preciso AGRADECER DE TODO MEU CORAÇÃO AO BLOGGER ♥. Uma pequena homenagem, muito pouco para essa plataforma que gratuitamente oferece seus serviços para que milhares de pessoas como eu possam exercer o direito universal da livre expressão! Pessoalmente, tenho que agradecer mais que todo mundo, porque através das facilidades que o Blogger oferece, descobri que tenho talento para desenho de templates e mudei o rumo da vida em todos os sentidos. Muito obrigada Blogger e…

FELIZ ANIVERSÁRIO !

...

Criar Página Com Uma Lista de Conteúdo do Blog - (Sitemap)

noreply@blogger.com (MamaNunes) — Mon, 30 Aug 2010 13:49:00 +0000

Vamos ver como criar uma página com todo o conteúdo do nosso blog relacionado e organizado, para facilitar aos leitores a pesquisa e a navegação. Desenvolvido por Amanda – BlogBuster e felizmente, otimizado e simplificado por Abu Farhan que reduziu o recurso a nada mais do que copiar e colar o código na caixa de postagem de uma “Página Estática” do Blogger. Este “índice” apresenta todas as postagens publicadas separadamente , por categoria , e os posts mais recentes, aparecem com um texto ao lado que diz: Novo!
Vamos aprender. É bem simples! (mais difícil ensinar hehe)
Copie o código abaixo e edite, colocando o endereço do seu blog no local indicado em vermelho.

<script src="http://dl.dropbox.com/u/684300/tabindex-1.js">
</script>
<script src="http://SEU-BLOG/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>

Faça login no Blogger, clique em “Editar postagens” ►“Editar páginas”► “NOVA PÁGINA”

…

Cole o código do dentro do box de postagem, na opção “Editar HTML” (IMPORTANTE!)
Nomeie a página e publique.

…

Na próxima página você verá as opções para publicação do link. No meu caso, escolhi “Nenhum gadget”, mas você pode publicar na sidebar ou no menu do Blogger como mostram as imagens. Faça testes, use o modelo de exibição mais adequado ao seu template.

A minha página ficou ASSIM . Depois de marcar “Nenhum Gadget”, salvar e publicar, eu copiei o endereço da página direto do navegador e colei no meu menu. Veja:

<li><a href='http://blogger-dicasmamanunes.blogspot.com/p/styletextjavascript-srchttpdl.html'>PUBLICAÇÕES</a></li>

Recomendação: Baixe o script e hospede em um site de sua confiança para o caso de haver algum problema. Download do Script

<script src="AQUI-O-ENDEREÇO-DO-SCRIPT-tabindex-1.js">
</script>
<script src="ENDEREÇO-DO-SEU-BLOG/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>

INSTRUÇÕES PARA QUEM USA O HACK "LEIA MAIS..." AUTOMÁTICO
Se o seu template tem o hack "Leia mais..." automático (com script) deverá substituir o código HTML para que esse widget funcione sem problemas.
É o seguinte:
Entre em "Editar HTML", marque a opção "Expandir modelos de widgets" e procure pelo trecho:

<div class='post-body entry-content'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span id='showlink'><a expr:href='data:post.url'>Leia Mais ...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/>
</b:if>
<div style='clear: both;'/> 
</div>

Substitua todo ele pelo seguinte:

<div class='post-body entry-content'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span id='showlink'><a expr:href='data:post.url'>Leia Mais...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/>
</b:if>
<div style='clear: both;'/> 
</div>

Prontinho! Boa Sorte e beijo da Mama ♥

Configurar a Data do Template “Em construção”

noreply@blogger.com (MamaNunes) — Mon, 30 Aug 2010 11:48:00 +0000

Há poucos meses eu publiquei um template para ser usado enquanto seu site ou blog estiver em construção, você poderá ver AQUI► TEMPLATE EM AÇÃO e AQUI ►TUTORIAL, DOWMLOAD . Eu não sabia como configurar a data, contagem regressiva, para a inauguração (falha minha, desculpem), eu realmente entendo pouco (nada) de programação de scripts. Pesquisando e testando eu descobri onde fica o trecho dentro do código para configurar a ‘bendita’ data. É muito simples.

Faça login ► clique “Design” ► “Editar HTML”

…

Procure pelo seguinte trecho:

<script type='text/javascript'>
$(function () {
var austDay = new Date();
    austDay = new Date(austDay.getFullYear() + 2, 0, 0);
    $('#defaultCountdown').countdown({until: austDay, layout: '{dn} {dl}, {hn} {hl}, {mn} {ml}, and {sn} {sl}'});
    $('#year').text(austDay.getFullYear());
    });
</script>

SUBSTITUA PELO CÓDIGO ABAIXO:

<script type='text/javascript'>
$(function () {
var austDay = new Date();
    austDay = new Date(ANO, MES,DIA);
    $('#defaultCountdown').countdown({until: austDay, layout: '{dn} {dl}, {hn} {hl}, {mn} {ml}, and {sn} {sl}'});
    $('#year').text(austDay.getFullYear());
    });
</script>

Coloque a data prevista para a inauguração, no espaço grifado em vermelho.

Veja como ficou a página que fiz para o Marcio Nunes

Prontinho! É só isso ☺

Beijo da Mama ♥

Como Usar as Fontes (letras) do Google em seu Blog

noreply@blogger.com (MamaNunes) — Thu, 26 Aug 2010 21:08:00 +0000

Recentemente o Google lançou um diretório de fontes (letras) muito bonitas e de alta qualidade para serem usadas gratuitamente em qualquer página da web. Acessando a página do Google Fonts Directory , você pode escolher uma letra diferente das que estão disponíveis no Blogger que são: Georgia, Arial, Trebuchet, Courrier, Impact, Times New Roman, Trebuchet e Verdana.
No diretório encontraremos 18 tipos de fontes. Eu usei a fonte LOBSTER para o cabeçalho do template Retro Vintage Também apliquei um efeito CSS text-shadow e ficou bem bacana.
Bem Vamos ver como usar:
Primeiro você vai ao Google Fonts Directoy, escolhe a fonte que deseja e ao clicar sobre ela verá ao lado. (No exemplo escolhi Lobster) ► “Click to embed Lobster”

Na pagina seguinte você poderá visualizar todos os detalhes da letra que escolheu. Para pegar o código, clique em “Get the code”

Na pagina seguinte você verá o primeiro código dessa maneira:

IMPORTANTE !! Para que o Blogger aceite, copie o código e acrescente no final dele o seguinte: </link>

Ficará assim:

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> </link>

Muito bem, agora vamos ao Blogger, na sua página “Editar HTML” procure a tag <head> e cole o código logo abaixo dela.

Vamos inserir o código CSS onde queremos que a letra apareça segundo o diretório nos indica:

font-family: 'Lobster', arial, serif;

Em um template Mínima do Blogger por exemplo, usariamos assim no título do blog:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font-family: 'Lobster', arial, serif;
}

E desta outra forma nos títulos dos posts:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-family: 'Lobster', arial, serif;
line-height:1.4em;
color:$titlecolor;
}

Espero que tenha sido útil ♥
Fonte: Google Factory Directory
Consulta: El Escaparate de Rosa

Widget de Paginação Para Blogger

noreply@blogger.com (MamaNunes) — Thu, 26 Aug 2010 12:31:00 +0000

Vamos conhecer seis estilos de paginação disponibilizados por ABU FARHAN, para colocar abaixo dos posts na sua página principal. Esse recurso é bastante útil principalmente quando temos vários posts porque permite que o leitor possa transitar pelo blog com maior rapidez, , ir e voltar para a página que mais o interessou.

Veja os modelos:

Estilos, demonstração e códigos disponibilizados:

* Estilo 1: Demo - Código CSS

* Estilo 2: Demo - Código CSS

* Estilo 3: Demo - Código CSS

* Estilo 4: Demo - Código CSS

* Estilo 5: Demo - Código CSS

* Estilo 6: Demo - Código CSS

Para inserir o widget é muito simples:

Faça login ► Clique em Design

Na sua pagina “Design” clique em “Adicionar um Gadget” e escolha um elemento “HTML/JavaScript” . Dentro dele você vai inserir o código CSS e o Script.

EXEMPLO: * Estilo 1 – Código CSS e Script

<style type="text/css">

.showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px; } .showpageArea a { color: #000; text-shadow:0 1px 2px #fff; font-weight: 700; } .showpageNum a { padding: 3px 8px; margin:0 4px; text-decoration: none; border:1px solid #999; -webkit-border-radius:3px;-moz-border-radius:3px; background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtw5MMUJ2Ny51cpQs0fiWHZZwuau6LpIlPLICYyQ6nX1K8nBANooikmYOLKZ25XsqI0dtmTs4DEceyBFdqo3kD6l-FuKDkZ1K2AN3jkPAtK4rt35W7fLFSaob5WnBAQvHJO0Dc4trYEz0/s1600/wp1.jpg) 0 -50px repeat-x; } .showpageNum a:hover { border:1px solid #888; background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtw5MMUJ2Ny51cpQs0fiWHZZwuau6LpIlPLICYyQ6nX1K8nBANooikmYOLKZ25XsqI0dtmTs4DEceyBFdqo3kD6l-FuKDkZ1K2AN3jkPAtK4rt35W7fLFSaob5WnBAQvHJO0Dc4trYEz0/s1600/wp1.jpg) 0 -25px repeat-x; } .showpageOf{ margin:0 8px 0 0; } .showpagePoint { color:#fff; text-shadow:0 1px 2px #333; padding: 3px 8px; margin: 2px; font-weight: 700; -webkit-border-radius:3px;-moz-border-radius:3px; border:1px solid #999; background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtw5MMUJ2Ny51cpQs0fiWHZZwuau6LpIlPLICYyQ6nX1K8nBANooikmYOLKZ25XsqI0dtmTs4DEceyBFdqo3kD6l-FuKDkZ1K2AN3jkPAtK4rt35W7fLFSaob5WnBAQvHJO0Dc4trYEz0/s1600/wp1.jpg) 0 0 repeat-x; text-decoration: none; }

</style>

<script style="text/javascript">var pageCount=15;var displayPageNum=15;var upPageWord="Previous";var downPageWord="Next";</script><script style="text/javascript" src="http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js"></script>

Lá em cima, no começo do post, você pode escolher o estilo que mais combina com seu layout, copiar o código CSS respectivo. Repare que coloquei em negrito o código CSS do * Estilo 1. Substitua pelo que você escolher. (Não apague o script)

Veja NESTE post um outro estilo para paginação com barra rolante (scroll)

Fonte: ABU FARHAN