Tutti i post del sito con immagini per Blogger

Buongiorno gente,
Per chi di voi utilizza un sito, ma soprattutto per tutti quelli che utilizzano come piattaforma Blogger ho da proporre due script molto semplici da utilizzare.
Con entrambi riuscirete a far visualizzare ai vostri visitatori tutti i post del vostro sito dal più recente, con tanto di immagine e una minima descrizione.
Nell'articolo vi posto il codice per il loro utilizzo e potete visualizzarne i risultati nelle pagine che vi propongo

Ti potrebbe interessare Come i vari Browser visualizzano il tuo sito
Oppure potrebbe interessarti Come far girare le App di Android su PC

Tutti i post dal più recente - Metodo 1
Il primo script che vi propongo lo potete utilizzare sia nella vostra Homepage che secondo un'etichetta particolare impressa nel vostro sito.
Così potete utilizzarlo sia per un HomePage sia per una qualsiasi pagina statica
Questo è il codice:

<style>
#contenitore{border:1px solid #666;width:100%;margin:0 auto}
#el_box{margin:0px}
.elementi{border:1px solid #ccc;margin:5px 0;padding:5px;height:105px}
.elementi img{background:#aaa;padding:4px;float:left;height:100px;margin-right:8px;width:100px}
.elementi h6,.elementi h6 a{font-size:16px!important;margin:0;color:#111}
.elementi:hover{background-color:#afe5f3;}
.elementi p{font:12px Georgia; text-align:justify;color:#555;line-height:14px;margin:5px 0}
#caricamento{color:#888;font-family:Georgia;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#262626 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEalZ634roxyqQ2p_iu2vaG3oo3hMANZzcCRMDAOAc6KgEDFF6RQhPp_NmPkzYY80mRyOH1-TY_BYZ_d9ysXRnQeI93jrg7WR0QQKaboO5bbzSszNs4UNhLou71Pl-L_a_1qLiQwMcFg4/s300-no/ajax_loader.gif) no-repeat 50% 50%;height:950px;border:1px solid #afe5f3;}
#navigazione{border:1px solid #d4d4d4;color:#bbb;font-family:Georgia;font-size:12px;text-align:center;margin:0px}
#navigazione:hover{background-color:#d4d4d4;}
#navigazione a{color:#262626!important;font-family:Georgia!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#navigazione span{padding:5px 10px}
#navigazione .next{float:right}
#navigazione .previous{float:left}
#navigazione .home{text-align:center}
#navigazione a:hover,#navigazione span.noactived{color:transparant!important}
</style>
<script type="text/javascript">
//<![CDATA[
var numfeed = 15;
var startfeed = 0;
var urlblog = "http://www.segretipc.com/";
var characnumber = 200;
var urlprevious, urlnext;
function maskolisfeed(johny,banget){
var showfeed = johny.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,banget-1);
return showfeed;
}
function mostrapost(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
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 ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEMIMSBSdZ2-P_FmloYGMwfd7hZjYMaI-h1zcUu-KtSMgXHHGk4RVHC44mbdpbDZ6mVb9BUP32FzQkEK5S-BPhJBYh2BUXSrQmXUmH1D6rQ0LD1Vqad8ycX2_NRp2uyjJvTIREkg8I88g/s300-no/no-immagini.jpg";
}
showblogfeed += "<div class='elementi'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6>
<a href='" + posturl + "'>" + posttitle + "</a></h6>
";
showblogfeed += "<p>
" + maskolisfeed(postcontent,characnumber) + "...</p>
";
showblogfeed += "</div>
";
}
document.getElementById("el_box").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:feed_nav(-1);' class='previous'> Post precedenti</a>";
} else {
showblogfeed += "<span class='noactived previous'> Post precedenti</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:feed_nav(1);' class='next'>Post successivi </a>";
} else {
showblogfeed += "<span class='noactived next'>Post successivi </span>";
}
showblogfeed += "<a href='javascript:feed_nav(0);' class='home'>Inizio</a>";
document.getElementById("navigazione").innerHTML = showblogfeed;
}
function feed_nav(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=mostrapost";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("el_box").innerHTML = "<div id='caricamento'>
</div>
";
document.getElementById("navigazione").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default/-/divertente"+ parameter;
var el_box = document.createElement('script');
el_box.setAttribute('type', 'text/javascript');
el_box.setAttribute('src', archievefeed);
el_box.setAttribute('id', 'Ip_etichette');
document.getElementsByTagName('head')[0].appendChild(el_box);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("Ip_etichette");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { feed_nav(0); }
//]]>
</script>
<br />
<div id="el_box">
</div>
<div id="navigazione">
</div>

Nella prima stringa rossa di questo codice potete modificare la grandezza del riquadro dell'immagine presente per ogni post.

Con var numfeed = 15 potete modificare il numero di post da visualizzare
var urlblog = "http://www.segretipc.com/" potete modificare l'indirizzo del vostro sito
var characnumber = 200; potete inserire il numero di caratteri da visualizzare per la descrizione

Dove leggete la parola divertente in rosso, potete modificare quel parametro con un'altra etichetta qualsiasi del vostro sito

Potrete navigare all'interno di tutti i post del sito mediante i tasti in basso "Precedente" e "Successivo"

Il risultato lo potete vedere all'interno di questa pagina

Tutti i post dal più recente - Metodo 2

Il secondo metodo permette un caricamento più veloce e uno script molto più leggero, a discapito però del numero di post che permette da visualizzare

Questo è il codice:

<div id='bp_recent'></div>
<script style='text/javascript' src='https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/articoli-recenti-miniature.js'></script>
<script style='text/javascript'>
var numberOfPosts = 10;
var showPostDate = true;
var showSummary = true;
var summaryLength = 350;
var titleLength = 300;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = false;
var imgDim = 110;
var imgFloat = 'left';
var myMargin = 6;
var mediaThumbsOnly = true;
var showReadMore = true;
var readMore = 'Continua..';
</script>
<script src='http://www.segretipc.com/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

Per modificare il numero di post da visualizzare dovete modificare entrambi i valori dove trovate 10 e devono combaciare
var summaryLength = 350; potete modificare il valore per il numero di caratteri nella descrizione
var showThumbs = true; possiamo decidere di far visualizzare l'immagine con true o false
var imgFloat = 'left'; l'immagine viene allineata a sinistra oppure a destra con right
var readMore = 'Continua..'; Modificate la scritta per il continuo della lettura
Al posto di www.segretipc.com potete inserire il vostro sito
Un esempio di questo script è nella HomePage

Autore del codice Ideepercomputeredinternet

Condividi :

Tweet

✚

Articoli Correlati