terça-feira, 11 de março de 2014

SATURDAY NIGHT MOCKTAIL: STRAWBERRIES & CREAM

Nenhum comentário: | |

Fazia muito frio. Ela só queria voltar para a sua cama e dormir, e quando acordasse, encontrar tudo resolvido, seus problemas bem longe dali e, como num passe de mágicas, a sua vida totalmente resolvida. Ela havia passado por muitas coisas ruins nos últimos dias mas a sua rotina não poderia parar por conta de desilusões sentimentais. Ela precisava ir, só não sabia para onde. 

Colocou uns 3 agasalhos e uma calça de moletom bem grossa para tentar se esquivar do frio. E foi. Ela não queria admitir, mas estava com medo. Será que daria certo? Será que tinha coragem suficiente para tentar? Será que ela realmente conseguia, como dizia seus amigos? Ela não saberia se ficasse dentro de casa com seu velho e surrado desespero. 

Antes de ir, pegou o seu livro preferido, que já estava com a capa toda rasgada e bem velha de tanto abrir e fechar insistentemente e colocou na mochila. Pegou mais um casaco, pois não saberia até quanto o frio poderia a maltratar. Sabe aquele bom e antigo MP3? Ela pegou também. Ganhou de presente do seu avô, meses antes dele falecer, e nunca mais o largou, mesmo depois de lançarem inúmeros modelos modernos e tecnológicos de aparelhos de som. Lá, estavam suas músicas preferidas que também eram as preferidas do seu avô, a história de uma vida inteira contada com melodias. E foi. 

Durante o caminho, encontrou diversos rostos de pessoas que não conhecia. Conheceu tristes histórias e artistas de rua que levavam a sua arte pelos cantos não só por alguns dólares e migalhas de pão. Levavam a sua arte para fazer a sua alma sobreviver. Viu muitas paisagens destruídas por homens que insistem em exercer um conceito errado de hierarquia. Gente chorando, gente sorrindo. E tudo isso a fez querer ir mais ainda. 

Bom, ela ainda não conhecia o caminho, nem tampouco o lugar de destino, mas ela foi, e foi com garra. Foi com o rosto limpo e muita disposição no coração. Foi com vontade de mudar a sua vida e de fazer a diferença nesse mundão. A menina triste, que vivia sozinha, tomando uma xícara de café com biscoitos e lendo antigas e tristes histórias reais, foi. No início ela não entendia muito bem porque deveria de ir, mas percebeu que era necessário ir e fazer a sua parte. Se ela não fizesse, ninguém faria por ela. Por isso ela foi. 

TUTORIAL: FOOTER DO POST PERSONALIZADO

Nenhum comentário: | |
Vários leitores do blog já tinham me pedido este tutorial, então finalmente consegui fazer um tutorial de um jeito "fácil" de entender. Bom, hoje eu vou ensinar a fazer o antigo footer do blog (exemplo abaixo). Esse tutorial é simples, mas tem que entender um pouquinho sobre HTML. 
Para fazer o tutorial eu usei como modelo o Template Simples do Blogger (esse daqui). O código também é aplicável para aqueles que possuem mais de um autor. 


Marque a opção Expandir modelos de widgets, e procure por: 


<div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span> <span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' itemprop='url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.commentLabelFull/>:
              </a>
            </b:if>
          </b:if>
        </b:if>
      </span> 


Apague até o < /span> e depois cole o seguinte código: 


<div class='post-footer'>
<div class='fotoautor'> </div>
    <div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span><br/> <span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' itemprop='url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> <br/>
<div style='float: left; margin: 1px;display: inline;'><a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px'/></div>

<span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.commentLabelFull/>:
              </a>
            </b:if>
          </b:if>
        </b:if>
      </span> 
<div id='clear'> </div>


Procure por .post-footer no CSS apague-o e cole o código seguinte: 

.post-footer {
border-top: 1px solid #ccc;
padding-top:10px;
margin: 2px 10px 2px 10px;
font: normal 10px "arial";
text-transform: uppercase;
line-height: 20px;
}
.fotoautor {
background:url('URL DA FOTO'); 
width:65px;
height:65px;
float:left;
margin: 2px 5px 2px 2px;
}
.comment-link {
float: right;
font: italic 15px 'georgia';
margin- top: -15px;
text-transform:none;
}
.post-labels {
display:block;
 border-top: 1px dotted #ccc;
 padding:2px;
margin-top: -10px;font-size: 10px;
}
.post-timestamp {
margin-left:1px;
}
#clear {clear:both;}


A foto precisa ter 65x65 de tamanho! Vá ajustando conforme as suas necessidades.


Repita o primeiro passo, o de procurar e apagar o código. Mas ao em vez de colar o código acima cole o código seguinte: 

  <div class='post-footer'>
<b:if cond='data:post.author == &quot;NOME DO AUTOR 1&quot;'>
<div class='fotoautor'> </div>
</b:if>
<b:if cond='data:post.author == &quot;NOME DO AUTOR 2&quot;'>
<div class='fotoautor2'> </div>
</b:if>
    <div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span><br/> <span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' itemprop='url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> <br/>
<div style='float: left; margin: 1px;display: inline;'><a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px'/></div>

<span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.commentLabelFull/>:
              </a>
            </b:if>
          </b:if>
        </b:if>
      </span> 
<div id='clear'> </div>

Você deve ir aumentando de acordo com a quantidade de autores que o seu blog possui, tanto no código como no CSS (repetindo o código em negrito). No css, procure por .post-footer apague e cole o código: 


.post-footer {
border-top: 1px solid #ccc;
padding-top:10px;
margin: 2px 10px 2px 10px;
font: normal 10px "arial";
text-transform: uppercase;
line-height: 20px;
}
.fotoautor {
background:url('URL DA FOTO'); 
width:65px;
height:65px;
float:left;
margin: 2px 5px 2px 2px;
}
.fotoautor2 {
background:url('URL DA FOTO'); 
width:65px;
height:65px;
float:left;
margin: 2px 5px 2px 2px;
}
.comment-link {
float: right;
font: italic 15px 'georgia';
margin- top: -15px;
text-transform:none;
}
.post-labels {
display:block;
 border-top: 1px dotted #ccc;
 padding:2px;
margin-top: -10px;font-size: 10px;
}
.post-timestamp {
margin-left:1px;
}
#clear {clear:both;} 


A foto deve ter o tamanho de 65x65! 


Esse passo não é obrigatório! Ele serve para deixar a data com o dia da semana, mês, dia e horário - como o da foto. Se não quiser alterá-lo ele ficara apenas com a hora da postagem. 

Vá em Layout > Postagens do blog > Editar

Irá abrir uma nova janela. Você irá no 3º item de 'Opções da página de postagem' como na foto abaixo e marcar a opção que contém o dia da semana, mês, dia e hora. Depois altere a palavra 'às' que fica em frente para 'em'.


Clique para visualizar melhor

Altere o código do jeito que preferir.Em caso de dúvidas ou erros é só deixar no comentário!