<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 con i CSS 16/11/07

Blogger tutorial

Viste le richieste riguardo ai post espandibili con la nuova versione di Blogger, ho deciso di fornire un' alternativa interamente realizzata con (DUE) regole CSS; si tratta dello stesso metodo che utilizzo nel mio blog (che ancora "gira" con la vecchia versione) e che rende possibile inserire il link "continua a leggere" se e solo se lo vogliamo inserire...

» continua

Naturalmente il metodo va adattato alle nuove features di Blogger ma, alla fine, basta capire dove inserire le due regolette ed il gioco è fatto.

Anche in questo caso l' unica difficoltà è quella di trovare le righe giuste del nostro template; entriamo quindi nel nostro Layout (o Modello) e selezioniamo la voce modifica HTML:

Step 1

Quindi spuntiamo Espandi i modelli widget e scorriamo la pagina fino alla parte che ci interessa evidenziata sotto:

step 2

Praticamente dobbiamo inserire le regole nella parte di codice che indica la visualizzazione dei singoli post; il codice da "rintracciare" è questo:

<b:if cond='data:blog.pageType == "item"'>
<p>:<data:post.body/></p>
<b:else/>
<p>:<data:post.body/></p>

Dobbiamo aggiungere qui il nostro stile, in questo modo sarà "valido" solo per la visualizzazione dei singoli post. Questo è il codice da inserire subito sotto la prima riga (semplicemente, andate a capo senza cancellare niente):

<style>
div.fullpost {display:block;}
span.espandi {display:none;}
</style>

Ecco lo screenshot del risultato:

step 3

Ora dobbiamo inserire lo stesso codice invertendo i valori; in questo modo la visualizzazione in home e negli archivi escluderà la seconda parte di post e includerà il link "continua". Subito sotto la riga <b:else/> inseriamo il seguente codice:

<style>
div.fullpost {display:none;}
span.espandi {display:block;}
</style>

Bene, abbiamo "rovesciato" i valori delle due classi (espandi e fullpost) e terminato le modifiche del template. Salviamo quindi il modello.

Passiamo adesso alla formattazione; in pratica questo passaggio sarebbe opzionale; potremmo semplicemente scrivere il nostro nuovo post e inserire le due classi "a mano" ma questo richiederebbe ogni volta la stessa operazione, lo può fare tranquillamente Blogger per noi.

Andiamo alla voce Impostazioni e quindi su Formattazione:

step 4

Scorriamo la pagina fino all' ultima voce, Modello Post:

Nell' area di testo inserite il seguente codice HTML:

<p>Testo prima parte</p><p><span class="espandi"><a href="http://nomeblog.blogspot.com/2007/06/titolopagina.html#tutto">» continua</a></span></p><div class="fullpost"%gt;<a name="tutto"></a><p>Testo seconda parte</p></div>

Avete terminato; a questo punto avrete il vostro editor pronto per l' utilizzo e formattato, se non vorrete inserire il link "continua" basterà cancellare tutto e scrivere il post normalmente.

Segnalo che dovrete inserire il link dei singoli post manualmente, questo perchè non è possibile inserire i tag di Blogger (e di nessun altro linguaggio server side); poco male, ricordate che Blogger inserisce nell' URL un trattino al posto dello spazio, non inserisce lettere accentate o punteggiatura e che il nome del file è limitato a non più di 30 caratteri (mi pare)... per sicurezza comunque controllate sempre ;)

Etichette: , , , ,

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

Ultimi commenti