Inserire in una posizione fissa e personalizzare il bottone del Mi Piace di Facebook.

Dopo aver illustrato come implementare un widget nel blog in una posizione fissa, cioè che non muta quando si scorre la pagina, vediamo come applicare questo metodo ai bottoni di Facebook. Il Like Botton di Facebook è disponibile in tre versioni tutte quante con la possibilità di implementare anche il bottone Invia. Nel seguente screenshot sono visibili la versione standard, quella box count e quella a pulsante con contatore

 

Per il codice di ciascuno di essi vi rimando al post sulla personalizzazione del Mi Piace. Ricordo brevemente che per il pulsante standard si utilizza il codice layout=standard, per il pulsante con il contatore layout=button_count e per il box con contatore layout=box_count. Se non si inserisce nessun parametro viene visualizzato il pulsante standard.

Bottone flottante per condividere i post in tutti i social network e aggregatori.

L'idea di questo articolo mi è stata data da un lettore che ha un blog di cui purtroppo non posso inserire il link, che sarebbe stato doveroso, perché tratta di temi che violano il copyright. Il concetto è quello di inserire nel sito un bottone flottante che si possa posizionare ovunque e con il quale condividere tutte le pagine che si vuole in una vera e propria miriade di social network. A questo proposito viene sfruttato il servizio AddThis che è leader nel settore della condivisione e di cui ho già parlato in questo post e e di cui ho già usato le API per la realizzazione di quest'altro widget.

Il codice da inserire è il seguente in Design > Aggiungi un gadget > HTML/Javascript (senza titolo)

<div style="position:fixed;top:150px;left:30px;" title="Condividi sui social network" alt="bottone share condividi"><a href="http://www.addthis.com/bookmark.php" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNEd66udZdV5FDR0-clc59FPjcIJVnLiHhmBdBGHH_Ve08jLC3pP8GWmDXau1WsigMd8wmQ9kR5ub9TXyCVYKY8VWabKHDOL60tPw6SZi8WHuAcfG3xqcYYZXzOCeLxct2DuhdnJc6Pkc/" /></a></div>

In cui possono essere modificate le distanze dalla parte alta e dalla parte sinistra del layout, l'immagine dell'icona e la scritta che si visualizza quando si punta con il mouse. In questo caso i pixel di distanza si riferiscono alla parte alta (top) e alla sinistra (left) ma si può optare anche per quella bassa (bottom) e quella destra (right). Vi posto quattro opzioni di possibili immagini da poter utilizzare per questo pulsante

Come usare la pagine statiche in Blogger, come inserirne i widget anche nei modelli personalizzati e come mostrare o nascondere elementi nelle pagine.

Da poco più di 24 ore è possibile anche in Blogger creare delle pagine statiche, adesso vediamo in modo più approfondito come sia possibile usarle e personalizzarle. Intanto nel precedente articolo preso dall'eccitazione della notizia ho scritto che nelle pagine non si potevano inserire commenti. E' inesatto visto che questa opzione è di default ma può essere cambiata andando su Modifica Pagine e selezionando la pagina da modificare

In fondo all'editor, se si clicca su Opzioni post possiamo scegliere tra

1. Consentire i commenti
2. Non consentire i commenti ma mostrare quelli eventuali che fossero già stati postati
3. Non consentire i commenti e nascondere quelli già fatti

Come vedete ci sono tutte le altre opzioni presenti nell'analoga sezione dei post con l'eccezione della data e dell'orario. In effetti le pagine statiche trascendono la dimensione temporale e non verranno ovviamente neppure mostrate nei feed.

Abbiamo già visto nel precedente post che ho dedicato all'argomento che si può scegliere di

1. Visualizzare la pagine in orizzontale in homepage
2. Visualizzarle nella sidebar
3. Creare dei collegamenti manuali

Se si ha un modello personalizzato di Blogger, cosa comunissima, può essere che il widget orizzontale oppure quello da inserire nella sidebar non venga visualizzato.  Quello orizzontale ha un aspetto simile a questo

e può essere posizionato a piacere con il drag & drop. Nel caso non si visualizzasse perché il nostro modello è particolare bisogna procedere in questo modo. Bisogna assicurarsi che non si sia aggiunto e, se si è fatto occorre rimuoverlo; successivamente si va su Layout > Modifica HTML e si salva il modello completo. Dopo aver messo la spunta a "espandi modelli widget" si cerca questo codice

