Você certamente teria algumas histórias ou artigos em seu blog que gostaria de destacar para seus leitores. Pode ser qualquer coisa, uma oferta barata, lançamento de um novo produto e muito mais. Este não é um novo recurso para blogs, mais comumente conhecido como “postagens em destaque” ou “conteúdo em destaque” que é exibido principalmente na página inicial no topo da página inicial do blog. Se você é um usuário do Blogger e viu esses modelos premium do Blogger que exibem postagens em destaque de várias maneiras, você chegou ao lugar certo. Hoje, neste artigo, mostraremos como exibir postagens em destaque no blogger.
O que são Postagens em Destaque?
Você provavelmente já viu muitos blogs que exibem postagens em destaque em sua página inicial, dando destaque ao conteúdo e aproximando-o dos usuários. Esta é uma técnica para trazer mais atenção a um tema quente, oferta de negócio barato ou lançamento de um novo produto. Esse recurso é muito usado em modelos premium do blogger, mas hoje estaremos adicionando conteúdo de postagens em destaque no blogger que pode ser aplicado a qualquer modelo gratuito ou pago também.
Exibir postagens em destaque no Blogger:
Todas as postagens em destaque funcionam por meio de Marcadores e sempre que uma postagem é marcada com um marcador específico, ela mostra as postagens na área de destaque do blog. A primeira coisa que você precisa fazer é ir ao Blogger >> Modelo >> Editar HTML >> e adicionar o seguinte código acima da tag de pele.
.label_with_thumbs {
float: esquerda;
preenchimento: 0px;
}
.label_with_thumbs li {
float: left;
margem inferior: 20px;
borda inferior: 1px sólido #d2d2d2;
fundo de preenchimento: 20px;
}
.label_with_thumbs img {
float: left;
margem direita: 10px;
borda: 1px sólido #ddd;
}
.label_with_thumbs h2 {
tamanho da fonte: 16px;
margem: 0px;
intensidade da fonte: Negrito;
}
.label_with_thumbs br {
margin: 0px;
preenchimento: 0px;
}
Agora você precisa adicionar o script que buscará as postagens em destaque dos marcadores. Adicione o seguinte trecho de código acima da tag </head> . Como ele funciona com jQuery, lembre-se de que se o JavaScript estiver desativado ou não for suposto por um navegador, este script deixará de funcionar.
<script>
//<![CDATA[
função labelthumbs(w) {
document.write('<ul class="label_with_thumbs">');
for (var v = 0; v < numposts; v++) {
var f = w.feed.entry[v];
var g = f.título.$t;
var z;
if (v == w.feed.entry.length) {
break
}
for (var r = 0; r < f.link.length; r++) {
if (f.link[r].rel == "respostas" && f.link[r].type == "texto/html") {
var n = f.link[r].title;
var o = f.link[r].href
}
if (f.link[r].rel == "alternativo") {
z = f.
break
}
}
var j;
try {
j = f.media$thumbnail.url
} catch (q) {
s = f.content.$t;
a = s.indexOf("<img");
b = s.indexOf('src="', a);
c = s.indexOf('"', b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
j = d
} else {
j = "http://3. bp.blogspot.com/-DiSuxig0X9k/TZYzqpks56I/AAAAAAAAAWM/sN1GbkQvDUI/s1600/no_image.jpg"
var m = x.substring(0, 4);
var l = x.substring(5, 7);
var t = x.substring(8, 10);
var h = new Array();
h[1] = "Janeiro";
h[2] = "fevereiro";
h[3] = "Mar";
h[4] = "Abr";
h[5] = "Maio";
h[6] = "Jun";
h[7] = "Jul";
h[8] = "agosto";
h[9] = "Set";
h[10] = "Outubro";
h[11] = "Novembro";
h[12] = "Dez";
document.write('<li class="clearfix">');
if (showpostthumbnails == true) {
document.write('<a class="picturelabela" href="' + z + '" target ="_top"><img class="label_thumb" src="' + j + '"/></a>' )
}
document.write('<strong><h2><a class="titlelabel" href="' + z + '" target ="_top">' + g + "</a></h2></ forte><br>");
if ("conteúdo" em f) {
var y = f.content.$t
} else {
if ("resumo" em f) {
var y = f.summary.$t
} else {
var y = ""
}
}
var p = /<\S[^>]*>/g;
y = y.substituir(p, "");
if (showpostsummary == true) {
if (y.length < numchars) {
document.write("");
document.write(y);
document.write("")
} else {
document.write("");
y = y.substring(0, numchars);
var e = y.lastIndexOf(" ");
y = y.substring(0, e);
document.write(y + "...");
document.write("")
}
}
var A = "";
var u = 0;
document.write("<br>");
if (showpostdate == true) {
A = A + h[parseInt(l, 10)] + "-" + t + " - " + m;
if (showcommentnum == true) {
if (u == 1) {
A = A + " | "
}
if (n == "1 Comentários") {
n = "1 Comentário"
}
if (n == "0 Comentários" ) ") {
n = "Sem comentários"
}
n = '<a href="' + o + '" target ="_top">' + n + "</a>";
A = A + n;
u = 1
}
if (displaymore == true) {
if (u == 1) {
A = A + " | "
}
A = A + ' <a href="' + z + '" class="url" target ="_top">Mais »</a>';
vc = 1
}
document.write(A);
document.write("</li>");
if (displayseparator == true) {
if (v != (numposts - 1)) {
document.write("")
}
}
}
document.write("</ul>")
};
//]]>
</script>
Nesta fase, tecnicamente configuramos tudo, a única coisa que resta é adicionar o código que exibirá as postagens em destaque. Agora, basta colar o seguinte trecho de código onde quiser exibir suas postagens em destaque em seu blog, na barra lateral ou no corpo da postagem.
<div class="MBL-Featureposts"><script type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script><script type="text/javascript" src="/feeds/posts/default/-/Featured?orderby=updated&alt=json-in-script&callback=labelthumbs"></script></div>
No entanto, não se esqueça de substituir " Destaque " pelo rótulo de sua escolha (que você usou ao escrever um post). Lembre-se: A ortografia deve estar correta ou não funcionaria, mesmo cuidando das letras das classes alta e baixa.
Esperamos que este tutorial possa ter ajudado você a aprender como adicionar postagens em destaque no blogger, compartilhe seus pensamentos sobre o tutorial nos comentários abaixo. Caso você seja excluído em alguma etapa ou veja erros, sinta-se à vontade para perguntar.
Tags:
INTERNET