Fuck Designs

Sigla: FD
Desde o inverno de 2014
(03.julho.2014)
Four Years nessa porra

O Fuck Designs é um blog de edições, que tem como intuito oferecer o melhor para sua fanfic!

Criado por uma jovem aspirante a Designer e hoje administrado por três grandes sonhadoras e amantes do Fuck.

Entre em contato e nos conheça.


Contato

DONAS
Nome: Andy
Função: Codificar o Layout e tudo mais
Status: Dando vácuo na Mel e na Gabs, juro que é sem querer/ou não rs.
Nome: Carol
Função: Botar ordem nessa bagaça
Status: Batendo a cara de vocês na parede.
Nome: Mel
Função: Qualquer coisa de imagem
Status: Sendo incrível.
Nome: Gabs
Função: Pupila da Carol.
Status: Lidando com as merdas porque a carol já perdeu a paciência.
Welcome to the
FD world




Layout feat.
Who Run The World?

Versão:
Apolo 11

Design criado por
Nika (fuck) Horan (Melzinha) e
Codificação por
AN Designer (Andyzinha)




ACERVO DE LAYOUTS

Fuckers

TUTORIAL - HTML: Estilo de postagem por Andy Santana
TUTORIAL - HTML: Estilo de postagem por Andy Santana
marcado em ,,,,,,,

18 abril 2016


OLÁ GIRLS AND BOYS <3 b="" equipe="" nbsp="">FD
recebeu um e-mail pedindo um tutorial de como fazer esse tipo de postagem:


Eu lembro que fiz o layout da Gisele e do Justin com esse tipo de postagem, mas paraece que não foi muito bem aceito pelo público. O que é uma tragédia por que eu amei esse tipo de postagem, mas fazer o que né meus amores?!!
A pessoa - que não lembro o nome - do e-mail foi tão educada conosco que resolvi fazer o tutorial, espero que gostem e consigam fazer o estilo de postagem.



PRIMEIRO DE TUDO FAÇA BACKUP DO SEU TEMPLATE (LAYOUT). 


1 -  Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".
2 - Clique no código do template, pressione "CTRL+F" e pesquise por:
<b:includable id='post' var='post'>
3 - Selecione e apague o trecho como mostrado na imagem abaixo:

4 - No local do trecho excluído, cole o seguinte código:
 <b:includable id='post' var='post'>
                <div id='sheldon'>
  <article expr:class='&quot;blogger-post blogger-post-&quot; + data:blog.pageType' expr:id='&quot;post-&quot; + data:post.id'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <div class='blogger-post-part blogger-post-thumbnail-area'>
          <b:if cond='data:post.thumbnailUrl'>
            <a expr:href='data:post.url'><img class='blogger-post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='200' width='72'/></a>
          </b:if>
  </div>
      </b:if>
    </b:if>
    <div class='blogger-post-part blogger-post-body-area'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
      <h3 class='blogger-post-title'>
        <b:if cond='data:post.title'>
          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'><data:post.title/></a>
          <b:else/>
            <b:if cond='data:post.url'>
              <b:if cond='data:blog.url != data:post.url'>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
            <b:else/>
              <data:post.title/>
            </b:if>
          </b:if>
        <b:else/>
          [Untitled]
        </b:if>
      </h3>
       </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

    <div class='post-header'>
    <div class='post-header-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' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                  <span itemprop='name'><data:post.author/></span>
                </a>
              </span>
            <b:else/>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <span itemprop='name'><data:post.author/></span>
              </span>
            </b:if>
        </b:if>
      </span>
      <span>em</span>
      <b:if cond='data:post.dateHeader'>
<span class='date-header'><data:post.dateHeader/></span>
</b:if>
      <span>|</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'>
                      <b:include data='post' name='comment_count_picker'/>
                    </b:if>
                  </b:if>
                </b:if>
              </span>
    </div>

 </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:if cond='data:blog.metaDescription == &quot;&quot;'>
      <!-- Then use the post body as the schema.org description,
          for good G+/FB snippeting. -->
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
       <!-- Html Resumo Automático de Postagens-->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<p><b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb
(&quot;summary<data:post.id/>&quot;);</script>
<span class='reslink' style='float:right'><a expr:href='data:post.url'>Leia Mais &#9658;</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>
</b:if>
<!-- Fim Html Resumo Automático de Postagens-->
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    <b:else/>
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    </b:if>
 </b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
      <footer class='blogger-post-footer'>
        <div class='blogger-post-footer-line blogger-post-footer-line-1'>
          <b:if cond='data:post.dateHeader'>
