Visualizzazione post con etichetta bottoni. Mostra tutti i post
Visualizzazione post con etichetta bottoni. Mostra tutti i post

28 luglio 2014

Widget degli Articoli Simili e dei Bottoni Sociali per Blogger.

Gli obiettivi di un blogger che non vende niente nel suo sito sono quelli di avere il maggior numero di visitatori, di farli restare il più possibile a leggere i suoi contenuti e di indurli a condividere sui social network il maggior numero di pagine. Per raggiungere questi risultati bisogna innanzitutto scrivere contenuti validi ma questo non basta visto che bisogna prestare grande attenzione anche ai fattori di ranking per un posizionamento migliore nei risultati di ricerca.

Una ulteriore spinta in questo senso può essere data da opportuni widget che mostrino ai lettori il meglio della nostra produzione insieme a una certa facilità della sua condivisione nei social network. Adesso vado a illustrare quello che si potrebbe definire come un widget misto che mostra gli Articoli Simili a quello visualizzato e i bottoni di condivisione su Facebook, Twitter e Google+. Ricordo che gli Articoli Simili o Correlati o Related Posts non sono altro che altri post che condividano con quello aperto almeno una etichetta. I bottoni di condivisione sociale sono invece quei pulsanti che aprono una finestra popup che permette di condividere il post visualizzato su Facebook o su Google+ oppure di twittarlo ai follower di Twitter.

28 giugno 2014

Creare bottoni con gradiente senza immagini con HTML e CSS.

I bottoni o pulsanti che dir si voglia sono un elemento importante del web visto che servono da tramite per aprire un'altra pagina, per scaricare un file, per pagare un prodotto o comunque per collegare il click del mouse a un evento qualsiasi.

Nell'HTML ci sono dei tag specifici per la realizzazione di bottoni quali button, input e form che possono essere personalizzati tramite i CSS e l'altro tag style. Si possono però creare dei bottoni anche utilizzando un semplice <div> e si possono pure ottenere con sfumatura, ombreggiatura e effetto pressione per renderli più validi dal punto di vista estetico. È anche possibile inserire un effetto hover per modificarne l'aspetto al passaggio del mouse. In questo post vedremo quali siano i passi da fare per avere un bottone con colori personalizzati e con dimensione in funzione della lunghezza del testo che viene mostrato. Il pulsante potrà essere collegato a un link che potrà essere aperto se un lettore ci clicca sopra.

27 giugno 2014

Personalizzare i pulsanti Rispondi e Elimina nei commenti nidificati di Blogger.

Dopo che ho tenuto i commenti di Google+ per qualche mese sono dovuto tornare ai commenti classici di Blogger perché il modulo di Google+ non si mostrava più nei vecchi post impedendo ai lettori di interagire, con il risultato che alcuni di loro, a ragione, mi inviavano delle email o peggio ancora dei messaggi privati su Facebook in cui mi chiedevano delle delucidazioni. I lettori abituali di questo sito sanno quanto mi diano fastidio questi tipi di approccio visto che dedico solo una parte del mio tempo al blog e voglio essere io a decidere quale parte e non amo avere continue notifiche sul cellulare a cui tra l'altro non posso rispondere in modo adeguato visto che mi mancano gli strumenti di ricerca.

L'estetica dei commenti nidificati di Blogger è però di tipo minimalista con dei pulsanti formati da del semplice testo per rispondere o eliminare il commento

22 febbraio 2014

Come visualizzare il pulsante ufficiale di Pinterest su Blogger.

Gli utenti di Blogger possono mostrare da circa quattro anni alla fine dei post i pulsanti di condivisione ufficiali. In passato c'era anche quello di Google Buzz, un social che è miseramente naufragato, e che in seguito è stato sostituito da Google+ che è l'unico a avere il contatore delle condivisioni. L'amministratore del blog può decidere di mostrare o meno tali bottoni andando su Layout > Post sul blog > Modifica. Mettendo la spunta accanto a Mostra i pulsanti di condivisione e cliccando su Salva si abilita la visione dei bottoni nel footer non solo nei singoli post ma anche in homepage, nelle pagine di etichette e nelle pagine di archivio. 

