Pubblicato il 16/11/16 - aggiornato il  | Nessun commento :

Come aggiungere un bottone di condivisione a quelli già presenti su Blogger.

By con etichette , , ,
Come aggiungere nuove icone di condivisione sociale a Blogger utilizzando i CSS Sprite.
Come promesso nel post precedente adesso vediamo come aggiungere il bottone per la condivisione via email agli altri pulsanti già installati su Blogger. Ovviamente per un tutorial di questo genere occorre prendere un esempio pratico a cui fare riferimento. 

Partiamo quindi dall'articolo in cui ho mostrato come visualizzare i bottoni dei social alla fine del post sia nella versione desktop sia nella versione mobile di Blogger. Per favorire una maggiore velocità di caricamento ho utilizzato la tecnica denominata CSS Sprite che permette di riunire più immagini in una soltanto in modo da utilizzare un solo background modificando la sola posizione. In questo modo si può anche introdurre un effetto hover che modifica la icona al passaggio del cursore.


Prima di tutto occorrono trovare delle icone gratuite da utilizzare per i vari social network. Nel post già linkato sui CSS Sprite è stato mostrato come riunire queste immagini con Photoshop ma lo si può fare anche con Gimp. Inizialmente avevo inserito 9 icone che sono diventate 18 con l'effetto hover della icona. I social considerati erano stati Facebook, Twitter, Google+, Linkedin, Feedly, WhatsApp, Youtube, Pinterest e Instagram. Le icone le ho trovate tra quelle gratuite disponibili su questi siti, la maggior parte di queste su IconFinder che è il mio preferito. L'immagine del CSS Sprite è

css-sprite

lo sfondo da cui partire. Per aggiungervi anche le icone di Telegram e di Email si deve aprire Photoshop e andare su File -> Nuovo per poi scegliere un progetto di sfondo trasparente e di dimensioni 528x96 pixel. Le dimensioni si ottengono moltiplicando il numero di icone per 48px che è la dimensione di ciascuna di esse mostrata due volte (48x2=96) in verticale.
 
Si va poi su File -> Inserisci e si importa l'immagine con le icone mancanti che sarà meno larga di 96 pixel. Si clicca sul destro del mouse della immagine e si sceglie Inserisci per posizionarla. Si va poi ancora su File -> Inserisci per aggiungere le altre 4 icone posizionandole immediatamente a destra

inserire-immagini-css-sprite

Quando si è terminato si salva il lavoro andando su File -> Salva con nome o File -> Salva per il web per ottimizzare ulteriormente lo sfondo del CSS Sprite. Il formato di uscita deve essere il PNG se le icone hanno un livello di trasparenza.






COME MODIFICARE IL MODELLO DI BLOGGER PER AGGIUNGERE LE ICONE


Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca il CSS precedente che aveva questa struttura

/* CSS ICONE SOCIALI INIZIO */
#facebookbutton a,#twitterbutton a,#googleplusbutton a,#linkedinbutton a,#feedlybutton a,#whatsapp_button1 a,#youtubebutton a,#pinterestbutton a,#instagrambutton a,#facebookbutton a:hover,#twitterbutton a:hover,#googleplusbutton a:hover,#linkedinbutton a:hover,#feedlybutton a:hover,#whatsapp_button1 a:hover,#youtubebutton a:hover,#pinterestbutton a:hover,#instagrambutton a:hover{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuZaf-8QphS4X3zz5RYQvlgNTAUmoRqIrm6ef1hzzdPp225x330H2fp4bbeAATA84R5IhKtfuTClexo-c718uzu2QqvjMnVWann1upJoYuKB-s2iRIvGsnZH9mnVUTK9Gay8Ml8D0T4Ion/s432-Ic42/icone-sociali-2.png); no-repeat; transition:all 0.2s ease 0s;}
#facebookbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:0 0;}
#twitterbutton a {display: block; width: 47px; height: 48px; margin: 0 auto; background-position:-47.6px 0;}
#googleplusbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-95.5px 0;}
#linkedinbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-143.5px 0;}
#feedlybutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-191.5px 0;}
#whatsapp_button1 a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-239.5px 0px;}
#youtubebutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-287.5px 0;}
#pinterestbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-335.5px 0;}
#instagrambutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-383.5px 0;}
#facebookbutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:0 -48px;}
#twitterbutton a:hover {display: block; width: 47px; height: 48px; margin: 0 auto; background-position:-47.6px -48px;}
#googleplusbutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-95.5px -48px;}
#linkedinbutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-143.5px -48px;}
#feedlybutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-191.5px -48px;}
#whatsapp_button1 a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-239.5px -48px;}
#youtubebutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-287.5px -48px;}
#pinterestbutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-335.5px -48px;}
#instagrambutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-383.5px -48px;}
/* CSS ICONE SOCIALI FINE */

