Postagens relacionadas com sumario [005]

Ohayooo meus queridos bunnie's! Como vão todos? Bem hoje venho trazer um widget de postagens relacionadas com sumario no final das postagens.  Esse modelo é bem diferente de outros que já postei aqui, nele possui uma pequena brevia do texto da postagem e o titulo da mesma. Eu achei muito legal! Então resolvi trazer para vocês. Os créditos estarão ao final da postagem. Ele é muito fácil de entender, mas se ainda tiver dificuldades, basta comentar que irei responder o mais breve possível.

Brevia do efeito

1. Vá até o HTML do seu blog, clique dentro da área do código e ative a pesquisa selecionando Ctrl+F, procure por </head> e acima dela cole:

Códigos

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 4; // number of entries to be shown
var relatedmaxnum = 75; // the number of characters of summary
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7DllvfZ2F80tCrsxudQ452zPLL3t6oumZA-_7MueqFmnp2Jxt8MVdW1UezIw__DoULKZWki7EqtxG-ivj9Qgp5XmRdOcoLxj2j009uuVK6bHruxO92ZIQlJpJxXBiWoGELN9eiuZyHNUX/s1600/no_image.jpg"; // default picture for entries with no image
//]]>
</script>
<script src="http://makingdifferent.github.io/blogger-widgets/related-posts-with-thumbs-and-summaries.js" />

Vermelho: Quantidade de miniaturas que vão aparecer
Verde: o número de caracteres a serem exibidos no resumo de mensagens.
Azul: Imagem que sera exibida caso a miniatura não tenha uma imagem

2. Agora que já plicamos o javascript, precisaremos aplicar o CSS como prefiro dizer estilos. Ainda dentro do HTML procure por </head> e acima dela cole:

Códigos

<style>
.relatedsumposts {
    float: left;
    padding: 0px 10px;
    overflow: hidden;
    text-align: center;
  /* width and height of the related posts area */
    width: 120px;
    height: 200px;
    border-right: 1px solid #E5E5E5;
    display: inline-block;
}
.relatedsumposts:hover {
    background-color: #F7F7F7;
}
.relatedsumposts img:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
}
.relatedsumposts a {
  /* link properties */
    color: #linkcolor;
    display: inline;
    font-size: 10px;
    line-height: 1;
}
.relatedsumposts img {
  /* thumbnail properties */
    margin-top: 2px;
    height: 82px;
    padding: 5px;
    width: 82px;
    border: 1px solid #fff;
    -webkit-border-radius: 100px;    -moz-border-radius: 100px;    border-radius: 100px;    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow: hidden;
}
.relatedsumposts h6 {
  /* title properties */
    display: table-cell;
    height: 3em;
    margin: 5px 0 0;
    overflow: hidden;
    padding-bottom: 2px;
    vertical-align: middle;
    width: 130px;
}
.relatedsumposts p {
  /* summary properties */
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    color: #summarycolor;
    font-size: 10px;
    height: 4em;
    line-height: 1;
    margin: 5px 0 0;
    overflow: hidden;
    padding: 5px 0 15px 0;
    text-align: left;
}
#relatedpostssum {
    background: #F3F3F3;
    height: 200px; /* related posts container */
    padding: 5px;
    width: 100%;
}
.relatedpoststitle {
    font-size: 19px;
    font-weight: bold;
    border-top: 3px solid #FB8227;
    color: #777;
    display: inline-block;
    padding: 5px 10px;
    width: 190px;
    float: left;
    margin: 0px -200px 0px 20px;
    transform: rotate(90deg);
    transform-origin: left top 0;
    -ms-transform: rotate(90deg);
    -ms-transform-origin:left top 0;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin:left top 0;
   font-family: Gill Sans / Gill Sans MT, sans-serif;
}
</style>

Azul: Cor dos links, adicione o código de sua cor. Pode preferir não adicionar, ele ficara com a cor dos links padrões do seu blog.
Vermelho: Largura do widget
Rosa: Tamanho das imagens da miniatura, aumente ou diminua ao seu gosto.
Laranja: Bordas ovais das imagens da miniatura, remova se desejar.
Verde: Para alterar a cor do trecho do post, altere para a cor de seu agrado.
Amarelo: Caso queira mais miniaturas, altere o valor 200px; para 400px;

Agora se você tiver um layout escuro você pode usar o modelo abaixo, basta colar ele no lugar do código anterior.

Códigos

<style>
.relatedsumposts {
    float: left;
    padding: 0px 10px;
    overflow: hidden;
    text-align: center;
  /* width and height of the related posts area */
    width: 120px;
    height: 200px;
    border-right: 1px solid #0A0A0A;
    display: inline-block;
}
.relatedsumposts:hover {
    background-color: #0A0A0A;
}
.relatedsumposts img:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
}
.relatedsumposts a {
  /* link properties */
    color: #linkcolor;
    display: inline;
    font-size: 10px;
    line-height: 1;
}
.relatedsumposts img {
  /* thumbnail properties */
    margin-top: 2px;
    height: 82px;
    padding: 5px;
    width: 82px;
    border: 1px solid #000;
background:#282828;
    -webkit-border-radius: 100px;    -moz-border-radius: 100px;    border-radius: 100px;    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow: hidden;
}
.relatedsumposts h6 {
  /* title properties */
    display: table-cell;
    height: 3em;
    margin: 5px 0 0;
    overflow: hidden;
    padding-bottom: 2px;
    vertical-align: middle;
    width: 130px;
}
.relatedsumposts p {
  /* summary properties */
    border-top: 1px solid #0A0A0A;
    border-bottom: 1px solid #0A0A0A;
    color: #summarycolor;
    font-size: 10px;
    height: 4em;
    line-height: 1;
    margin: 5px 0 0;
    overflow: hidden;
    padding: 5px 0 15px 0;
    text-align: left;
}
#relatedpostssum {
    background: #121212;
    height: 200px; /* related posts container */
    padding: 5px;
    width: 100%;
}
.relatedpoststitle {
    font-size: 19px;
    font-weight: bold;
    border-top: 3px solid #FB8227;
    color: #ccc;
    display: inline-block;
    padding: 5px 10px;
    width: 190px;
    float: left;
    margin: 0px -200px 0px 20px;
    transform: rotate(90deg);
    transform-origin: left top 0;
    -ms-transform: rotate(90deg);
    -ms-transform-origin:left top 0;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin:left top 0;
   font-family: Gill Sans / Gill Sans MT, sans-serif;
}
</style>

As explicações de sua parte é o mesmo do anterior. E por fim clique em salvar!

3.  Agora procure por :

Códigos

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

Abaixo dele adicione:

Códigos

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/> </b:if>

Para finalizar encontre esse código:

Códigos

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

E acima de </b:includable> cole o seguinte código:

Códigos

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='post-footer-line post-footer-line-4'>
       <div class='relatedpoststitle'>RELATED POSTS</div>
    <div id='relatedpostssum'>
          <script type='text/javascript'>showrelated();</script>
        </div>
        <div style='clear:both;'/>
      </div>
    </b:if>

Clique em salvar e veja o resultado no rodapé de suas postagens. Créditos: Blogger Widget Generators