Pubblicato il 01/02/12e aggiornato il

Cupido che tira frecce dal blog per San Valentino.

Continuo nella presentazione di widget dedicati alle festività e ai vari periodi stagionali. In occasione del prossimo San Valentino avevo già presentato delle cascate di cuoricini animati. Su questa stessa falsariga presento un Cupido che si sposta casualmente nel layout del blog lanciando delle frecce verso il lettore.

Come quasi tutti i widget di questo tipo si può sempre sostituire l'immagine con un'altra che ci piace di più. Quella che ho scelto è la seguente

cupido-san-valentino

che ho trovato in questo sito dedicato all'argomento "Cupido" e in cui si possono trovare altre immagini animate simili. Per l'installazione dello script per prima cosa andate su Modello > Backup/Ripristino e salvate il template per ragioni di sicurezza. Tornate su Modello > Modifica HTML > Procedi, cercate la riga </head> e, subito sopra, incollate il codice che ho postato su Google Documenti

Successivamente cercate la riga </body> e, subito sopra, incollate quest'altro codice

<!-- San Valentino -->
<div id='CupidArc' style='position:absolute; z-index:999;  top:50px; left: -500px;'>
<img border='0' src='https://lh5.googleusercontent.com/-oMijP2tdVxs/TylEoERL9pI/AAAAAAAAWXs/8rk-oQtZomM/s166/cupid-1.gif'/></div>
<!-- San Valentino -->

Salvate il modello e vedrete Cupido che si sposterà in modo casuale all'interno del blog scagliando frecce.

Il Cupido sarà visibile con i principali browser e anche con Internet Explorer 9 o superiore. Vi posto un paio di alternative alla immagine animata, cliccandoci sopra, si apriranno un'altra scheda del browser da cui potete copiare l'indirizzo da sostituire nel precedente codice

                   cupido-con cuore                    cupido-con-freccia-e-cuore

 

Osservazioni conclusive: Se il cupido dovesse visualizzarsi sotto a degli elementi del vostro layout, aumentate il valore di z-index. Si può anche settare al meglio i valori di top:50px; left: -500px; per far iniziare il volo di Cupido dalla posizione desiderata.

Fonte | Floating Images Script -





