Hvordan plassere annonser slik VG gjør?

En tråd i 'Javascript/Ajax' startet av Ingenting, 29 Feb 2012.

  1. Ingenting Medlem

    Innlegg:
    27
    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!
     
  2. Dag Frogner

    Dag Frogner Supermedlem

    Innlegg:
    4.692
    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.
     
  3. Ingenting Medlem

    Innlegg:
    27
    Nettsiden er i PHP. Jeg bruker ikke WordPress, så da er det vanskelig å finne ut hvordan ja.
     
  4. adeneo

    adeneo Medlem

    Innlegg:
    1.611
    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?
     
  5. Andreas Hatlem

    Andreas Hatlem Aktiv

    Innlegg:
    1.155
    veldig enkelt i cssen bruker du position: fixed, og den blir det uansett hva du gjør
     
  6. Ingenting Medlem

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

    adeneo Medlem

    Innlegg:
    1.611
    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!
     
  8. Ingenting Medlem

    Innlegg:
    27
    Tusen takk adeneo! Jeg er litt nybegynner på dette. Hvordan bytter jeg ut bildet med en adsense kode ?
     
  9. adeneo

    adeneo Medlem

    Innlegg:
    1.611
    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.
     
  10. Ingenting Medlem

    Innlegg:
    27
    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});
    }
    });
    });​
     
  11. adeneo

    adeneo Medlem

    Innlegg:
    1.611
    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: 29 Feb 2012
  12. Ingenting Medlem

    Innlegg:
    27
    Ja siden bruker jQuery fra før, men det virker ikke når jeg limer inn den første koden.
     
  13. adeneo

    adeneo Medlem

    Innlegg:
    1.611
    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: 29 Feb 2012
  14. Ingenting Medlem

    Innlegg:
    27
    Annonen vises, men scrollingen fungerer ikke.. Er det et spesielt sted jeg må lime inn koden?
     
  15. adeneo

    adeneo Medlem

    Innlegg:
    1.611
    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: 29 Feb 2012

Del denne siden