Oi! Há algum tempo postei um tutorial sobre como deixar as postagens em miniatura na página inicial do blog. Alguns leitores perguntaram se havia como inserir o link de "leia mais" ou read more nessas miniaturas ou se havia como deixar só com a imagem e tals; dando uma olhada no código das miniaturas e em um outro para leia mais que postei aqui, consegui obter dois resultados, os quais compartilho com vocês.
Antes você deve configurar duas coisas: a primeira é deixar um número par (4,6,8...) de postagens a serem mostradas, o que você define em Layout - Postagens ou Configurações - Postagens, comentários e compartilhamentos. A segunda coisa é ajustar a largura do seu blog e da sidebar em Tema - Personalizar - Ajustar larguras. O modelo no qual testei é o Simples do Blogger.
Agora, no html do seu template, procure por: <data:post.body/>
Você irá encontrá-lo duas vezes.
O primeiro, apague e substitua pelo código:
<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <div expr:id='"summary" + data:post.id' style='font-size:12px; text-align:justify;'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</script> <span class='rmlink'><a expr:href='data:post.url'>Leia mais...</a></span> </b:if></b:if>
Quando encontrar o segundo, cole o mesmo código acima antes dele, assim:
❤-------------------------------------------------------------❤
Deixando acima do segundo <data:post-body/> deu certo aqui; anteriormente eu havia substituído os dois pelo código e tinha dado certo, mas depois, o conteúdo da postagem ao ser aberto sumia o.o' Tente das duas formas para ver qual é melhor, se preferir. Continuando...
Procure por </head> e acima dele cole um dos dois códigos a seguir, dependendo de como quer que fique:
<script type='text/javascript'>
summary_txt = 0;
img_thumb_width = 200;/* largura da imagem */
</script>
<script type='text/javascript'>
//<![CDATA[
// Script original de Anhvo, modificado por ciudadblogger.com
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1e9MB4bNRuUPUgZiDWjK7r0gUpdHwwSaU8bMFFq-GpK13kg_RRdUvVYua4MEh3TOB457QaLS1DgXqAUrdW9SwQiwfudi1mVtvcQkzaf-a5p3IHaGwFVaMDZl_JyOv2_RdtSDEFZBN89rn/s1600/tumblr_ltkjxqjTnO1qgye6qo1_400_large.jpg " width="'+img_thumb_width+'px" /></a></span>';
summ = summary_txt;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></a></span>';
summ = summary_txt;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.jump-link {
display: none;
}
.post {
float: left;
height: 305px; /* altura do quadradinho */
width: 200px; /* largura do quadradinho*/
margin: 6px; /* Distancia entre os quadradinhos */
padding: 0;
overflow: hidden;
}
.post-body {
padding:0;
margin:0;
}
.post h3 {
padding: 0;
text-align: center;
border-bottom: 1px dashed pink;
}
.post h3 a, .post h3 a:visited {
color: pink; /* cor dos titulos dos posts */
margin: 5px 5px 0 5px;
text-align: center;
font-size: 25px;
font-family: 'marck script', cursive;
}
h3.post-title, .post-header {
margin: 0;
background:#fff;
}
.post img {
height: 225px; /* altura da imagem */
float: left !important;
border: none;
padding:0;
margin:0;
}
.post-outer, .inline-ad {
padding-top: 0px !important;
}
.post-outer {
padding-bottom: 0px;
}
.rmlink a, .rmlink a:visited, .rmlink a:hover{
font-size: 20px;
font-family: 'great vibes', cursive;
color: white;
border-right: 9px solid pink;
padding: 60px;
text-decoration: none;
background: pink;
width: 300px;
}
h2.date-header { /* ocultar data apenas na pagina inicial*/
display: none;
visibility: hidden;
}
#blog-pager {
clear: both;
}
</style>
</b:if>
</b:if>
<script type='text/javascript'>
summary_txt = 100;
img_thumb_width = 200;/* largura da imagem */
</script>
<script type='text/javascript'>
//<![CDATA[
// Script original de Anhvo, modificado por ciudadblogger.com
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1e9MB4bNRuUPUgZiDWjK7r0gUpdHwwSaU8bMFFq-GpK13kg_RRdUvVYua4MEh3TOB457QaLS1DgXqAUrdW9SwQiwfudi1mVtvcQkzaf-a5p3IHaGwFVaMDZl_JyOv2_RdtSDEFZBN89rn/s1600/tumblr_ltkjxqjTnO1qgye6qo1_400_large.jpg " width="'+img_thumb_width+'px" /></a></span>';
summ = summary_txt;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></a></span>';
summ = summary_txt;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.jump-link {
display: none;
}
.post {
float: left;
height: 305px; /* altura do quadradinho */
width: 200px; /* largura do quadradinho*/
margin: 6px; /* Distancia entre os quadradinhos */
padding: 0;
overflow: hidden;
}
.post-body {
padding:0;
margin:0;
}
.post h3 {
padding: 0;
text-align: center;
border-bottom: 1px dashed pink;
}
.post h3 a, .post h3 a:visited {
color: pink; /* cor dos titulos dos posts */
margin: 5px 5px 0 5px;
text-align: center;
font-size: 25px;
font-family: 'marck script', cursive;
}
h3.post-title, .post-header {
margin: 0;
background:#fff;
}
.post img {
height: 180px; /* altura da imagem */
float: left !important;
border: none;
padding:0;
margin:0;
}
.post-outer, .inline-ad {
padding-top: 0px !important;
}
.post-outer {
padding-bottom: 0px;
}
.rmlink a, .rmlink a:visited, .rmlink a:hover{
font-size: 20px;
font-family: 'great vibes', cursive;
color: pink;
padding: 60px;
text-decoration: none;
}
h2.date-header { /* ocultar data apenas na pagina inicial*/
display: none;
visibility: hidden;
}
#blog-pager {
clear: both;
}
</style>
</b:if>
</b:if>
Ao editar preste atenção aos valores desse código, dependendo do que atribuir em algum lugar, tem que mudar em outro para ficar mais organizado. Algumas coisas já deixei no código para que servem, há muitas coisas que podem ser personalizadas, por exemplo:
summary_txt = 100; - se refere ao número de letrinhas que aparece na miniatura.
.post h3 - título das postagens; dá para mudar cor, fonte, tamanho, acrescentar efeito, plano de fundo...
height: 180px; ou height: 225px; - altura da imagem para que ocupe todo o espaço da miniatura, parte dele...você define o valor. width se refere à largura.
.rmlink a, .rmlink a:visited, .rmlink a:hover - é o "Leia mais", você pode mudar que nem os títulos das postagens, cores, tamanho, fontes... Procure por "Leia mais" no código lá do início e mude o texto para qualquer outro de sua preferência, como continue, read more, open...
Visualize e salve seu template se deu tudo ok. Espero que seja útil :3
Imagem do início da postagem: Weheartit.com
Faz anos que procuro este tutorial, todos ficam desalinhado.
ResponderExcluirTestei no blog teste ficou perfeito.
Parabéns sucesso para você!
Obrigada valeu!