<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d16734928\x26blogName\x3dSid05+weblog\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dSILVER\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttp://sid05.blogspot.com/search\x26blogLocale\x3dit_IT\x26v\x3d2\x26homepageUrl\x3dhttp://sid05.blogspot.com/\x26vt\x3d2587781031737933902', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

New Blogger: post espandibili 18/04/07

Con questo tutorial colmo una lacuna che il precedente Blogger- post espandibili aveva: non funzionava con la nuova versione di Blogger (ex beta)... in realtà con un pò di lavoro è possibile adattarlo ai nuovi tags ma ci vuole un pò di pratica e comunque, meglio essere precisi.

Grazie ad alcuni screenshot vedremo come realizzare un post espandibile con la nuova piattaforma e per farlo useremo il metodo ormai più diffuso (in attesa che Blogger aggiorni la guida): Super Peek-A-Boo Posts ci permetterà di creare i nostri sommari espandibili grazie a javascript, CSS ed una paio di tags condizionali...

» continua

La descrizione dettagliata (in inglese) dello script, realizzato da Ramani e Hans, la trovate a questo indirizzo. Dovremmo fare attenzione nell' inserire il codice al nostro modello, per questo ho voluto "fotografare" il tutto quindi cliccate sugli screenshot per ingrandirli e fate attenzione ad incollare il codice nei punti indicati (trovare il punto esatto sarà l' unica difficoltà). Ma andiamo con ordine:

1.Nel pannello di controllo di Blogger, entriamo nel nostro Modello e selezioniamo Modifica HTML ricordandoci di spuntare la voce espandi i modelli widget.

Tutorial Post Espandibili - screenshot 1

2. Ora dobbiamo cominciare ad inserire il codice, partendo con l' inclusione del javascript : copiate il seguente codice ed incollatelo subito dopo il tag <head>:

<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />
Tutorial Post Espandibili - screenshot 2

3. Prestate molta attenzione, adesso, alla zona di pagina, dobbiamo trovare <div class='post-body'>; scorrete la pagina nell' editor fino a trovare la parte indicata (fate riferimento allo screenshot successivo) e sostituitela con questo codice:

<div class='post-body' expr:id='"post-" + data:post.id'>
Tutorial Post Espandibili - screenshot 3

4. Andiamo a capo ed incolliamo nella nuova riga questo:


<b:if cond='data:blog.pageType == "item"'>
Tutorial Post Espandibili - screenshot 4

5. Andiamo a capo dopo <p><data:post.body/></p> (che lasceremo inalterato) e incolliamo il codice seguente:


il codice è qui
Tutorial Post Espandibili - screenshot 5

6. Salviamo e procediamo alla formattazione dell' editor, siamo alla fine....

7. Entriamo nelle Impostazioni e selezioniamo Formattazione:

Tutorial Post Espandibili - screenshot 6

8. Scorriamo fino in fondo la pagina ed inseriamo il seguente codice nell' ultimo campo, Modello post:

Qui il sommario <span id="fullpost"> Qui il resto del post </span>
Tutorial Post Espandibili - screenshot 7

9. Adesso vi ricordo solo che il vostro editor, nella pagina di posting, si presenterà in questo modo:


Qui il sommario <span id="fullpost"> Qui il resto del post </span>

Non c' è molto da aggiungere (anzi si, andate a capo tre volte per avere la stessa formattazione dell' ultimo screenshot): se volete utilizzare l' espansione del post, inserite un sommario nella prima riga e il resto dell' articolo nella terza; ora il post prevederà, in un nuovo paragrafo finale, il link continua a leggere... che permetterà di leggere tutto il post. Se non volete servirvene (un breve post, un video etc.) cancellate le quattro righe e scrivete il vostro post, in questo modo il link scomparirà... è tutto

Etichette: , , ,

[Sid]
del.icio.us Digg technorati Design Float http://www.wikio.it oknotizie | Permalink | |

Ultimi commenti