Come inserire una bellissima slideshow in blogger ~ Template x blogger

Ti piace di più navigare in un sito statico, cioè con il layout fermo e uguale per tutte le pagine o preferisci entrare in un blog dinamico, cioè che le home e le pagine dei post sono diverse e con qualche widget che crea un pò di movimento?
Io faccio parte della seconda categoria e se anche tu sei come me non puoi non interessarti a questo bellissimo widget.

Questa slideshow permette di vedere una selezione di immagini e di testo che in automatico scorrono e cambiano, puoi inserirne quante vuoi anche se consiglio di non metterne più di quattro-cinque altrimenti diventa troppo pesante. Consiglio anche di inserirlo solo nella homepage sopra ai post.

Come installarlo:

1- Vai su Layout --> Modifica HTML ed espandi i modelli widget. Come sempre salva il template prima di fare queste operazioni

2- Cerca il tag </head> e incollaci subito prima questo codice

<style type='text/css'>

#slideshow {list-style:none; color:#fff}

#slideshow span {display:none}

#wrapper {width:506px; margin:50px auto; display:none}

#wrapper * {margin:0; padding:0}

#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}

#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}

#information h3 {padding:4px 8px 3px; font-size:14px}

#information p {padding:0 8px 8px}

#image {width:500px}

#image img {position:absolute; z-index:25; width:auto}

.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}

#imgprev {left:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1T1hkfMUspgqdnl1noY1qzG3J7ywtE3jADl2_-b5lq0nm8_ALNJjuHk3qXJKwy22PbCuXqd8JhuQjANa64kBapAj88djqJ_GvFyqNp-f2rHKsRQQPI3KiHdJ5L2wf-_TPDHx-jAbRxrHZ/) left center no-repeat}

#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguRSHAL5TC8EC0WoKzK3YmuxH6HsRWdD7gzRiE7jDludHGyH5kiJeGTyLYBDFyPJN8-todY-pNaOsUn-B4yZJXhb_9WeqaZjIhDunJOcY8DzRNRRcCEjlZwVWEgMwfke6snAypofHR2TM7/) right center no-repeat}

#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}

.linkhover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhARtQspqoOzrZpp0ahP5Q46A6Rk9cnzg5koyISOVBNMbXn_0CYRWYtlLsM1d-hvW9ox_0sghPGmY266yR4hjCcDLxLZbqW1_gWJ0bEscSJWOf1uIDpKdAF3XnDZ2VGOoawO9lEYL-qKFkn/) center center no-repeat}

#thumbnails {margin-top:15px}

#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoPHyEtIrNzjK5P5pAhzNhSFS_Umz3AwahSD-HByYXdTdMMygGik5YvVEOKc3wJtSMc0PEyy-aNeyD9heaLOe5RApQEPbGQz52j5neRHsZFEbwoUPUV_RO6GaZfiBQyWK0tbUw0E-Mb7dw/) center center no-repeat; background-color:#222}

#slideleft:hover {background-color:#333}

#slideright {float:right; width:20px; height:81px; background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs_OXTgTPk0IHHkektuYJlG1QWWrtQS5N2OmXdTeOwiXZLCmPN43yztMwjzfh9lPv-7OIU8-78k1RW6t5p0PZxPNWpwxsHvS3QfeJON3AtxDkKXUljXeDFfzOCnaqxukOgMaxgHnLTKRTV/) center center no-repeat}

#slideright:hover {background-color:#333}

#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}

#slider {position:absolute; left:0; height:81px}

#slider img {cursor:pointer; border:1px solid #666; padding:2px}

</style>

3- Ora vai giù e cerca il tag </body> e incolla appena prima questo codice

<script src='compressed.js' type='text/javascript'/>



<script type='text/javascript'>

