» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Template Black and Red Basic




Black and Red Basic.jpeg

Um dos meus primeiros templates foi o Black and Red A2 e também foi o mais baixado até hoje.

Levando em consideração o grande número de downloads deste template decidi criar outro usando o Black and Red A2 como base, fazendo várias modificações e melhorias nele. Dei o nome de Black and Red Basic, Basic porque estou providenciando o Classic, o Modern, o Black and Blue, o White etc...

Não coloquei imagem no cabeçalho do template para que você fique livre para colocar a sua. Veja este post Como Alterar a Imagem no Topo do Template e o Tamanho do Cabeçalho.

ATENÇÃO NÃO BAIXE O TEMPLATE SEM ANTES LER SOBRE OS RECURSOS QUE ELE CONTÉM!

Os recursos instalados no template são:
  1. Mais Importante!
    PÁGINAS DIFERENCIADAS: Página inicial diferente da página do post » Quando você clica para ler o post a coluna da Esquerda some dando mais ênfase ao post a ser lido. Então preste atenção a este recurso para usar este template em seu blog. Vá até o Template Demo clique no post e CERTIFIQUE-SE SE É ISTO QUE REALMENTE QUER.
  2. Data do post personalizada e que se repete em posts do mesmo dia. Veja: Personalizando a Data do seu Post .
  3. Resumo dos posts na página inicial do blog com redimensionamento das imagens dos resumos já incluído. Veja: Thumbs das Imagens na Página Inicial do Blogger
  4. Hack "Leia Mais" já instalado. Veja: Hack Leia Mais
  5. Posts Relacionados. Veja: Posts Relacionados no Fim do Post

Se você quiser usar estes recursos em seu blog e gostou deste template o link para download está aqui:

Hack Leia Mais




CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO
Este hack é muito comum entre os metablogs. Eu já havia postado aqui um deste tipo com a pequena diferença de o post se expandir na página principal do blog (Hack Leia Mais com Posts Expansíveis), diferente deste que há a necessidade de clicar no link Leia Mais ou [...] para terminar de ler o post.

  • A maior utilidade deste hack é quando usamos posts resumidos ou posts em colunas na página principal do blog.
  • Também tem a utilidade de você definir até onde o seu post ficará resumido na página principal.
  • Não Se Esqueça:
    » Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
    ♥ SEMPRE TENTE ANTES NUM BLOG DE TESTES.
    ♥ SALVE O SEU TEMPLATE ANTES DE COMEÇAR, CLICANDO EM Baixar modelo completo.
    ♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

    Vamos ao hack:

    Vá em Modelo → Editar HTML.
    1º- Cole o código Javascript abaixo, antes da tag </head>:
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <script type='text/javascript'>
    function checkFull(id) {
    var post = document.getElementById(id);
    var spans = post.getElementsByTagName(&#39;span&#39;);
    var found = 0;
    for (var i = 0; i &lt; spans.length; i++) {
    if (spans[i].id == &quot;fullpost&quot;) {
    spans[i].style.display = &#39;none&#39;;
    found = 1;
    }
    if ((spans[i].id == &quot;showlink&quot;) &amp;&amp; (found == 0))
    spans[i].style.display = &#39;none&#39;;
    }
    }
    </script>
    </b:if>
    ♦ Clique em SALVAR ALTERAÇÕES.

    ♦ Marque a caixinha ► Expandir modelos de widgets

    2º- Encontre as linhas:
    <div class='post-body'>
    <p><data:post.body/></p>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    » Substitua estas linhas por estas abaixo:
    <div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>#fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>
    <style>#fullpost{display:none;}</style>
    <p><data:post.body/></p>
    <span id='showlink'>
    <a expr:href='data:post.url'>Leia Mais</a>
    </span>
    <script type='text/javascript'>
    checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);
    </script>
    </b:if>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    ♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.

    ♦ Clique em SALVAR ALTERAÇÕES.

    OBSERVAÇÕES

    1- As palavras Leia Mais em verde podem ser subtituidas por [...] ou por Continue Lendo, como você quiser.

    2- Você pode incluir um código CSS acima da linha ]]></b:skin> para configurar o link Leia Mais.
    O código é este:
    #showlink {
    font-size: 120%;/*Tamanho da fonte*/
    float: right;
    margin-right: 30px;
    margin-top: -8px;
    font-weight: bold;
    }
    #showlink a { /*Link*/
    font: normal normal 105% Arial, sans-serif; color: #333;
    }
    #showlink a:visited {color: #cccccc;}
    #showlink a:hover { /*Link quando apontado pelo mouse*/ color: #dedede;}
    3- Se você quiser colocar uma imagem no lugar de Leia Mais:

    Veja a linha: <a expr:href='data:post.url'>Leia Mais</a> e substitua Leia Mais pelo código:
    <img src='Endereço da Imagem' />
    Assim você irá incluir uma imagem ao invés das palavras.


    3º Vá em Configurações ► Formatação ► desça a tela e no fundo, você encontra o Modelo de Postagem (text box/caixa de texto) para especificar o "Post template". Copie/cole o código abaixo, nessa caixa de texto, e clique em Salvar configurações.
    Digite seu resumo aqui
    <span id="fullpost">
    Digite o resto do post aqui
    </span>
    De forma que fique como esta imagem:

    O que estiver entre <span id="fullpost"> e </span> será o restante do post que não aparecerá na página inicial do post.

    Agora, se você criar um novo post, ele mostrará exatamente onde digitar o resumo e onde ler o resto do post. Para facilitar escreva seu post usando a forma HTML da caixa de postagem do blogger.

    Esse hack só funciona nos posts após o código ter sido instalado, se quiser nos antigos, terá que editar os posts.


    Um pouco de história e créditos:
    Este hack já existe desde Nov/2006 divulgado pelo blog Hackosphere, mas recentemente vi no Usuário Compulsivo uma variação deste hack que utiliza o javascript bem menor e funciona do mesmo jeito. Então resolvi postar aqui o código java que vi no Usuário Compulsivo cujos créditos são de lá indicados com o link. Também recebi ajuda da Rô do Blogger'SPhera quando aprendi a editar as palavras "Leia mais" pelo CSS #showlink.

    Notícias da Blogosfera




    Semana passada dei minha primeira entrevista na blogosfera.

    Foi muito legal e me deixou muito honrada!

    Se você quiser me conhecer melhor, dê uma passadinha no Notícias da Blogosfera!

    Foi um convite do Marcelo do blog CSS Padrões para responder algumas perguntas para o seu novo projeto.

    O Blog Image and video hosting by TinyPic

    Lá você vai ficar sabendo de tudo o que rola na blogosfera dentro e fora dos bastidores, conhecer melhor o seu blogueiro preferido, discutir sobre assuntos relevantes ao meio "bloguístico" e muito mais. Já tem até "babado" rolando por lá!

    É um blog novo e já foi inaugurado com uma entrevista com a Ariane do Templates para Novo Blogger que vale a leitura, além dos outros artigos muito legais.

    Email de Contato




    Bom dia para todos!



    Image and video hosting by TinyPic



    Se vocês quiserem falar comigo aqui está o meu email de contato.



    Aproveitando a oportunidade para deixar a dica do site onde você pode gerar uma imagem do seu email como esta:

    EMAIL ICON GENERATOR.

    E para criar o link do email basta utilizar a linha de código:

    <a href="mailto:falecomigo@templatesparavoce.com"><img src="Endereço da Imagem do seu Email"/></a>

    Substitua o email falecomigo@templatesparavoce.com pelo seu email e coloque onde quiser em seu blog, seja em um gadget ou em posts, etc...

    Aguardem novidades!




    Demorei mas apareci, viajei no natal e já voltei a algum tempo, mas tirei uma folga dos blogs. Estava precisando! Estou recomeçando bem devagarinho.

    Mesmo assim peço desculpas a todos os leitores do Templates para Você pela minha ausência, principalmente em responder comentários.
    Aí vocês vão dizer: "Mas a Áurea já não responde muito mesmo."
    Realmente. Como já escrevi antes, meu tempo é muito corrido e não dá para responder sempre, mas faço o que posso e com muito carinho.

    Vou correr para responder os comentários que foram feitos de 31/12/08 até hoje, os mais antigos vai ser um pouco difícil, mas vou me esforçar.

    Quero aproveitar para agradecer a todos que em comentários ou não gostam daqui, vocês me fazem muito feliz por ver que gostam do meu trabalho, e também Desejar a vocês um 2009 repleto de coisas boas, realizações, paz, enfim, TUDO DE BOM!

    Estou com alguns planos para melhorar o blog, mais templates no forno e tutoriais, aguardem com paciência, rsss!

    Muitas bjks,

    Áurea

    Sobre o TPV e a Autora




    Venho adiando este about há muito tempo, talvez por ser muito difícil falarmos de nós mesmos. Mas vi sua real necessidade quando o número de leitores de Feeds do TPV aumentou de uma vez. Esta é a mostra de que existem pessoas que gostam do seu blog e estas pessoas merecem saber mais sobre quem escreve o conteúdo que eles gostam.

    Vamos lá:
    Sobre o Blog
    Este blog foi criado com o intuito de distribuir os templates que eu aprendi a criar fuçando nos códigos do Blogger.
    Isso aconteceu quando criei o meu primeiro blog o Aukimia.

    Eu não gostava dos templates prontos que o blogger disponibilizava e queria algo meu. Com isso fui mexendo, lendo, aprendendo daqui e dali, aí comecei a criar outros templates e resolvi disponibilizá-los num blog para quem quisesse usar.

    Mesmo dando muito trabalho, é legal criar os templates, ver sua criação na internet e dizer:"Fui eu quem criou este modelo/template!". E quando alguém gosta e quer usar seu template é melhor ainda. Mostra que outras pessoas gostaram do seu trabalho.

    Enquanto fui aprendendo sobre templates, também aprendi sobre hacks e resolvi ensinar quem quisesse colocá-los em seus blogs. Tudo o que sei sobre os templates aprendi sozinha lendo muito procurando, comparando, estudando etc...

    Amo ensinar e gosto demais de internet, aqui foi uma oportunidade de aprender e dividir o que aprendi.

    Sobre a Autora do Blog
    Meu nome é Áurea, sou Farmacêutica com habilitação em Análises Clínicas (mais conhecido como Bioquímica).

    Amo ensinar e gosto muito de internet. Comecei a blogar em 2007, me apaixonei, aprendi a customizar os blogs e cheguei até aqui.
    Sou casada, ainda não tenho filhos e amo meus cães.

     
    Copyright ©2007-2014. Templates para VOCÊ - Todos os Direitos Reservados
    Licença Creative Commons
    Baseado no Tema Johny Classicsite | Tecnologia do Blogger