Tutorial: Widget de publicações externas para aumentar tráfego

  • Autor Autor CANIBAL
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
CANIBAL

CANIBAL

Épsilon
Verificación en dos pasos activada
Verificado por Binance
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Bueno, edité este widget ya que la verdad lo necesitaba para mandar trafico a mi otro blog.
La idea es simple... Mostrar publicaciones de otro blog(tuyo o de alguna web amiga).

svsfw.png


DEMO(También responsive)

La edición no es del todo complicada, sólo reemplaza el link de la web de la cual quieres sacar las entradas.

CSS
CSS:
/*/ PUBLICACIONES X3 /*/
#publicaciones{display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.5em;margin-right:-.5em;font-size:14px;line-height:1.8}
.rel__card,.rel__image,.rel__title{background:0 0;padding:0;margin:0;border:0;outline:0;box-shadow:0 0 transparent;font:inherit;box-sizing:border-box}
.rel__card{width:100%;padding-left:.5em;padding-right:.5em;padding-bottom:1em;float:left;cursor:pointer}
/*/ IMG y EFECTO:HOVER; /*/
.rel__image{display:block;position:relative;overflow:hidden}
.rel__image img{width:100%;transform:scale(1)rotate(0);transition:.3s}
.rel__image:hover img{transform:scale(1.1)rotate(0)}
/*/ TITULO /*/
.rel__data{width:-webkit-fill-available;background-image:linear-gradient(transparent,rgba(0,0,0,0.85));padding:15px;text-align:center;color:#fff;bottom:0;transition:.2s;position:absolute}
.rel__title{font-weight:700;font-size:1em}
/*/ RESPONSIVE /*/
@media (min-width:699px){
    .rel__card{width:100%}
}
@media (min-width:700px){
    .rel__card{width:33.333333%}
}

HTML
HTML:
<div id="publicaciones">Cargando publicaciones...</div>
<div id="post"></div>

JS
JavaScript:
//<![CDATA[
var numfeed = 3;
var startfeed = 0;
var urlblog = "https://www.URL-DE-LA-2DA-WEB.com/";
var charac = 0;
var urlprevious, urlnext;
function postrecientes(adbwidget,adbgroup){
var showfeed = adbwidget.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed = showfeed.join("");
showfeed = showfeed.substring(0,adbgroup-1);
return showfeed;
}
function publicacionesrecientes(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showdoujinfeed = "";
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url.replace(/\/s72\-c\//,'/w500/')
}
showdoujinfeed += "<div class='rel__card'>";
showdoujinfeed += "<div class='read'></div>";
showdoujinfeed += "<a target='_blank' href='" + posturl + "' class='rel__image'>";
showdoujinfeed += "<img src='" + postimg + "'/>";
showdoujinfeed += "<div class='rel__data'>";
showdoujinfeed += "<h3 class='rel__title'>" + posttitle + "</h3>";
showdoujinfeed += "</div>";
showdoujinfeed += "</a>";
showdoujinfeed += "</div>";
}
document.getElementById("publicaciones").innerHTML = showdoujinfeed;
}
function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=publicacionesrecientes";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var post = document.createElement('script');
post.setAttribute('type', 'text/javascript');
post.setAttribute('src', archievefeed);
post.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(post);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function(){navigasifeed(0)}
//]]>


Listo, ahora unas recomendaciones.
1.- Te recomiendo que si eres de esos que no le gusta compartir las cosas.... encripta todo, subelo a una web de tercero y lo llamas por dl.
2.- No te recomiendo que pongas el code o el link(si es que lo subes a un tercero) en la plantilla, mejor ponlo en un widget desde DISEÑO, pero juega con los condicionales de blogger para que el widget sólo cargue en el home o en donde tu quieras.
3.-Si te gusta pero no sabes como agregarlo.. puedes mandarme un MP y te puedo ayudar sin costo alguno, me gusta ayudar.

Ojo. el css y el js fue sacado de otro lado, pero lo modifiqué para que sea lo más ligero posible.
 
Última edição:
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Hola, gracias por el aporte, voy a mirar si me sirve para alguna web para mandar trafico. Saludos.
 
Gracias por el aporte 🙂
 
Voltar
Topo