Come mostrare in una pagina statica di Blogger una tabella con un elenco di tutti i post pubblicati su tre colonne con titoli, data e etichette e link agli articoli.
Continuo nell'opera di ripristino dei widget non più funzionanti a seguito dell'abbandono del servizio di hosting da parte di Google Drive. Il metodo utilizzato è quello di ripristinare i gadget inserendo il codice dei file esterni direttamente nel modello, negli elementi HTML/Javascript o nell'Editor del Post o della Pagina.
Il widget a cui ni riferisco in questo post è quello di una Sitemap dedicata ai lettori invece che ai motori di ricerca. Si tratta di mostrare un elenco di tutti i post pubblicati fino quel momento che sarà aggiornato automaticamente tutte le volte che se ne pubblicheranno altri.
Avere un widget che mostri ai lettori tutti i contenuti che abbiamo messo online è uno dei metodi migliori per catturare la loro attenzione e quindi farli rimanere il più possibile nel nostro sito. La permanenza dei navigatori su un sito è uno dei 200 fattori di ranking più importante per Google e gli altri motori.
L'aspetto della mappa del sito sarà il seguente
con la possibilità di modificarne i codici dei colori, la famiglia dei caratteri (Georgia), la dimensione delle tre colonne, l'altezza massima della tabella (1300 pixel) che comunque potrà essere visualizzata tutta con lo scorrimento del cursore posto sulla destra.
Per la sua installazione si va su Pagine -> Nuova Pagina e si digita il titolo della stessa. Si clicca sul bottone HTML che si trova accanto a Scrivi e si incolla questo codice
<div id="bp_toc" style="max-height:1300px;overflow:scroll;overflow-x:auto;">
</div>
<script type='text/javascript'>
//<![CDATA[
/*=== Script per creare una mappa del sito su Blogger
---------------------------------------------------
Autore: Beautiful Beta - beautifulbeta.blogspot.com
Tradotto in italiano da: Idee per Computer ed Internet
URL: www.ideepercomputeredinternet.com
--------------------------------------------------- ===*/
var postTitle = new Array(); // array of posttitles
var postUrl = new Array(); // array of posturls
var postDate = new Array(); // array of post publish dates
var postSum = new Array(); // array of post summaries
var postLabels = new Array(); // array of post labels
// global variables
var sortBy = "datenewest"; // default value for sorting ToC
var tocLoaded = false; // true if feed is read and ToC can be displayed
var numChars = 250; // number of characters in post summary
var postFilter = ''; // default filter value
var tocdiv = document.getElementById("bp_toc"); //the toc container
var totalEntires =0; //Entries grabbed till now
var totalPosts =0; //Total number of posts in the blog.
// main callback function
function loadtoc(json) {
function getPostData() {
// this functions reads all postdata from the json-feed and stores it in arrays
if ("entry" in json.feed) {
var numEntries = json.feed.entry.length;
totalEntires = totalEntires + numEntries;
totalPosts=json.feed.openSearch$totalResults.$t
if(totalPosts>totalEntires)
{
var nextjsoncall = document.createElement('script');
nextjsoncall.type = 'text/javascript';
startindex=totalEntires+1;
nextjsoncall.setAttribute("src", "/feeds/posts/summary?start-index=" + startindex + "&max-results=500&alt=json-in-script&callback=loadtoc");
tocdiv.appendChild(nextjsoncall);
}
// main loop gets all the entries from the feed
for (var i = 0; i < numEntries; i++) {
// get the entry from the feed
var entry = json.feed.entry[i];
// get the posttitle from the entry
var posttitle = entry.title.$t;
// get the post date from the entry
var postdate = entry.published.$t.substring(0,10);
// get the post url from the entry
var posturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
// get the post contents from the entry
// strip all html-characters, and reduce it to a summary
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
// strip off all html-tags
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
// reduce postcontent to numchar characters, and then cut it off at the last whole word
if (postcontent.length > numChars) {
postcontent = postcontent.substring(0,numChars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd) + '...';
}
// get the post labels from the entry
var pll = '';
if ("category" in entry) {
for (var k = 0; k < entry.category.length; k++) {
pll += '<a href="javascript:filterPosts(\'' + entry.category[k].term + '\');" title="Click here to select all posts with label \'' + entry.category[k].term + '\'">' + entry.category[k].term + '</a>, ';
}
var l = pll.lastIndexOf(',');
if (l != -1) { pll = pll.substring(0,l); }
}
// add the post data to the arrays
postTitle.push(posttitle);
postDate.push(postdate);
postUrl.push(posturl);
postSum.push(postcontent);
postLabels.push(pll);
}
}
if(totalEntires==totalPosts) {tocLoaded=true;showToc();}
} // end of getPostData
// start of showtoc function body
// get the number of entries that are in the feed
// numEntries = json.feed.entry.length;
// get the postdata from the feed
getPostData();
// sort the arrays
sortPosts(sortBy);
tocLoaded = true;
}
// filter and sort functions
function filterPosts(filter) {
// This function changes the filter
// and displays the filtered list of posts
// document.getElementById("bp_toc").scrollTop = document.getElementById("bp_toc").offsetTop;;
postFilter = filter;
displayToc(postFilter);
} // end filterPosts
function allPosts() {
// This function resets the filter
// and displays all posts
postFilter = '';
displayToc(postFilter);
} // end allPosts
function sortPosts(sortBy) {
// This function is a simple bubble-sort routine
// that sorts the posts
function swapPosts(x,y) {
// Swaps 2 ToC-entries by swapping all array-elements
var temp = postTitle[x];
postTitle[x] = postTitle[y];
postTitle[y] = temp;
var temp = postDate[x];
postDate[x] = postDate[y];
postDate[y] = temp;
var temp = postUrl[x];
postUrl[x] = postUrl[y];
postUrl[y] = temp;
var temp = postSum[x];
postSum[x] = postSum[y];
postSum[y] = temp;
var temp = postLabels[x];
postLabels[x] = postLabels[y];
postLabels[y] = temp;
} // end swapPosts
for (var i=0; i < postTitle.length-1; i++) {
for (var j=i+1; j<postTitle.length; j++) {
if (sortBy == "titleasc") { if (postTitle[i] > postTitle[j]) { swapPosts(i,j); } }
if (sortBy == "titledesc") { if (postTitle[i] < postTitle[j]) { swapPosts(i,j); } }
if (sortBy == "dateoldest") { if (postDate[i] > postDate[j]) { swapPosts(i,j); } }
if (sortBy == "datenewest") { if (postDate[i] < postDate[j]) { swapPosts(i,j); } }
}
}
} // end sortPosts
// displaying the toc
function displayToc(filter) {
// this function creates a three-column table and adds it to the screen
var numDisplayed = 0;
var tocTable = '';
var tocHead1 = 'Titolo del Post';
var tocTool1 = 'Clicca per ordinare per titolo';
var tocHead2 = 'Data';
var tocTool2 = 'Clicca per ordinare per data';
var tocHead3 = 'Etichette';
var tocTool3 = '';
if (sortBy == "titleasc") {
tocTool1 += ' (scendi)';
tocTool2 += ' (nuovi)';
}
if (sortBy == "titledesc") {
tocTool1 += ' (scendi)';
tocTool2 += ' (prima nuovi post)';
}
if (sortBy == "dateoldest") {
tocTool1 += ' (sali)';
tocTool2 += ' (prima nuovi post)';
}
if (sortBy == "datenewest") {
tocTool1 += ' (sali)';
tocTool2 += ' (prima vecchi post)';
}
if (postFilter != '') {
tocTool3 = 'Clicca per vedere tutti i post';
}
tocTable += '<table>';
tocTable += '<tr>';
tocTable += '<td class="toc-header-col1">';
tocTable += '<a href="javascript:toggleTitleSort();" title="' + tocTool1 + '">' + tocHead1 + '</a>';
tocTable += '</td>';
tocTable += '<td class="toc-header-col2">';
tocTable += '<a href="javascript:toggleDateSort();" title="' + tocTool2 + '">' + tocHead2 + '</a>';
tocTable += '</td>';
tocTable += '<td class="toc-header-col3">';
tocTable += '<a href="javascript:allPosts();" title="' + tocTool3 + '">' + tocHead3 + '</a>';
tocTable += '</td>';
tocTable += '</tr>';
for (var i = 0; i < postTitle.length; i++) {
if (filter == '') {
tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr>';
numDisplayed++;
} else {
z = postLabels[i].lastIndexOf(filter);
if ( z!= -1) {
tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr>';
numDisplayed++;
}
}
}
tocTable += '</table>';
if (numDisplayed == postTitle.length) {
var tocNote = '<span class="toc-note">Elenco di tutti i ' + postTitle.length + ' posts<br/></span>'; }
else {
var tocNote = '<span class="toc-note">Displaying ' + numDisplayed + ' posts labeled \'';
tocNote += postFilter + '\' of '+ postTitle.length + ' posts total<br/></span>';
}
tocdiv.innerHTML = tocNote + tocTable;
} // end of displayToc
function toggleTitleSort() {
if (sortBy == "titleasc") { sortBy = "titledesc"; }
else { sortBy = "titleasc"; }
sortPosts(sortBy);
displayToc(postFilter);
} // end toggleTitleSort
function toggleDateSort() {
if (sortBy == "datenewest") { sortBy = "dateoldest"; }
else { sortBy = "datenewest"; }
sortPosts(sortBy);
displayToc(postFilter);
} // end toggleTitleSort
function showToc() {
if (tocLoaded) {
displayToc(postFilter);
var toclink = document.getElementById("toclink");
}
else { alert("Just wait... TOC is loading"); }
}
function hideToc() {
var tocdiv = document.getElementById("toc");
tocdiv.innerHTML = '';
var toclink = document.getElementById("toclink");
toclink.innerHTML = '<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle('+"'toc-result','blind');"+'">» Show Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZPAKre7CMcvhJKMGkFOxoH_HvMoOkfIvRxlTgbkhfXbtAuuwtESj6ShsYijcDK2spY43NHB_qUzJHeweva7uJ82mLChoYHcDAOZB_ZQyY9M5GABxZ-brWDRyLOLYHQJL4k9HdCDujhoi9/s18/new.gif"/>';
}
//]]>
</script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>
<style type='text/css'>
#bp_toc {background:#F95B5B;color:#420202;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#fedede;font-family:'Georgia';font-weight:bold;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#fff;width:250px;}
.toc-header-col2 {padding:10px;background-color:#fff;width:75px;}
.toc-header-col3 {padding:10px;background-color:#fff;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#f60909;font-family:'Georgia';font-weight:bold;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fff;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#555;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#f60909;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fdfdfd;}
</style>
</div>
<script type='text/javascript'>
//<![CDATA[
/*=== Script per creare una mappa del sito su Blogger
---------------------------------------------------
Autore: Beautiful Beta - beautifulbeta.blogspot.com
Tradotto in italiano da: Idee per Computer ed Internet
URL: www.ideepercomputeredinternet.com
--------------------------------------------------- ===*/
var postTitle = new Array(); // array of posttitles
var postUrl = new Array(); // array of posturls
var postDate = new Array(); // array of post publish dates
var postSum = new Array(); // array of post summaries
var postLabels = new Array(); // array of post labels
// global variables
var sortBy = "datenewest"; // default value for sorting ToC
var tocLoaded = false; // true if feed is read and ToC can be displayed
var numChars = 250; // number of characters in post summary
var postFilter = ''; // default filter value
var tocdiv = document.getElementById("bp_toc"); //the toc container
var totalEntires =0; //Entries grabbed till now
var totalPosts =0; //Total number of posts in the blog.
// main callback function
function loadtoc(json) {
function getPostData() {
// this functions reads all postdata from the json-feed and stores it in arrays
if ("entry" in json.feed) {
var numEntries = json.feed.entry.length;
totalEntires = totalEntires + numEntries;
totalPosts=json.feed.openSearch$totalResults.$t
if(totalPosts>totalEntires)
{
var nextjsoncall = document.createElement('script');
nextjsoncall.type = 'text/javascript';
startindex=totalEntires+1;
nextjsoncall.setAttribute("src", "/feeds/posts/summary?start-index=" + startindex + "&max-results=500&alt=json-in-script&callback=loadtoc");
tocdiv.appendChild(nextjsoncall);
}
// main loop gets all the entries from the feed
for (var i = 0; i < numEntries; i++) {
// get the entry from the feed
var entry = json.feed.entry[i];
// get the posttitle from the entry
var posttitle = entry.title.$t;
// get the post date from the entry
var postdate = entry.published.$t.substring(0,10);
// get the post url from the entry
var posturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
// get the post contents from the entry
// strip all html-characters, and reduce it to a summary
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
// strip off all html-tags
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
// reduce postcontent to numchar characters, and then cut it off at the last whole word
if (postcontent.length > numChars) {
postcontent = postcontent.substring(0,numChars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd) + '...';
}
// get the post labels from the entry
var pll = '';
if ("category" in entry) {
for (var k = 0; k < entry.category.length; k++) {
pll += '<a href="javascript:filterPosts(\'' + entry.category[k].term + '\');" title="Click here to select all posts with label \'' + entry.category[k].term + '\'">' + entry.category[k].term + '</a>, ';
}
var l = pll.lastIndexOf(',');
if (l != -1) { pll = pll.substring(0,l); }
}
// add the post data to the arrays
postTitle.push(posttitle);
postDate.push(postdate);
postUrl.push(posturl);
postSum.push(postcontent);
postLabels.push(pll);
}
}
if(totalEntires==totalPosts) {tocLoaded=true;showToc();}
} // end of getPostData
// start of showtoc function body
// get the number of entries that are in the feed
// numEntries = json.feed.entry.length;
// get the postdata from the feed
getPostData();
// sort the arrays
sortPosts(sortBy);
tocLoaded = true;
}
// filter and sort functions
function filterPosts(filter) {
// This function changes the filter
// and displays the filtered list of posts
// document.getElementById("bp_toc").scrollTop = document.getElementById("bp_toc").offsetTop;;
postFilter = filter;
displayToc(postFilter);
} // end filterPosts
function allPosts() {
// This function resets the filter
// and displays all posts
postFilter = '';
displayToc(postFilter);
} // end allPosts
function sortPosts(sortBy) {
// This function is a simple bubble-sort routine
// that sorts the posts
function swapPosts(x,y) {
// Swaps 2 ToC-entries by swapping all array-elements
var temp = postTitle[x];
postTitle[x] = postTitle[y];
postTitle[y] = temp;
var temp = postDate[x];
postDate[x] = postDate[y];
postDate[y] = temp;
var temp = postUrl[x];
postUrl[x] = postUrl[y];
postUrl[y] = temp;
var temp = postSum[x];
postSum[x] = postSum[y];
postSum[y] = temp;
var temp = postLabels[x];
postLabels[x] = postLabels[y];
postLabels[y] = temp;
} // end swapPosts
for (var i=0; i < postTitle.length-1; i++) {
for (var j=i+1; j<postTitle.length; j++) {
if (sortBy == "titleasc") { if (postTitle[i] > postTitle[j]) { swapPosts(i,j); } }
if (sortBy == "titledesc") { if (postTitle[i] < postTitle[j]) { swapPosts(i,j); } }
if (sortBy == "dateoldest") { if (postDate[i] > postDate[j]) { swapPosts(i,j); } }
if (sortBy == "datenewest") { if (postDate[i] < postDate[j]) { swapPosts(i,j); } }
}
}
} // end sortPosts
// displaying the toc
function displayToc(filter) {
// this function creates a three-column table and adds it to the screen
var numDisplayed = 0;
var tocTable = '';
var tocHead1 = 'Titolo del Post';
var tocTool1 = 'Clicca per ordinare per titolo';
var tocHead2 = 'Data';
var tocTool2 = 'Clicca per ordinare per data';
var tocHead3 = 'Etichette';
var tocTool3 = '';
if (sortBy == "titleasc") {
tocTool1 += ' (scendi)';
tocTool2 += ' (nuovi)';
}
if (sortBy == "titledesc") {
tocTool1 += ' (scendi)';
tocTool2 += ' (prima nuovi post)';
}
if (sortBy == "dateoldest") {
tocTool1 += ' (sali)';
tocTool2 += ' (prima nuovi post)';
}
if (sortBy == "datenewest") {
tocTool1 += ' (sali)';
tocTool2 += ' (prima vecchi post)';
}
if (postFilter != '') {
tocTool3 = 'Clicca per vedere tutti i post';
}
tocTable += '<table>';
tocTable += '<tr>';
tocTable += '<td class="toc-header-col1">';
tocTable += '<a href="javascript:toggleTitleSort();" title="' + tocTool1 + '">' + tocHead1 + '</a>';
tocTable += '</td>';
tocTable += '<td class="toc-header-col2">';
tocTable += '<a href="javascript:toggleDateSort();" title="' + tocTool2 + '">' + tocHead2 + '</a>';
tocTable += '</td>';
tocTable += '<td class="toc-header-col3">';
tocTable += '<a href="javascript:allPosts();" title="' + tocTool3 + '">' + tocHead3 + '</a>';
tocTable += '</td>';
tocTable += '</tr>';
for (var i = 0; i < postTitle.length; i++) {
if (filter == '') {
tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr>';
numDisplayed++;
} else {
z = postLabels[i].lastIndexOf(filter);
if ( z!= -1) {
tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr>';
numDisplayed++;
}
}
}
tocTable += '</table>';
if (numDisplayed == postTitle.length) {
var tocNote = '<span class="toc-note">Elenco di tutti i ' + postTitle.length + ' posts<br/></span>'; }
else {
var tocNote = '<span class="toc-note">Displaying ' + numDisplayed + ' posts labeled \'';
tocNote += postFilter + '\' of '+ postTitle.length + ' posts total<br/></span>';
}
tocdiv.innerHTML = tocNote + tocTable;
} // end of displayToc
function toggleTitleSort() {
if (sortBy == "titleasc") { sortBy = "titledesc"; }
else { sortBy = "titleasc"; }
sortPosts(sortBy);
displayToc(postFilter);
} // end toggleTitleSort
function toggleDateSort() {
if (sortBy == "datenewest") { sortBy = "dateoldest"; }
else { sortBy = "datenewest"; }
sortPosts(sortBy);
displayToc(postFilter);
} // end toggleTitleSort
function showToc() {
if (tocLoaded) {
displayToc(postFilter);
var toclink = document.getElementById("toclink");
}
else { alert("Just wait... TOC is loading"); }
}
function hideToc() {
var tocdiv = document.getElementById("toc");
tocdiv.innerHTML = '';
var toclink = document.getElementById("toclink");
toclink.innerHTML = '<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle('+"'toc-result','blind');"+'">» Show Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZPAKre7CMcvhJKMGkFOxoH_HvMoOkfIvRxlTgbkhfXbtAuuwtESj6ShsYijcDK2spY43NHB_qUzJHeweva7uJ82mLChoYHcDAOZB_ZQyY9M5GABxZ-brWDRyLOLYHQJL4k9HdCDujhoi9/s18/new.gif"/>';
}
//]]>
</script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>
<style type='text/css'>
#bp_toc {background:#F95B5B;color:#420202;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#fedede;font-family:'Georgia';font-weight:bold;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#fff;width:250px;}
.toc-header-col2 {padding:10px;background-color:#fff;width:75px;}
.toc-header-col3 {padding:10px;background-color:#fff;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#f60909;font-family:'Georgia';font-weight:bold;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fff;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#555;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#f60909;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fdfdfd;}
</style>
quindi si va su Pubblica senza tornare su Scrivi (importante!!!). Per aver più spazio in larghezza potrebbe essere utile nascondere la sidebar solo dalla pagina statica in cui viene pubblicata la Mappa del sito così come è stato fatto nella Demo postata in un blog di test
Per nascondere la sidebar in modo da avere più spazio per la tabella della Mappa del sito si può aggiungere questo codice subito sopra a quello precedente
<style type="text/css">
#sidebar-left-1, #sidebar-right-1, #sidebar-right-2-1, sidebar-right-2-2 {
display: none;
visibility: hidden;
}
#main {
width: 920px; /* Larghezza della pagina statica */
}
</style>
#sidebar-left-1, #sidebar-right-1, #sidebar-right-2-1, sidebar-right-2-2 {
display: none;
visibility: hidden;
}
#main {
width: 920px; /* Larghezza della pagina statica */
}
</style>
dove la larghezza della pagina proposta in 920 pixel può essere modificata secondo le esigenze. Gli ID colorati di viola sono quelli delle sezioni che si visualizzano in Layout.
PERSONALIZZAZIONI
Oltre ai codici dei colori e alla famiglia di font si possono personalizzare anche le larghezze delle singole colonne. Le larghezze proposte sono 250px, 75px e 125px. I nuovi articoli avranno accanto l'icona NEW che è presente nel codice con il suo URL new.gif colorato di viola. Concludo ricordando che si può cliccare su Titolo del post per un ordine alfabetico dei titoli dei post e cliccare su Data per un ordine di anzianità di pubblicazione. Nella prima colonna si può scegliere l'ordine inverso vale a dire partire dalla A fino alla Z oppure partire dalla Z fino alla A mentre nella seconda colonna con un click si possono mostrare prima i post recenti o quelli più vecchi.
Ho il solito problema che avevo evidenziato nel post correlato di qualche anno fa: incollo il codice, faccio l'anteprima e vedo i posts, salvo e quando vado sulla pagina mi ritrovo in home invece che nella nuova pagina creata
RispondiEliminaMi chiedo perché tu faccia L'Anteprima :) Pubblica poi vai su Pagine e clicca su Visualizza sotto alla pagina appena pubblicata. Anche se ho sentito dire di questo bug che comunque credevo fosse stato risolto
Elimina@#
Fatto. Non va più sulla home ma va sulla pagina giusta. Stavolta però non si vedono i posts.
RispondiEliminaForse hai pubblicato da Scrivi e non da HTML. Cancella il codice e reincollalo pubblicando da HTML e vedrai che funziona. Ricordati di fare sempre così nelle modifiche
Elimina@#
No non funiona: mi compare solo il nome della pagina e la riga rossa
RispondiEliminaPerfetto Ernesto e grazie ;)Per gli interessati comunico che il widget è funzionante anche sulle "Visualizzazioni Dinamiche"
RispondiEliminaBellissimo, tra l'altro con i colori del mio blog :-)
RispondiEliminaCiaoo eidentemnete non sarò forse l'unica ma ho incollato il codice su Nuova Pagina, html e subito pubblica ma non lo vedo da nessuna parte.
RispondiEliminaNon vorrei che il problema di vedere sia dovuto alla presenza nella header di tutte le icone che portano ai vari argomenti del blog. Se cosi gentile da suggerirmi qualcosa....grazie e buona fine settimana.
PS. Mi sono accorta ora che anche a me le miniature ultimi post non funzionano. So che hai dato la soluzione al problema ma non trovo la pagina me la ridai qui gentilmente. Grazie e scusa.
EliminaIl codice funziona perfettamente. Probabilmente lo hai copiato male essendo molto lungo. Il widget degli ultimi post con miniature sta qui
Eliminahttp://www.ideepercomputeredinternet.com/2016/09/recent-post-widget-with-thumbnails-blogger.html
@#
Grazie quello semplice delle miniature okk. Per l'altro ci riprovo.
EliminaIn qualche sito dà problemi. L'ho copiato in due blog: in uno funziona e in uno no.
RispondiEliminaPuò darsi che dipenda dalla presenza di widget simili che utilizzano lo stesso URL dei feed come il gadget degli Ultimi Post. In questi casi si può provare a disinstallare il widget che si presume dia noia per poi reinstallarlo di nuovo ovviamente se abbiamo a disposizione il codice necessario
Elimina@#
Ho provato a rimuovere sia gli ultimi post che gli articoli casuali ma senza successo. Peccato perchè il gadget era molto bello.
RispondiEliminaGent.mo Ernesto,
RispondiEliminasto vedendo che nel tuo sito hai delle utilità che compensano il deficit di Blogspot.
Così ho inserito anche il codice per la site map visitatori, però ho lo stesso problema con l'indirizzo, come con l'altro widget, quello dei post delle etichette.
La pagina va bene e si vede benissimo, però con questo strano indirizzo: http://incontraregesu.blogspot.it/p/totalentires-var-nextjsoncall-document.html
E' normale questo indirizzo o posso sistemarlo?
Ho fatto una pagina statica e l'ho collegata con un widget laterale; come titolo della pagina ho messo "Site Map".
Grazie per il tuo gentile servizio e aiuto.
Saluti.
Il problema è lo stesso. Hai pubblicato la pagina senza titolo e l'URL è stato generato automaticamente dalla prima riga di codice del contenuto
Elimina@#
Gent.mo Ernesto,
Eliminagrazie per la risposta.
Ma dopo l'esperienza del primo problema, ho fatto attenzione a inserire il titolo nella pagina...
Forse debbo inserire il titolo da qualche altra parte?
Che dici: se scrivo "Site Map" prima di "totalentires-var-nextjsoncall-document" nel codice, prende quello? O è ormai troppo tardi?
EliminaTroppo tardi
Elimina@#
RISOLTO
RispondiEliminaHo fatto una nuova pagina http://incontraregesu.blogspot.it/p/sitemap.html
Un'ultima domanda: quel /p/ che compare nell'indirizzo starebbe a significare "PAGINA"?
Grazie per tutto.
Saluti
È la struttura di tutte le pagine di Blogger dominio/p/nomepagina.html
Elimina@#
molte grazie per questo codice; avrei necessità di fare una variazione, se possibile e cioè abbassare l'altezza della riga ove è scritto "ELENCO DI TUTTI I nnn POSTS".
RispondiEliminaDove posso intervenire?
grazie ancora, Valter Bruno
ho notato adesso che forse modificare questa riga può creare qualche problema quando si esegue una ricerca, ad esempio, per Etichette e la descrizione cambia di contenuto, utilizzando lo spazio disponibile. Forse è meglio non toccare troppo; magari agire sulla dimensione del carattere :)
RispondiEliminaValter Bruno
Grazie per il valido suggerimento, funziona alla grande. Volevo solo chiederti se è possibile allungare la tabella a piacimento dato che mostra determinate dimensioni e poi scorre. La mia pagina di base è molto più lunga...
RispondiEliminaNelle prime righe del codice sostituisci height:1300px con un valore maggiore fino a trovare l'altezza giusta. Ricordati di modificare sempre da HTML senza tornare su Scrivi altrimenti reincolla tutto il codice
RispondiElimina@#
Grazie, risolto!
EliminaPerdonami Ernesto volevo un altro suggerimento. Mi piacerebbe aggiungere del testo tra il titolo "Elenco di tutti i post" e la tabella in modo da spiegare la possibilità di modulare i risultati per titolo, per date ecc. Ho visto che passando il mouse esce un'etichetta ma non comparendo alcun elemento grafico vistoso sarà difficile che un utente individui a prima occhiata questa possibilità, pertanto volevo specificare con del testo. Credi sia possibile?
RispondiEliminaLo puoi aggiungere prescindere dalla tabella. Nella pagina statica in Scrivi inserisci il testo che ritieni opportuno per spiegare ai lettori il suo utilizzo quindi subito dopo incolli il codice andando su HTML
Elimina@#
Molte grazie!
EliminaCiao, posso chiederti se esiste un modo per troncare l'anteprima del post all'ultima parola senza spezzare le parole dello snippet con il conteggio delle lettere?
RispondiEliminaQuesto è lo script del mio tema in cui mi piacerebbe implementare la funzione sopra:
// Summary Grid Posts
$('.sample-post').each(function() {
var re = /<\S[^>]*>/g;
var postcontent = $(this).find('.ct-sample-post').html().replace(re,"");
if(postcontent.length > 190){
postcontent = ''+postcontent.substring(0,190)+'...';
}
$(this).html(''+ postcontent +'');
});
______________________________________________
// reduce postcontent to numchar characters, and then cut it off at the last whole word
if (postcontent.length > numChars) {
postcontent = postcontent.substring(0,numChars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd) + '...';
}
Non so a quale widget ti riferisci. Però dallo script mi pare che i caratteri che vengono mostrati siano 190. Quello che puoi fare è di modificare questo numero. Altro non ti so dire mi spiace
Elimina@#