Come inserire una bellissima slideshow in 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(http://4.bp.blogspot.com/_4HKUHirY_2U/SxIRDLhbFvI/AAAAAAAAAZM/4N4RrfeWPdA/left.gif) left center no-repeat}

#imgnext {right:0; background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/SxIRJLGnjKI/AAAAAAAAAZc/Z99UWtjYHeo/right.gif) right center no-repeat}

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

.linkhover {background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/SxIRGajwsfI/AAAAAAAAAZU/9e3kt7Z5Bjo/link.gif) center center no-repeat}

#thumbnails {margin-top:15px}

#slideleft {float:left; width:20px; height:81px; background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/SxIRMN8VUeI/AAAAAAAAAZk/BTNwDZsGQhw/scroll-left.gif) center center no-repeat; background-color:#222}

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

#slideright {float:right; width:20px; height:81px; background:#222 url(http://2.bp.blogspot.com/_4HKUHirY_2U/SxIRPJktr1I/AAAAAAAAAZs/Z3Qj8DTDrMw/scroll-right.gif) 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>http://2.bp.blogspot.com/_4HKUHirY_2U/SxIRTF4hqFI/AAAAAAAAAZ0/a0rDe2UC838/slideshow+1+big.jpg</span>



<p>Descrizione 1</p>

<a href="#"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxIRWePfVYI/AAAAAAAAAZ8/MSmCLCmWA8k/slideshow+1+small.jpg" alt="Bionic" /></a>

</li>





<li>

<h3>Titolo 2</h3>



<span>http://3.bp.blogspot.com/_4HKUHirY_2U/SxIRePsmefI/AAAAAAAAAaE/1bEo7Jhje7Y/slideshow+2+big.jpg</span>



<p>Descrizione 2</p>

<img src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxIRhli6o6I/AAAAAAAAAaM/fmkIOf7MPtE/slideshow+2+small.jpg" alt="MOH" />

</li>





<li>

<h3>Titolo 3</h3>



<span>http://1.bp.blogspot.com/_4HKUHirY_2U/SxIRlhta4NI/AAAAAAAAAaU/91As7SkDIZE/slideshow+3+big.jpg</span>



<p>Descrizione 3</p>

<a href="#"><img src="http://3.bp.blogspot.com/_4HKUHirY_2U/SxIRonaYyII/AAAAAAAAAac/ls3j_gSduPk/slideshow+3+small.jpg" alt="Fear" /></a>

</li>





<li>

<h3>Titolo 4</h3>



<span>http://2.bp.blogspot.com/_4HKUHirY_2U/SxIRudm44wI/AAAAAAAAAak/xPjT8DtBq9s/slideshow+4+big.jpg</span>



<p>Descrizione 4</p>

<a href="#"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxIRxSG7ulI/AAAAAAAAAas/ct3UpnpLKAM/slideshow+4+small.jpg" alt="Farcry" /></a>

</li>





<li>

<h3>Titolo 5</h3>



<span>http://1.bp.blogspot.com/_4HKUHirY_2U/SxIR4NEkreI/AAAAAAAAAa0/B0ab0ypP_z4/slideshow+5+big.jpg</span>



<p>Descrizione 5</p>

<img src="http://4.bp.blogspot.com/_4HKUHirY_2U/SxIR8SoimVI/AAAAAAAAAa8/LJ0Ggp_2Wz4/slideshow+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

Altri articoli simili:



0 commenti: