Widget slide per Blogger che si visualizza quando si scorre la pagina.

Come mostrare un banner slide con i bottoni per seguirci su Twitter, Google Plus e Facebook. C'è anche il bottone di chiusura dello slide.

Vi ricordate il widget dei Post Simili per Blogger che compariva con effetto slide alla fine della pagina? Si trattava di un gadget con effetto scorrimento che prendeva spunto dai Post Consigliati sempre per Blogger. Entrambi sono una rielaborazione del Recommendations Bar Plugin di Facebook. E vi ricordate la finestra modale per invitare i lettori a seguirci sui social network? Era una finestra popup che appariva all'apertura del blog e che il visitatore poteva chiudere ma che invitava a seguire l'autore del sito sui te più importanti social network.

Unificando queste due tipologie di widget vado a presentare un gadget che mostrerà un banner a scorrimento nella parte bassa a destra della pagina quando si inizierà a scorrerla e che potrà essere chiuso cliccando sulla crocetta. Nel banner c'è l'invito a seguirci e condividere su Google Plus, Facebook e Twitter con i relativi bottoni che potranno essere cliccati

Per l'installazione si va su Modello > Modifica HTML e si cerca la riga di codice ]]></b:skin>. Subito sopra si incolla questo codice che può essere personalizzato nei parametri colorati in rosso 

/* Social Network Slide Widget by www.ideepercomputeredinternet.com */
#IpCeIslide{
background:#f5f5f5;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-moz-box-shadow:inset 0 0 3px #444;
-webkit-box-shadow:inset 0 0 3px #444;
box-shadow:inner 0 0 3px #444;
padding:12px 14px 12px 14px;
width:300px;
position:fixed;
bottom:15px;
right:3px;
display:none;
z-index:9;
height:65px;
}

Si salva il modello. La modifica dei valori è necessaria se si vogliono modificare le dimensioni (300x65), lo sfondo (#f5f5f5), l'arrotondamento (6px) e la posizione (3 pixel dalla destra e 15 pixel dal basso). Si va adesso su Layout > Aggiungi un gadget > HTML/Javascript e si incolla questo secondo codice

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js"></script>
<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#IpCeIslide").show("slow");else $("#IpCeIslide").hide("slow");});function close_slide(){$('#IpCeIslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<div style="display: none;" id="IpCeIslide">
<a style="position:absolute;top:14px;right:10px;color:#444;font-size:20px;font-weight:bold;" href="javascript:void(0);" onclick="return close_slide();"> X </a>
<span style="font-family: Trebuchet MS; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Segui e condividi sui social!</span><br />
<div style="float:left; margin:14px;"><g:plusone annotation="none"></g:plusone></div>
<div style="float:left; margin:14px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fideepercomputeredinternet&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>
<div style="float:left; margin:14px;"><a href="https://twitter.com/parsifal32" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Segui @parsifal32</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>
<div class='clear'></div>

Non occorre mettere il titolo. Si salva e si posiziona a piacere nel layout. Se avete già installato JQuery nel template evitate di incollare la riga evidenziata di giallo mentre le righe evidenziate di verde dovranno essere sostituite dall'indirizzo della vostra pagina fan e dal vostro nome utente su Twitter.