<div id='crosscol-wrapper' style='text-align:center'>
         <b:section class='crosscol' id='crosscol' showaddelement='no'/>
   </div>

E' sufficiente sostituire il 'no' con 'yes'. Nel caso in cui questo codice non sia presente bisogna incollare il codice seguente

<div id='crosscol-wrapper' style='text-align:center'>
         <b:section class='crosscol' id='crosscol' showaddelement='yes'/>
       </div>

nel punto in cui si vuole che compaia il widget. Nel caso delle schede basta incollarlo subito sotto alla riga

<div id='content-wrapper'>

Le pagine servono appunto per inserire contenuti che sono indipendenti dal momento in cui sono stati scritti e che hanno una struttura in qualche modo diversa da quella dei post. Alcuni esempi alla rinfusa che mi vengono in mente possono essere: about me, modulo dei contatti, norme della privacy, disclaimer, siti amici, gli altri miei blog, inserimento di una chat, inserimento di una videochat, inserimento di uno streaming audio-video, inserimento di una mappa, pagina di benvenuto, istruzioni per l'uso del sito, ecc

Le pagine di default non contengono tutto quello che contengono i post, ho appena fatto l'esempio dei commenti, potrei fare anche quello della pubblicità che senza modifiche non è presente. Sono invece presenti di default l'header del blog, la sidebar o le sidebar.

Ho pubblicato un articolo con un compendio di come visualizzare un widget solo in homepage, nei singoli post, o viceversa come non visualizzarlo. A tutte le casistiche inserite dobbiamo inserire anche quella relative alle pagine. Ecco i codici relativi

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>       per mostrare un widget solo in una pagina statica

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>         per non mostrarlo in una pagina statica

Il metodo si basa sull'individuazione del widget e sull'aggiunta di una delle due righe dopo <b:includable id='main'>  e dell'altra riga

</b:if>

prima di </b:includable>.

In Blogger in Draft sono finalmente arrivate le pagine statiche.

Dopo il Read More ecco un'altra grande novità per gli utenti di Blogger. Il sito ufficiale Blogger-in-Draft ha reso noto che sono finalmente arrivate le pagine statiche! Per il momento non è possibile crearle andando sull'editor di Blogger, neppure nell'editor aggiornato ma è necessario entrare in Blogger in Draft, selezionare il blog in cui vogliamo aggiungerle e andare su Layout > Post > Modifica pagine > Nuova pagina

Si potranno creare fino a 10 pagine per ogni blog. L'editor della pagina è simile a quello degli articoli


Naturalmente non è presente il read more, al posto di Titolo post c'è Titolo pagina e al posto di Pubblica post abbiamo un bel Pubblica pagina. Si possono utilizzare tutti gli strumenti di formattazione e tutti i bottoni per inserire immagini, video, link, ecc esattamente come per un articolo. Dopo aver cliccato su Pubblica pagina ci verrà chiesto se vogliamo collegare la pagina alla homepage attraverso una sidebar, attraverso schede blog o mediante collegamento manuale

Con la sidebar si creerà un widget che mostrerà tutte le pagine che sono state create da posizionare in una colonna del blog, con schede blog si visualizzerà una sorta di menù orizzontale con i collegamenti allle pagine create, ovviamente con la terza opzione dovremo fare i collegamenti manualmente, per esempio inserendo l'url della pagina in un menù. Dopo un visualizza pagina (invece del visualizza post) potremo vedere la prima pagina del nostro blog

Sia nel caso della sidebar che in quello delle schede blog sarà possibile modificarne la posizione con il mouse. Con le schede blog di default viene creata una sorta di barra di navigazione. Cliccando su Modifica si potranno modificare l'ordine delle pagine inserite e saranno possibili altre personalizzazioni come quella di aggiungere automaticamente ogni pagina creata o l'altra di modificare l'aspetto del widget ed inserirlo nella sidebar.

L'indirizzo delle pagine create non conterrà la data come succedeva per i post ma sarà del tipo
 http://nomeblog.blogspot.com/p/nomepagina.html