33 commenti :

  1. Grande Ernesto davvero una bella trovata :D scusami se non è il post indicato però io sto inserendo piano piano tutte le cose che trovo nelle tue guide e va tutto alla perfezione solo che da quando ho messo le stelline che escono dopo il passaggio del mouse il blog mi sembra andare un pò a rilento, non lo so giudica tu


    questo è il blog -> http://rossovermiglioilblog.blogspot.com

    RispondiElimina
  2. @Andrea
    Non mi sembra un granché lento comunque non metterci troppe cose altrimenti oltre alla lentezza aumenta il rischio di incompatibilità tra i vari widget.

    RispondiElimina
  3. Ernesto mi consigli di togliere qualcosa o così va bene? :)

    RispondiElimina
  4. @Andrea
    Sonno scelte soggettive e riguardano anche il senso estetico di ciascuno. Come velocità può andare bene ma siamo al limite.

    RispondiElimina
  5. Quindi non devo aggiungere più niente visto che sto al limite :) grazie come sempre, sei gentilissimo

    RispondiElimina
  6. Eresto perdonami se ti disturbo ancora ma io vorrei sostituire nel mio sito il bottone che ho del mi piace con quello che hai tu sotto ogni post che mi sembra più grande ed è più visibile. La mia domanda è se il bottone è bianco al proprio interno oppure prende lo sfondo del blog?
    Vorrei togliere il mi piace ed il condividimi di tutte quelle piattaforme e mettere solo quelli di facebook :) in modo che siano grandi e ben visibili

    RispondiElimina
  7. @Andrea
    Non so quale codice stai usando perché Facebook ne ha cambiati parecchi. Prova con questo tutorial
    http://www.ideepercomputeredinternet.com/2011/03/come-inserire-e-personalizzare-il-mi.html

    RispondiElimina
  8. @Ernesto purtroppo attualmente ho 3 problemi:

    1)Io ho seguito la tua guida per mettere il like box nella mia pagina però mi viene tagliato e io non capisco il motivo purtroppo si accavalla anche con i pulsanti di condivisione come devo fare mi puoi aiutare?

    Blog ->http://rossovermiglioilblog.blogspot.com/

    2)Io nelle impostazioni Design->Post su blog->Ho messo le etichette ma nel sito non si vedono come posso fare per inserirle dato che da design non me le fa mettere?

    3)Il secondo te l'ho mandato su facebook perchè qui mi dice codice Tag non consentito SCRIPT specificato spero tu mi risponda, comunque riguarda il box del condividimi che purtroppo nonostante io metta i codici non appare proprio e non so come fare spero vivamente che tu mi possa aiutare come hai sempre fatto :)

    Vieni in mio soccorso ti prego mi sto dannando da ore con sto html :(

    Andrea

    RispondiElimina
  9. @Andrea
    Rispondo solo sul blog e uso i servizi di chat solo per contatti personali. Il codice di FB è cambiato di continuo in questi mesi. Segui quest'altra strada. Devi creare una applicazione e postare due righe di codice nella sezione head più dell'altro codice all'inizio della sezione body come illustrato in questo post

    http://www.ideepercomputeredinternet.com/2011/12/come-installare-i-plugin-di-facebook.html
    C'è anche il codice per aggiungere il bottone Mi Piace nello stile box_count da inserire nel punto esatto in cui vuoi che compaia il bottone.
    Per le etichette hai seguito la procedura giusta, se non si vedono si può fare poco ...

    RispondiElimina
  10. @Ernesto

    1)Sono riuscito dopo mille peripezie ad inserire il tasto mi piace come io desideravo.
    2)Le etichette le ho flaggata da Design->Post sul blog ma non escono proprio e non capisco il motivo.
    3)Io volevo mettere il bottone CONDIVIDI solo per facebook dato che gli altri social non mi interessano,con lo stesso stile box_count simile a quello che ho inserito adesso per il mi piace;solo che non riesco in alcun modo a farlo ci vorrebbe un iframe di questo tasto. Io ho seguito la tua guida per i bottoni e li ho inseriti però quando ci vado a cliccare mi dice :Pagina non trovata
    Spiacenti, la pagina che cerchi nel blog Rossovermiglio non esiste.

    Mi puoi aiutare con questi ultimi accorgimenti poi ti giuro che non ti disturbo più :(

    RispondiElimina
  11. @Andrea
    Il fatto è che non so come aiutarti. Se il bottone non funziona significa che non hai completato la procedura inserendo tutto il codice nel modello come illustrato nel post che ti ho linkato nel precedente commento

    RispondiElimina
  12. @Ernesto

    Ernesto prima mi funzionava perfettamente da quando ho messo il nuovo tasto del "mi piace" non funge più!
    La stringa che ho è questa ho seguito alla lettera le tue istruzioni dato che prima funzionava e adesso non funziona più non posso postarti il codice che ho perchè non mi è permesso per commento perciò volevo mandartelo su facebook :(

    RispondiElimina
  13. @Andrea
    Se prima ti funzionava, rimetti quello che avevi ;)

    RispondiElimina
  14. Era lo stesso di quello di prima presumo ma dopo che ho messo il like box non funge più cioè mi da quell'errore che ti ho detto prima, non so proprio come fare tu non hai qualche suggerimento?

    RispondiElimina
  15. @Andrea
    Sono i misteri di facebook. Non ho capito bene quali siano le tue esigenze. Prova con questo codice qui

    <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=box_count&amp;show- faces=true&amp;width=65&amp;height=65&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:65px; height:65px'/>

    Se lo inserisci all'interno del modello funziona di sicuro.

    RispondiElimina
  16. @Ernesto il tasto mi piace mi funziona a meraviglia io stavo parlando del tasto condividimi. Quello non mi funziona di nessuna maniera, mi da questo errore ->Spiacenti, la pagina che cerchi nel blog Rossovermiglio non esiste.

    RispondiElimina
  17. @Eresto
    Allora ti volevo aggiornare sulle mie condizioni attuali. Ho fatto un ripristino dei widget e le etichette sono riapparse ed il tasto condividi su facebook adesso funziona.
    Io ho seguito quella tua guida che mi hai linkato nel precedente post, come mettere i bottoncini di condivisioni per i vari social network e come allo stesso tempo rimuovere i bottoni che non vogliamo ed hai fatto l'esempio di blogspot io ho seguito la tua proceduta ma i bottoni rimangono sempre la non si tolgono.

    Tutto questo perchè mi sono arreso ad utilizzare il tasto di condivisione che era preimpostato insieme a gli altri perchè io volevo inserire il tasto CONDIVIDIMI come box_count uguale a come ho il mi piace solo che svolgeva la funzione di condivisione. Ho cercato in tutti i tuoi post e non tratti di come mettere il box_count come CONDIVIDIMI ma tratti solo del MI PIACE. In giro ho trovato diversi codici per inserirlo ma quando vado a fare anteprima mi da errore 500 dicendo che non ho chiuso diverse tag con . Credi di riuscire ad aiutarmi in questa impresa titanica di mettere sto maledetto box_count per il CONDIVIDIMI (il MI PIACE già lo ho)

    Posso inviarti anche su facebook gli eventuali codici dato che in questo post non mi è permesso così potresti farci anche un articolo se ti può interessare. Fammi avere tue notizie ernesto. Grazie per tutto quello che hai fatto per me sei stato davvero paziente se serve qualcosa fammi sapere.

    Andrea

    RispondiElimina
  18. @Andrea
    Prova a seguire questo post
    http://www.ideepercomputeredinternet.com/2009/11/come-inserire-il-pulsante-su-facebook.html
    Il problema è che il pulsante Condividi sembra l'abbiano tolto dai Social Plugin
    https://developers.facebook.com/docs/plugins/
    Lo Share non lo vedo più.

    RispondiElimina
  19. Si infatti :) vabbè ho accantonato l'idea mi sono dovuto arrendere :)

    Grazie Ernesto, per tutto!!!

    RispondiElimina
  20. @Eresto vorrei un tuo parere, il blog secondo a te sembra lento? Come lo giudichi? io noto che ha quel tocco di lentezza ma non so come posso ovviare a questo problema, tu cosa consiglieresti per questo inconveniente. Mi da un fastidio tremendo che non sia non risponda prontamente e sia quel pò lento :(

    RispondiElimina
  21. @Andrea
    Non bisogna fare delle considerazioni soggettive ma oggettive. Puoi andare sugli Strumenti per Webmaster > Prestazioni del sito oppure su Google Analytics

    http://www.ideepercomputeredinternet.com/2010/05/monitorare-le-del-sito-per-rendere-il.html

    http://www.ideepercomputeredinternet.com/2011/05/monitorare-la-velocita-di-un-sito-con.html

    A titolo di esempio ti posso dire che un blog su Blogger con la pubblicità è meglio che sia sotto i 9 secondi come prestazione del sito. Poi ci possono essere pagine con molte immagini che si caricano anche molto più lentamente.

    RispondiElimina
  22. Ho abilitato gli strumenti per webmaster :)
    Comunque io non ho idea di quale possa essere il problema perchè è leggermente lento, vedo blog molto più farciti che vanno una vera e propria bomba il mio ha solo 10 post e nessun widget specifico.
    Per quanto riguarda il secondo post che mi hai dato quello per monitorare la velocità con analytics non posso dato che io non ho la stringa di codice tra i due parametri che hai detto nel post e qui non me li fa inserire.

    RispondiElimina
  23. @Andrea
    La lentezza non è dovuta al numero dei post, se ne apre solo uno alla volta, quindi anche un blog che ne ha diecimila può essere più veloce di uno che ne ha 10. Nel tuo caso il rallentamento è dovuto ovviamente alle immagini di background. Sono molto belle ma molto lente a caricarsi specie nel tuo caso che è pure animata in formato GIF.

    RispondiElimina
  24. Spiegami un attimo Ernesto le immagini in background o lo sfondo? perchè una mia amica ha la stessa immagine di sfondo (http://ilviaggionellatesta.blogspot.com/) e a lei va benissimo tutto vedi come carica bene a differenza del mio. Anche il mouse con le stelline a me è rallentato mentre a lei scorre velocissimo. Mi daresti qualche consiglio per far si che sia veloce come il suo (lei ha molti più post di me quasi il triplo come è possibile?) vorrei ovviare a questo tremendo problema :(

    RispondiElimina
  25. @Andrea
    Il numero di post non c'entra nulla e neppure il colore dello sfondo. C'entra invece l'immagine di sfondo. Quando ti detti il codice per inserire lo sfondo caricasti l'immagine sul tuo account Picasa? Spero di sì perché se hai usato l'URL dell'immagine della tua amica questo può rallentare perché c'è una richiesta ulteriore di DNS da parte del browser. Se hai altre immagini di sfondo (le puoi trovare facilmente scorrendo il modello) prova a scaricarle, a caricarle sul tuo account Picasa e a cambiare l'URL. Questo dovrebbe velocizzare un po'.

    RispondiElimina
  26. No allora Ernesto, lo sfondo l'ho caricato tramite Design->Sfondo e lo misi. Però ti ricordi che rimase una parte con il vecchio sfondo e tu mi dicesti di fare questo passaggio:

    Prova a sostituire questo URL
    http://www.blogblog.com/1kt/simple/gradients_deep.png
    con quest'altro
    http://1.bp.blogspot.com/-wGVWfycD2qY/TyXfazn6sMI/AAAAAAAAArA/eBQCMU9SRl0/s0/1.gif

    e lo sfondò diventò tutto uniforme.

    Io non ho caricato l'immagine sul mio account Picasa, non so nemmeno cosa è. Spiegami un pò come funziona così capisco. Comunque ti ricordo che io ho inserito lo sfondo facendo Design->Sfondo e ho messo lo sfondo che ho salvato sul pc con la modalità affianca e rimase quel problema della non uniformità che tu mi risolvesti come ho citato sopra. :) Ti prego aiutami a fare quest'ultima cosa poi ti giuro che ho finito di romperti :)

    RispondiElimina
  27. @Andrea
    Se lo sfondo lo hai caricato nel modo che hai descritto allora è tutto OK. L'immagine è andata automaticamente su Picasa. La lentezza può essere un fatto soggettivo. Prova a vedere se puoi migliorare velocità del tuo sito con lo strumento illustrato in questo post
    http://www.ideepercomputeredinternet.com/2011/04/page-speed-online-per-rendere-piu.html
    che si trova a questo indirizzo
    https://developers.google.com/pagespeed/
    e poi fallo anche con l'altro blog che ha il tuo stesso sfondo. Non viene dato proprio il tempo di caricamento ma un voto su base 100 e delle indicazioni per migliorare.
    Il tempo di caricamento lo puoi misurare invece con il tool
    http://tools.pingdom.com/fpt/
    di cui trovi la recensione qui
    http://www.ideepercomputeredinternet.com/2010/04/pingdom-tools-per-testare-la-velocita.html

    RispondiElimina
  28. Ernesto lo sfondo è stato caricato proprio così.La lentezza l'ho valutata con 3 pc diversi da 3 diverse reti ed il sito si presenta sempre con quella punta di lentezza che il muove si muove a fatica le stelline sono lente e non clicca subito. Cioè come è possibile mi chiedo mi pare strano, perciò chiedevo a te come sembrava? dimmi la tua valutazione entrando nel sito riscontri questi problemi che io ti dico?.
    Ho seguito questi due strumenti che mi hai dato e il risultato del primo è stato per il mio blog di 93 mentre per quello della mia amica 84.
    Mentre ho usato il pingdom tools ed il risultato è stato questo ->


    http://rossovermiglioilblog.blog…
    Tested from Amsterdam, Netherlands on February 11 at 01:05:55
    Page size
    1.3MB
    Load time
    7.13s
    Requests
    184
    Perf. grade
    84/100
    Your website is slower than 79% of all tested websites

    Secondo te si può fare qualcosa o rimarrà sempre così? PErchè nonostante lei abbia più widget e molte più cose a lei è così limpido e senza nessun minimo rallentamento. Invece io ho davvero molte cose in meno rispetto a lei e mi va così lento mi sposta proprio il sistema nervoso. Non possiamo intervenire sull'html rinserendo lo sfondo? rifacciamo l'upload dello sfondo e proviamo che ne dici?

    RispondiElimina
  29. @Andrea
    I dati sono buoni e quelli della tua amica sono peggiori dei tuoi (84 su 100 invece di 93 su 100). Ti ho detto che è anche una questione soggettiva.

    RispondiElimina
  30. P.S.
    Puoi accedere a Picasa da questo indirizzo
    https://picasaweb.google.com/home
    inserendo (se te lo chiedono) i tuoi dati di accesso a Blogger. Ci sono gli album di tutte le immagini che hai caricato sui post o sul modello.

    RispondiElimina
  31. E una volta che sono entrato dentro picasa ed ho carica l'immagine cosa devo fare di preciso Ernesto? Mi ripeteresti il processo da fare :) perchè l'immagine non la trovo dello sfondo dentro il mio account.

    RispondiElimina
  32. @Andrea
    Quando hai caricato l'immagine dello sfondo su un album qualsiasi ne acquisisci l'URL come indicato qui
    http://www.ideepercomputeredinternet.com/2010/07/picasa-e-lo-strumento-piu-completo-per.html
    quindi lo sostituisci agli URL di background del tuo blog andando su Modifica HTML. Ricordati di salvare il modello. Non so però quanto possa servire se hai caricato lo sfondo con il Designer Modelli.

    RispondiElimina
  33. Ernesto ho sostituito con il nuovo URL ma le cose non sono cambiate...vabbè non resta che arrendersi all'evidenza dei fatti. Ti ringrazio per il tempo che mi hai dedicato :)

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.