Mas por que usar esse Gadget de posts aleatórios?
O principal motivo para usar um desses gadgets (além de fazer seus fãs passarem mais tempo no seu site) é que eles não precisam dos Labels para funcionar.
Labels, também chamados de Tags, Categorias ou Marcadores são o meio do Blogger de juntar os seus posts em seções diferentes, como "Curiosidades", "Cinema", "Gifs", "Tecnologia", etc. O problema é que muitos Gadgets de posts relacionados usam esses Labels para mostrar mais posts, só que várias versões do Blogger, principalmente as Mobile, ou seja, para celular, não tem esses Labels, por isso os posts relacionados simplesmente não funcionam nelas, mas os posts aleatórios funcionam.
Labels, também chamados de Tags, Categorias ou Marcadores são o meio do Blogger de juntar os seus posts em seções diferentes, como "Curiosidades", "Cinema", "Gifs", "Tecnologia", etc. O problema é que muitos Gadgets de posts relacionados usam esses Labels para mostrar mais posts, só que várias versões do Blogger, principalmente as Mobile, ou seja, para celular, não tem esses Labels, por isso os posts relacionados simplesmente não funcionam nelas, mas os posts aleatórios funcionam.
Como instalar o Gadget de posts aleatórios?
Instalar eles não podia ser mais simples, vamos lá! Primeiro acesse seu painel do Blogger, depois clique no lado esquerdo em "Layout", depois em "Adicionar um Gadget", na hora de escolher o Gadget escolha o "HTML/Javascript". Agora é só você escolher um dos códigos abaixo, copiar e colar ele. É super fácil, vamos ver os códigos.
Posts aleatórios com todos os Labels (Categorias) do site
<style>
#random-posts img {
border-radius: 10px;
float: left;
margin-right: 5px;
width: 75px;
height: 75px;
background-color: #000030;
padding: 2px;
transition: all 0.2s linear 0s;
}
#random-posts img:hover {
opacity: 0.6;
}
ul#random-posts {
list-style-type: none;
padding: 0px;
}
#random-posts a {
font-size: 18px;
text-transform: none;
padding: 0px auto 5px;
color: #03b3ff;
font-weight: bold;
}
#random-posts a:hover {
text-decoration: none;
}
.random-summary {
font-size: 16px;
background: none;
padding: 5px;
margin-right: 8px;
}
#random-posts li {
margin-bottom: 10px;
border-bottom: 1px solid #EEEEEE;
padding: 4px;
}
</style>
<ul id="random-posts">
<script type="text/javaScript">
var randomposts_number = 5;
var randomposts_chars = 100;
var randomposts_details = 'no';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);
function randomposts(json) {
total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');
function getvalue() {
for (var i = 0; i < randomposts_number; i++) {
var found = false;
var rndValue = get_random();
for (var j = 0; j < randomposts_current.length; j++) {
if (randomposts_current[j] == rndValue) {
found = true;
break
}
};
if (found) {
i--
} else {
randomposts_current[i] = rndValue
}
}
};
function get_random() {
var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
return ranNum
};
</script>
<script type="text/javaScript">
function random_posts(json) {
for (var i = 0; i < randomposts_number; i++) {
var entry = json.feed.entry[i];
var randompoststitle = entry.title.$t;
if ('content' in entry) {
var randompostsnippet = entry.content.$t
} else {
if ('summary' in entry) {
var randompostsnippet = entry.summary.$t
} else {
var randompostsnippet = "";
}
};
randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
if (randompostsnippet.length < randomposts_chars) {
var randomposts_snippet = randompostsnippet
} else {
randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
var whitespace = randompostsnippet.lastIndexOf(" ");
randomposts_snippet = randompostsnippet.substring(0, whitespace) + "…";
};
for (var j = 0; j < entry.link.length; j++) {
if ('thr$total' in entry) {
var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
} else {
randomposts_commentsnum = randomposts_commentsd
}; if (entry.link[j].rel == 'alternate') {
var randompostsurl = entry.link[j].href;
var randomposts_date = entry.published.$t;
if ('media$thumbnail' in entry) {
var randompoststhumb = entry.media$thumbnail.url
} else {
randompoststhumb = "https://blogger.googleusercontent.com/img/a/AVvXsEgmZShlnzxXXjSgQ0H_I-2M4vhjseo-Kj20jIbMFtfYdntDT6FuZGtbVr3RCKA6WNtecnLlkhkm3GfvTxjefwPB1sb9DCdECAacr6IrTOa5CK6KzmzACNBCtcaMeua2Y8KKEt6a8bBv_fs4V0sNB3mE7a2cRChBXqlPOJKY4SejKwOecTZo1_1l4z3-=s172"
}
}
};
document.write('<li>');
document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');
document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
if (randomposts_details == 'yes') {
document.write('<span><div class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
};
document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')
}
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul>
Apenas posts mais novos, excluindo alguns Labels (Categorias) do site
Esse Gadget aqui só vai sugerir os posts mais novos do seu site, ignorando completamente os antigos, de uma maneira semialeatória, e você ainda pode excluir certos Labels (Categorias) se você quiser.
Ele funciona bem em sites de notícias, já que seus leitores terão acesso apenas as notícias mais novas.
Ele funciona bem em sites de notícias, já que seus leitores terão acesso apenas as notícias mais novas.
<style>
#random-posts img {
border-radius: 10px;
float: left;
margin-right: 5px;
width: 75px;
height: 75px;
background-color: #000030;
padding: 2px;
transition: all 0.2s linear 0s;
}
#random-posts img:hover {
opacity: 0.6;
}
ul#random-posts {
list-style-type: none;
padding: 0px;
}
#random-posts a {
font-size: 18px;
text-transform: none;
padding: 0px auto 5px;
color: #03b3ff;
font-weight: bold;
}
#random-posts a:hover {
text-decoration: none;
}
.random-summary {
font-size: 16px;
background: none;
padding: 5px;
margin-right: 8px;
}
#random-posts li {
margin-bottom: 10px;
border-bottom: 1px solid #EEEEEE;
padding: 4px;
}
</style>
<ul id="random-posts">
<script type="text/javaScript">
var randomposts_number = 5;
var randomposts_chars = 100;
var randomposts_details = 'no';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
function getRandomIndex(existingIndices, max) {
var randomIndex = Math.floor(Math.random() * max);
while (existingIndices.indexOf(randomIndex) !== -1) {
randomIndex = Math.floor(Math.random() * max);
}
return randomIndex;
}
function randomposts(json) {
var validPosts = [];
var excludedLabels = ['Label1', 'Label2', 'Label3']; // Add the labels that need to be excluded
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
var excludePost = false;
for (var j = 0; j < entry.category.length; j++) {
if (excludedLabels.indexOf(entry.category[j].term) !== -1) {
excludePost = true;
break;
}
}
if (!excludePost) {
validPosts.push(entry);
}
}
var existingIndices = [];
for (var i = 0; i < randomposts_number; i++) {
var randomIndex = getRandomIndex(existingIndices, validPosts.length);
existingIndices.push(randomIndex);
var entry = validPosts[randomIndex];
var randompoststitle = entry.title.$t;
if ('content' in entry) {
var randompostsnippet = entry.content.$t;
} else {
if ('summary' in entry) {
var randompostsnippet = entry.summary.$t;
} else {
var randompostsnippet = "";
}
}
randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, '');
if (randompostsnippet.length < randomposts_chars) {
var randomposts_snippet = randompostsnippet;
} else {
randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
var whitespace = randompostsnippet.lastIndexOf(' ');
randomposts_snippet = randompostsnippet.substring(0, whitespace) + '…';
}
for (var j = 0; j < entry.link.length; j++) {
if ('thr$total' in entry) {
var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments;
} else {
randomposts_commentsnum = randomposts_commentsd;
}
if (entry.link[j].rel == 'alternate') {
var randompostsurl = entry.link[j].href;
var randomposts_date = entry.published.$t;
if ('media$thumbnail' in entry) {
var randompoststhumb = entry.media$thumbnail.url;
} else {
randompoststhumb = "https://blogger.googleusercontent.com/img/a/AVvXsEgmZShlnzxXXjSgQ0H_I-2M4vhjseo-Kj20jIbMFtfYdntDT6FuZGtbVr3RCKA6WNtecnLlkhkm3GfvTxjefwPB1sb9DCdECAacr6IrTOa5CK6KzmzACNBCtcaMeua2Y8KKEt6a8bBv_fs4V0sNB3mE7a2cRChBXqlPOJKY4SejKwOecTZo1_1l4z3-=s172";
}
}
}
document.write('<li>');
document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');
document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
if (randomposts_details == 'yes') {
document.write('<span><div class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum + '</div></span>');
}
document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>');
}
}
</script>
<script type="text/javaScript">
document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=999&orderby=published&callback=randomposts"><\/script>');
</script>
</ul>
Posts aleatórios mas excluindo alguns Labels (Categorias) do site
<style>
#random-posts img {
border-radius: 10px;
float: left;
margin-right: 5px;
width: 75px;
height: 75px;
background-color: #000030;
padding: 2px;
transition: all 0.2s linear 0s;
}
#random-posts img:hover {
opacity: 0.6;
}
ul#random-posts {
list-style-type: none;
padding: 0px;
}
#random-posts a {
font-size: 18px;
text-transform: none;
padding: 0px auto 5px;
color: #03b3ff;
font-weight: bold;
}
#random-posts a:hover {
text-decoration: none;
}
.random-summary {
font-size: 16px;
background: none;
padding: 5px;
margin-right: 8px;
}
#random-posts li {
margin-bottom: 10px;
border-bottom: 1px solid #EEEEEE;
padding: 4px;
overflow: auto; /* added clearfix property */
clear: both; /* added clear property */
}
</style>
<ul id="random-posts"></ul>
<script type="text/javascript">
var blockedCategories = ["Label1", "Label2", "Label3"];
var numberOfPosts = 5;
var posts = [];
var loadedPosts = 0;
function isPostBlocked(post) {
var categories = post.category || [];
for (var i = 0; i < categories.length; i++) {
if (blockedCategories.indexOf(categories[i].term) !== -1) {
return true;
}
}
return false;
}
function addPost(post) {
var postTitle = post.title.$t;
var postUrl = '#';
for (var i = 0; i < post.link.length; i++) {
if (post.link[i].rel === 'alternate') {
postUrl = post.link[i].href;
break;
}
}
var postThumb = 'https://img.youtube.com/vi/bdBU7d-3tLo/mqdefault.jpg';
if ('media$thumbnail' in post) {
postThumb = post.media$thumbnail.url;
}
var postSnippet = ('content' in post) ? post.content.$t.replace(/(<([^>]+)>)/ig, '').substr(0, 100) : post.summary.$t.replace(/(<([^>]+)>)/ig, '').substr(0, 100);
var lastChar = postSnippet.charAt(postSnippet.length - 1);
if (lastChar !== '.' && lastChar !== '?' && lastChar !== '!') {
var lastIndexOfSpace = postSnippet.lastIndexOf(' ');
if (lastIndexOfSpace !== -1) {
postSnippet = postSnippet.substring(0, lastIndexOfSpace) + '...';
}
}
var postHtml = '<li>';
postHtml += '<a href="' + postUrl + '"><img src="' + postThumb + '" alt="' + postTitle + '"/></a>';
postHtml += '<div><a href="' + postUrl + '">' + postTitle + '</a></div>';
postHtml += '<br/><div class="random-summary">' + postSnippet + '</div></li>';
document.getElementById('random-posts').insertAdjacentHTML('beforeend', postHtml);
}
function fetchPosts(startIndex) {
var url = '/feeds/posts/default?alt=json-in-script&start-index=' + startIndex + '&max-results=1';
var x = document.createElement('script');
x.src = url + '&callback=addPosts';
document.getElementsByTagName('head')[0].appendChild(x);
}
function addPosts(result) {
var post = result.feed.entry[0];
if (!isPostBlocked(post)) {
posts.push(post);
loadedPosts++;
if (loadedPosts < numberOfPosts) {
var randomIndex = Math.floor(Math.random() * (result.feed.openSearch$totalResults.$t - loadedPosts) + 1);
fetchPosts(randomIndex);
}
} else {
var randomIndex = Math.floor(Math.random() * result.feed.openSearch$totalResults.$t) + 1;
fetchPosts(randomIndex);
}
if (loadedPosts === numberOfPosts) {
posts.forEach(addPost);
}
}
var randomIndex = Math.floor(Math.random() * (900 - numberOfPosts)) + 1;
fetchPosts(randomIndex);
</script>
Customizando o seu Gadget de posts aleatórios
Agora que você escolheu qual versão você quer usar nós vamos te ensinar a customizar o Gadget para que ele combine com o seu site, é fácil, abaixo nós vamos te mostrar partes do código e entre parênteses vamos te falar o que esse código faz, aí você pode mudar tudo o que você quiser.
#random-posts img {
border-radius: 10px; (muda o formato quadrado das imagens, mude para 50px se quiser imagens redondas)
float: left; (onde a imagem fica no Gadget, mude o "left" para "right" se quiser a imagem na direita)
margin-right: 5px; (muda a distância entre a imagem e os textos)
width: 75px; (muda a largura da imagem)
height: 75px; (muda a altura da imagem)
background-color: #000030; (muda a cor da borda da imagem)
padding: 2px; (muda o tamanho da borda da imagem)
transition: all 0.2s linear 0s;
}
#random-posts a {
font-size: 18px; (muda o tamanho das letras dos títulos)
text-transform: none; (muda as letras maiúsculas e minúsculas do título, no lugar do "none" use "uppercase" para todas as letras ficarem em maiúsculas, "lowercase" para todas ficarem em minúsculas e "capitalize" para a primeira letra de todas as palavras ficarem em maiúsculas e o resto em minúsculas)
padding: 0px auto 5px; (muda o preenchimento no topo e na parte de baixo do título)
color: #03b3ff; (muda a cor do título)
font-weight: bold; (muda se as palavras são em negrito, que é o "bold", ou não, que nesse caso seria "normal")
}
.random-summary {
font-size: 16px; (muda o tamanho da letra da descrição dos posts)
background: none; (muda a cor do fundo das letras, se quiser mudar a cor use um código de cor do tipo #000000 no lugar do "none")
padding: 5px; (muda a distância entre a descrição e o resto do gadget)
margin-right: 8px; (muda o tamanho da margem a direita, quanto maior o número menor é o espaço para as letras)
}
#random-posts li {
margin-bottom: 10px; (muda a distância acima e abaixo de um post para o outro)
border-bottom: 1px solid #EEEEEE; (muda a cor e o tamanho da linha que separa os posts)
padding: 4px; (muda o tamanho da borda dos posts)
overflow: auto; /* added clearfix property */
clear: both; /* added clear property */
}
var excludedLabels = ['Label1', 'Label2', 'Label3']; // Add the labels that need to be excluded (substitua os nomes em negrito pelos nomes das categorias do seu site que você não quer mostrar no Gadget)
var blockedCategories = ["Label1", "Label2", "Label3"]; (substitua os nomes em negrito pelos nomes das categorias do seu site que você não quer mostrar no Gadget)
E pronto! Agora é só salvar e seu Gadget estará completo. Obrigado pelo seu tempo e esperamos que o tutorial tenha te ajudado um pouco.
Se quiser ver mais matérias divertidas, curiosas e até bizarras venha conhecer a nossa página oficial em RWF agora mesmo!
Se quiser ver mais matérias divertidas, curiosas e até bizarras venha conhecer a nossa página oficial em RWF agora mesmo!
Nenhum comentário:
Postar um comentário