Pubblicato il 26/08/12e aggiornato il

Effetto Immagini riflesse per Blogger.

Come inserire l'effetto riflessione nelle immagini di un blog su Blogger.
Questo effetto è stato realizzato da Neondragon e aggiunge automaticamente una riflessione nella parte bassa dell'immagine. La sua installazione non presenta difficoltà visto che si tratta di incollare una sola riga di codice nel template. Occorre però calibrare bene le distanze in modo che la riflessione sia esattamente allineata con l'immagine riflessa



Il parametro potrà essere aggiustato a seconda del modello di Blogger che si sta utilizzando. Nel momento in cui si introduce una certa classe nel codice di una immagine si avrà un effetto simile a questo

immagini.riflesse-blogger

L'Effetto Riflessione può essere utilizzato solo per particolari immagini e si può appunto decidere a quali foto applicarlo. Dopo aver salvato il template si va su Modello > Modifica HTML > Procedi e si cerca la riga </head>. Subito sopra si incolla questa riga di codice


<script src='http://www.isoladeifamosi-2009.it/upload/reflection.js' type='text/javascript'/>

Si salva il modello. Per applicare l'effetto occorre inserire la stringa class="reflect" subito dopo <img oppure prima di src="URL_IMMAGINE come mostrato nello screenshot seguente


classe-riflessione-blogger

Queste piccole differenze dipendono dal modo in cui si posta l'immagine nell'articolo visto che la possiamo scegliere da un album di Picasa, caricare dal computer, inserire incollandone l'indirizzo web oppure possiamo utilizzare Windows Live Writer magari con l'ausilio di una tabella.

Adesso vediamo se l'allineamento della immagine con quella riflessa è perfetto. Potrebbe cioè accadere che le due foto non siano perfettamente in asse

riflessione-effetto-blogger

Per passare dalla prima alla seconda immagine bisogna andare nuovamente su Modello > Modifica HTML > Procedi e cercare la riga ]]></b:skin>.Subito sopra si incolla il codice
.reflected {border:none !important; margin-left:-10px !important;  clear:both;}
e si salva il template. Il valore in rosso dovrà essere calibrato in funzione del modello.




8 commenti :

  1. ciao Ernesto, spero tutto bene =)
    ho una domanda: esiste una tale specifica da aggiungere al codice di un determinato dropdown menù(che con explore non funziona) , per far sì che funzioni anche con Explore?
    grazie in anticipo

    RispondiElimina
  2. Con safari mobile per iPhone non funziona. Forse è normale

    RispondiElimina
    Risposte
    1. @Giorgiogal
      Non ho l'IPhone quindi non posso testare. Questi effetti però è già tanto se funzionano con i computer desktop :), questo poi lo fa pure con IE!

      @GaiaVincenzi
      Sarebbe il sogno di tutti gli webmaster ci fosse un sistema da poter applicare universalmente per rendere i gadget fruibili anche con IE. Speriamo in IE10 che dovrebbe arrivare il 26 Ottobre :)

      Elimina
    2. grazie molte per la risposta ;) posso chiederti quale dropdown hai utilizzato tu per questo blog? =)

      Elimina
    3. @GaiaVincenzi
      Il MattBlackMenu
      http://www.ideepercomputeredinternet.com/2011/02/menu-orizzontale-su-piu-livelli-per.html

      Elimina
  3. ciao ernesto, l'ho messo anche io solo che la classe la inserisco dopo img src url prgima dello /> e funziona sia con cheome (desktop e mobile) che con firefox ( con safari dall'iphone funziona) volevo chiederti e normale che ci mette un po a caricare ???

    RispondiElimina
  4. Risposte
    1. @TeastardoEVero
      Sì è normale. All'inizio si vedono le immagini così come sono e in un secondo tempo si visualizza anche la parte riflessa.

      Elimina

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.