Nella maggior parte dei blog da qualche giorno è comparso anche il pulsante di condivisione di Pinterest insieme a quelli di GMail, Blogger, Twitter, Facebook e Google Plus

20 febbraio 2014

Come visualizzare il pulsante di Pinterest nelle immagini al passaggio del mouse.

Il social network Pinterest è nato per la condivisione delle immagini e anche se personalmente non mi attira particolarmente sta ottenendo un buon successo. Per facilitare la condivisione delle foto che postiamo nel nostro blog su Blogger possiamo mostrare il bottone di Pinterest in modo automatico. Se però siamo dei grandi utilizzatori di Pinterest possiamo vedere le cose dalla prospettiva di chi voglia pinnare le foto che visualizza in qualsiasi scheda del browser.

Attraverso Chrome è da adesso possibile visualizzare il pulsante Pin nelle immagini quando ci si passi sopra con il mouse in modo da rendere più semplice e rapido il processo di condivisione

18 dicembre 2013

Come inserire nel blog un pulsante per iniziare un hangout.

Come certo saprete gli Hangout sono un potentissimo strumento messo a disposizione da Google nel suo social network Google Plus che si può dire sia la sola funzionalità non direttamente mutuata dalla esperienza di Facebook. Ha avuto un successo immediato anche perché è stata rilasciata una applicazione per dispositivi mobili che oltre ad aver preso il posto di Google Talk e permettere tutto quello che si può fare con WhatsApp può anche essere usata per inviare e ricevere SMS.

È notizia di pochi giorni fa che Hangout è stato integrato su Youtube per permettere agli utenti di trasmettere dal vivo il proprio streaming. Vediamo come sia possibile inserire un pulsante nel nostro sito per iniziare un hangout con i lettori. Google offre diverse modalità di inserimento e di personalizzazione che illustrerò brevemente.

18 novembre 2013

Come inserire un pulsante per andare in un articolo a caso.

Seguendo la falsariga del post per inserire un invito a leggere un altro articolo a caso vediamo come si possa creare un bottone per effettuare questa operazione in modo continuativo. Il menù presente sul sito insieme ai widget degli Ultimi Post e a quello delle etichette possono creare interesse nel lettore che per questo decide di continuare nella esplorazione del nostro sito. Un pulsante per andare in un altro articolo a caso può sicuramente generare del traffico aggiuntivo se non altro per coloro che ci cliccano sopra non fosse altro che per semplice curiosità o per verificarne il funzionamento.

Il posizionamento del pulsante è a scelta. Si può inserire in una sidebar, nel modello per visualizzarlo all'inizio o alla fine dei post, nel footer o in altra posizione.

25 agosto 2013

Come inserire e personalizzare il bottone Mi Piace nei post di Blogger modificando il modello.

Continuo nei tutorial per l'installazione dei Social Plugin di Facebook in modo semplificato cioè senza bisogno di creare una applicazione e senza inserire nel template i metatag di Open Graph. Chi volesse usufruire dei plugin di Facebook in modo completo può consultare il post che ho scritto sul tema.

Qualche settimana fa mi ero occupato di come inserire i plugin in un widget di Blogger, con il tutorial su come visualizzare il pulsante Condividi nei post ho invece inaugurato una serie di articoli su come installare i plugin di Facebook direttamente nel template e questo senza bisogno di creare applicazioni specifiche per il nostro sito.

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga che inizia con <body … . Nei template più recenti avrà questa struttura

06 luglio 2013

Come inserire due bottoni per andare a inizio e a fondo pagina.

Vediamo come utilizzare la libreria JQuery per un effetto che è sempre molto richiesto vale a dire i bottoni per spostarsi al top e a fondo pagina. Ho notato però che questo effetto non funziona se si cambia versione di JQuery ma non è un grosso problema se si è deciso di utilizzarlo.

