Så här lägger du in ett bildspel på blogg.se.
Jag använder mig av ett jquery (javascript) plugin som kallas cycle.

På http://jquery.malsup.com/cycle/ finns demos för flera olika bildspel. Innan vi börjar bör du ta backup av din nuvarande kod. (kopiera, klistra in koden i tex ett text dokument)

För att jquery ska fungera ska vi först hämta det från google api.
Gå till design -> kodmallar och klistra in följande inom headtagen:

( KLISTRA HÄR)

Sedan hämtar vi pluginet från github, -klistra in följande på raden under:

Nu kan vi börja med inställningarna för bildspelet.
Jag ska visa ett exempel med en effekt som heter "ScrollHorz"  -horisontell scrollning, och en navigering med tumnaglar av bilderna ur bildspelet.
Denna kod ska klistras in i headtagen, under koderna vi redan klistrat in:

#slideshow innebär att vi kommer att använda en div med id slideshow.
.after('

') innebär att vi vill visa navigeringen som en lista efter slideshowen, och att den ska ha id nav.
fx: 'ScrollHorz' bestämmer vilken effekt vi vill ha.
speed: 1050 visar hur snabbt bilderna ska röra sig. Ju högre, desto långsammare.
pager: '#nav' visar att vi navigerar genom id nav.
• 
 
Är innehållet i navigeringslistan. Det är viktigt att a href länken inte ändras.

Img src + '" + slide.src + '" innebär att
man hämtar bilden från bildspelet, width och height i sin tur bestämmer storleken på tummnageln.

Nu ska vi placera själva bildspelet på sidan.
Klistra in följande exempelkod, inom body och förslagsvis inom din header tag (

)


<img src=http://cloud.github.com/downloads/malsup/cycle/beach1.jpg width="620" height="200" alt="Slideshow" class="first"/>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="620" height="200" alt="Slideshow" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="620" height="200" alt="Slideshow" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="620" height="200" alt="Slideshow" />


Vi har alltså en div tag samt fyra bilder. Bilderna länkas med fullständig url, här laddas ett par externa bilder, med bredden 620 och höjden 200. Du kan ändra bredd och höjd till vad du vill, men alla bilder ska vara av samma storlek.

Antalet bilder begränsas bara av hur du vill att din sida ska se ut.
Vi har lagt till två klasser förutom id:et slideshow, jag kommer att förklara pics och first strax.

Spara din kodmall och öppna istället din sidmall.