[Mini-tutorial]Pimp my Blogspot.com con Javascript

[robertes]

Piccolo tutorial che vi consente, applicando delle librerie in javascript come moo.fx e prototype, di migliorare l'aspetto del vostro blog sulla piattaforma blogger!!

-E' importante avere un server esterno al quale appoggiarvi per caricare le librerie che vi servono!

STEP1
Andate nell'area admin del vostro blogspot e cliccate su modello, fatto questo selezionate tutto il contenuto della vostra textarea,nella quale è riportato il vostro template di default! Fate un copia-incolla in un file di testo, per effettuare un backup

STEP2
Caricate le librerie che vi servono sul vostro server in una cartella chiamata js , le trovate su questo sito http://prototype-window.xilinus.com/download.html per gli effetti sulle finestre!Qua per il resize dei div http://moofx.mad4milk.net/ e qua per l'effetto lightbox sulle immagini http://www.doknowevil.net/litebox/ [questo utilizza una libreria + leggera rispetto alla prototype]

STEP3
Ritorniamo nell'area di amministrazione e clicchiamo su MODELLO, nella textarea cerchiamo il tag <$BlogMetaData$> e aggiungete le seguenti righe

<link rel="stylesheet" href="http://www.tuoserver.it/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.tuoserver.it/js/prototype.lite.js"></script>
<script type="text/javascript" src="http://www.tuoserver.it/js/litebox-1.0.js"></script>
<script type="text/javascript" src="http://www.tuoserver.it/js/moo.fx.js"></script>
<script type="text/javascript" src="http://www.tuoserver.it/js/moo.fx.pack.js"></script>
<script type="text/javascript">
 window.onload = function() {
  myHeight  = new fx.Height('featurebox2', {duration: 700});
              myHeight2 = new fx.Height('featurebox3', {duration: 700});
  myHeight3 = new fx.Height('featurebox4', {duration: 700});
  myHeight4 = new fx.Height('featurebox5', {duration: 700});
              myHeight.hide();
         myHeight2.hide();
         myHeight3.hide();
              myHeight4.hide();
 }
</script>
<!-- Prototype window -->
<script type="text/javascript" src="http://www.tuoserver.it/js/prototype.js"> </script>
<script type="text/javascript" src="http://www.tuoserver.it/js/effects.js"> </script>
<script type="text/javascript" src="http://www.tuoserver.it/js/window.js"> </script>
<link href="http://www.tuoserver.it/themes/default.css" rel="stylesheet" type="text/css">
<link href="http://www.tuoserver.it/themes/alphacube.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
// Windows with an URL as content
  function a(ciao) {
 ciao=ciao;
 win2 = new Window('dialog2', {title: "Scrivi un commento",
          className: "alphacube",
          bottom:70, left:100, width:400, height:250,
          resizable: true, url: ciao, showEffectOptions: {duration:2}})
          win2.show();
                                                                win2.setDestroyOnClose();
          }
</script> 

In questo modo abbiamo linkato le librerie e i file che ci serviranno!!! Tra le ultime righe noterete una funzione a() serve per passare il link ai commenti di ogni post su blogspot, e farlo aprire in una prototype window [qua vedete degli esempi http://prototype-window.xilinus.com/samples.html]

STEP4
Cominciamo ad applicare le librerie appena caricate! Cerchiamo la riga

<a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a> 

Contiene il link per i commenti ai post e la sostituiamo con questa:

 <a href="#" class="comment-link" onclick="a('<$BlogItemCommentCreate$>')"> <$BlogItemCommentCount$> comments</a> 

[robertes]

In questo modo richimiamo la funzione a() di cui vi parlavo, e passiamo il link!

STEP5
Spostiamo la nostra attenzione sulla sidebar!
Per applicare l'effetto resize sui div incollate questo

<a href="#" onclick="myHeight.toggle(); initLightbox();" ><h2 class="sidebar-title">PhotoGallery <img src="tuoserver.it/espandi.gif" border="0"></h2></a>

<div class="fx_Height" id="featurebox2" > 

Prima del div e poi alla fine chiudiamo il div featurebox2

</div> 

Per ogni div al quale volete applicare l'effetto dropdown dovrete cambiare myHeight.toggle con myHeight1 e featurebox2 con featurebox3 e così via!

STEP6
All'interno di uno dei div con effetto dropdown che avete appena creato inseriamo delle fotografie con effetto lightbox!! Questo è il codice

 <a href="http://www.tuoserver.it/foto/2.jpg" rel="lightbox[example]" title="title"><img src="http://www.tuoserver.it/foto/thumb/2.jpg" width="100" height="76" alt="Titolo della foto" class="bordered" /></a> 

Fate caso all'attributo rel che vi consente di applicare l'effetto sull'immagine!! Naturalmente a questo potete associare uno script che vi consente di prendere delle immagini a caso da una cartella, o che vi crea una vera e propria galleria di immagini!!

Bene a questo punto salvate il tutto e se non ho dimenticato di inserire qualcosa in questo tutorial dovreste aver PIMPATO il vostro blogspot!!

Spero vi sia utile!!

[robertes]

ok già il primo errore, forse questa nn è la sezione + indicata per un tutorial che nn riguarda l'amministrazione server!! Scusate se sono ot

[Ste]

tranquillo, ho spostato io il tutorial nell'apposito forum : http://www.hostingtalk.it/forum/tutorialweb/

anche se non riguarda l'amministrazione server, puo essere comunque utile

ps. benvenuto su ht e buon anno

[robertes]