Hvordan plassere annonser slik VG gjør?

I

Ingenting

Medlem
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!
 
Dag Frogner

Dag Frogner

Supermedlem
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.
 
adeneo

adeneo

Medlem
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?
 
Andreas Hatlem

Andreas Hatlem

Aktiv
veldig enkelt i cssen bruker du position: fixed, og den blir det uansett hva du gjør
 
I

Ingenting

Medlem
adeneo skrev:
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?
Klikk for å utvide...

Det hadde vært fantastisk om du kunne lage et eksempel til meg. Tusen takk!
 
adeneo

adeneo

Medlem
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!

Eksempel!

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!
 
adeneo

adeneo

Medlem
Bildet er satt som bakgrunn i css, bare fjern hele bakgrunnen og sett inn adsense koden i elementet, slik:

Kode: 
<div id="annonse">
    <script type="text/javascript">
    <!-- google_ad_client = "ca-pub-xxxxxxxxxxxxx"; /* min annonse */ google_ad_slot = "99999999"; google_ad_width = 160; google_ad_height = 600; //-->
    </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>​


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.
 
I

Ingenting

Medlem
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});
}
});
});​
 
adeneo

adeneo

Medlem
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: 
<script type="text/javascript">
$(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});
        }
    });
});​
</script>

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 <head> seksjonen på nettsiden din:

HTML: 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

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.
 
Sist redigert:
adeneo

adeneo

Medlem
Hvis det er en litt eldre versjon av jQuery kan det tenkes det må endres litt:

HTML: 
<script type="text/javascript">
$(document).ready(function() {
    var ad = $("#annonse"),
        adTop = $("#annonse").offset().top;
    
    $(window).scroll(function() {
        var T = $(this).scrollTop();
        if (T>adTop) {
            ad.css({position : 'fixed', top: 0});
        }else{
            ad.css({position : 'absolute', top: adTop});
        }
    });
});​
</script>

Prøv også å plassere det nederst på siden din, rett før </body>
Er det scrolling som ikke virker, eller vises ikke annonsen?
 
Sist redigert:
adeneo

adeneo

Medlem
Nope, annonser står normalt på "rot", eller mao. under <body>.

Noe sånt bør virke:

HTML: 
<!DOCTYPE html>
<head>
    <title>minside</title>
    <script type="text/javascript" src="link/til/jQuery,js"></script>
    <link til css fil med css for #annonse></link>
</head>
<body>
    <div id="annonse">
        <script type="text/javascript">
             <!-- google_ad_client = "ca-pub-xxxxxxxxxxxxx"; 
             /* min annonse */ 
             google_ad_slot = "99999999"; 
             google_ad_width = 160;  
             google_ad_height = 600; //-->
        </script>
        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
        var ad = $("#annonse"),
            adTop = $("#annonse").offset().top;
    
        $(window).scroll(function() {
            var T = $(this).scrollTop();
            if (T>adTop) {
                ad.css({position : 'fixed', top: 0});
            }else{
                ad.css({position : 'absolute', top: adTop});
            }
        });
    });​
    </script>
</body>
</html>


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".
 
Sist redigert:
Du må logge inn eller registrere deg for å svare her.
Topp