Annuncio per le Aziende:
Sei un azienda o un sito e vorresti utilizzare il mio spazio per sponsorizzare i tuoi prodotti? Contattami al mio indirizzo di posta e sarò lieta di testarli e recensirli nel mio blog
^_^
If you are a company or website that would like me to test/review some of your
products feel free to contact me at

Contatti:
"annarella976@hotmail.it"

Lettori fissi

3 giugno 2015

Widget Share Buttons


Sono sempre in giro nel web ad ammirare blog di varia tematica e di solito non mi sfugge nulla, sia a livello di grafica sia per quanto rigurda i gadget utili che un blog deve avere! Io penso che un buon blog non deve essere stracolmo di gadget o immagini inutili che vanno ad appesantire la home rallentando il caricamento della pagina, sapete per quanto tempo rimane un visitatore approdato nel notro sito o web per miracolo? Sicuramente pochi secondi perchè nessuno perde tempo prezioso ad aspettare non si sa che cosa! E soltanto noi del mondo della blogsfera sappiamo quanto sia importante anche un solo visitatore che se trova le informazioni che stava cercando o che è incuriosito da altri articoli sicuramente ritornerà!
Noi blogger passiamo molto tempo a condividere i nostri articoli in giro per i social network ma dobbiamo dare l opportunità anche ai nostri lettori di condividere un articolo che ritiene utile o semplicemente interessante. Sono approdata in un sito  dove ho creato in pochissimi passaggi i miei bottoni di condivisione effetto Hover, troppo eleganti e particolari non credete?


Realizzare il widget è stato veramente facile ed intuitivo ma ovviamente io ho un pò di dimestichezza con i codici HTML ma potete farlo anche voi seguendo il mio tutorial grafico ^_^
Rechiamoci nel sito cliccando sul link sotto


Dopo aver creato il tuo account recati nella tua mail e conferma la registrazione cliccando sul link che ti viene indicato, dopo segui le frecce degli screen






Copiamo questa porzione di codice in un foglio di blocco notes, ci servirà in seguito


Andiamo a generare il nostro script


Questo è il codice che dovremo inserire nel modello in modalità HTML


Adesso che abbiamo tutto il materiale che ci serve vi faccio vedere, dopo diverse prove che ho fatto nel mio template le posizioni più indicate per questo widget. Le ho posizionate sotto al titolo del post, alla fine del post e nel post footer, vi lascio tutte le immagini sotto ^_^
Innanzi tutto prima di procedere a qualsiasi modifica del template in modalità Html è sempre meglio salvare il template nel caso in cui dovessimo commettere qualche pasticcio e vi assicuro che potrebbe capitare anche ai più esperti.
Cerchiamo la porzione di codice </head>    ed incolliamo il codice dello script subito sopra .
Vi ricordate la prima stringa che vi avevo detto di salvare? bene......vediamo in dettaglio le posizioni ideali che ho provato e che funzionano benissimo ^_^

Posizione sotto al titolo del post:


cercando questa porzione di codice: <b:includable id='post' var='post'>...</b:includable> 
espandiamo il codice cliccando sui puntini e cerchiamo quest altra stringa: <div class='post-header'>
subito sotto incolliamo il nostro codice:





Posizione alla fine del post


Cerchiamo la stringa di codice: <data:post.body/> ed incolliamo il codice subito sotto




Posizione nel  post footer


Cerchiamo la porzione di codice: <div class='post-footer'> e subito dopo incolliamo il nostro codice


Io alla fine ho deciso di centrare il mio widget nei post e l ho posizionato alla fine dell articolo perchè lo ritengo più ordinato ma voi potete sbizzarrirvi o fare altre prove per il posizionamento, mi raccomando potete inserirlo soltanto in una zona del template quindi valutate bene! spero di esservi stata utile e se vi piace questo tutorial vi prego di condividerlo, buona serata ^_^


Nessun commento:

Posta un commento

Ogni vostro commento è gradito ma non lasciare il link dei vostri blog nei messaggi perchè non verranno pubblicati, passo io a farvi visita, grazie :)