Inserire un box bio espandibile!!!

Cercando un plugin che incorpori un box con le informazioni autobiografiche dell’autore del blog, mi sono imbattuta in questo fortissimo sito in cui viene spiegato passo a passo come aggiungere un bellissimo box nella testata del blog, che al passaggio del mouse si espande visualizzando le informazione biografiche!!! Mi è piaciuto.

Box_dynamic_on_Blogger_by_Blogghidee

Per aggiungerlo su WordPress, vi rimando al sito originario di Designmag di Jake Rocheleau. Ecco la demo originaria.

Ho provato ad aggiungerlo su Blogger ed ecco il risultato ahaha!!!

Step 1 – Entrate nella bacheca Blogger e da MODELLO > PERSONALIZZA > AVANZATO > CSS
incollate tutto il codice Css che trovate nel sito.
Step 2 – Su MODELLO > MODIFICA HTML > cercate /BODY e prima incollate questo pezzo di codice:

<script type=”text/javascript”> $(function(){ $(‘body’).on(‘mouseenter’, ‘#avatar-icon’, function(e){ $(‘#author-bio-box’).css(‘display’,’block’); }); $(‘body’).on(‘mouseleave’, ‘#author-bio-box’, function(e){ $(this).css(‘display’,’none’); }); }); </script>

Step 3 – Sempre su MODIFICA HTML cercate /Head e prima incollate questo pezzo di codice

<script src=”http://code.jquery.com/jquery-1.10.2.min.js”></script>

Step 4 – Ora andate su LAYOUT e cliccate su AGGIUNGI GADGET > cercate HTML JAVASCRIPT e incollate questo pezzo di codice in cui dovrete personalizzare le parti in grassetto e aggiungere il link diretto della vostra immagine profilo, dimensione 100 x 100 px.

<center><div id=”avatar-icon”>
      <img src=”Url della vostra immagine avatar” alt=”Autore avatar photo” />
     <center> <div id=”author-bio-box” style=”display: none;”>
        <img src=”Url della vostra immagine avatar” alt=”autore foto grande” />
        <h2><font><font>TITOLO</font></font></h2>
        <p><font><font>TESTO DESCRITTIVO</font><font>TESTO DESCRITTIVO</font></font></p>
      </div>
    </center></div></center>
Trascinate il gadget dove volete, io l’ho messo sotto la testata, al passaggio del mouse si aprirà il box con la descrizione 😀
Troppo bello!!! Ma potete anche lasciarlo nella sidebar.
Per disporre il box centrato dove giocare con i valori del codice author bio box che avete incollato in precedenza. Dovrete fare delle prove perché ogni tema ha misure diverse, perciò non venitemi poi a chiedere di farlo per voi ahaha!!! A me piace anche che si apra il box scostato dall’icona. E’ originale, ma non perfetto 😉
Devo posizionarlo meglio, ma sono troppo contenta del risultato: mi piace un sacco!!! Ho commentato dall’autore 😉
Wow….!!!

Se lo usate mettete link e feedback con i vostri esperimenti io ci farò un bel po’ di variazioni sul tema.

A presto,
BY BLOGGHIDEE 

 

 

 

Spread the love

Leave a Reply

This blog is kept spam free by WP-SpamFree.