Come inserire un forum in una pagina statica di Blogger.

Come inserire un forum di Nabble in una pagina statica di Blogger.

Questo articolo è il seguito degli articoli


 Ho creato il forum di Idee per Computer ed Internet e
 Come creare un forum embeddabile con Nabble 

quindi prima di continuare nella lettura è bene leggerseli con la dovuta attenzione. E' opportuno anche dare uno sguardo a come cambiare lo stile delle pagine statiche per avere un'idea più precisa di quello che ci apprestiamo a fare. Dopo aver creato il forum con Nabble e aver copiato il codice in un file di testo, è giunto il momento di creare una pagina statica. Utilizzerò il blog "Photos and Videos" che adesso non uso più. Si va su Personalizza > Post > Modifica Pagine > Nuova pagina che si chiamerà Forum.


Si clicca su Pubblica pagina lasciando il corpo della pagina in bianco. Delle tre opzioni che ci vengono presentate, si può scegliere quella che ci pare, personalmente ho selezionato la terza (Nessun Gadget) che dice di inserire manualmente il collegamento in Homepage. Cliccando su Visualizza pagina possiamo vedere come si presenta una pagina statica vuota e ne acquisiremo l'indirizzo.


Saranno visibili alcune cose che vogliamo che restino come l'header e il menù ma saranno presenti anche altre che dobbiamo eliminare (beninteso solo da questa pagina!)






Passiamo a dichiarare uno stile per la pagina in cui vogliamo inserire il forum. Andiamo su Layout > Modifica HTML e salviamo il modello completo. Mai come in questo caso sarà necessario farlo perché operiamo in zone delicate del template. Cerchiamo la seguente riga

</head>

e, immediatamente sopra, incolliamo il codice

<!-- STILE FORUM INIZIO -->
<b:if cond='data:blog.url == "http://photosvideosandmore.blogspot.com/p/forum_18.html"'>
<style type='text/css'>
#sidebar-wrapper{display:none;}
#main-wrapper{width: 100%;}
#footer-wrapper {display:none;}
</style>
</b:if>
<!-- STILE FORUM FINE -->

in cui al posto dell'URL in rosso inserite quello della pagina statica del vostro blog. Salvate il modello. In questo modo non si vede più la sidebar e il footer del blog. Potete variare la percentuale di larghezza a secondo delle vostre esigenze (100%). Nel modello preso in esame ho inserito un valore di 130%. Come vedete dallo screenshot ci sono alcuni elementi che devono essere tolti come la pubblicità e un widget degli ultimi articoli in orizzontale con miniature.


Nel caso della pubblicità ci si reca nel modello, si individua il codice relativo e si inseriscono le seguenti righe

<b:if cond='data:blog.url != "http://photosvideosandmore.blogspot.com/p/forum_18.html"'>  

prima della pubblicità da escludere e

</b:if>

alla fine del codice. Al posto dell'URL della pagina statica evidenziato di rosso va inserito quello della vostra pagina, non mi starò a ripetere, sarà sempre così fino alla fine dell'articolo. Ecco lo screenshot relativo all'inserimento. Ovviamente dopo va salvato il modello



La pubblicità è quindi scomparsa ma è rimasto il widget degli ultimi articoli con le miniature. Occorre fare una operazione simile ma in questo caso si tratta di un elemento inserito mediante Aggiungi un gadget > HTML/Javascript. Clicchiamo su Modifica nell'elemento in Layout o, se abbiamo Firefox andiamo nella icona del cacciavite e della chiave inglese incrociate per la rapida apertura dell'elemento e diamogli un titolo fittizio


e clicchiamo su Salva. Andiamo adesso su Layout > Modifica HTML e clicchiamo su F3 o Ctrl+F per cercare il titolo che abbiamo inserito, in questo caso "miniature…". Il browser lo troverà in un attimo

I widget hanno tutti la stessa struttura quindi, dopo la riga

<b:includable id='main'>

incolliamo l'altra riga

<b:if cond='data:blog.url != "http://photosvideosandmore.blogspot.com/p/forum_18.html"'>

e, prima della riga,

</b:includable>

incolliamo la solita stringa che determina la fine della condizione

</b:if>

Avremo una cosa simile a questo screenshot



Dopo aver salvato il modello questo widget sarà scomparso dalla pagina del forum. Questi due procedimenti possono essere utilizzati per togliere tutto quello che non ci serve nella pagina statica. Dopo sarà necessario togliere nuovamente il titolo al widget per questioni estetiche.


In taluni casi fare una pulizia completa è obbiettivamente difficile. E' giunto il momento di inserire il codice del Forum che abbiamo preso da Nabble. Andiamo su Layout > Elementi pagina > Aggiungi un gadget >HTML/Javascript e incolliamo il codice dandogli il titolo di Forum





Clicchiamo su Salva e con il drag & drop posizioniamolo sopra l'area del post




Salviamo nuovamente e vediamo come appare il  forum. Nel caso volessimo inserire della pubblicità, questa dovrà essere visibile solo nel forum e dovremo procedere in questo modo.

1. Si va su Adsense e si ottiene il codice per l'annuncio o gli annunci che vogliamo inserire
2. In Layout > Elementi pagina > HTML/Javascript incolliamo detto codice dandogli il titolo provvisorio di "annunci pubblicitari"
3. Andiamo su Layout > Modifica HTML e mediante F3 o Ctrl+F troviamo il widget che abbiamo inserito
4. Nelle stesse posizioni di prima incolliamo due righe di codice che saranno leggermente diverse dalle precedenti. Quelle appena viste eliminavano la visualizzazione di quell'elemento dalla pagina mentre queste fanno vedere il widget solo nel forum

Le righe da incollare sono

<b:includable id='main'>
<b:if cond='data:blog.url == "http://photosvideosandmore.blogspot.com/p/forum_18.html"'>
……      ……..         …….
</b:if>
</b:includable>

dove le righe da incollare sono in grassetto.


Esiste ancora un problema aperto che non sono riuscito a risolvere. In fondo alla pagina del Forum sarà visibile il Titolo della pagina; se qualcuno più bravo di me riesce a trovare un meccanismo per toglierlo, lo ringrazio. Comunque dal punto di vista estetico non danneggia più di tanto.