REDAZIONE

Cari MyBlogger,

in questo tutorial vi mostriamo come inserire, all’interno di ogni post, delle icone “personalizzate” dei Social Network più utilizzati. Come ad esempio:

Condividi questo post

Prima di tutto cerchiamo le icone dei Social Network che più ci piacciono.
In rete se ne possono trovare tantissime, basta fare una ricerca.

Una volta trovate, le scarichiamo e le carichiamo all’interno del nostro Blog dalla sezione “Pannello di controllo > Gestione file > Images”.

Cliccando su ogni icona caricata, si aprirà una pagina con la nostra immagine, quindi salviamo in un file gli url delle nostre icone e andiamo nella sezione “Presentazione > Opzioni avanzate”.

Per inserire le icone in tutte le sezioni che contengono i post, all’interno di:

• Modello della home-page
• Modello della pagine di link permanente
• Modello della pagina categoria
• Template tags

cerchiamo il seguente codice:

     {if $post.extended}<p class="readmore"><a href="{$post.permalink}
     #more">{t}Read more ...{/t}</a></p>{/if}       

e, subito dopo incolliamo:

     <!-- INIZIO BOTTONI SOCIAL NETWORK -->
        
     <img src="http://blog.myblog.it/images/condividi-questo-post.png">
     <br /><br /><a class="social" href="http://del.icio.us/post?url=
     {$post.permalink}" target="_blank">
     <img src="http://blog.myblog.it/images/icone/delicious.png" 
     border="0"></a><a class="social" 
     href="http://www.stumbleupon.com/submit?url=
     {$post.permalink}&title={$post.title}" target="_blank">
     <img src="http:// blog.myblog.it/images/icone/stumbleupon.png" 
     border="0"></a><a class="social" 
     href="http://www.technorati.com/faves?add={$post.permalink}" 
     target="_blank">
     <img src="http:// blog.myblog.it/images/icone/technorati.png" 
     border="0"></a><a class="social" 
     href="http://www.google.com/bookmarks/mark?op=
     edit&output=popup&bkmk={$post.permalink}/&title={$post.title}" 
     target="_blank">
     <img src="http:// blog.myblog.it/images/icone/google.png" 
     border="0"></a><a class="social" 
     href="http://twitter.com/home?status= {$post.permalink}" 
     target="_blank">
     <img src="http:// blog.myblog.it/images/icone/twitter.png" 
     border="0"></a>
     <a class="social" href="http://www.facebook.com/share.php?u=
     {$post.permalink}/&t={$post.title}" target="_blank">
     <img src="http:// blog.myblog.it/images/icone/facebook.png" 
     border="0"></a>
        
     <!-- FINE BOTTONI SOCIAL NETWORK -->       

Vediamo nel dettaglio cosa è stato inserito in questo codice HTML:

   <a class="social" href="http://del.icio.us/post?url=
   {$post.permalink}" target="_blank">
   <img src="http://blog.myblog.it/images/icone/delicious.png" 
   border="0"></a>    

class=”social” è lo stile CSS che abbiamo applicato ad ogni icona per distanziarla in modo omogeneo dalle altre.
Per inserire il codice CSS, andiamo in “Presentazione > Opzioni avanzate” e clicchiamo il link “Modifica modello” posizionato a destra di “Foglio di stile”.
Nella colonna destra della finestra che si apre scriviamo:

       .social {
        padding:10px;
        }       

Questo significa che ogni icona mantiene una distanza di 10 pixel da qualsiasi cosa la circonda. Questo codice CSS potete personalizzarlo come più vi piace.

Gli url presenti all’interno degli href, invece, non modificateli, sono quelli che vi permettono di condividere i post sui Social Network, ad esempio:

href=”http://del.icio.us/post?url={$post.permalink}”


Per utlimo, ma non meno importante, il codice src, che contiene l’url delle vostre icone che avete precedentemente caricato:

src=”http://blog.myblog.it/images/icone/delicious.png”


Ora tocca a voi. Buon lavoro!