Werbebanner an der Seite

  • Servus!

    Ich würde gerne auf meiner Seite Inoffizieller "Verbotene Liebe"-Blog dezente Werbebanner links oder rechts des eigentlichen Blogs platzieren, also in dem grauen Bereich.

    Wie kann ich das am elegantesten bewerkstelligen?

    Schönen Gruß!

    Le.on

    PS: Toll wäre es die Banner so zu gestalten, dass sie beim Scrollen mitwandern. Wie setzt man das eigentlich um?

    Einmal editiert, zuletzt von Le.on (21. Oktober 2011 um 18:12)

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Theme ändern

    Um auf deinem Blog Werbebanner an den Seitenrändern anzuzeigen, solltest du die ein anderes BlogTheme mit dreispalten installieren und dann kannst du in den Widgets Werbebanner anzeigen lassen!

  • Wenn ich das richtig sehe, hast Du doch schon damit angefangen, denn Dein Blog ist ja im Container, das Du "page" genannt hast, und die füllt ja nicht die ganze Breite des Bildschirmes. Du könntest also hingehen und mit float und clear jeweils eine Div links und rechts vom "page" setzen. Wenn die Werbung nicht allzu häufig wechselt, würde ich es ausserhalb von WP einfach in den Quellcode einpflegen, sonst die Bereiche als zusätzliche Sidebars einrichten und dann über Widgets.

    Hoffe, ich habe das nicht allzu stark verkü+rzt und es bleibt verständlich, sonst frag ruhig nach.

  • Um auf deinem Blog Werbebanner an den Seitenrändern anzuzeigen, solltest du die ein anderes BlogTheme mit dreispalten installieren und dann kannst du in den Widgets Werbebanner anzeigen lassen!

    Nimm es mir nicht übel, aber das war nicht die Art "Lösung", nach der ich suchte. :-?

    Wenn ich das richtig sehe, hast Du doch schon damit angefangen, denn Dein Blog ist ja im Container, das Du "page" genannt hast, und die füllt ja nicht die ganze Breite des Bildschirmes. Du könntest also hingehen und mit float und clear jeweils eine Div links und rechts vom "page" setzen. Wenn die Werbung nicht allzu häufig wechselt, würde ich es ausserhalb von WP einfach in den Quellcode einpflegen, sonst die Bereiche als zusätzliche Sidebars einrichten und dann über Widgets.

    Hoffe, ich habe das nicht allzu stark verkü+rzt und es bleibt verständlich, sonst frag ruhig nach.

    Vielen Dank, das klingt schon mal sehr gut. Gern mache ich von deinem Angebot Gebrauch und frage noch mal nach. Wie genau kriege ich das mit "float", "clear" und "div" hin? Und meinst du mit "ausserhalb von WP" in den Theme-Dateien?

  • Hi,

    meiner Meinung nach gehört der linke Werbebanner-Bereich in den Header und der rechte in den Footer:

    PHP
    <body <?php body_class(); ?>>
    
    
    <div id="linke_werbung"></div>
    <div id="page">
    Code
    </div>
    <div id="rechte_werbung"></div>
    </body>

    die beiden id definierst Du in der style.css mit float:left bzw float:right.
    Damit das Ganze eingemittet bleibt, sollte es in einen Container gepackt sein, möglicherweise musst Du die Breiten der Werbeflächen explizit angeben, damit es nicht aus dem Ruder läuft.

  • Vielen Dank für deine Hilfe. Das linke Banner konnte ich nun positionieren. Beim rechten habe ich noch Schwierigkeiten, es nach rechts zu floaten zeigt keinerlei Effekt.

    Laut SELFHTML müsste "rechte_werbung" noch vor "page" im Quelltext stehen, wenn ich das richtig sehe.

  • css-Code

    Beide ad-div über das page-div
    zusätzlich die beiden ad und page div's in das wrapper-div packen

    also so

    Code
    <div id="wrapper">
    <div id="leftad">Inhalt</div>
    <div id="rightad">Inhalt</div>
    <div id="page">Inhalt</div>
    </div>
  • Vielen herzlichen Dank für deine Hilfe. :-)

    Ohne den Wrapper klappt es einigermaßen, mit sieht's recht chaotisch aus.

    Kann man den rechten Banner nicht vom rechten Bildschirm- oder Page-Rand aus positionieren?

    Eine schicke Seite hast du übrigens. Gibt es für dieses elegante automatische Scrollen nach oben durch Klick auf "wieder nach oben" ein Plugin?

  • Zitat

    Ohne den Wrapper klappt es einigermaßen, mit sieht's recht chaotisch aus.

    das ist wohl eher umgekehrt

    Wenn es mit Wrapper chaotisch aussieht, hast du das "wrapper-div" an der falschen Stelle geschlossen.

    So wie du es jetzt hast, mag es ja bei deiner Auflösung einigermaßen passen, aber verändere mal die Fenstergröße, dann siehst du was ich meine.

    wieder nach oben = scroll-to-top-plugin

  • Danke sehr für deine schnelle Antwort. :-)

    Ich hatte den "wrapper-div" wie von dir beschrieben unterhalb des "page-div" geschlossen, das zerschoss aber das Design.

    Nun habe ich ihn oberhalb des "page-div" geschlossen, aber ob das so Sinn der Sache ist? :-?

    Dass die Banner durch Verkleinern des Fensters bzw. bei geringerer Auflösung in den Hintergrund geraten, ist klar. Wenn kein Randbereich zur Verfügung steht, ist auch nichts mit Bannern. Oder wie hattest du das vorgesehen?

    Danke fürs Plugin. :-)

  • Nun wenn dir das so gefällt ist es ja ok, bei kleiner Auflösung sieht es halt komisch aus wenn die Banner verschoben oder nur zum Teil zu sehen sind.

    Wenn das Page richtig eingebunden ist, passt auch alles.
    Du hast es vor dem content geschlossen, das zerschießt dann natürlich alles.

    also vor dem footer-div schließen

  • Du hast recht. Das schließende "wrapper-div" musste ich in einer anderen Datei einfügen als das öffnende, nun klappt es. Hast du das alles mit Firebug hingekriegt, so ohne das Theme? Vielen Dank jedenfalls. :D

    Kann ich jetzt noch irgendwie erreichen, dass beim Verkleinern des Browserfensters bzw. bei geringerer Auflösung nicht nur der rechte Rand verschwindet, sondern bis zum Beginn des eigentlichen Seiteninhalts ("page-div") auch der linke?

  • Zitat

    Hast du das alles mit Firebug hingekriegt

    ja, wenn man sich damit etwas auskennt, geht das ganz einfach

    zum ausblenden

    man kann zwar die Auflösung abfragen z.B.

    Code

    Code
    <script type="text/javascript">
    var show_layer = function() {
        if (screen.width > 1150) {
            document.getElementById("leftad").style.display = "block";
        }
    }
    </script>

    body erweitern

    Code
    <body onload="show_layer()">

    und das "leftad" in der style.css mit

    Code
    display: none;

    erweitern

    dann wird die linke Werbung, erst ab einer Größe von 1150px angezeigt

    nützt aber in diesem Fall nix, da es ja im wrapper mit drin ist
    es wird dann zwar bei kleinerer Auflösung nicht angezeigt, aber trotzdem durch das wrapper kein Platzgewinn.

    Solltest dir also überlegen was dir und deinen Besuchern wichtig ist, viel Werbung oder der Inhalt deiner Seite.

    Kannst ja auch die beiden Werbediv's nur rechts einblenden

    Einmal editiert, zuletzt von Tutrix (1. Dezember 2010 um 20:37)

  • Ach so. Dann nimmt aber wahrscheinlich zumindest das untere Banner kaum jemand wahr. Und die Sidebar ist schon so voll. :roll:

    Vielen Dank für deine tolle Hilfe und ein wunderschönes Wochenende. :grin:

  • Noch einmal zu den Rändern, nur um sicherzugehen, dass du mich richtig verstanden hast.

    Wenn man das Browserfenster verkleinert und den Cursor an den rechten Rand des Browserfensters bewegt, bis der Doppelpfeil erscheint, dann mit der linken Maustaste klickt und das Fenster durch Ziehen verschmälert, wird nur von rechts etwas weggenommen. Macht man dasselbe am linken Rand des Browserfensters,wird ebenfalls nur von rechts etwas weggenommen, nicht von links.

    Dieses Verhalten kann man ohne Weiteres nicht beeinflussen, oder?

    Und beim "leftad-div" hat "margin-left" einen negativen Wert, damit das Banner nicht ganz so dicht am "page-div" klebt. Bei einem verkleinerten Browserfenster wird dadurch ein Teil des Banners abgeschnitten. Gibt's dafür eine Lösung?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!