Per aggiungere i bottoni di Telegram e di Email occorre modificarlo in questo modo

/* CSS ICONE SOCIALI INIZIO */
#facebookbutton a,#twitterbutton a,#googleplusbutton a,#linkedinbutton a,#feedlybutton a,#whatsapp_button1 a,#youtubebutton a,#pinterestbutton a,#instagrambutton a, #telegrambutton a,#emailbutton a, #facebookbutton a:hover,#twitterbutton a:hover,#googleplusbutton a:hover,#linkedinbutton a:hover,#feedlybutton a:hover,#whatsapp_button1 a:hover,#youtubebutton a:hover,#pinterestbutton a:hover,#instagrambutton a:hover, #telegrambutton a:hover, #emailbutton a:hover {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEholNmXbfIbkui_BmrE_ZcqiU2LuVT2ZL8IQSHRJUACYxZDOqIXVCxLO9cNpkeKSJNdQedNNYRvUmuyFhMhQwH15U4qt_iaf4aNaQgCtLe5DGcwHB-RWXGGnC44SNj8jVXPE-3Drtuen40/s720/icone-sociali-4.png); no-repeat; transition:all 0.2s ease 0s;}
#facebookbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:0 0;}
#twitterbutton a {display: block; width: 47px; height: 48px; margin: 0 auto; background-position:-47.6px 0;}
#googleplusbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-95.5px 0;}
#linkedinbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-143.5px 0;}
#feedlybutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-191.5px 0;}
#whatsapp_button1 a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-239.5px 0px;}
#youtubebutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-287.5px 0;}
#pinterestbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-335.5px 0;}
#instagrambutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-383.5px 0;}
#telegrambutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-431.5px 0;}
#emailbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-480px 0;}
#facebookbutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:0 -48px;}
#twitterbutton a:hover {display: block; width: 47px; height: 48px; margin: 0 auto; background-position:-47.6px -48px;}
#googleplusbutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-95.5px -48px;}
#linkedinbutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-143.5px -48px;}
#feedlybutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-191.5px -48px;}
#whatsapp_button1 a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-239.5px -48px;}
#youtubebutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-287.5px -48px;}
#pinterestbutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-335.5px -48px;}
#instagrambutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-383.5px -48px;}
#telegrambutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-432px -48px;}
#emailbutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-480px -48px;}
/* CSS ICONE SOCIALI FINE */

Le aggiunte sono state evidenziate di giallo per rendere le cose più chiare. È stato anche ovviamente modificato l'URL del vecchio sfondo con l'URL della immagine appena creata con Photoshop di cui abbiamo trovato il link diretto dopo averla caricata su Google Foto. Per le icone di Telegram e Email è stato settato il posizionamento semplicemente aggiungendo 48 pixel a quello della riga precedente. Se dopo aver visualizzato il risultato ci fossero delle parti visibili delle icone adiacenti si può modificare il posizionamento e le dimensioni anche di 0.5 pixel fino a che non siamo soddisfatti.

COME MODIFICARE IL CODICE HTML


Dopo aver visto come modificare il codice CSS adesso vediamo come procedere per il codice HTML. Nella versione desktop inseriamo tutte le icone visto che non ci sono problemi di spazio orizzontale. Il codice da incollare nella subito sopra alla riga <div class='post-footer'> è il seguente

