All post site in Homepage with Images for Blogger

Hello World,
For those of you using a site, but especially for those who use it as a platform from Blogger I propose two simple scripts to use.
With both manage to render your visitors all most recent posts of your site, complete with a picture and a small description.
In the article I post the code for their use, and you can view the results in the pages that I propose

All the latest post - Method 1
The first script that I propose you can use in your homepage or that according to a particular label imprinted in your site.
So you can use it to a HomePage both for any static page
This is the code:

<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/AVvXsEgpykd_CmAM5ZldA1srv1cMg8-PjxvrBPLqU_6FFAOPpB1TY1PvqyMtOy7MeW93AViSvKLf0QeHQR86PJnUEhftBu03NTkuhKRyVl5Oz8Tqyn1FAB4Ok_eUNGgfiMhpyAO4hVw5KpFsdkQ/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://secrets-pc.blogspot.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/AVvXsEi8jwPI_EbnjMa_KFUHT3N6UEXmV20nYv4ds85LhYHcYZcEWl0JTFx1HKnv3aTbA9RRKkTo7M2_xdUnUFiDL-NaSZsqmyRp-ron-omqjRKgGQ-Aw3Qg4pi1SGJHiE0Hw3i8wOiCTA-_tho/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/-/funny"+ 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>

In the first red string to this code, you can change the size of the image well present for each post.

With var numfeed = 15 you can change the number of posts to display
var urlblog = "http://secrets-pc.blogspot.com/" you can change the address of your website
var characnumber = 200; you can enter the number of characters to display for the description

Where's the word funny in red, you can change that parameter with another label any of your site
You can navigate through all the posts of the site using the buttons at the bottom "Previous" and "Next"

The result you can see in this page

All the latest post - Method 2
The second method allows a faster loading and a script much lighter, but at the expense of the number of posts that allows to display
This is the code:

<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://secrets-pc.blogspot.com/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

To change the number of posts to display both values have to change where you find 10 and must match
var summaryLength = 350; you can change the value for the number of characters in the description
var showThumbs = true; We can decide to display the image with true or false
var imgFloat = 'left';The image is aligned to the left or to the right
var readMore = 'Continua..'; Change the text for the continuous reading
Instead of www.secretspc.com you can place your site
An example of this script is in HomePage