<span class='date-header' style='display: block;     text-align: center;     margin-top: -135px;     position: relative;     float: left;     width: 300px;     letter-spacing: 0.1em;     color: #fff;     text-transform: uppercase;     font-size: 10px;     background: rgba(0,0,0,0.7);     margin-left: -10px;     font-family: arial;'><data:post.dateHeader/></span>
</b:if>
   
        </div>
     
      </footer> </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-footer'>


      <div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>

      <div class='post-footer-line post-footer-line-3'><span class='post-location'>
        <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
      </span> </div>
    </div> </b:if>
    </div>
  </article>
</div>
</b:includable>
 5 - Pesquise agora por ]]></b:skin>
 6 - Logo ABAIXO da tag encontrada, cole o seguinte código.
 <style type='text/css'>
#blog-pager {clear: both;}
#sheldon {    /* -- LARGURA DAS POSTAGENS JUNTAS, CENTRALIZAR,---  */
width: 800px;
 /* margin-top: 200px; */   /* SE NECESSÁRIO, ARRUME ESSES DOIS MARGIN */
 margin-left: -100px;
}
.blogger-post {    /* -- NÃO MEXA ---  */
 height: auto;
 width: 300px; /* -- APENAS SE MUDAR O TAMANHO DAS IMAGENS---  */
padding: 10px 10px 0px;
 overflow: hidden;
 float: left;
 display: inline-block;
}
.blogger-post:after {  content:&quot; &quot;;  display:block;  clear:both;}
.blogger-post-title {     /* --  POSIÇÃO DOS TÍTULOS DAS POSTAGENS NA PÁGINA INICIAL ---  */
 margin: -10px 0 10px -10px;
    padding: 0;
    position: absolute;
    width: 210px;
    text-transform: uppercase;
    font-size: 15px;
    text-align: center;}
.blogger-post-title a{ /* --  ESTILO DOS TÍTULOS DAS POSTAGENS  NA PÁGINA INICIAL, MUDE DE ACORDO COM O SEU GOSTO ---  */
  width: 280px;
    background: rgb(149, 103, 147);
    padding: 10px;
    display: block;
    overflow: hidden;
    float: left;
    color: #F1F0F0;
    margin-top: 270px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;}
