Hei!
Hvis du går innpå vg.no, så ser du annonsen til høyre. Når du blar nedover på siden deres så ligger den helt i ro. Hvordan greier de dette ? Kan noen gi meg kodene og fortelle meg hvordan jeg kan ha dette på venstre og høyre side og ikke bare på høyre side som VG har. Tusen takk for all hjelp!
Det er ikke så lett å forklare deg hvordan man gjør dette når du ikke sier noe om hvilken plattform du kjører på. Dersom du bruker Joomla eller Wordpress f.eks finnes det plugins for å vise annonser som helt sikkert kan tilpasses.
Jeg har selv fått “utviklet” dette til mitt phpBB-forum, men det er et par år siden og jeg vil tro at det finnes flere ferdigløsninger på dette nå.
Dette hører vel heller ikke hjemme under “Webdesign / Grafisk design”, men det er jo en annen sak.
Nettsiden er i PHP. Jeg bruker ikke WordPress, så da er det vanskelig å finne ut hvordan ja.
Det er mulig jeg misforstår helt, men er det ikke bare snakk om at annonsen slutter å scrolle når den når toppen av siden.
I såfall så oppnås det med å sette position:fixed i css.
Prøv det så skal du se at annonsen står bom stille når du scroller.
Trikset med å få den til å stå stille kun når den når toppen av siden er å bruke javascript.
Man lytter etter når annonsen når toppen av siden, og bytter fra position:absolute til position:fixed når det skjer.
Det er forholdsvis rett frem, og hvis det er dette du lurer på så kan jeg alltids lage et kjapt eksempel?
veldig enkelt i cssen bruker du position: fixed, og den blir det uansett hva du gjør
Det hadde vært fantastisk om du kunne lage et eksempel til meg. Tusen takk!
Her er ett kjapt eksempel på hvordan det gjøres, dette er med jQuery, som du må ha inkludert på siden din, og som de fleste i dag bruker. Dersom du ikke bruker jQuery til noe annet vil det nok lønne seg å skrive det om til ren javascript, noe jeg kan alltids kan gjøre dersom det skulle være nødvendig!
Det kan være at småting må endres litt på, dersom annonsen av en eller annen grunn ikke holder samme posisjon fra venstresiden eller lignende så er det fordi den ligger i undermapper på siden din, spør hvis det er noe!
Tusen takk adeneo! Jeg er litt nybegynner på dette. Hvordan bytter jeg ut bildet med en adsense kode ?
Bildet er satt som bakgrunn i css, bare fjern hele bakgrunnen og sett inn adsense koden i elementet, slik:
[CODE]
Pass på at bredde og høyde på #annonse i css er likt som den bredden og høyde du velger på annonsen din, jeg valgte 160x600px i eksemplet, som vel er det som kalles “wide skyscraper”.
Hvis du lager dette i PHP så er det et tips å legge adsense koden i en egen fil og bare inkludere denne inn i elementet, det gjør det enklere å endre på annonsetyper og stiler senere, men hvis du ikke vet hvordan du gjør det så er det ikke noe du trenger å rote noe med.
Takk skal du ha! Og hvor skal jeg sette inn Javascript koden:
$(function() {
var ad = $(“#annonse”),
adTop = $(“#annonse”).offset().top;
$(window).on('scroll', function() {
var T = $(this).scrollTop();
if (T>adTop) {
ad.css({position : 'fixed', top: 0});
}else{
ad.css({position : 'absolute', top: adTop});
}
});
});
Bruker denne siden din jQuery fra før av, er det noen plugins osv. ?
Hvis du allerede har en ekstern javascript fil som kan passe så er det beste å legge det inn der, men det er nok ikke så lett å få det til hvis man ikke kan noe javascript.
Du kan også legge inn koden rett i php/html filen din, noe sånt:
[HTML][/HTML]
Bruker du ikke jQuery så virker det litt overkill å hente inn det biblioteket bare for dette, men for å begynne å bruke jQuery kan du bare linke til Google’s Ajax API og legge inn følgende i seksjonen på nettsiden din:
[HTML][/HTML]
Men sjekk at det ikke er noe annet der som det står jQuery på, og koden i eksempelet krever jQuery versjon 1.7 eller nyere.
Ja siden bruker jQuery fra før, men det virker ikke når jeg limer inn den første koden.
Hvis det er en litt eldre versjon av jQuery kan det tenkes det må endres litt:
[HTML]
[/HTML]
Prøv også å plassere det nederst på siden din, rett før
Er det scrolling som ikke virker, eller vises ikke annonsen?
Annonen vises, men scrollingen fungerer ikke.. Er det et spesielt sted jeg må lime inn koden?
Nope, annonser står normalt på “rot”, eller mao. under .
Noe sånt bør virke:
[HTML]
minside $(window).scroll(function() {
var T = $(this).scrollTop();
if (T>adTop) {
ad.css({position : 'fixed', top: 0});
}else{
ad.css({position : 'absolute', top: adTop});
}
});
});
</script>
Hvis du bruker Chrome eller Firefox /m Firebug høyreklikk på siden, trykk inspiser element, og trykk på konsoll, se om det er noen feil under “error”.
Nå fungerer annonsen helt fint på høyre siden, men når jeg prøver å få den 2. annonsen på venstre siden så fungerer det ikke. Den står bare helt i ro på midten av nettsiden min, så får jeg ikke flyttet den nøyaktig der jeg vil ha den. Vet du hva dette kan være ? Bruker akkurat den samme css oppskriften. Fikser scrollingen etterpå.
Er annonsene like store, og er plassert med samme avstand fra toppen, altså i utgangspunktet kun forskjellig avstand fra venstresiden av skjermen, eller er det andre forskjeller ?
Ja annonsene er like store. Og de skal plasseres ved siden av :
| MIDTEN |
| infoinfo |
| infoinfo |
| infoinfo |
De strekene som går nedover, er en annonse. Også den venstre annonsen går over “in” i “info”. Vanskelig å forklare. Men jeg får ikke venstreannonsen til å bli paralell med høyreannonsen.
Litt usikker på akkurat hva du prøver å få til, men her er et eksempel til, kanskje det hjelper deg noe?
Det siste eksemplet funket utmerket, men bare med bilder. Men en gang jeg satte in adsense koden min så gikk det ikke. Hva kan dette skylde ?