<!-- Icone sociali per il desktop inizio -->
                                  <b:if cond='data:blog.pageType == &quot;item&quot;'>
                                    <table cellpadding='0' cellspacing='0'>
                                      <tr>
                                        <td style='padding:10px;'>
                                          <span id='facebookbutton'>
                                            <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Condividi su Facebook'/>
                                          </span>
                                        </td>
                                        <td style='padding:10px;'>
                                          <span id='twitterbutton'>
                                            <a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Twitter'/>
                                          </span>
                                        </td>
                                        <td style='padding:10px;'>
                                          <span id='googleplusbutton'>
                                            <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Google+'/>
                                          </span>
                                        </td>
                                        <td style='padding:10px;'>
                                          <span id='linkedinbutton'>
                                            <a expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Linkedin'/>
                                          </span>
                                        </td>
                                        <td style='padding:10px;'>
                                          <span id='youtubebutton'>
                                            <a href='http://www.youtube.com/user/parsifal32' rel='nofollow' target='_blank' title='Iscriviti al Canale Youtube'/>
                                          </span>
                                        </td>
                                        <td style='padding:10px;'>
                                          <span id='instagrambutton'>
                                            <a href='https://instagram.com/parsifal32/' rel='nofollow' target='_blank' title='Immagini su Instagram'/>
                                          </span>
                                        </td>
                                        <td style='padding:10px;'>
                                          <span id='pinterestbutton'>
                                            <a href='http://pinterest.com/parsifal32/' rel='nofollow' target='_blank' title='Immagini su Pinterest'/>
                                          </span>
                                        </td>
                                        <td style='padding:10px;'>
                                          <div id='feedlybutton'>
                                            <a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Ffeeds.feedburner.com%2Fideepercomputeredinternet%2FzUQN' target='blank' title='Iscriviti ai Feed'/>
                                          </div>
                                        </td>
                                    <td style='padding:5px;'>
<div id='telegrambutton'>
<a href='https://telegram.me/share/url?url=' onclick='window.open(&apos;https://telegram.me/share/url?url==&apos;+encodeURIComponent(location.href)+&apos;&amp;bodytext=&amp;tags=&amp;text=&apos;+encodeURIComponent(document.title));return false;' rel='nofollow' title='Invia con Telegram'/>
</div>    
    </td>
<td style='padding:5px;'>
<span id='emailbutton'><a expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi via Email'/></span>         
    </td> 
                                      </tr>
                                    </table>
                                  </b:if>
                                  <!-- Icone sociali per il desktop fine -->

Il codice aggiunto è stato evidenziato di giallo.

Invece il codice da incollare nella sezione mobile sempre subito sopra alla stessa riga diventa

<!-- Icone sociali per il mobile inizio -->
                                          <b:if cond='data:blog.pageType == &quot;item&quot;'>
                                            <table cellpadding='0' cellspacing='0'>
                                              <tr>
                                                <td style='padding-top: 5px;'>
                                                  <span id='facebookbutton'>
                                                    <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Condividi su Facebook'/>
                                                  </span>
                                                </td>
                                                <td style='padding-top: 5px; padding-left: 5px;'>
                                                  <span id='twitterbutton'>
                                                    <a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Twitter'/>
                                                  </span>
                                                </td>
                                                <td style='padding-top: 5px; padding-left: 5px;'>
                                                  <span id='googleplusbutton'>
                                                    <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Google+'/>
                                                  </span>
                                                </td>                                                                                             
                                                <td style='padding-top: 5px; padding-left: 5px;'>
                                                  <div id='whatsapp_button1'>
                                                    <a alt='WhatsApp-Button' data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;-&quot; + data:post.url' title='Condividi su WhatsApp'/>
                                                  </div>
                                                </td>
                                            <td style='padding-top: 5px; padding-left: 5px;'>
<div id='telegrambutton'>
<a href='https://telegram.me/share/url?url=' onclick='window.open(&apos;https://telegram.me/share/url?url==&apos;+encodeURIComponent(location.href)+&apos;&amp;bodytext=&amp;tags=&amp;text=&apos;+encodeURIComponent(document.title));return false;' rel='nofollow' title='Invia con Telegram'/>
</div>    
    </td>
<td style='padding-top: 5px; padding-left: 5px;'>
<span id='emailbutton'><a expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi via Email'/></span>
    </td>
                                              </tr>
                                            </table>
                                          </b:if>
                                          <!-- Icone sociali per il mobile fine --> 

dove anche in questo caso il codice aggiunto è stato evidenziato di giallo. Per evidenti ragioni di spazio quando si apre il sito con un cellulare nella versione mobile sono stati inseriti solo i bottoni di Facebook, Twitter, Google+, WhatsApp, Telegram e Invia per Email.

Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy

Iscriviti a: Commenti sul post ( Atom )