.blogger-post-thumbnail-area {
  width: 300px; /* -- TAMANHO DAS IMAGENS ---  */
    height: 300px; /* -- TAMANHO DAS IMAGENS ---  */
    background-color: #2D3957;
    float: left;
    overflow: hidden;
    background: url(http://i.imgur.com/Oo61wtk.png); /* -- IMAGEM PARA QUANDO NÃO HOUVER NA POSTAGEM --*/
    background-repeat: no-repeat;
    background-size: 100%;
margin-bottom: 100px;
}
.blogger-post-thumbnail { /* -NÃO MEXA- */
display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    position: static;;}
.blogger-post-body-area {  /* -- NÃO MEXA, SE NÃO SOUBER CODIFICAR ---  */
padding: 10px;
    margin: 10px 0 0;
    font-size: 11px;
}

.blogger-post-item,
.blogger-post-static_page {width:auto;  margin-left: -150px;} /* - NÃO MEXA- */
.blogger-post-item .blogger-post-body-area,
.blogger-post-static_page .blogger-post-body-area {      margin: 0;
    padding: 20px;
    font-size: 13px;
  }
.blogger-post-item .blogger-post-title,
.blogger-post-static_page .blogger-post-title {font-size:30px;}
.icon-action {width: 10px;height:10px;}
/* ---ESTILOS NA PÁGINA DA POSTAGEM--- */
h3.post-title {  /* -- TITULO DAS POSTAGENS ---  */
font-size: 20px;
    font-family: calibri;
    text-align: center;
    color: #FFF;
    height: 50px;
    background: url(http://i.imgur.com/XOdtVs6.png) no-repeat;
    padding-top: 180px;
    width: 670px;post-footer    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.post-body {  /* --  CORPO DA POSTAGEM---  */
    font-family: calibri;
    font-size: 12px;
    color: #fff;
    padding: 20px;
    text-align: justify;
    width: 630px;
    background: url(http://i.imgur.com/2UYYbXy.png);
}
.post-header { /* -- NÃO MEXA ---  */
line-height: 1.6;
}
.post-footer { /* -- PARTE DE BAIXO DA POSTAGEM, MARCADORES E COMPARTILHAMENTO  ---  */
height: 280px;
    background: url(http://i.imgur.com/rkD27UG.png) no-repeat;
    margin-bottom: 100px;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.1em;
    font-family: Tahoma, Helvetica, san-seri;
    font-size: 10px;
}
.post-header, .dados { /* -- ÁREA DO AUTOR E DATA DE POSTAGEM ---  */
padding: 17px 0 0px 0px;
    border-bottom: solid 30px transparent;
    text-align: center;
    font-size: 10px;
    color: #fff;
    background: #956793;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    width: 670px;
}
</style>

Inserindo o Script para Correção das Miniaturas
O próximo passo será inserir um script "necessário" para corrigir a definição das miniaturas das imagens, porém, como citado no tutorial, esse passo não é obrigatório, mas é importante para que as imagens presentes nas postagens não apareçam "desfiguradas" e embaçadas.
7- Ainda no código do template, pesquise por </body>.
8 - Logo ACIMA da tag encontrada, cole o seguinte código

 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
 <script type='text/javascript'>              
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,&quot;s&quot;+size+&quot;-c&quot;);
var thumbnails = blogGadget.getElementsByTagName(&quot;img&quot;);
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize(&quot;Blog1&quot;,200);              
</script>
  </b:if>
</b:if>

 Em destaque 210, é a resolução da nova imagem que será aplicada, porém esse valor deve ser ajustado caso tenha alterado no CSS de acordo com o novo valor. 

9 - Clique em em "Salvar Modelo" e logo depois "Visualizar blog" para ver como o seu blog ficou. Agora você poderá personalizar como quiser suas postagens da página inicial, sem intererência na página da postagem.

 Tutorial base por PRODEVELOPER e modificado por ANDY SANTANA

TUTORIAL TESTADO NOS SEGUINTES CÓDIGOS BASES:

AMANDA ROSA feat Lady Gaga
ANDY SANTANA feat Ellie
ANDY SANTANA feat Angelina


IMPORTANTE!IMPORTANTE!IMPORTANTE!IMPORTANTE!IMPORTANTE!IMPORTANTE!IMPORTANTE!IMPORTANTE!IMPORTANTE!IMPORTANTE!IMPORTANTE!IMPORTANTE!IMPORTANTE!

DEPENDENDO DO SEU CÓDIGO DEVERÁ MEXER EM MAIS COISAS. ENTÃO SÓ MEXA, SE ENTENDER DE HTML.



Me digam o que acharam do tutorial e não se esqueça de comentar sobre dúvidas, elogios, xingamentos. E peçam mais tutoriais (risos).

Beijos da Andy <3 b="">
deias.lerman@gmail.com
Web Master FD


4 comentários:

  1. Ouuou adorei o tutorial! Seus layouts são os melhores <33

    ResponderExcluir
  2. Olá Andy, teria como você hospedar estes codigos no meu layout? Agradeceria muito.

    ResponderExcluir

DESIGNER DO MÊS



HAOPPA
categoria: CAPA DE FANFIC
parabens




HeyLife
categoria: Crítica de fanfic
parabens

DIVULGAÇÃO



64 favs 163 Visualizações 18 comentários
Terminada

nome: Breathless
autora: dgwoman

(...) "Após as gravações de “Percy Jackson e o Mar de Monstros” serem finalizadas, cada ator da franquia de filmes seguiu seu ros.... "

LEIA MAIS

PRÓXIMA DIVULGAÇÃO: 20/07

DIVULGUE
VENHA PARA O
FUCK DESIGNS




VAGAS EM todas as categorias, só vem!

SINOPSE (urgente)
CRÍTICA DE FANFIC (urgente)
BETAGEM (urgente)
CAPA DE YOUTUBE (urgente)
CAPA DE FANFIC
ASSINATURA
styles


clica aqui

para se inscrever

AFILIAÇÃO

afiliados dessa gangue do design




Para se tornar um afiliado, preencha o formulário:

AQUI



BAIXE O APP DO BLOG
REALIZE SEU PEDIDO DE QUALQUER LUGAR QUE ESTEJA.



Use a câmera do seu celular ou baixe através do link:


DOWNLOAD
EXTENSÃO:
SCHOOL FUCK DESIGNS
School FuckDesigns - Escola de Design

Blog exclusivo para designers iniciantes que querem aprender mais sobre Design, e participarem do blog FD.