Come inserire un bel widget per l'iscrizione ai feed in blogger

giovedì, febbraio 11, 2010  Enirco  No comments

Tra i vari gadget che blogger propone di default c'è anche quello che permette diiscriversi ai feed rss sia dei post che dei commenti; devo però ammettere che è un pò bruttino.
Eppure la sezione delle iscrizioni trovo che sia molto importante e deve avere possibilmente un bel impatto visivo, in modo che i lettori siano interessati ad iscriversi.

In quesa pagina troverai una bella sezione già pronta per l'iscrizione tramite i feed, tramite mail e, sempre più richiesta, anche la possibilità di seguirci tramite twitter. Il risultato è come quello che vedi in questa foto




oppure quello che vedi nella sidebar qui a fianco dopo alcune modifiche.

Il bello di questo widget è che lo puoi installare ovunque, è chiaro e non ha la casella della mail in vista, ma viene aperta in un'altra pagina. E' consigliabile usare Feedburner per ottimizzare la massimo le sue funzioni.

Come installarlo:

1- Vai su Layout --> Modifica html

2- Espandi i modelli widget e fai un backup del template

3- Cerca il tag </head> e incolla appena prima questo codice

<style type='text/css'>

#hsection{border:4px solid #D3D3D3;background-color:#e9e9e9;}
#hsection:hover{border:4px solid #BABABA;background-color:#e9e9e9;}

#sectionmy .sectionmy2 h2.subscription { border:0; margin:0; padding:6px 0 0 55px; height:42px; font-size:16px;font-family:&quot;Segoe UI&quot;,Calibri,&quot;Myriad Pro&quot;,Myriad,&quot;Trebuchet MS&quot;,Helvetica,Arial,sans-serif;
font-weight:bold; }

#sectionmy .sectionmy2 h2.rss { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZTGOhzj_A6eyo9V1Ug90Mis40_tMySRWhkYAr9tK_OpCRZbDJ02n1Ieu46I3H5s30zDJjPCP1wGP_ee9C2Tn3gMlfE4wgLWUlkpLPf2uebpAwKa8QT7NRK766DHMtf9QNscuRl2LYwAcc/) no-repeat top left; }

#sectionmy .sectionmy2 h2.email { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhld_85W-U-3OEAiv6Ws3q2mvYSXPu5vCcXA3Ao-U3SqE8zr4SJnD8GNpjvvYL9mwS24T8dLRRVrur_mvSPNEFJVp_iD_G7oFAtEYZmI_-UCWewOAyc_vMU3N3XKq3FHu7ZHYv9gIoRDDtz/) no-repeat top left; }

#sectionmy .sectionmy2 h2.twitter { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi95zqeP3aC_h_aR44mrsTl4Slht6HjgUagJUgC3-7jaTzpl13i0K1okothsvEE5yfDxUcT1POiqNvCbAwyZ8BHGVug6QyF9UmvKOnhGaNswY_o3GAQYsYO3dYOQayAIdn8Mg0ClrtNG7ye/) no-repeat top left; }

#sectionmy .sectionmy2 .subscription a { color:#252e28; text-decoration:none; }

</style>

4- Copian e incollan glil url colorati nella tua barra di navigazione e con il tasto destro salva le immagini. Ora hostale nel tuo servizio di hosting, io uso photobucket.

5- Sostituisci gli URL colorati con quelli delle immagini hostate da te

6- Salva

7- Vai su Layout --> Elementi pagina e inserisci un elemento tipo html/java

8- Incolla questo codice
<div id="hsection">
<div id="sectionmy">
<div class="sectionmy2">

<h2 class="subscription rss"><a href="YOUR-RSS-FEED-URL">SUBSCRIBE VIA RSS</a></h2>

<h2 class="subscription email"><a href="YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL">SUBSCRIBE VIA EMAIL</a></h2>

<h2 class="subscription twitter"><a href="YOUR-TWITTER-URL">FOLLOW ON TWITTER</a></h2>

</div></div>
</div>

9- Sostituisci gli URL in rosso con i tuoi e cambia le parole in verde con quello che vuoi venga visualizzato nel blog.

10- Salva

11- Per modificare i colori del testo e dello sfondo cerca nella prima porzione di codice i vari codici colore e cambiali a tuo piacimento usando questo strumento.

Altri articoli simili:



Posted in: ,,,,,

0 commenti:

Posta un commento