$(&#39;slideshow&#39;).style.display=&#39;none&#39;;

$(&#39;wrapper&#39;).style.display=&#39;block&#39;;

var slideshow=new TINY.slideshow(&quot;slideshow&quot;);

window.onload=function(){

        slideshow.auto=true;

        slideshow.speed=5;

        slideshow.link=&quot;linkhover&quot;;

        slideshow.info=&quot;information&quot;;

        slideshow.thumbs=&quot;slider&quot;;

        slideshow.left=&quot;slideleft&quot;;

        slideshow.right=&quot;slideright&quot;;

        slideshow.scrollSpeed=4;

        slideshow.spacing=5;

        slideshow.active=&quot;#fff&quot;;

        slideshow.init(&quot;slideshow&quot;,&quot;image&quot;,&quot;imgprev&quot;,&quot;imgnext&quot;,&quot;imglink&quot;);

}

</script>

IMPORTANTE: Scarica il file compressed.js e le 5 immagini da qui e caricale sul tuo servizio di hosting.

4- Salva

5- Ora vai sul Layout --> Elementi pagina, aggiungi un gadget di tipo html/javascript dove preferisci venga visualizzato, anche se ti ripeto il consiglio di inserirlo sopra i post e incolla questo codice

<ul id="slideshow">





<li>

<h3>Titolo 1</h3>



<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA18g8RKfkAhiWz1jddFIdire0xSp7yBOVx5Was1PdxPvJsPORl4kNLdZv7ACan_Ey6eI52BtWgj9dv04kgiKoaMyySDm_Yxeg5p_HF7kspZMloeJLL8tfNCRLdg9cYM_yZJfBfgF-1C2c/+1+big.jpg</span>



<p>Descrizione 1</p>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHYT2HnPeT7EvQLYHNwaGAi7vMySCzJolnZ8pGgdYj8aMIw1yGOfwq711b8OuGRik8ZD7ah-vtu_y5uhfvL0RcFAubtBWC4ZOGyn0z2p7UI0ktoHuzfNZPWGflcC6-0ZCWKiPdaePibMNW/+1+small.jpg" alt="Bionic" /></a>

</li>





<li>

<h3>Titolo 2</h3>



<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ8HO2G_YvQpC8rJbubcsYeWgPQ0fg4JtAcadAKBbyv3aRPjN8YmH5YkvwUbFP6r9X6jpMMJamc59VCosaWHfBHT0vNAGwViTKByR19TTm6nyl1IPEOGolJF-bTFNEEo4pCth8gkJGeVgv/+2+big.jpg</span>



<p>Descrizione 2</p>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmtjOdxKO8OB13SYAOtEs47-NOYPWVSTQ_HjyRAfW1Yy7Za1nM1bwV4-3BxchVaw84RoSdEE4jza3q5_bZ5bkjMvdYQeVTl5wz_PczbPLOWh50Iddw5V_klwEksrF5V4dm58drTSu1C7Ih/+2+small.jpg" alt="MOH" />

</li>





<li>

<h3>Titolo 3</h3>



<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMvRCIsZUXSOzuz76-d0Q7dnVB547yxV1C-SNpUZPZUy5Gq9qIlOcneDkA2UD1XskSWsLROz-IsYFQTshnSip4vW_4SjGWqFzBmt02Z7XuXSS1dhSbFd_RNLcZnmfRAuYHlylpTot7rNlk/+3+big.jpg</span>



<p>Descrizione 3</p>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtLLe6JC4u_kLaWe4Z45kPf7YI7FRHjlSX1xZ23Yq2czMF_sFWChEI4__R87_D9UXP-3XCPwSQ9RakML83piQhyJT4FXVlxMhrccYfd2s-1ou_MxBUn67UmsonS2X0cMb90rsJrLXl4oSV/+3+small.jpg" alt="Fear" /></a>

</li>





<li>

<h3>Titolo 4</h3>



<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE5vZDSrkgO7-XxPjPg9jgOV6psQRGZ2WbnIIbNRuvhXHHWWZqJ3nlZyJiKNj2D1bOXEDGgwIflH2sxAj_E8SmUlKTV1uiuVhwTZQTHvgDE6D_TSXD-rs0rM6a6X0-2x9sQWtMdz_3ksDt/+4+big.jpg</span>



<p>Descrizione 4</p>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhivB2cIWg6ZojgIjGHygtRxypBiUuZYnu3dRnD8ptW6_OvTmnsBqtokpD2rQ9Gf1NRr1esP6mBp7lPtwmBMj9VKVQOw09rRI6EYIF4B_j1qdm6VRkRX6tiuFq6Ta-b6SFaboxC0K3yGyW1/+4+small.jpg" alt="Farcry" /></a>

</li>





<li>

<h3>Titolo 5</h3>



<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8yI05Uh6DLJJ2wVKOXEcERxxOdRZbnclD5zdQtGy-gN0Q8b4UlVCEQ0BOF5WePlg1kfap6EYnWTJxDi58nJ8LPEvrPbDtL4R_OJ2QCrOMrmL2pqcrYx31qgt7E_LT-SmOyyQr0ALqXpJy/+5+big.jpg</span>



<p>Descrizione 5</p>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC_fkSg3GTiaQfGjGDWYYFXrG-yslP5qe_XQiT6JflRbwu0LX5BiBKHiPsGKomBvu_B_naVB_nDq7MaPaf27vEwxDULzKBiVbhON8esKDcG9GBNPT764ODQUA0_ulS_FDIDJ1Qlbv5X_eZ/+5+small.jpg" alt="Farcry 2" />

</li>

</ul>



<div id="wrapper">



<div id="fullsize">



<div id="imgprev" class="imgnav" title="Previous Image"></div>



<div id="imglink"></div>



<div id="imgnext" class="imgnav" title="Next Image"></div>



<div id="image"></div>



<div id="information">

<h3></h3>

<p></p>

</div>

</div>



<div id="thumbnails">



<div id="slideleft" title="Slide Left"></div>



<div id="slidearea">



<div id="slider"></div>



</div>



<div id="slideright" title="Slide Right"></div>



</div>



</div>



</div>

6- Sostituisci i vari titoli e le varie descrizioni con le tue e cambia le immagini.

7- Salva