Sempre sull'argomento dei bottoni di navigazione dentro il post ricordo la serie di pulsanti con cinque stili diversi e le icone con up, down e scroll. Come al solito dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga ]]></b:skin> . Subito sopra si incolla il codice seguente

17 giugno 2013

Installare il bottone di Twitter in modo asincrono su Blogger.

Da qualche anno la velocità di caricamento è diventata una dei parametri che concorrono alla formazione delle SERP vale a dire che a parità di altre considerazioni una pagina più lenta a caricarsi si posiziona dopo una pagina che abbia invece un caricamento più rapido. I fattori che rendono pesante una pagina sono la presenza di immagini molto grandi e una quantità di gadget esorbitante. Ho già illustrato come ridurre il peso delle immagini usando il plugin Sharper Photo e come sia utile mostrare solo i gadget che riteniamo funzionali al nostro blog. 

I widget sono tanto più pesanti quanto è la quantità di javascript che contengono. Tra i gadget irrinunciabili metto quelli di Facebook, Google Plus e Twitter. Un sistema per minimizzare l'impatto dei bottoni o di altri plugin nella rapidità di apertura della pagina consiste nell'usare quello che viene definito il caricamento asincrono. Significa semplicemente posticipare la visualizzazione di pulsanti, Like Box o altri gadget a dopo l'apertura di tutti gli altri elementi della pagina web.

Dopo aver presentato un modo per caricare in modo asincrono tutti i plugin di Facebook e tutti quelli di Google+ passo a fare lo stesso per i vari gadget relativi a Twitter.

06 maggio 2013

Barra verticale con effetto slide per bottoni dei social network.

AddThis è un servizio specializzato nella realizzazione di widget per gli utenti di tutte le piattaforme. E' talmente usato che ha Page Rank 10 esattamente come Google e Twitter e più del 9 di Facebook. Ho già presentato diversi gadget di AddThis come quello dei bottoni di condivisione o della toolbar. Si possono usare gli script di AddThis per creare dei metodi di condivisione che altrimenti sarebbero più complicati basandosi esclusivamente sulle API ufficiali dei vari social network. 

Il gadget che andrò a illustrare è una barra verticale a scomparsa che si visualizza al passaggio del mouse su una apposita icona e che mostra direttamente i bottoni con contatore di Facebook, Twitter e Google Plus ma che ha anche il pulsante di AddThis che consente ai lettori di stampare il post, di metterlo tra i Preferiti o di condividerlo su servizi quali OKNotizie, Diggita, Tumblr, StumbleUpon e altri ancora. Andando inoltre su Impostazioni si possono personalizzare i servizi da visualizzare selezionandoli tra i centinaia supportati da AddThis. Ecco uno screenshot dei vari passaggi

18 aprile 2013

Icone ruotanti con collegamenti ai social network.

Continuo la presentazione di widget che mostrano icone con link ai social network più importanti che abbiano però una loro caratteristica particolare. Dopo aver illustrato come installare le icone in tre dimensioni è adesso la volta delle icone ruotanti. Le immagini le ho prese da Elegant Themes e possono ovviamente essere sostituite da altre che incontrino maggiormente i vostri gusti.

Per la loro installazione non occorre modificare il template visto che vanno posizionate in un elemento pagina nella sidebar o nel footer. Anche i social network che ho proposto possono essere modificati escludendo i codici di quelli che non ci interessano e magari sostituendoli con altri. Ho anche inserito le icone per la sottoscrizione dei feed e per la iscrizione alla Newsletter di Feedburner.

Quando si passa con il mouse sopra a una delle icone ci sono due effetti quello della trasparenza e quello della rotazione che si interrompono quando il cursore non punta più nessuna icona

27 marzo 2013

Bottone di Pinterest visibile sulle immagini al passaggio del mouse.

