Avvicinando il puntatore del mouse al pusante ,automaticamente si apre il box e si richiude non appena si sposta il cursore .Se avete altri pulsanti installati come nel mio caso , fate attenzione a posizionarli sotto al nuovo pulsante Facebook o sopra nel margine alto per una ragione molto semplice ; il widget quando si apre copre uno spazio di 345 px in altezza e 288 di larghezza ,se inserite un pulsante appena sopra non sara' possibile cliccarlo per l'effetto mouseover del box .Per installare il box come sempre scaricate una copia di sicurezza del modello .Utilizzando i tasti Ctrl + F cercate il tag di chiusura </head> ,al suo interno copiate lo script che richiama le librerie JQuery ( se utilizzate Script.aculo.us o altre librerie nel vostro blog non ci sono problemi di conflitti con JQuery )
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">jQuery.noConflict();jQuery(function (){jQuery(".slide_likebox").hover(function(){jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium");},function(){jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium");},500);return false;});</script>
Ora bisogna creare il foglio di stile : al interno del tag ]]></b:skin> incollate il codice sotto :
.slide_likebox {float:right;
width:288px;
height:345px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvcujv4LuAcE9plLiXrGDt1aI3y2lMIlDNhMuAq42R5JDKBAE59Q_ORXlXgeQmNSPX5bucmPfHmmPBZawZtuiZSRfJSy2Rq_XQ_RErGSHs_sEDdV5cZ8UlQFEbHEcj1wVyLHVZHBBlHRI/) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}
Il parametro in rosso puo essere modificato per posizionare il pulsante verso su o verso giu' ,fate attenzione a non spostare il pulsante troppo in alto perche' il box aprendosi puo' non apparire completamente .Fatto questo salvate il modello e inserite in un widget HTML/Javascript il codice sotto sostituendo il mio account Facebook segnato in rosso con il vostro :
<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fhttp://ww.facebook.com/pages/Vincicoppolas-blog-tips-e-tricks/15261943476092&width=238&colorscheme=
light&connections=15&stream=false&header=false&height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:228px; height:320px;" allowtransparency="true"></iframe></div></span></div></div>