Nelle pagine potranno essere disabilitati i commenti come del resto avviene anche per i post. La prima pagina che ho creato è stata quella per il disclaimer e la privacy. In seguito sarà opportuno crearne un'altra per inserire il form dei contatti.
Ripeto che questa nuova possibilità di pubblicare pagine statiche è possibile solo accedendo al blog attraverso Blogger in Draft. Certamente nelle prossime settimane, se non addirittura nei prossimi giorni ci sarà una vera esplosione di ulteriori personalizzazioni di cui darò ovviamente conto.

Come inserire un bottone statico a fondo pagina di un blog su Blogger per tornare con un click all'inizio dell'articolo.

Ci sono blog che hanno articoli molto brevi e quelli che invece li hanno molto lunghi. Per leggere i post ci aiutiamo con il cursore verticale presente sulla destra, finita la lettura per tornare all'inizio della pagina sarebbe sufficiente premere sul tasto che è a forma di freccia obliqua e che in alcune tastiere si chiama Home.

Non tutti conoscono questa possibilità e forse potrebbe essere il caso di aiutarli, vediamo infatti come inserire un'immagine statica in fondo al blog che funzioni da pulsante per ritornare automaticamente all'inizio dell'articolo.

Come prima cosa bisogna caricare su un hosting il bottone che più ci piace. Ve ne propongo qualcuno

 

 

 

Queste immagini sono già state caricate nel web e per acquisirne l'indirizzo bisogna cliccarci sopra, selezionarne l'URL dal browser e copiarlo.  

E' il momento di fare le opportune modifiche al template andando su Layout > Modifica HTML e, dopo aver salvato il modello completo, cercare la riga

]]></b:skin>

che indica la fine delle classi di stile per l'aspetto del blog. Immediatamente sopra a questa riga inserire il seguente codice

#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}

Con questo codice il bottone si posizionerà sulla destra in basso alla distanza di 10 pixel dal fondo e dalla destra. Se si sostituisce right con left si può posizionare sulla sinistra. Si possono ovviamente cambiare il numero di pixel per inserirlo nella posizione più idonea alla grafica del nostro blog. Ecco lo screenshot dell'inserimento

Adesso cercate la riga </body> che si trova in fondo al modello e immediatamente prima aggiungete il seguente codice

<a href="#" id="backtotop"><img src="URL_Immagine" alt="inizio post" /></a> 

dove al posto di URL_Immagine occorre inserire l'indirizzo di una delle immagini proposte o di un'altra a vostra scelta che avete caricato sul web. Ecco il consueto screenshot

Non resta che salvare il modello. Per una dimostrazione del funzionamento di questo bottone andate su un post di La Nuova Atlantide che è un mio blog scientifico che non aggiorno più da un anno e che ho usato come cavia. I principianti potranno anche rendersi conto di come fossi scarso in termini di grafica, non è che adesso sia migliorato così tanto . Il pulsante funziona indifferentemente nei post, in homepage e nelle pagine di archivio.

Questo articolo mi è stato ispirato da AllBlblogtools, dove potrete trovare anche altre immagini oltre alle tre che vi ho proposto.

Molto presto arriveranno su Blogger le pagine statiche come in Wordpress.

Le pagine in Wordpress, contrariamente ai post, non hanno una data e un'ora e vengono utilizzate per inserire un modulo per contattare l'amministratore del blog oppure un disclaimer o ancora le norme che il sito segue riguardo alla privacy. Coloro che hanno un blog sulla piattaforma Blogger si sono fino ad ora dovuti arrangiare pubblicando dei post con data retroattiva, meglio se antecedente alla creazione dello stesso blog.

Si tratta comunque sempre di post e quindi in teoria è possibile commentarle e avranno lo stesso layout di tutti gli altri articoli. Proprio ieri ho illustrato come inserire solo il sommario di un articolo in homepage attraverso un semplice click; avevo preso la notizia da Blogger Buzz che aveva anche inserito degli screenshot per illustrare meglio la procedura. Non avevo ritenuto opportuno di ripubblicarli ma avevo preferito postarne dei miei con l'editor in italiano per una maggiore comprensione. Ad un esame più attento ecco la sorpresona

In questa immagine si legge chiaramente il testo inserito e che non lascia dubbi.

Have you ever wanted to link a simple "About" page from your blog? Or maybe you'd wanted a "Contact Us" page that inherited your blog's template? Well…

Credo che non occorra traduzione ma ci dobbiamo solo chiedere tra quanti giorni (o ore) sarà disponibile anche questa importantissima funzione.

L'immagine ovviamente è tratta da Blogger Buzz.