Riprendo il discorso affrontato nel post sul pulsante di Pinterest che si mostra con effetto hover al passaggio del mouse per migliorarne il funzionamento e le personalizzazioni. Lo script è opera di Greenlava autore di Blogger Sentral e mi sono permesso di modificarlo leggermente per renderlo credo più efficace pur mantenendo doverosamente il credit nel commento alla fine del codice.

Con questa nuova installazione si può anche evitare che il bottone appaia anche quando per esempio il mouse passa sopra a una icona del blog e si possono condividere le immagini su Pinterest non solo dai singoli post ma anche dalla Homepage, dalle pagine delle etichette e dalle pagine statiche.
Dopo aver salvato il template andate su Modello > Modifica HTML, cercate la riga </body> e, subito sopra, incollate questo codice

20 marzo 2013

Come inserire un pulsante per condividere i post su Tumblr.

Questo si può definire veramente un instant post visto che lo sto scrivendo a seguito di un commento appena ricevuto su un pulsante per condividere i post di Blogger su Tumblr. Esiste proprio una pagina di Tumblr con i codici dei bottoni che possiamo usare a questo scopo. Nella parte alta ci sono i tasti per seguire un sito di Tumblr e in quella bassa per condividere le pagine web su un blog di Tumblr.

Andiamo con ordine. Se desideriamo inserire il codice per seguire il nostro blog su Tumblr va prima di tutto selezionato il tipo di bottone quindi dobbiamo andare su Prendi il codice dopo aver digitato l'URL personalizzabile del nostro sito su Tumblr che potrà essere p.e ernesto-tirinnanzi.tumblr.com. Il codice ottenuto sarà quello di un iFrame che, se cliccato, farà aprire un'altra scheda del browser di Tumblr con il pulsante Segui. I navigatori vi potranno cliccare sopra per seguire il blog di Tumblr

07 marzo 2013

Icone in 3 dimensioni con collegamento ai social network.

Molti lettori (soprattutto lettrici) mi hanno chiesto informazioni su come installare i bottoni con collegamento ai social network posizionati nella parte alta della sidebar di questo blog. Ho semplicemente usato le immagini in 3D che sono state messe in rete da un disegnatore con libera possibilità di riutilizzo. Ne avevo già parlato in un post dedicato alle icone con effetto in 3D. La difficoltà di realizzare un simile widget è esclusivamente grafica perché si tratta di utilizzare due diverse immagini per ogni collegamento e di metterle una accanto all'altra in una striscia orizzontale. Per mostrare ciascuna di queste icone bisogna settarne la distanza del background in modo che venga perfettamente centrata. Si tratta quindi di un lavoro certosino di grafica. Ho già dichiarato diverse volte che le realizzazioni di questo tipo non fanno per me e di non esservi molto portato. Visto però che avevo in animo di aggiungere anche i bottoni di Pinterest e di Instagram a quelli che già avevo, ho pensato di condividere il lavoro con voi lettori.

28 febbraio 2013

Barra flottante orizzontale per Blogger con i bottoni di Facebook, Twitter e Google Plus.

Ci sono moltissimi social network ma soltanto tre sono assolutamente imprescindibili vale a dire Twitter, Facebook e Google Plus. Avere i bottoni per la condivisione dei singoli post è un importante atout in grado di aumentare non solo le visite ma anche l'autorevolezza del sito. In passato ho presentato delle barre verticali che riunivano insieme tutti questi bottoni, con questo post vado a illustrare come si possa installare una barra orizzontale che compaia solo negli articoli e solo quando il lettore scorra la pagina verso il basso.

All'interno della barra, che avrà un colore sempitrasparente personalizzabile, saranno presenti i bottoni di Facebook, Twitter e Google Plus.

11 febbraio 2013

Come inserire il bottone di Pinterest nei blog di Blogger a Visualizzazione Dinamica.

