Pubblicato il 31/05/13e aggiornato il

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

slide-widget-social-network
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.





5 commenti :

  1. Salve,sto modificando graficamente un blog e grazie ai suoi post non sto trovando grandi difficoltà. L'unica questione a cui non riesco a trovare una soluzione è questa: vorrei fare in modo che il menù principale scorra assieme alla pagina. E' possibile farlo su Blogger?

    RispondiElimina
    Risposte
    1. La tua domanda c'entra qualcosa con questo post? Se fosse così non si può fare nulla perché questo widget è concepito in questo modo. se invece vuoi inserire un menù flottante che rimanga fisso allo scorrere della pagina puoi consultare questo post
      http://www.ideepercomputeredinternet.com/2013/08/fixed-drop-down-menu-blogger.html

      Elimina
  2. Cercavo un tutorial per poter inserire una scrollbar che rimanesse sempre in alto. Mi spiego: hai presente il Blog di Gad Lerner?
    Quando si leggono gli articoli, e si scrolla con il mouse per leggerlo tutto, la sidebar rimane sempre in alto. Ecco credo di essermi spiegato. Ho cercato qui tra gli articoli, ma non mi sembra che sia presente. Buona domenica.

    RispondiElimina
    Risposte
    1. Non ho presente il blog di Gad Lerner ma prova a leggere questo post
      http://www.ideepercomputeredinternet.com/2013/04/fixed-widget-blogger.html
      per vedere se è quello giusto per te
      @#

      Elimina
    2. grazie sì, credo proprio di sì. Ora provo subito quel codice.

      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.