Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse
Slideshow i headern (headern byts ut)

Slideshow i headern (headern byts ut)

Uppdaterat: Videoinstruktion finns till höger

Något som kan vara lite skoj att lägga in är en header som ändras konstant.

Jag har letat upp ett script som inte använder sig av någon fräck övergång, men som iaf byter bild på headern och om man dessutom vill, så kan man skriva en liten information under bilden och även länka till den. Det öppnar upp för att använda den som en funktion där man väljer att göra reklam för vissa speciella inlägg eller så.

Om ni vill se ett enkelt exempel, så kan ni kika här: Header slideshow

Det är ganska så enkelt att göra detta, och det är bara er egen fantasi som sätter stopp för hur ni ska använda det.

Gör så här:

1. Ladda upp alla bilder som du vill använda, se till att de har samma storlek. Spara adressen till varje bild så att du kan använda det sen.

2. Kopiera följande kod:

<script language="JavaScript1.2">

/***********************************************
* Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var variableslide=new Array()

//variableslide[x]=["adress till bilden", "länk till en sida (valfritt)", "text till bilden, valfritt (går att skriva HTML-kod)"]

variableslide[0]=['bild1.gif', '', '']
variableslide[1]=['bild2.gif', 'https://www.designadinblogg.se', 'Här kan du skriva en text om du vill']
variableslide[2]=['bild3', '', '']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth='130px' //skriv i bredden på dina bilder här!
var slideheight='120px' //skriv i höjden på dina bilder här, inklusive eventuell text du tänkt använda!
var slidebgcolor='#F3F3F3'

//här ställer du in fördröjningen mellan varje bild (i millisekunder)
var slidedelay=3000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById

for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}

var currentslide=0

function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}

if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider

</script>

<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer>

3. Gå in i dina kodmallar, och leta upp

<div id=”header”>
<h1><a href=”${BlogUrl}”>${BlogTitle}</a></h1>
<h2>${BlogDescription}</h2>
</div>

4. Ta bort allt mellan <div id=”header”> och </div> och klistra in koden mellan dessa två.

5. Nu ska du lägga in adressen till bilderna, och det gör du där det står på följande vis:

variableslide[0]=[’bild1.gif’, ”, ”]
variableslide[1]=[’bild2.gif’, ’https://www.designadinblogg.se’, ’Här kan du skriva en text om du vill’]
variableslide[2]=[’bild3’, ”, ”]

Du byter ut bild1.gif, bild2.gif osv till de adresser som dina egna bilder har där du har laddat upp dem.
Om du vill ha fler än 3 bilder så kan du lägga till fler rader, se bara till att du följer sifferkoden med, så att du fortsätter på vaiableslide[3], variableslide[4] osv…

Om du vill lägga till en text under bilden, så skriver du den mellan de två sista ”snuttarna”, på variableslide[1]=[’bild2.gif’, ’ht… ser du var du lägger in texten.

6. Nästa steg är att ställa in bredden du har på dina bilder, och det gör du i följande kod:

var slidewidth=’130px’ //skriv i bredden på dina bilder här!
var slideheight=’120px’ //skriv i höjden på dina bilder här, inklusive eventuell text du tänkt använda!

Leta upp den koden och ändra värdena till de som stämmer med dina egna bilder. Om du väljer att ha en text, så skall det räknas in med. Men det är bara att testa dig fram lite med det.

Leta upp nedanstående kod för att ändra bakgrunden på din slider, används mest om du har text under varje bild.

var slidebgcolor=’#F3F3F3′

Nästa sak som du kan ställa in är hur lång tid det ska ta innan bilden byts ut, och det gör du i följande kodrad:

var slidedelay=3000

Värdet är i millisekunder, dvs 3000 är samma som 3 sekunder.

Nu är det bara att spara, och göra likadant på dina andra kodmallar.

Skribent och ansvarig för DDB. Driver Designa din blogg sedan juni 2015. Har bland annat studerat webbdesign, marknadsföring och online strategier både i Sverige och USA. Jobbar inom IT.

Läs mina andra inlägg

Lämna ett svar

Din e-postadress kommer inte publiceras.