Chi ha scelto di usare i template a Visualizzazione Dinamica per il proprio blog su Blogger deve rinunciare a quasi tutte le personalizzazioni che invece sono possibili con tutti gli altri modelli. Si possono solo nascondere determinati elementi, personalizzare l'intestazione, inserire certi widget, modificarne il colore e poco altro. Nei modelli più vecchi o anche in quelli del Designer Modelli possono essere installati i bottoni per condividere le immagini su Pinterest. Questo con certe limitazioni può essere fatto anche con i modelli a Visualizzazione Dinamica. C'è però una grossa limitazione visto che può essere condivisa solo una immagine precedentemente impostata. Speriamo che le personalizzazioni per questi modelli diventino sempre più frequenti visto che da qualche tempo è possibile andare su Modello > Modifica HTML per modificare il codice.

Dopo aver salvato il template si va su Modello > Personalizza > Avanzato > Aggiungi CSS e nell'apposito spazio in alto a destra si incolla il seguente codice

06 febbraio 2013

Come installare i bottoni di Pinterest nel template di Blogger.

Pinterest è il social network delle immagini e sono in molti a preconizzargli un grande futuro. Personalmente rimango scettico sulla sua capacità di penetrazione anche in un pubblico non proprio di geek appassionati. Il social consiste nella condivisione di immagini che possono essere pinnate da una qualsiasi pagina web per poi essere ripinnate da tutti coloro che le visualizzeranno e che le apprezzeranno. Molte aziende stanno puntando su Pinterest per far conoscere meglio i propri prodotti. Le foto pinnate vengono inserite in dei board che non sono altro che cartelle in cui organizzare  il materiale. Recentemente sono state introdotti i board segreti per organizzare le foto che non vogliamo rendere di dominio pubblico.

Pinterest mette a disposizione degli utenti dei bookmarklet per condividere le immagini delle pagine web. I siti che hanno immagini interessanti nei loro post e vogliono agevolare i lettori nel condividerle su Pinterest possono inserire nel template dei bottoni ufficiali denominati Goodies. Questi pulsanti non funzionano però su Blogger se non si procede a delle modifiche.

22 gennaio 2013

Bottoni di Facebook, Google+ e Twitter inseriti in una barra verticale flottante.

Ho già presentato alcune barre verticali con i bottoni di condivisione su Facebook, ora però il bottone di condivisione non funziona più perché sono state ritirate le API a tutto vantaggio del bottone Mi Piace. Vado quindi a presentare una nuova versione di tale barra di condivisione limitata ai soli pulsanti di Facebook, Twitter e Google Plus.

La sua installazione non presenta alcuna difficoltà visto che non occorre minimamente modificare il modello. Ciascun bottone aprirà una finestra di dialogo per confermare la volontà di inviare un tweet, di dare un +1 con annesso commento o di pubblicare il link nel nostro Profilo Facebook inserendo opzionalmente anche un commento.



Quando si clicca con il mouse sopra uno dei tre bottoni si aprono queste finestre

01 dicembre 2012

Pulsanti con contatore di Pinterest per modello o sidebar di Blogger.

Il social network Pinterest divide il mondo del web in modo pressoché radicale. C'è chi lo considera come il social del futuro e chi invece lo trova assolutamente inutile. Come spesso accade la verità sta probabilmente nel mezzo e la utilità di Pinterest è funzione del tipo di attività web che si sta svolgendo. Chi usa poco le immagini non è interessato all'utilizzo di Pinterest perché è proprio sulla condivisione di foto la sua caratteristica. D'altra parte chi lavora molto con le immagini può trovare Pinterest come uno strumento fondamentale per dare viralità alle sue realizzazioni.

La condivisione delle immagini può avvenire attraverso dei bookmarklet aggiunti al browser oppure tramite dei bottoni appositamente inseriti nel sito. Vediamo come si possano installare su Blogger dei bottoni con contatore che permettano agli utenti di pinnare le nostre foto. Si utilizzano i Goodies di Pinterest per ottenere il codice da inserire nel modello oppure anche in un gadget HTML/Javascript.